/* ============================================================
   Mobile App Showcase — xpertlab
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Plus+Jakarta+Sans:wght@400;700&display=swap');

/* Clip horizontal overflow at the page level so the decorative blobs can
   bleed past the section edges on every breakpoint without adding a
   horizontal scrollbar. */
html {
    overflow-x: clip;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP  (>900px)
   Grid:  phone (left, spans both rows) | title+desc (right row 1)
                                        | cards      (right row 2)
   ══════════════════════════════════════════════════════════ */
.xmas-section {
    display: grid;
    grid-template-columns: 42% 58%;
    grid-template-rows: auto auto;
    grid-template-areas:
        "left  right"
        "left  cards";
    /* keep the right-column rows at their natural height near the top instead
       of stretching them to fill the tall phone column (which inflated the
       vertical gap between the two card rows) */
    align-content: start;
    width: 100%;
    max-width: 1600px !important;
    /* centre the 1280px container so it matches the width of the other
       sections (e.g. App Development Methodology) instead of full-bleeding */
    margin-left: auto !important;
    margin-right: auto !important;
    /* pull the section up to trim the large whitespace above it (reset on mobile) */
    margin-top: -100px;
    /* symmetric side gutter so it lines up with the other sections */
    padding: 0 24px;
    box-sizing: border-box;
    /* background-color: #ffffff; */
    position: relative;
    /* No overflow:hidden on desktop so the decorative blobs can bleed past the section edges */
}

/* Decorative blobs — blur radius exceeds blob size for a soft ambient halo */
.xmas-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* Pink blob — upper area behind the title */
.xmas-blob--pink {
    width: 160px;
    height: 160px;
    top: 38%;
    left: 60%;
    background: #B51B5A;
    filter: blur(160px);
    opacity: 1;
}

/* Blue blob — left side, glows behind the phone */
.xmas-blob--blue-left {
    width: 300px;
    height: 220px;
    top: 42%;
    left: -60px;
    background: #1A8FCC;
    filter: blur(200px);
    opacity: 1;
}

/* Blue blob — lower right, glows behind the cards */
.xmas-blob--blue-right {
    width: 200px;
    height: 200px;
    top: 55%;
    left: 76%;
    background: #87D4FF;
    filter: blur(125px);
    opacity: 1;
}

/* Grid children sit above blobs */
.xmas-left,
.xmas-right,
.xmas-cards-area {
    position: relative;
    z-index: 1;
}

/* ── Left: phone — spans both grid rows, fills full section height ── */
.xmas-left {
    grid-area: left;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.xmas-phone-img {
    width: 187%;
    height: 90%;
    /* margin-left:87%; */
    /* below 1300px the phone sits 65px down; >1300px it drops to the
       second title line (overridden in the min-width:1300 query) */
    margin-top: 65px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Left image TYPE variants ──────────────────────────────────
   The default rules above ("mobile") zoom a tall phone mockup so it
   bleeds edge-to-edge and spans both grid rows (title + cards).
   Laptop & wide illustrations must instead be shown in full
   (object-fit:contain). Per the Figma, they sit in the LOWER-LEFT and
   the cards OVERLAP ON TOP of the image's right edge — the area next to
   the title stays empty — so we drop the image into the cards row and
   span it full-width beneath the cards. */
.xmas-left.xmas-media--laptop,
.xmas-left.xmas-media--illustration {
    /* Cards keep their zigzag on the right (mobile-style). The image spans the
       full CARDS row (grid-row 2) and is anchored left, so its right edge tucks
       UNDER the cards (Figma overlap). z-index below the cards. */
    grid-column: 1 / -1;
    grid-row: 2;               /* cards row only — starts level with the cards */
    position: relative;        /* containing block for the absolute image */
    align-self: stretch;       /* match the cards-row height */
    overflow: hidden;          /* never let the image bleed out of the section */
    z-index: 1;                /* sit behind the cards */
}

.xmas-media--laptop .xmas-phone-img,
.xmas-media--illustration .xmas-phone-img {
    /* Absolute → removed from flow, so it can't inflate the row or push past the
       section. Bound to the cards-row box; contain keeps the whole image visible. */
    position: absolute;
    top: 0;
    left: 0;
    width: 58%;                /* anchored left; right edge tucks under the cards */
    height: 100%;              /* exactly the cards-row height — no overflow */
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: left center;
}

/* Cards render on top so the image overlaps underneath (Figma). */
.xmas-section--laptop     .xmas-cards-area,
.xmas-section--illustration .xmas-cards-area {
    z-index: 2;
}

/* Mobile image type: start the phone from the TOP (aligned with the title),
   not pushed down near the cards. Overrides the base + >1300 margin-top. */
.xmas-media--mobile .xmas-phone-img {
    margin-top: 0;
}

.xmas-phone-placeholder {
    width: 85%;
    max-width: 300px;
    align-self: flex-end;
}

.xmas-phone-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.20));
    border-radius: 40px;
}

