/* ==========================================================================
   Popular Menu Items — "Gold and Cream"
   ==========================================================================

   Restyles ONE section of the home page to match the supplied reference
   ("Popular Menu Favourites in Gold and Cream.png"). Nothing else on the page
   is touched.

   Loads last on the front page, after home.css and home-light.css. Every
   selector is prefixed `body.home` so it reliably outranks home.css's bare
   single classes and ties-but-wins against home-light.css by load order — no
   !important anywhere. Scoping to `.mf-popular` throughout means this file
   physically cannot reach another section.

   The reference keeps two things the rest of the site also does — the gold
   accent on the second half of the heading, and an arrow inside the button —
   so both are kept here deliberately. They match the brief.
   ========================================================================== */

body.home .mf-popular {
    /* ---------- Gold ----------
       Two golds, because one cannot do both jobs. The bright gold is the
       reference's colour and is used for rules, the heading accent and the
       icon badges — all either decorative or large text, where 3:1 is the
       bar and it clears it on cream (~3.3:1).

       White on that same bright gold is only ~3.2:1, which fails for button
       labels, so fills that carry white text use the deeper gold (~4.6:1).
       The two sit close enough to read as one colour. */
    --pg-gold: #C08A1A;
    --pg-gold-deep: #A3711C;
    --pg-gold-dark: #8A5E14;
    --pg-gold-tint: rgba(192, 138, 26, 0.16);

    --pg-cream: #FAF7F2;
    --pg-paper: #FFFFFF;
    --pg-ink: #1A1713;
    --pg-muted: #6A625A;

    --pg-card-radius: 18px;
    --pg-gap: clamp(1rem, 1.8vw, 1.5rem);

    position: relative;
    overflow: hidden;
    background: var(--pg-cream);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* home.css paints a radial tint here; the decorative layer below replaces it. */
body.home .mf-popular::before {
    display: none;
}

/* The container has to sit above the decorations. */
body.home .mf-popular > .mf-container {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   1. DECORATIVE LAYER
   ==========================================================================

   Four cut-out photographs (leaves and spices) in the corners, plus two very
   faint mandala line drawings, exactly as the reference lays them out.

   It is one absolutely-positioned, aria-hidden div with `pointer-events:
   none`, so none of it can intercept a click or reach the accessibility tree.
   The images are <img> rather than CSS backgrounds so they can be lazy-loaded
   and carry width/height — they are the heaviest thing in the section and
   none of them is above the fold.

   Everything here is hidden below 900px: at phone widths the corners are
   where the content is, and scaled-down herbs just make the type harder to
   read.
   ========================================================================== */

body.home .pg-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

body.home .pg-decor img,
body.home .pg-decor svg {
    position: absolute;
    display: block;
}

/* ---------- Mandalas ----------
   Cream-on-cream line art, barely there. Sized large and pushed half off the
   edge so only an arc of each is visible, which is what keeps them reading as
   a watermark rather than as a graphic. */
body.home .pg-decor__mandala {
    width: clamp(320px, 34vw, 520px);
    height: auto;
    color: var(--pg-gold);
    opacity: 0.13;
}

body.home .pg-decor__mandala--tr {
    top: -14%;
    right: -8%;
}

body.home .pg-decor__mandala--bl {
    bottom: -16%;
    left: -10%;
}

/* ---------- Herbs and spices ----------
   Slightly desaturated and softened so they sit behind the cards instead of
   competing with the food photography, which is the actual subject. */
body.home .pg-decor__shot {
    height: auto;
    filter: saturate(0.92);
}

body.home .pg-decor__shot--leaf-tl {
    top: -1.5rem;
    left: -3rem;
    width: clamp(150px, 15vw, 230px);
    transform: rotate(-12deg);
}

body.home .pg-decor__shot--spice-tr {
    top: -1rem;
    right: -2rem;
    width: clamp(120px, 12vw, 185px);
}

body.home .pg-decor__shot--spice-bl {
    bottom: -2rem;
    left: -2.5rem;
    width: clamp(130px, 13vw, 200px);
}

body.home .pg-decor__shot--leaf-br {
    right: -3.5rem;
    bottom: -1rem;
    width: clamp(140px, 14vw, 215px);
    transform: rotate(160deg);
}

@media (max-width: 900px) {
    body.home .pg-decor {
        display: none;
    }
}


/* ==========================================================================
   2. HEADER
   ==========================================================================

   Centred, unlike the rest of the page — the reference is explicit about it.

   The eyebrow sits between two short gold rules. They are drawn as flex
   children rather than ::before/::after on the text, so they can be given a
   fixed length and a fade instead of stretching with the label, and so the
   gap stays even in French, where the string is longer.
   ========================================================================== */

body.home .mf-popular__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.75rem);
}

