/* ==========================================================================
   RESPONSIVE.CSS
   Moved from style.css to preserve strict separation of concerns.
   Contains ALL @media queries from the main stylesheet.
   
   Breakpoints used:
   - 1440px, 1400px, 1200px, 1100px, 1024px, 900px, 782px, 600px, 520px, 448px, 425px
   - prefers-reduced-motion
   ========================================================================== */


/* ========================================================================
   MIN-WIDTH (DESKTOP ENHANCEMENTS)
   ======================================================================== */

/* Large Desktop (1440px) */
@media (min-width: 1440px) {
    .cl-menu-items {
        gap: 40px 64px;
    }

    .cl-menu-item-row {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 26px;
        padding: 20px 0;
    }

    .cl-menu-thumb {
        width: 200px;
        height: 155px;
    }

    .cl-menu-name {
        font-size: 24px;
    }

    .cl-menu-price {
        font-size: 26px;
    }

    .cl-menu-desc {
        font-size: 16px;
    }
}

/* Premium Desktop (1400px+) */
@media (min-width: 1400px) {
    .cl-container {
        max-width: 1320px;
    }

    .cl-hero-inner {
        grid-template-columns: 1.2fr 1fr;
        gap: 3.5rem;
    }

    /* ============================================================
   ABOUT PAGE — Fluid scaling (stable across Windows 125/150/175%)
   ============================================================ */
    .cl-about .cl-about-hero-title {
        font-size: clamp(34px, 3.6vw, 58px);
        line-height: 1.1;
    }

    .cl-about .cl-section-title {
        font-size: clamp(28px, 2.8vw, 44px);
        line-height: 1.12;
    }

    .cl-about .cl-about-hero-subtitle,
    .cl-about .cl-section-intro,
    .cl-about .cl-section-note {
        font-size: clamp(14px, 1.1vw, 16px);
        line-height: 1.65;
    }

}

/* Large desktops (1200px) */
@media (min-width: 1200px) {
    .cl-cta-title {
        font-size: 56px;
    }
}

/* Ultra Wide (2560px) */
@media (min-width: 2560px) {
    .cl-menu-card {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding: 26px;
    }

    .cl-menu-items {
        gap: 48px 84px;
    }

    .cl-menu-item-row {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 30px;
        padding: 22px 0;
    }

    .cl-menu-thumb {
        width: 220px;
        height: 170px;
    }

    .cl-menu-name {
        font-size: 26px;
    }

    .cl-menu-price {
        font-size: 28px;
    }

    .cl-menu-desc {
        max-width: 70ch;
    }
}


/* ========================================================================
   MAX-WIDTH (RESPONSIVE)
   Order: largest → smallest so smaller screens win.
   ======================================================================== */

/* About Section Gap (1400px) */
@media (max-width: 1400px) {
    .cl-about-section-inner {
        gap: 34px;
    }

    .cl-hero {
        padding: 80px 0 110px;
    }

    .cl-panel {
        padding: 64px 0 100px;
    }

    .cl-info-icons {
        padding: 96px 0;
    }

    /* ============================================================
       ABOUT PAGE — Large laptop tuning (<=1400px)
       Keep desktop layout, but slightly reduce scale so it doesn’t feel “too big”.
       ============================================================ */
    .cl-about .cl-about-hero {
        padding: 68px 0;
    }

    .cl-about .cl-about-hero-title {
        font-size: clamp(46px, 4.1vw, 60px);
        line-height: 1.1;
        letter-spacing: 0.07em;
    }

    .cl-about .cl-about-hero-subtitle {
        max-width: 58ch;
    }
}