/* ── Right: title + description (row 1 of right column) ── */
.xmas-right {
    grid-area: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px 24px 24px 48px;
    box-sizing: border-box;
}

.xmas-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
    color: #191919;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}

.xmas-subtitle {
    font-family: 'Syne', 'Georgia', serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0;
    color: #191919;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
}

.xmas-description {
    font-family: 'Google Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.4;
    color: #778AA9;
    margin: 0;
    padding: 0;
}

/* ── Cards area (row 2 of right column) ── */
.xmas-cards-area {
    grid-area: cards;
    padding: 16px 24px 56px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Cards: 2 rows × 2 columns, sized by aspect-ratio — not stretched */
.xmas-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.xmas-cards-row {
    display: flex;
    gap: 16px;
}

.xmas-cards-row .xmas-card {
    flex: 1;
    min-width: 0;
}

/* Second row offset — translateX shifts visually without shrinking card widths */
.xmas-row--offset {
    transform: translateX(90px);
}

/* ── Card — square, capped at 320px (Nest Hub Max size) ──
   Contents are TOP-anchored and every gap is an explicit margin, identical at
   every breakpoint. `justify-content: space-between` + `gap` used to spread the
   three parts across whatever height the card happened to have, so a taller
   card (or a one-line title next to a two-line one) pushed the description to a
   different place in each card. Now icon → title → description always sit the
   same distance apart, so they line up across the whole grid. */
.xmas-card {
    /* single source of truth for the card's internal rhythm — never overridden
       per breakpoint, which is what keeps the spacing identical everywhere */
    --xmas-icon-gap: 16px;   /* icon → title  */
    --xmas-title-gap: 10px;  /* title → description */
    /* Two lines of title at line-height 1.25. Reserving it means a one-line and
       a two-line title still start their descriptions on the same line. */
    --xmas-title-lines: 2.5em;

    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Icon circle */
.xmas-card-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: #E9F5FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 0 var(--xmas-icon-gap);
}

.xmas-card-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.xmas-card-title {
    font-family: 'Plus Jakarta Sans', 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    color: #191919;
    text-align: center;
    margin: 0 0 var(--xmas-title-gap);
    padding: 0;
    /* `flex: 1` here was the real culprit: the title box absorbed all the spare
       height and centred its text inside, so the distance down to the
       description changed from card to card. */
    flex: none;
    display: block;
    width: 100%;
    min-height: var(--xmas-title-lines);
}

.xmas-card-desc {
    font-family: 'Plus Jakarta Sans', 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: #778AA9;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
}


/* 1281px and above - Large Desktop */
@media (min-width: 1281px) {
    .xmas-section {
        width: 100%;
        max-width: 1600px !important;
        /* simple auto-margin centring (same as the methodology section) —
           no translateX break-out, so the width matches the other sections */
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .xmas-card {
        aspect-ratio: 1 / 1 !important;
    }
}

@media (min-width: 1300px) {
    .xmas-description {
        max-width: 75%;
    }

    .xmas-card {
        max-width: 33%;
        aspect-ratio: auto !important;
    }

    /* Second row: right-align to the title's right edge instead of a fixed
       shift, so the two cards end exactly at the title width. */
    .xmas-row--offset {
        transform: translateX(150px);
    }

    /* phone starts at the second title line only on large screens */
    .xmas-phone-img {
        margin-top: 150px;
    }

    /* tighten the vertical gap between the two card rows so >1300px matches
       the Nest Hub Max look instead of spreading the second row down */
    .xmas-cards-grid {
        gap: 8px;
    }
}


/* 768px–1299px — laptop / tablet band.
   The second card row's zigzag offset (translateX) is only safe ≥1300px, where
   the cards are capped at 33% width. Below that the cards are ~half-width each,
   so shifting the second row right pushes it past the section edge (the cause of
   the "mixed up" overlap in the 1025–1240px range). Zero the offset and tighten
   the paddings/type so the 2×2 grid sits squarely inside the section. */
@media (min-width: 768px) and (max-width: 1299px) {
    /* zigzag nudge for the second row in this band */
    .xmas-row--offset { transform: translateX(28%); }

    .xmas-right      { padding: 48px 24px 20px 40px; }
    .xmas-cards-area { padding: 16px 24px 48px 40px; }

    .xmas-title    { font-size: 32px; }
    .xmas-subtitle { font-size: 50px; }

    /* keep the feature cards from ballooning into tall squares at half-width */
    .xmas-card { aspect-ratio: auto; min-height: 200px; }
}

/* 1025px–1240px — laptop band, per-request layout.
   1) Let the left phone image bleed OUT past the section's left edge (larger,
      "proper" presence) instead of being clipped inside its column. It is
      anchored so its RIGHT edge stays at the column boundary — it never
      overlaps the title or the cards; only the left side spills off-screen.
   2) Center the 2×2 feature-card block within the right column. */
@media (min-width: 1025px) and (max-width: 1240px) {
    /* Let the phone panel bleed OUT past the section's left edge: widen it and
       pull it left by the SAME amount, so its RIGHT edge stays exactly at the
       column boundary (never overlaps the cards) while its left spills off the
       screen. overflow:hidden keeps the right clipped at the boundary; the base
       187% framing / object-position is preserved, so the phone still reads
       correctly — it just gets bigger and runs off the left. */
    .xmas-left {
        width: calc(100% + 150px);
        margin-left: -150px;
        overflow: hidden;
    }

    /* …but the left-bleed above is only right for the tall PHONE mockup.
       Illustration / laptop graphics are full-width row-2 images (not a phone),
       so keep them exactly as they render on ≤1024 and ≥1241 — no bleed —
       giving every tablet the same look. */
    .xmas-left.xmas-media--laptop,
    .xmas-left.xmas-media--illustration {
        width: auto;
        margin-left: 0;
    }

    /* 4 cards centered as a block under the title */
    .xmas-cards-area {
        align-items: center;
    }
    .xmas-cards-grid {
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .xmas-cards-row {
        justify-content: center;
    }
    .xmas-row--offset {
        transform: translateX(0);   /* no zigzag in this band */
    }
}

/* Laptop / illustration sections now use the SAME desktop layout as the mobile
   (phone) type — image in the left column, cards on the right with the zigzag
   offset. Only the left image differs (see the .xmas-media--laptop /
   --illustration rules above). No type-specific desktop overrides needed. */


/* ═══════════════════════════════════════════════════════════════════════
   LAPTOP / ILLUSTRATION image types — TABLETS ONLY (768px–1024px).
   On these tablet widths the desktop two-column layout is cramped, so give
   them the stacked layout: graphic FIRST (large & centred), then the
   title/description, then the 2×2 feature cards.
   ABOVE 1024px (desktop, e.g. Nest Hub Max) the original two-column desktop
   layout is kept — this block deliberately does NOT apply there.
   The phone image type is left completely untouched, and phones ≤767px are
   handled by the mobile blocks below.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    .xmas-section--laptop,
    .xmas-section--illustration {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 36px;
        margin-top: 0;
        padding: 24px 24px 56px;
    }

    /* Graphic — in normal flow, horizontally CENTRED */
    .xmas-section--laptop .xmas-left,
    .xmas-section--illustration .xmas-left {
        order: 1 !important;   /* image FIRST */
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        min-height: 0;
        overflow: visible;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
    }
    .xmas-section--laptop .xmas-phone-img,
    .xmas-section--illustration .xmas-phone-img {
        position: static !important;
        top: auto;
        left: auto;
        display: block;
        width: 100%;
        height: auto;
        /* stacked layout (graphic on its own row above the title) — let the
           graphic run the full width of the section for a larger presence */
        max-width: 100%;
        max-height: 680px;
        margin-left: auto !important;
        margin-right: auto !important;
        object-fit: contain;
        object-position: center center !important;
    }

    /* Title + description — centred under the graphic */
    .xmas-section--laptop .xmas-right,
    .xmas-section--illustration .xmas-right {
        order: 2 !important;   /* title + description SECOND */
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        max-width: 980px;
        padding: 0;
        text-align: center;
        align-items: center;
        justify-content: flex-start;
    }
    .xmas-section--laptop .xmas-title,
    .xmas-section--illustration .xmas-title,
    .xmas-section--laptop .xmas-subtitle,
    .xmas-section--illustration .xmas-subtitle,
    .xmas-section--laptop .xmas-description,
    .xmas-section--illustration .xmas-description {
        text-align: center;
    }
    .xmas-section--laptop .xmas-description,
    .xmas-section--illustration .xmas-description {
        max-width: 760px;
        margin: 0 auto;
    }

    /* Feature cards — full-width 2×2, centred, no zigzag */
    .xmas-section--laptop .xmas-cards-area,
    .xmas-section--illustration .xmas-cards-area {
        order: 3 !important;   /* cards LAST */
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        max-width: 1040px;
        padding: 0;
        z-index: 1;
        align-items: center;
    }
    .xmas-section--laptop .xmas-cards-grid,
    .xmas-section--illustration .xmas-cards-grid {
        width: 100%;
        gap: 16px;
    }
    .xmas-section--laptop .xmas-cards-row,
    .xmas-section--illustration .xmas-cards-row,
    .xmas-section--laptop .xmas-row--offset,
    .xmas-section--illustration .xmas-row--offset {
        gap: 16px;
        justify-content: center;
        transform: none;   /* kill the desktop zigzag offset */
    }
    .xmas-section--laptop .xmas-card,
    .xmas-section--illustration .xmas-card {
        max-width: none !important;   /* undo the ≥1300 33% cap */
        aspect-ratio: auto !important; /* undo the ≥1281 square cards */
        min-height: 200px;
    }
}


/* 768px–1024px — TABLET heading uniformity.
   Keep the heading block to TWO lines on every tablet (eyebrow title on line 1,
   subtitle on line 2) like the desktop layout. The 32px/50px sizes inherited
   from the 768–1299 band pushed the subtitle onto a third line, so the heading
   no longer matched the other sections. The sizes scale with the viewport so
   both lines stay unwrapped from 768px right up to 1024px.
   Placed AFTER the laptop/illustration tablet block so it applies to every
   image type (mobile, laptop, illustration) for a uniform tablet heading. */
@media (min-width: 768px) and (max-width: 1024px) {
    .xmas-title {
        font-size: clamp(20px, 2.7vw, 28px);
        line-height: 1.15;
    }

    .xmas-subtitle {
        font-size: clamp(30px, 4.4vw, 44px);
        line-height: 1.1;
    }
}

/* ≤1024px — MOBILE (phone) image type only: pull the mockup slightly out past
   the section's left edge so it reads larger on tablets/phones. */
@media (max-width: 1024px) {
    .xmas-left.xmas-media--mobile {
        margin-left: -40px !important;
    }
}

/* 1241px–1299px — Nest Hub Max (1280×800) band.
   Kept separate from the 1025–1240 laptop band so that already-tuned band is
   untouched.
   1) Slide the laptop / illustration graphic 107px to the LEFT. The shift is
      applied to the container with equal-and-opposite margins so the box only
      MOVES (its width is unchanged) and the image is never clipped by the
      container's overflow:hidden. A transform can't be used here — the
      scroll-reveal rule (.xmas-reveal.xmas-in .xmas-left) resets transform to
      none and would wipe the shift out once the animation finishes.
   2) Nudge the FIRST card row right by 4% so it starts under the title /
      description instead of sitting slightly left of it. */
@media (min-width: 1241px) and (max-width: 1299px) {
    .xmas-left.xmas-media--laptop,
    .xmas-left.xmas-media--illustration {
        margin-left: -107px;
        margin-right: 107px;
    }

    .xmas-cards-row:not(.xmas-row--offset) {
        transform: translateX(4%);
    }
}


/* 601px to 767px - Small tablet / large phone (stacked layout) */
@media (max-width: 767px) and (min-width: 601px) {
    .xmas-section {
        grid-template-columns: 42% 58%;
        grid-template-rows: auto auto;
        grid-template-areas:
            "left  right"
            "left  cards";
        padding: 0 24px 0 0;
        /* let the blobs bleed past the edges like desktop (html clips the page) */
        overflow: visible;
    }

    .xmas-left {
        align-items: stretch;
        overflow: hidden;
    }

    /* Full phone visible — no cropping */
    .xmas-phone-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
        margin: 65px 0 0;
    }

    /* Both right-column areas share the same left padding → aligned */
    .xmas-right {
        padding: 40px 20px 20px 40px;
    }

    .xmas-cards-area {
        padding: 8px 20px 40px 40px;
    }

    .xmas-row--offset { transform: translateX(0); }

    .xmas-title       { font-size: 28px; }
    .xmas-subtitle    { font-size: 46px; margin-bottom: 14px; }
    .xmas-description { font-size: 17px; }

    .xmas-cards-grid { height: auto; }
    .xmas-cards-row  { flex: none; }

    .xmas-card {
        aspect-ratio: auto;
        min-height: 190px;
    }

    /* Blob scale ~75% */
    .xmas-blob--pink      { width: 120px; height: 120px; top: 20px;  left: 57%; filter: blur(150px); }
    .xmas-blob--blue-left { width: 165px; height: 165px; top: 20%;   left: -45px; filter: blur(150px); }
    .xmas-blob--blue-right{ width: 150px; height: 150px; top: 50%;   left: 74%; filter: blur(140px); }
}

/* 601px to 767px - Small tablet / large phone (typography) */
@media (max-width: 767px) and (min-width: 601px) {
    .xmas-right      { padding: 28px 16px 16px 28px; }
    .xmas-cards-area { padding: 8px 16px 32px 28px; }

    .xmas-title       { font-size: 22px; }
    .xmas-subtitle    { font-size: 34px; }
    .xmas-description { font-size: 15px; }

    .xmas-card       { min-height: 160px; padding: 18px 12px; }
    .xmas-card-title { font-size: 16px; }
    .xmas-card-desc  { font-size: 13px; }
}


/* Up to 767px - Phones only: single column, phone centred on top.
   Tablets (≥768px) now use the desktop two-column layout above. */
@media (max-width: 767px) {
    .xmas-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* reduced top padding so the content starts higher */
        padding: 16px 20px 56px;
        gap: 28px;
        /* no negative pull-up on mobile (stacked layout) */
        margin-top: 0;
        /* let the blobs bleed past the edges like desktop (html clips the page) */
        overflow: visible;
    }
    .xmas-row--offset {
    transform: translateX(0px);
}
    .xmas-left {
        order: 1;
        width: 100%;
        padding: 0;
        justify-content: center;
        align-items: center;
        min-height: 380px;
    }

    /* Tablet/mobile: the phone sits in the LEFT portion of the source image
       (empty space on the right) and is itself tall/portrait. Use a portrait
       box so object-fit:cover zooms in on the phone (bigger), and nudge
       object-position so the phone lands centred. */
    .xmas-phone-img {
        width: 100%;
        /* stacked layout — taller/wider crop box so the phone reads bigger */
        height: 640px;
        max-width: 420px;
        margin: 0 auto;
        display: block;
        object-fit: cover;
        /* phone sits in the left of the source; a small positive % (valid,
           unlike a negative one) slides the crop so the phone lands centred */
        object-position: 10% top;
    }

    /* Laptop / illustration: show the whole graphic centred, no crop.
       On desktop these images are position:absolute inside an overflow:hidden,
       near-zero-height box (they tuck under the cards). On a stacked mobile
       layout that combination collapses the box and CLIPS the image away
       entirely — so here we put the image back into normal flow (position:
       static) and let the container grow to fit it. */
    .xmas-left.xmas-media--laptop,
    .xmas-left.xmas-media--illustration {
        min-height: 0;
        overflow: visible;
    }
    .xmas-media--laptop .xmas-phone-img,
    .xmas-media--illustration .xmas-phone-img {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        /* stacked layout — graphic uses the full column width (bigger) */
        max-width: 100%;
        max-height: 520px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
    }

    .xmas-phone-placeholder {
        max-width: 240px;
        min-height: 300px;
        margin: 0 auto;
        align-self: center;
    }

    .xmas-right {
        order: 2;
        width: 100%;
        padding: 0;
        justify-content: flex-start;
        text-align: center;
    }

    .xmas-title       { font-size: 20px; text-align: center; }
    .xmas-subtitle    { font-size: 30px; text-align: center; margin-bottom: 12px; }
    .xmas-description { font-size: 15px; text-align: center; max-width: 100%; }

    .xmas-cards-area {
        order: 3;
        width: 100%;
        padding: 0;
        display: block;
    }

    .xmas-cards-grid  { gap: 12px; height: auto; }
    .xmas-cards-row   { gap: 12px; flex: none; }
    .xmas-row--offset { padding-left: 0; }

    /* Height follows the content on phones. The base `aspect-ratio: 1/1` made a
       full-width card as tall as it is wide (~335px on a 375px screen) while the
       icon + title + text only need ~150px, leaving a big empty band above and
       below. Cards in the same row still match heights via flex stretch. */
    .xmas-card {
        aspect-ratio: auto;
        min-height: 0;
        padding: 20px 16px;
        /* Same top-anchored rhythm as every other breakpoint — the icon/title/
           description gaps come from the --xmas-*-gap variables, so the spacing
           between title and description is identical on phones and desktop. */
        gap: 0;
        justify-content: flex-start;
    }
    .xmas-card-title { font-size: 14px; flex: none; }
    .xmas-card-desc  { font-size: 12px; }

    /* Blob scale ~55% like FAQ mobile */
    .xmas-blob--pink      { width: 88px;  height: 88px;  top: 20px;  left: 55%;  filter: blur(140px); }
    .xmas-blob--blue-left { width: 120px; height: 120px; top: 30%;   left: -38px; filter: blur(150px); }
    .xmas-blob--blue-right{ width: 110px; height: 110px; top: 62%;   left: 60%;  filter: blur(130px); }
}

