/* ============================= */
/* Projects Mobile               */
/* ============================= */

@media (max-width: 1024px) {
    .projects-tabs {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
        box-sizing: border-box;

        justify-content: flex-start;
        gap: 0;
    }

    .project-tab {
        flex: 1 1 0;
        min-width: 0;

        padding: 14px 6px;
        font-size: 15px;
        text-align: center;
        white-space: normal;
    }

    .project-tab.active {
        padding: 14px 6px;
        border-radius: 16px 16px 0 0;
    }

    .projects-content {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
    }

    .project-panel.active {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;

        min-height: auto;
        padding: 32px 24px;
    }

    .project-preview {
        display: contents;
    }

    .project-technologies {
        order: 1;
        gap: 8px;
    }

    .project-tech-icons {
        gap: 14px;
    }

    .project-tech-icon {
        width: 32px;
        height: 32px;
    }

    .project-image-wrapper {
        order: 2;

        border-radius: 16px;
        aspect-ratio: 16 / 9;
    }

    .project-info {
        order: 3;
        gap: 32px;
    }

    .project-text-block {
        padding-left: 40px;
    }

    .project-text-block h3 {
        font-size: 20px;
    }

    .project-text-block p {
        font-size: 16px;
        line-height: 130%;
    }

    .project-text-block::before {
        width: 24px;
        height: 24px;
    }

    .project-headline-row {
        flex-direction: column;
        gap: 4px;
    }

    .project-headline-row span {
        font-size: 14px;
        white-space: normal;
    }

    .project-actions {
        order: 4;

        width: 100%;
        gap: 16px;
    }

    .project-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 16px;
        font-size: 16px;
    }

    .projects-tabs:has(.project-tab:first-child.active)+.projects-content {
        border-radius: 0 16px 16px 16px;
    }

    .projects-tabs:has(.project-tab:last-child.active)+.projects-content {
        border-radius: 16px 0 16px 16px;
    }

    .projects-tabs:has(.project-tab:not(:first-child):not(:last-child).active)+.projects-content {
        border-radius: 16px;
    }
}


/* ============================= */
/* Projects Tablet Refinement    */
/* ============================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .projects-tabs,
    .projects-content {
        width: 100%;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .project-panel.active {
        padding: 40px 48px;
        gap: 48px;
    }

    .project-image-wrapper {
        max-width: 560px;
        margin: 0 auto;
    }

    .project-info {
        max-width: 640px;
        margin: 0 auto;
    }

    .project-actions {
        max-width: 560px;
        margin: 0 auto;
    }

    .project-btn {
        padding: 12px 28px;
        font-size: 18px;
    }

    .project-text-block h3 {
        font-size: 24px;
    }

    .project-text-block p {
        font-size: 18px;
        line-height: 130%;
    }

    .project-headline-row span {
        font-size: 16px;
    }
}

/* ============================= */
/* Projects Small Desktop        */
/* ============================= */

@media (min-width: 1025px) and (max-width: 1199px) {
    .project-preview {
        align-self: center;
    }

    .projects-tabs {
        gap: 24px;
    }

    .project-tab {
        padding: 20px 24px;
        font-size: 24px;
    }

    .project-tab.active {
        padding: 20px 24px;
    }
}