/* About Section Gap + Slider (1200px) */
@media (max-width: 1200px) {
    .cl-about-section-inner {
        gap: 30px;
    }

    .pc-overlay-slider {
        width: 102%;
        margin-top: 14px;
    }

    /* Category Cards (1200px) */
    .cl-category-grid .cl-category-card {
        flex-basis: calc((100% - (18px * 2)) / 3);
        max-width: calc((100% - (18px * 2)) / 3);
    }

    /* Crepes Grid (1200px) — 4 columns → 3 columns */
    .cl-crepes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ============================================================
       ABOUT PAGE — Start scaling down at <=1200px
       This prevents “desktop big” feeling on 1024/tablet.
       ============================================================ */
    .cl-about .cl-about-hero {
        padding: 64px 0;
    }

    .cl-about .cl-about-hero-inner {
        gap: 28px;
    }

    .cl-about .cl-kicker {
        font-size: 13px;
        letter-spacing: 0.14em;
    }

    .cl-about .cl-about-hero-title {
        font-size: clamp(40px, 4.5vw, 54px);
        line-height: 1.12;
        letter-spacing: 0.07em;
    }

    .cl-about .cl-about-hero-subtitle {
        font-size: 16px;
        line-height: 1.65;
        max-width: 56ch;
    }

    .cl-about .cl-about-section {
        padding: 72px 0;
    }

    .cl-about .cl-section-title {
        font-size: clamp(34px, 3.4vw, 44px);
        line-height: 1.12;
    }

    .cl-about .cl-section-intro,
    .cl-about .cl-section-note {
        font-size: 16px;
        line-height: 1.65;
        max-width: 72ch;
    }
}

/* Responsive Patch (1200px) */
@media (max-width: 1200px) {

    /* Container provides centering on wide screens, never causes squeezing.
       Content has room to breathe at this width. */
    .cl-container {
        max-width: 1100px;
    }


    /* Header */
    .cl-header-inner {
        gap: 22px;
    }

    .cl-logo {
        margin-left: 0;
    }

    .cl-logo-img {
        max-height: 58px;
    }

    /* Hero */
    .cl-hero-inner {
        gap: 34px;
    }

    .cl-hero-text h1 {
        font-size: 44px;
    }

    /* Carousel */
    .slider {
        max-width: 380px;
        height: 260px;
    }

    .slider__image {
        width: 74%;
    }

    /* Panel spacing */
    .cl-panel-inner {
        gap: 32px;
    }

    .cl-panel-left {
        padding-right: 22px;
    }

    /* Small refinements */
    .cl-info-icons-grid {
        gap: 36px;
    }
}

/* Menu Items (1100px) */
@media (max-width: 1100px) {
    .cl-menu-items {
        gap: 26px 28px;
    }

    .cl-menu-item-row {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .cl-menu-thumb {
        width: 160px;
        height: 130px;
    }

    .cl-menu-name {
        font-size: 20px;
    }

    .cl-menu-price {
        font-size: 22px;
    }

    /* Info Icons Grid (1100px) — 3 columns → 2 columns */
    .cl-info-icons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets (1024px) */
@media (max-width: 1024px) {
    .cl-cta-title {
        font-size: 56px;
    }
}

/* Responsive Patch (1024px) */
@media (max-width: 1024px) {

    /* Container provides centering on tablet landscape.
       At this width, 2-column layouts (hero, panel) still have room.
       900px breakpoint will stack them when space becomes insufficient. */
    .cl-container {
        max-width: 960px;
        padding: 0 20px;
    }


    /* Hero layout stays 2 columns until your 900px rule stacks it */
    .cl-hero-inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 28px;
    }

    .cl-hero-text p.subtitle {
        max-width: 44ch;
    }

    /* Carousel */
    .slider {
        max-width: 360px;
        height: 250px;
    }

    .slider__image {
        width: 78%;
        border-radius: 18px;
    }

    /* Panel */
    .cl-panel-inner {
        grid-template-columns: 1fr 1.2fr;
        gap: 28px;
    }

    /* Footer */
    .cl-footer-inner {
        gap: 28px;
    }

    /* CTA Title (you already set 56px here; this makes it truly "tablet" sized) */
    .cl-cta-title {
        font-size: 48px;
    }

    /* Hero H1 sizing for tablet landscape */
    .cl-hero-text h1 {
        font-size: 38px;
    }

    /* ============================================================
       ABOUT PAGE — Tablet / 1024 laptop scaling (<=1024px)
       Goal: match the “smaller / tighter” look you want on tablet + 1024 laptops.
       Fully scoped to .cl-about so nothing else changes.
       ============================================================ */

    .cl-about .cl-about-hero {
        padding: 56px 0;
    }

    .cl-about .cl-about-hero-inner {
        gap: 24px;
    }

    .cl-about .cl-kicker {
        font-size: 12px;
        letter-spacing: 0.13em;
    }

    .cl-about .cl-about-hero-title {
        font-size: clamp(34px, 4.1vw, 46px);
        line-height: 1.1;
        letter-spacing: 0.06em;
    }

    .cl-about .cl-about-hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
        max-width: 52ch;
    }

    .cl-about .cl-about-hero-cta {
        gap: 12px;
    }

    .cl-about .cl-about-section {
        padding: 56px 0;
    }

    .cl-about .cl-about-section-inner {
        gap: 22px;
    }

    .cl-about .cl-section-title {
        font-size: clamp(28px, 3.1vw, 38px);
        line-height: 1.12;
        letter-spacing: 0.06em;
        margin-bottom: 12px;
    }

    .cl-about .cl-section-intro,
    .cl-about .cl-section-note {
        font-size: 15px;
        line-height: 1.6;
        max-width: 68ch;
    }

    /* Keep framed images from dominating on 1024 */
    .cl-about .cl-about-story-image,
    .cl-about .cl-about-wagons-image,
    .cl-about .cl-about-hero-image {
        width: min(420px, 100%);
    }
}