/* Up to 400px - Mobile */
@media (max-width: 400px) {
    .xmas-cards-row { flex-direction: column; }
    .xmas-subtitle  { font-size: 26px; }
    .xmas-phone-img { max-width: 360px; height: 580px; margin: 0 auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LAPTOP / ILLUSTRATION — STACKED LAYOUT SIZING  (≤1024px)
   These are the widths where the graphic drops onto its own row above the
   title. Two things were off there:
     1) The graphic was capped at the section's inner width, so next to a
        full-width heading it read small for what is the section's hero image.
        It now spans edge to edge — the section's own side gutters are
        cancelled with equal negative margins — and is allowed to be taller.
     2) The section's flex `gap` put the SAME large space above the title as
        between every other block, leaving an obvious hole under the graphic.
        The gap is zeroed and re-applied as explicit margins, so the
        image→title distance can be tight while the rest stays as it was.
   Placed last so it wins over the ≤767 / 768–1024 blocks above regardless of
   their identical specificity. The phone ("mobile") image type is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablets — 768px to 1024px (section padding is 24px a side here). */
@media (min-width: 768px) and (max-width: 1024px) {
    .xmas-section--laptop,
    .xmas-section--illustration {
        gap: 0;
    }
    .xmas-section--laptop .xmas-left,
    .xmas-section--illustration .xmas-left {
        width: calc(100% + 48px);
        max-width: none;
        margin-left: -24px;
        margin-right: -24px;
        /* was the section's 36px flex gap */
        margin-bottom: 10px;
    }
    .xmas-section--laptop .xmas-right,
    .xmas-section--illustration .xmas-right {
        margin-bottom: 36px;   /* unchanged spacing down to the cards */
    }
    .xmas-section--laptop .xmas-phone-img,
    .xmas-section--illustration .xmas-phone-img {
        width: 100%;
        max-width: none;
        max-height: 780px;
    }
}