body.home .mf-popular__header .mf-subheading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--pg-gold);
    font-size: clamp(0.72rem, 0.35vw + 0.65rem, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.home .mf-popular__header .mf-subheading::before,
body.home .mf-popular__header .mf-subheading::after {
    content: '';
    width: clamp(28px, 6vw, 72px);
    height: 1px;
    background: var(--pg-gold);
    opacity: 0.55;
    flex: 0 0 auto;
}

body.home .mf-popular__title {
    font-family: var(--mf-font-display);
    font-size: clamp(2rem, 4.2vw + 0.5rem, 3.85rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--pg-ink);
    margin: 0;
}

body.home .mf-popular__title-accent {
    color: var(--pg-gold);
}

/* ---------- Ornament ----------
   A small gold flourish between two rules, under the title. Drawn in CSS from
   the same two-rules pattern as the eyebrow so the header reads as one
   system rather than two unrelated decorations. */
body.home .pg-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.9rem 0 1.1rem;
    color: var(--pg-gold);
}

body.home .pg-ornament::before,
body.home .pg-ornament::after {
    content: '';
    width: clamp(36px, 7vw, 86px);
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

body.home .pg-ornament svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

body.home .mf-popular__desc {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--pg-muted);
    font-size: clamp(0.98rem, 0.3vw + 0.9rem, 1.0625rem);
    line-height: 1.6;
}


/* ==========================================================================
   3. CARDS
   ==========================================================================

   Four across on desktop. The track stays a horizontal scroller because
   home.js drives it and there are nine dishes, not four — the reference shows
   the first four and its arrows imply exactly this.

   Card construction, which is the whole look:

     - the card itself is GOLD with a rounded corner and `overflow: hidden`;
     - the photograph sits on top of it;
     - the white body is pulled up over the bottom of the photograph and
       given a large top-LEFT radius, which is what cuts the sweeping curve
       across the image;
     - the body's bottom-RIGHT radius is also large, and because the card
       beneath is gold, that corner reads as the gold wedge.

   So both curves come from one white block over a gold card. No clip-path,
   no SVG, nothing to go wrong at a fractional pixel.
   ========================================================================== */

body.home .mf-popular__carousel-wrap {
    position: relative;
}

body.home .mf-popular__track {
    display: flex;
    gap: var(--pg-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Vertical room for the card shadow, horizontal for a focus ring. */
    padding: 6px 6px 1.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.home .mf-popular__track::-webkit-scrollbar {
    display: none;
}

body.home .mf-popular__card {
    position: relative;
    flex: 0 0 calc((100% - 3 * var(--pg-gap)) / 4);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--pg-gold);
    border: 0;
    border-radius: var(--pg-card-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(60, 46, 26, 0.10);
    transition: transform 320ms var(--mf-ease), box-shadow 320ms var(--mf-ease);
}

body.home .mf-popular__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(60, 46, 26, 0.16);
}

/* ---------- Photograph ---------- */
body.home .mf-popular__card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #EFE8DC;
    border-radius: 0;
    margin: 0;
}

body.home .mf-popular__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--mf-ease);
}

body.home .mf-popular__card:hover .mf-popular__card-img img {
    transform: scale(1.05);
}

/* ---------- White body, and the two curves ---------- */
body.home .mf-popular__card-body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--pg-paper);
    /* Pulled up over the photograph; this is what the curve cuts across. */
    margin-top: -44px;
    padding: 2.25rem 1.5rem 1.6rem;
    border-top-left-radius: 62px;
    /* The gold card showing through here is the wedge. */
    border-bottom-right-radius: 68px;
}

/* ---------- Icon badge ----------
   Sits on the curve, which is also what explains the curve: the badge is the
   reason there is room for it. One per dish, chosen per item in the template.

   The deep gold is used rather than the bright one because the glyph inside
   is white and small. */
body.home .pg-badge {
    position: absolute;
    top: -22px;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pg-gold-deep);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(60, 46, 26, 0.22);
}

/* ---------- Type ---------- */
body.home .mf-popular__card-name {
    font-family: var(--mf-font-display);
    font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--pg-ink);
    margin: 0 0 0.65rem;
}

/* The short gold rule under each dish name. */
body.home .mf-popular__card-name::after {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 0.65rem;
    border-radius: 2px;
    background: var(--pg-gold);
}