/* Admin Bar (782px) */
@media (max-width: 782px) {
    .admin-bar .cl-header {
        top: 46px;
    }
}

/* ========================================================================
   DESKTOP: Show normal nav, hide radial menu
   ======================================================================== */
@media (min-width: 901px) {
    .pc-radial-menu {
        display: none !important;
    }

    .cl-nav {
        display: flex !important;
    }
}





/* ========================================================================
   TABLET PORTRAIT (900px and below)
   Primary mobile/tablet breakpoint — all major layout stacking
   ======================================================================== */
@media (max-width: 900px) {

    /* ============================================================
       INFO ICONS
       NO-SHRINK RULE: Info icons grid stacks to single column at 900px.
       Desktop 3-column layout would compress icons horizontally.
       Vertical stacking ensures each icon has full width.
       ============================================================ */
    .cl-info-icons {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    .cl-info-icons-grid {
        grid-template-columns: 1fr;
        /* Single column — icons stack vertically */
        gap: var(--space-xl);
    }


    /* ============================================================
       HEADER & NAVIGATION
       ============================================================ */
    .cl-header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        gap: 12px;
    }

    .cl-hamburger {
        display: none !important;
    }






    .cl-logo {
        order: 2 !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .cl-logo img {
        max-height: 52px;
    }

    .cl-header-cta {
        order: 3 !important;
    }

    .cl-header-cta a {
        width: 42px;
        height: 42px;
        border: none;
    }

    /* ============================================================
       HERO SECTION
       NO-SHRINK RULE: Hero grid stacks vertically at 900px and below.
       Desktop 2-column layout (text + slider) would compress at tablet sizes.
       Vertical stacking prevents horizontal squeezing.
       ============================================================ */
    /* Stack sections */
    .cl-hero-inner {
        grid-template-columns: 1fr;
        /* Single column — text above, slider below */
        row-gap: 24px;
        align-items: center;
        justify-content: center;
    }

    /* NO-SHRINK RULE: Panel grid stacks vertically at 900px and below.
       Desktop 2-column layout (sidebar + content) would make sidebar too narrow.
       Vertical stacking ensures both sections have full width. */
    .cl-panel-inner {
        grid-template-columns: 1fr;
        /* Single column — sidebar above, content below */
    }

    .cl-panel-left {
        border-right: none;
        /* Remove desktop border when stacked */
        padding-right: 0;
        border-bottom: 1px solid var(--neutral-silver-light);
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .cl-footer-inner {
        grid-template-columns: 1fr;
        /* Footer stacks vertically on tablet/mobile */
    }


    /* Hero text center */
    .cl-hero-text {
        text-align: center;
        align-items: center;
    }

    .cl-hero-text p.subtitle {
        max-width: 32rem;
        margin-left: auto;
        margin-right: auto;
    }

    .cl-hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin-top: 12px;
        gap: 12px;
    }

    .cl-hero-buttons .cl-btn-primary,
    .cl-hero-buttons .cl-btn-outline,
    .cl-hero-buttons a {
        width: 100%;
        justify-content: center;
    }

    /* Carousel tighter on mobile */
    .cl-hero-image-placeholder,
    .cl-hero-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }

    .slider {
        max-width: 320px;
        height: 220px;
    }

    .slider__image {
        width: 80%;
        border-radius: 18px;
    }

    .slider__image.image--1 {
        transform: translate(-50%, -50%) translateZ(150px);
    }

    .slider__image.image--2 {
        transform: translate(-50%, -50%) translateX(95px) rotateY(-35deg);
    }

    .slider__image.image--3 {
        transform: translate(-50%, -50%) translateX(140px) rotateY(-50deg);
    }

    .slider__image.image--4 {
        transform: translate(-50%, -50%) translateX(-95px) rotateY(35deg);
    }

    .slider__image.image--5 {
        transform: translate(-50%, -50%) translateX(-140px) rotateY(50deg);
    }

    /* ============================================================
       CONTACT PAGE
       ============================================================ */
    .cl-contact-inner {
        flex-direction: column;
    }

    .cl-contact-form {
        max-width: none;
    }

    /* ============================================================
       ABOUT PAGE
       NO-SHRINK RULE: About hero and section grids stack vertically.
       Desktop 2-column layouts (text + image) would compress text columns.
       Vertical stacking ensures readable line lengths.
       ============================================================ */
    .cl-about-hero-inner {
        grid-template-columns: 1fr;
        /* Single column — text above, image below */
        text-align: center;
    }

    .cl-about-hero-subtitle {
        max-width: 100%;
        /* Allow full width for readability */
        margin-left: auto;
        margin-right: auto;
    }

    .cl-about-hero-cta {
        justify-content: center;
    }

    .cl-about-section-inner {
        grid-template-columns: 1fr;
        /* Single column — prevents text/image compression */
    }

    .cl-about-story-image,
    .cl-about-wagons-image {
        order: -1;
        /* Image appears above text when stacked */
    }

    /* NO-SHRINK RULE: Crepes grid reduces to 2 columns at 900px.
       4 columns would compress cards below readable size. */
    .cl-crepes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 2 columns maintain minimum card width ~300px */
    }

    /* Center the image wrappers when they jump above text */
    .cl-about-story-image,
    .cl-about-wagons-image {
        justify-self: center;
        /* centers inside the grid */
        width: min(420px, 100%);
        /* keeps the intended framed-photo look */
        margin: 0 auto 18px;
        /* centers as a block + spacing */
    }

    /* Make sure the actual frame container spans nicely */
    .cl-framed-photo {
        width: 100%;
    }

    /* IMPORTANT: your frame pseudo element needs a stable origin on mobile */
    .cl-framed-photo::before {
        transform-origin: 50% 50%;
    }

    /* ============================================================
       CATEGORY CARDS
       NO-SHRINK RULE: Category cards reduce to 2 per row at 900px.
       4 cards would compress to ~200px width (unreadable).
       ============================================================ */
    .cl-category-grid .cl-category-card {
        flex-basis: calc((100% - 18px) / 2);
        max-width: calc((100% - 18px) / 2);
        /* 2 cards per row maintain ~350px width each */
    }

    /* ============================================================
       STORY SECTION
       NO-SHRINK RULE: Story grid stacks vertically at 900px.
       Desktop 2-column layout (image + text) would compress text.
       ============================================================ */
    .cl-story-inner {
        grid-template-columns: 1fr;
        /* Single column — image above, text below */
    }

    .cl-story-visual {
        margin: 0 auto;
        max-width: 420px;
    }

    .cl-story-content p {
        max-width: 100%;
        /* Allow full width for readable line length */
    }









    /* ============================================================
       MENU SYSTEM
       ============================================================ */
    .cl-menu-tabs {
        justify-content: center;
        /* match desktop */
        flex-wrap: wrap;
        /* ✅ wrap down */
        overflow: visible;
        /* ✅ no scroll */
        white-space: normal;
        /* ✅ allow wrapping */

        padding: 0;
        /* ✅ remove capsule */
        border-radius: 0;

        background: transparent;
        /* ✅ remove white background */
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }



    .cl-menu-tab {
        min-width: 0;
        width: auto;
        flex: 0 0 auto;
        padding: var(--space-lg) var(--space-md);

        border-radius: var(--radius-lg);
        border: 2px solid rgba(217, 83, 30, 0.25);

        font-size: var(--text-base);
        letter-spacing: 0.08em;
        text-transform: none;
        transform: scale(1);
    }

    .cl-menu-tab.is-active {
        transform: none;
        border-color: rgba(217, 83, 30, 0.55);
        box-shadow: 0 14px 30px rgba(60, 47, 39, 0.16);
    }

    .cl-menu-items {
        grid-template-columns: 1fr;
    }

    /* 1 per row on mobile/tablet */

    .cl-menu-line::after {
        right: clamp(24px, 10vw, 72px) !important;
    }

    /* ============================================================
       HOURS & TEASER
       NO-SHRINK RULE: Hours/teaser grid stacks vertically at 900px.
       Desktop 2-column split background would compress content.
       Vertical stacking with full-width backgrounds ensures readability.
       ============================================================ */
    /* stop the 50/50 split background on stacked layout */
    .cl-hours-teaser::before {
        display: none;
    }

    .cl-hours-teaser-inner {
        grid-template-columns: 1fr;
        /* Single column — hours above, teaser below */
        gap: 34px;
        padding: 52px 0;
    }

    .cl-hours-time {
        justify-self: center;
    }

    /* Opening hours keeps the LEFT color */
    .cl-hours-left {
        background: rgba(243, 222, 201, 0.95) !important;
        padding: 32px !important;
    }

    /* Süß oder Herzhaft keeps the RIGHT color */
    .cl-hours-right {
        background: var(--support-pale-cream) !important;
        padding: 32px !important;
    }

    /* remove left/right gutters ONLY for this section */
    .cl-hours-teaser .cl-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* make Öffnungszeiten span full container width */
    .cl-hours-left {
        width: 100%;
    }

}

