/* ═══════════════════════════════════════════════════════════════
   Friends Cafe YYC — Responsive Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet: 1024px ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fc-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fc-home-map__wrapper {
        grid-template-columns: 1fr;
    }

    .fc-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .fc-hero__slide-title {
        font-size: 2.2rem;
    }
}

/* ── Mobile: 768px ───────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --fc-header-height: 112px;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* Skip the fixed-attachment composite layer on mobile —
       it's the dominant scroll-jank cause on iOS Safari, and
       most mobile browsers ignore `fixed` here anyway. */
    body {
        background-attachment: scroll, scroll, scroll, scroll;
    }

    /* Header */
    .fc-header::after {
        --fc-scallop-w: 40px;
        --fc-scallop-h: 14px;
    }

    .fc-header__nav {
        transform: translateY(5.5px);
    }

    .fc-header__logo {
        width: 168px;
        height: 94px;
        transform: scale(1.191);
        transform-origin: top center;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }

    .fc-header__logo a,
    .fc-header__logo img,
    .fc-header__logo-img {
        height: 72px;
    }

    .fc-header__nav {
        display: none;
    }

    .fc-header__social {
        display: none;
    }

    /* Tap target ≥ 44×44 (WCAG 2.5.5). */
    .fc-header__hamburger {
        display: flex;
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
        grid-column: 3;
        justify-self: end;
        margin-right: 8px;
    }

    /* Match the logo container's cream color so the bars stand out
       against the dark teal navbar (was var(--fc-brown), invisible on dark). */
    .fc-header__hamburger span {
        background: #ebe2d1;
    }

    /* Hero */
    .fc-hero {
        height: 400px;
    }

    .fc-hero__slide-title {
        font-size: 1.8rem;
    }

    .fc-hero__slide-text {
        font-size: 1rem;
    }

    /* Sections */
    .fc-section {
        padding: 50px 0;
    }

    .fc-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .fc-split--reverse .fc-split__image {
        order: 0;
    }

    /* Welcome */
    .fc-welcome {
        padding: 50px 20px;
    }

    .fc-welcome__title {
        font-size: 1.8rem;
    }

    /* Features */
    .fc-features__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .fc-feature {
        padding: 24px 16px;
    }

    /* Menu */
    .fc-menu-grid-sizer,
    .fc-menu-grid-item {
        width: 100%;
    }

    .fc-menu-tabs {
        gap: 6px;
    }

    .fc-menu-tab {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    /* Footer */
    .fc-footer__grid {
        grid-template-columns: 1fr;
    }

    .fc-footer {
        padding-bottom: 80px; /* space for sticky footer */
    }

    /* Sticky Footer */
    .fc-sticky-footer {
        display: flex;
    }

    /* Locations */
    .fc-locations__grid {
        grid-template-columns: 1fr;
    }

    /* Events */
    .fc-events__grid {
        grid-template-columns: 1fr;
    }

    /* About panels */
    .fc-about-panels .fc-split {
        gap: 20px;
    }
}

/* ── Small Mobile: 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .fc-hero {
        height: 320px;
    }

    .fc-hero__slide-title {
        font-size: 1.4rem;
    }

    .fc-features__grid {
        grid-template-columns: 1fr;
    }

    .fc-menu-category {
        padding: 20px;
    }

    .fc-review {
        padding: 20px;
    }

    .fc-btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }

    .fc-welcome__title {
        font-size: 1.5rem;
    }
}