/* Phones — up to 767px (section padding is 20px a side here). */
@media (max-width: 767px) {
    .xmas-section--laptop,
    .xmas-section--illustration {
        gap: 0;
    }
    .xmas-section--laptop .xmas-left,
    .xmas-section--illustration .xmas-left {
        width: calc(100% + 40px);
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        /* Negative on purpose. These graphics carry a lot of empty canvas along
           their bottom edge, so the box is taller than the artwork inside it —
           8px of real margin still read as a large hole above the heading.
           Pulling the box up closes that transparent band. */
        margin-bottom: -75px;
    }
    .xmas-section--laptop .xmas-right,
    .xmas-section--illustration .xmas-right {
        margin-bottom: 28px;   /* unchanged spacing down to the cards */
    }
    .xmas-media--laptop .xmas-phone-img,
    .xmas-media--illustration .xmas-phone-img {
        width: 100%;
        max-width: none;
        max-height: 620px;
        height: auto;
    }
}

/* ══════════════════════════════════════════════════════════
   SCROLL-REVEAL ENTRANCE ANIMATION  ("Card assemble")
   `.xmas-reveal` is server-rendered in shortcode.php (armed/hidden).
   `.xmas-in` is added by public/xmas-public.js when in view (plays).
   Only opacity + transform are touched — no layout shift, no filters.
   If JS never runs, `.xmas-reveal` is absent and everything renders
   normally, so nothing is ever permanently hidden.
   ══════════════════════════════════════════════════════════ */