/* End 900px */


/* ========================================================================
   MOBILE LAYOUT (600px and below)
   Single consolidated breakpoint for all mobile devices (320px - 600px)
   Uses fluid sizing (clamp, %, vw) to work across entire mobile range
   ======================================================================== */
@media (max-width: 600px) {

    /* ============================================================
       CONTAINERS — Full-width on mobile
       NO-SHRINK RULE: Container must NEVER cause horizontal squeezing.
       Content flows vertically when space is insufficient.
       ============================================================ */
    .cl-container {
        max-width: none;
        /* Force full-width on mobile — no horizontal constraints */
        padding: 0 clamp(16px, 5vw, 20px);
        /* Safe padding only, content can expand freely */
    }


    /* ============================================================
       NAVIGATION
       ============================================================ */
    .cl-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ============================================================
       HEADER
       ============================================================ */
    .cl-logo img {
        max-height: 48px;

    }

    /* HEADER MOBILE BEHAVIOR */
    .cl-hamburger {
        display: block;
        /* Show hamburger on mobile */
    }

    .cl-nav {
        display: none;
        /* Hide desktop navigation */
    }

    .cl-header-cta {
        display: flex;
        /* Hide contact icon to save space */

    }


    /* ============================================================
       HERO SECTION — Vertical stacking, fluid sizing
       ============================================================ */
    .cl-hero {
        padding: clamp(32px, 6vw, 48px) 0 clamp(48px, 10vw, 64px);
    }

    .cl-hero .cl-container {
        display: flex;
        flex-direction: column;
    }

    /* NEUTRALIZE DESKTOP GRID */
    .cl-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        grid-template-columns: unset;
        /* Neutralize desktop 1.15fr 1fr grid */
    }

    .cl-hero-content,
    .cl-hero-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cl-hero-text {
        order: 1;
        width: 100%;
    }

    .cl-hero-text h1 {
        font-size: clamp(20px, 6vw, 28px);
        /* Lower max from 32px */
        letter-spacing: 0.04em;
        /* Tighter for mobile readability */
        line-height: 1.15;
        /* Tighter line-height */
        max-width: none;
        /* Remove desktop 18ch constraint */
    }

    .cl-hero-text p.subtitle {
        font-size: clamp(14px, 4vw, 16px);
        letter-spacing: 0.01em;
        /* Minimal spacing */
        line-height: 1.45;
        /* Comfortable reading */
        max-width: none;
        /* Remove desktop 380px constraint */
    }


    .cl-hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ============================================================
       SLIDER — Fluid dimensions, prevent overflow
       ============================================================ */
    .slider {
        order: 2;
        width: 100%;
        max-width: clamp(240px, 70vw, 320px);
        /* More fluid scaling */
        height: clamp(140px, 30vw, 180px);
        /* Proportional height */
        margin: 0 auto 20px;
    }


    .slider__image {
        width: clamp(88%, 2vw, 92%);
        border-radius: 14px;
        /* Slightly reduced from desktop 18px */
        box-shadow: 0 2px 8px rgba(60, 47, 39, 0.08);
        /* Lighter shadow for mobile */
    }

    /* ============================================================
       ABOUT HERO — Fluid typography and spacing
       ============================================================ */
    .cl-about-hero {
        padding: clamp(36px, 7vw, 44px) 0 clamp(36px, 6.5vw, 42px);
    }

    /* NEUTRALIZE DESKTOP GRID */
    .cl-about-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(20px, 5vw, 32px);
        grid-template-columns: unset;
        /* Neutralize desktop 1.1fr 1fr grid */
    }

    .cl-about-hero-title {
        font-size: clamp(24px, 5.2vw, 28px);
        line-height: 1.3;
        letter-spacing: 0.04em;
        /* Reduced from desktop 0.08em */
        max-width: none;
        /* Remove desktop constraints */
    }

    .cl-about-hero-subtitle {
        max-width: none;
        /* Remove desktop 420px constraint */
        line-height: 1.5;
        /* Tighter than desktop 1.7 */
    }

    .cl-about-section {
        padding: clamp(40px, 8vw, 60px) 0;
    }

    /* NEUTRALIZE DESKTOP GRID */
    .cl-about-section-inner {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 6vw, 40px);
        grid-template-columns: unset;
        /* Neutralize desktop 1.1fr 1fr grid */
    }

    .cl-about-image,
    .cl-about-hero-image {
        border-radius: 12px;
        /* Slightly reduced from desktop 16px */
        box-shadow: 0 2px 8px rgba(60, 47, 39, 0.08);
        /* Lighter shadow for mobile */
    }

    .cl-about-closing-text p {
        padding: 0 clamp(12px, 3vw, 20px);
    }

    /* ============================================================
       GRIDS — Stack to single column
       ============================================================ */
    .cl-menu-grid,
    .cl-crepes-grid {
        grid-template-columns: 1fr;
    }

    .cl-category-grid .cl-category-card {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* ============================================================
       SECTION TITLES & GENERAL TYPOGRAPHY — Mobile caps
       ============================================================ */
    .cl-section-title {
        font-size: clamp(22px, 5vw, 28px);
        letter-spacing: 0.08em;
        /* Maintain uppercase spacing but cap size */
        line-height: 1.25;
        max-width: none;
        /* Remove desktop constraints */
    }

    .cl-section-intro,
    .cl-section-note {
        font-size: clamp(14px, 3.5vw, 16px);
        line-height: 1.5;
        /* Tighter than desktop 1.65 */
        max-width: none;
        /* Remove desktop 640px constraint */
    }

    .cl-kicker {
        letter-spacing: 0.12em;
        /* Maintain for uppercase labels */
        line-height: 1.2;
    }

    /* ============================================================
       PANEL & INFO SECTIONS — Mobile stacking
       ============================================================ */
    .cl-panel {
        padding: clamp(40px, 8vw, 64px) 0 clamp(60px, 12vw, 80px);
    }

    .cl-panel-inner {
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 6vw, 32px);
        grid-template-columns: unset;
        /* Neutralize desktop 0.9fr 1.4fr grid */
    }

    .cl-panel-left {
        padding-right: 0;
        /* Remove desktop right padding */
        border-right: none;
        /* Remove desktop border */
    }

    .cl-info-icons {
        padding: clamp(40px, 8vw, 64px) 0;
    }

    .cl-info-icons-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(32px, 8vw, 48px);
        grid-template-columns: unset;
        /* Neutralize desktop 3-column grid */
    }


    /* ============================================================
       STORY
       ============================================================ */
    .cl-story-visual {
        max-width: clamp(280px, 85vw, 340px);
    }

    .cl-story-image-wrap::before {
        transform: rotate(-4deg) translate(10px, 10px);
    }

    /* ============================================================
       OVERLAY SLIDER
       ============================================================ */
    .pc-overlay-slider {
        width: 100%;
        max-width: clamp(300px, 75vw, 380px);
        margin: 0 auto;
        border-radius: 18px;
    }

    .pc-overlay-slider__btn {
        width: clamp(38px, 10vw, 44px);
        height: clamp(38px, 10vw, 44px);
    }

    /* ============================================================
       MENU ITEMS — Fluid grid and typography
       ============================================================ */
    .cl-menu-item-row {
        grid-template-columns: clamp(110px, 30vw, 140px) minmax(0, 1fr);
        gap: 12px;
        padding: 8px 0;
        align-items: flex-start;
    }

    .cl-menu-thumb {
        width: clamp(110px, 30vw, 140px);
        height: clamp(86px, 24vw, 115px);
    }

    .cl-menu-name {
        font-size: clamp(16px, 4vw, 18px);
        letter-spacing: 0.01em;
        line-height: 1.3;
    }

    .cl-menu-price {
        font-size: clamp(16px, 4.5vw, 20px);
        font-weight: 600;
    }

    .cl-menu-desc {
        font-size: clamp(12px, 3vw, 13px);
        line-height: 1.5;
        max-width: 100%;
    }

    .cl-menu-line {
        padding-right: 0;
        flex-wrap: wrap;
        row-gap: 6px;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
        margin: 0;
    }

    .cl-menu-line::after {
        right: clamp(14px, 4vw, 36px);
    }

    .cl-menu-cta {
        padding: clamp(16px, 4vw, 24px) 0;
        gap: clamp(12px, 3vw, 16px);
    }

    .cl-menu-cta .cl-btn-primary,
    .cl-menu-cta .cl-btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .cl-menu-tab {
        flex: 0 0 auto;
        padding: 12px 14px;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* ============================================================
       MENU HERO (Menu page specific)
       ============================================================ */
    .cl-menu-hero {
        padding: clamp(28px, 6vw, 34px) 0 clamp(14px, 3.5vw, 18px);
    }

    .cl-menu-hero-text .cl-kicker {
        font-size: clamp(9px, 2.2vw, 10px);
        letter-spacing: 0.14em;
        margin-bottom: clamp(4px, 1.5vw, 6px);
    }

    .cl-menu-hero-text .cl-title {
        font-size: clamp(18px, 4.5vw, 22px);
        letter-spacing: 0.08em;
        line-height: 1.2;
        -webkit-line-clamp: 2;
    }

    .cl-menu-hero-text .cl-lead {
        font-size: clamp(12px, 3vw, 13px);
        line-height: 1.6;
        max-width: 100%;
    }

    .cl-menu-hero-badge {
        gap: clamp(6px, 2vw, 10px);
        justify-content: flex-start;
    }

    .cl-menu-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(12px, 3vw, 16px);
    }

    .cl-menu-hero-badge span {
        padding: clamp(4px, 1.5vw, 6px) clamp(10px, 2.5vw, 14px);
        font-size: clamp(9px, 2.2vw, 10px);
        letter-spacing: 0.1em;
    }

    /* ============================================================
       MENU CARDS
       ============================================================ */
    .cl-menu-card {
        padding: 14px;
        border-radius: 12px;
    }

    .cl-menu-card-header h2 {
        font-size: clamp(16px, 4vw, 20px);
        letter-spacing: 0.06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .cl-menu-card-header p {
        font-size: clamp(11px, 2.8vw, 12px);
    }

    .cl-menu-items {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* ============================================================
       BUTTONS — Mobile sizing
       ============================================================ */
    .cl-btn-primary,
    .cl-btn-outline {
        height: clamp(42px, 11vw, 48px);
        padding: 0 clamp(14px, 4vw, 18px);
        font-size: clamp(13px, 3.2vw, 15px);
    }

    /* ============================================================
       CTA SECTION
       ============================================================ */
    .cl-cta-title {
        font-size: clamp(22px, 5vw, 28px);
    }

    .cl-cta-actions {
        flex-direction: column;
        gap: clamp(12px, 3vw, 16px);
    }

    .cl-cta-btn {
        width: 100%;
        max-width: 100%;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .cl-footer {
        padding: clamp(24px, 6vw, 32px) 0 clamp(28px, 7vw, 36px);
    }

    .cl-footer p,
    .cl-footer a {
        font-size: clamp(12px, 3vw, 13px);
    }

    .cl-footer-bottom {
        margin-top: clamp(16px, 4vw, 20px);
    }

    .cl-social-circle {
        width: clamp(26px, 7vw, 32px);
        height: clamp(26px, 7vw, 32px);
    }
}


/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

/* Accessibility (Reduced Motion) */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}