body.home .mf-popular__card-desc {
    margin: 0 0 1.4rem;
    color: var(--pg-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    /* Two lines, so every card's button lands on the same baseline however
       long the copy is. The dish descriptions differ in length and French
       runs longer than English; without this the row of buttons stairsteps. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- View details ----------
   Pushed to the bottom of the card by `margin-top: auto`, so cards of
   different heights still align their buttons.

   The right inset keeps the pill clear of the gold wedge beneath it. */
body.home .pg-cta {
    margin-top: auto;
    margin-right: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.55rem 0.55rem 1.15rem;
    border-radius: 999px;
    background: var(--pg-gold-deep);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 220ms var(--mf-ease);
}

body.home .pg-cta:hover,
body.home .pg-cta:focus-visible {
    background: var(--pg-gold-dark);
    color: #FFFFFF;
}

body.home .pg-cta__arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--pg-gold-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex: 0 0 auto;
    transition: transform 220ms var(--mf-ease);
}

body.home .pg-cta:hover .pg-cta__arrow {
    transform: translateX(3px);
}


/* ==========================================================================
   4. CAROUSEL CONTROLS
   ==========================================================================

   Centred under the track, between two gold rules, as the reference shows.

   home.css pins these two buttons absolutely to the left and right edges of
   the track and centres them vertically, so `position`, `top`, `transform`,
   `left` and `right` all have to be unwound — overriding only some of them
   would leave the pair floating over the cards. They are moved after the
   track in the markup too, so the tab order follows what the eye sees.
   ========================================================================== */

body.home .pg-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.home .pg-controls::before,
body.home .pg-controls::after {
    content: '';
    height: 1px;
    width: clamp(40px, 10vw, 120px);
    background: var(--pg-gold);
    opacity: 0.5;
}

body.home .mf-popular__arrow {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 220ms var(--mf-ease), color 220ms var(--mf-ease),
                border-color 220ms var(--mf-ease);
}

/* Both arrows carry the same solid gold fill. The reference had the previous
   arrow as a quiet white outline and only the next one filled, but matching
   them was asked for directly, so they are a matched pair. */
body.home .mf-popular__arrow--prev,
body.home .mf-popular__arrow--next {
    background: #A3721D;
    border: 1px solid #A3721D;
    color: #FFFFFF;
}

body.home .mf-popular__arrow--prev:hover,
body.home .mf-popular__arrow--next:hover {
    background: #8A5E14;
    border-color: #8A5E14;
    color: #FFFFFF;
}

/* The section's own "view full menu" button: a solid gold fill at the exact
   brand value, with white type (~4.6:1, clears AA). Hover darkens rather
   than lightens — on a cream ground, lightening a fill drops its contrast
   against the page and reads as the control going inactive. */
body.home .mf-popular__cta {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}

body.home #mfMain .mf-popular__cta .mf-btn {
    background: #A3721D;
    border-color: #A3721D;
    color: #FFFFFF;
}

body.home #mfMain .mf-popular__cta .mf-btn:hover,
body.home #mfMain .mf-popular__cta .mf-btn:focus-visible {
    background: #8A5E14;
    border-color: #8A5E14;
    color: #FFFFFF;
}

/* Custom controls need a focus ring that is actually visible on cream. */
body.home .mf-popular a:focus-visible,
body.home .mf-popular button:focus-visible {
    outline: 2px solid var(--pg-gold-deep);
    outline-offset: 3px;
}


/* ==========================================================================
   5. RESPONSIVE
   ==========================================================================

   The card count steps down with width. The breakpoints are set by where a
   290px card stops fitting, not by device names — four across needs about
   1180px of container once the gaps are counted.
   ========================================================================== */

@media (max-width: 1180px) {
    body.home .mf-popular__card {
        flex-basis: calc((100% - 2 * var(--pg-gap)) / 3);
    }
}

@media (max-width: 860px) {
    body.home .mf-popular__card {
        flex-basis: calc((100% - var(--pg-gap)) / 2);
    }
}

@media (max-width: 600px) {
    /* A sliver of the next card showing is what tells a thumb the row
       scrolls, so this stops just short of one full card. */
    body.home .mf-popular__card {
        flex-basis: 78%;
    }

    body.home .mf-popular__card-body {
        margin-top: -38px;
        padding: 2rem 1.25rem 1.4rem;
        border-top-left-radius: 52px;
        border-bottom-right-radius: 56px;
    }

    body.home .pg-badge {
        width: 40px;
        height: 40px;
        top: -20px;
        left: 1.25rem;
    }

    body.home .mf-popular__title {
        line-height: 1.14;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .mf-popular__card,
    body.home .mf-popular__card-img img,
    body.home .pg-cta,
    body.home .pg-cta__arrow,
    body.home .mf-popular__arrow {
        transition: none;
    }

    body.home .mf-popular__card:hover {
        transform: none;
    }

    body.home .mf-popular__card:hover .mf-popular__card-img img,
    body.home .pg-cta:hover .pg-cta__arrow {
        transform: none;
    }

    body.home .mf-popular__track {
        scroll-behavior: auto;
    }
}