/* ==========================================================================
   ESİN UĞUR — RESPONSIVE STYLESHEET
   Breakpoints: 1920px, 1440px, 1024px, 768px, 480px, 390px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop Extra-Large (1440px - 1920px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    :root {
        --site-gutter: 4rem;
    }
}

/* --------------------------------------------------------------------------
   Laptops & Tablets Landscape (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-header {
        height: 70px;
    }

    .desktop-nav .nav-links {
        gap: 2rem;
    }

    /* Asymmetric Grid Adjustments */
    .works-editorial-grid {
        gap: 2.5rem 1.5rem;
    }

    .work-card.card-spotlight {
        grid-column: span 12;
    }

    .work-card.card-vertical {
        grid-column: span 6;
    }

    .work-card.card-portrait {
        grid-column: span 6;
    }

    .work-card.card-landscape {
        grid-column: span 12;
    }

    /* About Teaser */
    .about-teaser-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-teaser-aside {
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 2rem;
    }

    .artist-quick-facts {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

    /* Contact Teaser */
    .contact-teaser-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    /* Footer */
    .footer-top-row {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .footer-brand-title {
        grid-column: span 2;
    }
}

/* --------------------------------------------------------------------------
   Tablets Portrait & Large Mobile (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --header-height: 65px;
        --site-gutter: 1.5rem;
    }

    /* Hide desktop nav, show hamburger */
    .desktop-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    /* Hero Section */
    .hero-section {
        min-height: 90vh;
        padding-top: calc(var(--header-height) + 1.5rem);
        padding-bottom: 2rem;
    }

    .hero-title-group {
        margin-bottom: 2.5rem;
    }

    .hero-footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .hero-col-center {
        order: -1;
    }

    .edition-year {
        display: none;
    }

    /* Section Header */
    .section-header-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Works Grid on Tablet/Mobile */
    .works-editorial-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .work-card.card-spotlight,
    .work-card.card-vertical,
    .work-card.card-portrait,
    .work-card.card-landscape,
    .work-card.card-tall,
    .work-card.card-standard {
        grid-column: span 1;
    }

    .aspect-cinema,
    .aspect-poster {
        aspect-ratio: 1 / 1.45;
    }

    /* Standalone & Project Detail Pages */
    .about-detail-grid,
    .contact-grid,
    .project-meta-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .project-nav-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .project-nav-center {
        order: -1;
    }

    .project-nav-card.next-card {
        text-align: left;
    }

    /* Footer */
    .footer-top-row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand-title {
        grid-column: span 1;
    }

    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   Small Mobile Devices (max-width: 480px & 390px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --site-gutter: 1.25rem;
    }

    .brand-title {
        font-size: 1rem;
    }

    .brand-subtitle {
        font-size: 0.5625rem;
        letter-spacing: 0.22em;
    }

    .hero-meta-top {
        flex-wrap: wrap;
        font-size: 0.6875rem;
        letter-spacing: 0.18em;
    }

    .hero-main-title {
        font-size: clamp(2.4rem, 12vw, 3.8rem);
        line-height: 0.95;
        word-break: break-word;
        hyphens: none;
    }

    .hero-subtitle {
        font-size: 1.05rem;
        letter-spacing: 0.12em;
    }

    .hero-discipline {
        font-size: 0.65rem;
        letter-spacing: 0.15em;
    }

    .client-statement {
        font-size: 0.6875rem;
    }

    .editorial-cta-btn,
    .editorial-primary-btn {
        width: 100%;
        justify-content: center;
        padding: 1.1rem 1.5rem;
        font-size: 0.75rem;
        text-align: center;
    }

    .aspect-cinema,
    .aspect-poster {
        aspect-ratio: 1 / 1.45;
    }

    .project-main-title {
        font-size: clamp(2rem, 11vw, 3.2rem);
        word-break: break-word;
    }

    .project-spec-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .spec-group.spec-highlight {
        grid-column: span 1;
    }

    .work-title {
        font-size: 1.2rem;
    }

    .work-category {
        font-size: 0.6875rem;
    }

    .artist-quick-facts {
        flex-direction: column;
        gap: 1.25rem;
    }

    .contact-teaser-box {
        padding: 2rem 1.5rem;
    }

    .contact-direct-card {
        padding: 2rem 1.5rem;
    }

    .direct-email-placeholder {
        font-size: clamp(1.1rem, 5vw, 1.6rem);
    }
}

@media (max-width: 390px) {
    .hero-main-title {
        font-size: 2.25rem;
    }

    .project-main-title {
        font-size: 2.1rem;
    }

    .direct-email-link,
    .direct-email-placeholder {
        font-size: 1.15rem;
    }
}