/* ============================================================
   css/responsive.css — Responsive / mobile styles
   Ordered from widest to narrowest breakpoint.
   ============================================================ */

/* ─── ≥ 800px: show language labels ─────────────────────── */
@media (min-width: 800px) {
    .lang-label {
        display: inline;
    }
}

/* ─── ≤ 1350px: hero becomes single-column ──────────────── */
@media (max-width: 1350px) {
    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-text {
        padding-top: var(--sp-6);
        font-size: 25px;
    }

    /* Hero visual: aspect-ratio box so the grid stays proportional */
    .hero-visual {
        display: block;
        position: relative;
        width: 100%;
        /* 41/58 ≈ 70.7% — matching the original grid's proportions */
        padding-top: 70.7%;
        overflow: hidden;
    }

    #images-grid {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* ─── ≤ 950px: shrink contact text ──────────────────────── */
@media (max-width: 950px) {
    .contact-link span {
        font-size: var(--text-sm);
    }
}

/* ─── ≤ 800px: contact grid → single column ─────────────── */
@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-12);
    }
}

/* ─── ≤ 750px: mobile nav + about layout ────────────────── */
@media (max-width: 750px) {

    /* Show hamburger, hide desktop nav */
    .menu-btn {
        display: flex;
    }

    #nav-list {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(#142e68, #145068);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        z-index: 90;
        transition: right var(--t-slow);
    }

    /* Open state driven by data-open attribute on #main-nav */
    #main-nav[data-open="true"] #nav-list {
        right: 0;
    }

    #nav-list li {
        width: 100%;
        text-align: center;
        border-top: 1px solid var(--color-border);
        padding: clamp(1rem, 3vh, 1.5rem) 0;
    }

    #nav-list li:first-child {
        border-top: none;
    }

    #nav-list a {
        font-size: clamp(1.25rem, 4vw, 1.75rem);
    }

    #nav-list a::after {
        display: none;
    }

    /* no underline in overlay */
    /* Hamburger → X animation when menu is open.
       Lines are 2px tall with 4px gap → centres at 1, 7, 13, 19px from top.
       Group centre = 10px. Lines 1 & 4 form the X; 2 & 3 fade out. */
    #main-nav[data-open="true"] .menu-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    #main-nav[data-open="true"] .menu-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    #main-nav[data-open="true"] .menu-line:nth-child(3) {
        opacity: 0;
        transform: scaleX(0);
    }

    #main-nav[data-open="true"] .menu-line:nth-child(4) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Remove backdrop-filter on mobile: when active it creates a containing
       block for position:fixed children, breaking the full-screen overlay. */
    #main-nav.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Hero text sizing */
    .hero-text {
        padding-top: var(--sp-6);
    }

    .hero-subtitle {
        font-size: 4.5vw;
    }

    .hero-title {
        font-size: 10vw;
    }

    /* About: single column, swap image position */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-image {
        display: none;
    }

    .about-header {
        justify-content: space-between;
    }

    .about-header-img {
        display: block;
    }

    .tabs {
        gap: var(--sp-4);
    }

    .tab-btn {
        font-size: var(--text-base);
        margin-right: var(--sp-4);
    }

    /* Back-to-top: always white on mobile */
    .back-to-top {
        color: #fff;
    }

    .back-to-top:hover {
        transform: none;
        color: #fff;
    }
}

/* ─── ≤ 600px: hero grid contained in aspect-ratio box ──── */
@media (max-width: 600px) {
    /* Already handled by the 1350px breakpoint above — no change needed */
    .hero-visual {
        padding-top: 80%;
    }
}

/* ─── ≤ 450px: project cards full-width ─────────────────── */
@media (max-width: 450px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        aspect-ratio: unset;
        min-height: 260px;
    }

    /* On small screens, always show the project overlay */
    .project-overlay {
        opacity: 1;
        justify-content: flex-end;
        padding-bottom: var(--sp-4);
        background: linear-gradient(to top, rgba(20, 46, 104, 0.97) 60%, transparent);
    }
}