/* Hidden / pre-animation state — scoped under .xmas-reveal only */
.xmas-section.xmas-reveal .xmas-right,
.xmas-section.xmas-reveal .xmas-card,
.xmas-section.xmas-reveal .xmas-left {
    opacity: 0;
    transition:
        opacity   1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Title + description: fade + rise (plays first) */
.xmas-section.xmas-reveal .xmas-right {
    transform: translateY(28px);
    transition-delay: 0s;
}

/* Phone image container: fade + gentle scale settle (subtle, container-only
   so the tuned object-fit / object-position / margins on the img are untouched) */
.xmas-section.xmas-reveal .xmas-left {
    transform: scale(0.985);
    transition-delay: 0.08s;
}

/* Feature cards: fade + rise (34px) + subtle scale (0.96) */
.xmas-section.xmas-reveal .xmas-card {
    transform: translateY(34px) scale(0.96);
}

/* Staggered card-by-card entrance (2×2 grid: two rows of two) */
.xmas-section.xmas-reveal .xmas-cards-row:nth-child(1) .xmas-card:nth-child(1) { transition-delay: 0.20s; }
.xmas-section.xmas-reveal .xmas-cards-row:nth-child(1) .xmas-card:nth-child(2) { transition-delay: 0.32s; }
.xmas-section.xmas-reveal .xmas-cards-row:nth-child(2) .xmas-card:nth-child(1) { transition-delay: 0.44s; }
.xmas-section.xmas-reveal .xmas-cards-row:nth-child(2) .xmas-card:nth-child(2) { transition-delay: 0.56s; }

/* Revealed state — settle to natural position */
.xmas-section.xmas-reveal.xmas-in .xmas-right,
.xmas-section.xmas-reveal.xmas-in .xmas-card,
.xmas-section.xmas-reveal.xmas-in .xmas-left {
    opacity: 1;
    transform: none;
}

/* Reduced-motion: show everything, no movement */
@media (prefers-reduced-motion: reduce) {
    .xmas-section.xmas-reveal .xmas-right,
    .xmas-section.xmas-reveal .xmas-card,
    .xmas-section.xmas-reveal .xmas-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}