/* ============================================================================
   home.css — the eShops homepage (index.html)
   ============================================================================
   Composed from Selections (rails) + fixed furniture (hero, trust, how-it-works,
   FAQ). Reuses core.css tokens and components.css classes; no new colours.
   The hero search is the shared <search-field hero scan> component; its bar
   (.search-hero-input-wrap) is styled in components.css.
   ============================================================================ */

/* overflow-x guard: the carousel track is wider than the viewport by design;
   clip it here so a rail can never introduce horizontal page scroll. */
.page-home { width: 100%; overflow-x: hidden; }

/* Shared centered section frame */
.home-hero-inner,
.home-trust-carousel,
.home-rails,
.home-how,
.home-faq {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.home-hero {
    background: linear-gradient(180deg, var(--pink-highlight-pale) 0%, #fff 100%);
    padding: 56px 0 40px;
    text-align: center;
}
.home-hero-inner { max-width: 760px; }
.home-hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 16px;
}
.home-hero-title .accent { color: var(--pink-highlight); }
.home-hero-search { max-width: 640px; margin: 0 auto; }
/* Recent-search row under the hero bar. The row itself (scroll track, fade
   mask, chip overrides) is in components.css because /search renders it too —
   only the spacing is per-page, and the homepage sits it BELOW the bar rather
   than tucking it up under one. */
.home-hero-inner .search-hero-recents { margin: 14px auto 0; }
/* ── Feature / benefit carousel ───────────────────────────────────────────── */
.home-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-color);
}
/* Only the ICON carries the brand blue; the label stays body text. The slide
   icons are stroke="currentColor", so colouring the <svg> here drives all eight
   from one rule instead of repeating the var on every slide. */
.home-trust-item svg { color: var(--blue-highlight); }
/* Autoplaying benefit carousel — runs on EVERY breakpoint now (replaces the old
   static desktop strip). Splide is mounted with a responsive perPage, 4 on
   desktop down to 1 on phones (see home.js syncUsp). */
.home-trust-carousel {
    display: block;
    /* Symmetric padding, matching how every other home section spaces itself
       (.home-how 44/44, .home-faq 24/60). The section used to end on a
       border-bottom with padding-bottom:0 so the progress bar sat flush on it;
       the divider was dropped, and the bar needs its own breathing room now
       rather than butting into .home-rails (which contributes only 8px). */
    padding-top: 20px;
    padding-bottom: 20px;
}
/* Each slide centres its icon + label within the perPage column. */
.home-trust-carousel .home-trust-item { display: flex; justify-content: center; }
/* Slim autoplay progress bar under the USP slides — the .bar width is driven
   0→100% over each slide's interval by Splide's autoplay:playing (home.js). */
.home-trust-carousel .splide__progress {
    height: 2px;
    /* Air between the slide content and the bar. */
    margin-top: 16px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.home-trust-carousel .splide__progress__bar {
    height: 100%;
    width: 0;
    /* Matches the USP text/icons above it — the bar reads as part of the same
       strip rather than a second accent colour. */
    background: var(--blue-highlight);
}

/* ── Rails ────────────────────────────────────────────────────────────────── */
.home-rails { padding-top: 8px; }
.home-rails-loading { display: flex; justify-content: center; padding: 60px 0; }

/* Vertical rhythm between placements lives on the MARGIN (consistent for plain
   and backgrounded rails alike); adjacent margins collapse to one clean gap. */
.home-rail { padding: 10px 0; margin: 30px 0; }
/* Admin-configured section background (solid / gradient via SelectionRail's
   :style binding). Only rails with a background get inset padding + rounding so
   the band reads as an intentional card; the margin (separation) is inherited
   from .home-rail so backgrounded rails don't crowd together. */
.home-rail--has-bg {
    padding: 22px 20px 18px;
    border-radius: var(--radius-lg);
}
@media (max-width: 600px) {
    .home-rail--has-bg { padding-left: 12px; padding-right: 12px; }
}
/* Per-selection device visibility (selections.visibility): hide the whole rail
   band on the wrong device class. 600px is the rail system's mobile boundary
   (matches the Splide breakpoints + grid media queries). A hidden band is
   display:none, so its IntersectionObserver never fires — the rail's members
   are never even fetched. Default 'all' carries no class and renders everywhere. */
@media (max-width: 600px) {
    .home-rail--desktop-only { display: none; }
}
@media (min-width: 601px) {
    .home-rail--mobile-only { display: none; }
}
.home-rail-head {
    display: flex;
    align-items: flex-start;   /* CTA sits at the TOP of the row (desktop) */
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
/* Mobile: CTA drops to its own row, under the title + subtitle. */
@media (max-width: 600px) {
    .home-rail-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.home-rail-heading { min-width: 0; }
.home-rail-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-color);
    line-height: 1.2;
}
.home-rail-sub {
    font-size: var(--fs-md);
    color: var(--text-light);
    margin-top: 4px;
}
/* CTA renders as a normal button (.btn); just keep it from shrinking/wrapping. */
.home-rail-cta { flex-shrink: 0; white-space: nowrap; }
.home-rail-loading { display: flex; justify-content: center; padding: 30px 0; }

/* The rail's track padding, slide sizing and edge-fade arrows MOVED to
   components.css on 2026-08-28, byte-identical, when /browse's category
   carousel adopted the same treatment — same move the star-card block made when
   it stopped being one page's. This file keeps only what is the homepage's
   alone. Look for ".home-rail-splide, .cat-carousel-splide" there. */
.home-rail-splide .splide__slide .product-card { height: 100%; }

/* Grid style — column count comes from the placement's product_size (matches
   the carousel per-view counts): small 8 · medium 6 · large 3 (desktop).
   minmax(0,1fr) lets the tracks shrink below the card's content min-width so a
   dense row never overflows the page. */
.home-rail-grid { display: grid; gap: 14px; }
.home-rail-grid--small  { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.home-rail-grid--medium { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.home-rail-grid--large  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) {
    .home-rail-grid--small  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .home-rail-grid--medium { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-rail-grid--large  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .home-rail-grid--small,
    .home-rail-grid--medium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-rail-grid--large  { grid-template-columns: minmax(0, 1fr); }
}

/* Cards must be allowed to shrink inside dense tracks/slides. */
.page-home .compact-card { min-width: 0; }

/* Small size = denser cards: shrink image/type/buttons so 8-across fits
   comfortably (applies to both the small grid and the small carousel). */
.home-rail--small .compact-card { padding: 8px 5px; }
.home-rail--small .compact-img { max-width: 78px; }
.home-rail--small .compact-card .product-brand { font-size: var(--fs-3xs); margin-bottom: 2px; }
.home-rail--small .compact-card .product-title { font-size: var(--fs-xs); margin-bottom: 3px; }
.home-rail--small .compact-card .product-price { font-size: var(--fs-sm); }
.home-rail--small .compact-card .product-old-price { font-size: var(--fs-3xs); }
/* Same nudge as the standard compact card, scaled to this denser rail: a touch
   more type and matching air above/below, so the domain doesn't end up the one
   line that skipped the change. */
.home-rail--small .compact-card .product-shop-link { font-size: var(--fs-3xs); margin-top: 3px; margin-bottom: 6px; }
.home-rail--small .compact-card .product-availability { font-size: var(--fs-3xs); padding: 1px 6px; }
.home-rail--small .compact-actions { gap: 4px; margin-bottom: 6px; }
.home-rail--small .compact-icon-btn { padding: 4px; }
.home-rail--small .compact-actions-bottom { gap: 4px; }
.home-rail--small .compact-actions-bottom .btn-block { --control-height: 30px; font-size: var(--fs-xs); padding: 0 4px; }

/* Medium rail: the Bulgarian dual price ("157.48 € / 308.00 лв.") is long and
   wrapped to a second line at the default --fs-md. Shrink it a touch and keep it
   on ONE row so cards stay even. */
.home-rail--medium .compact-card .product-price { font-size: var(--fs-xs); white-space: nowrap; }

/* Large rail renders the full ProductCard; the availability line sits too tight
   against the price (~7px). Add air between them — scoped to this rail so the
   ProductCard on /browse and /search is untouched. */
.home-rail--large .product-availability { margin-bottom: 10px; }

/* Top-align the left column (image, discount badge, price…). By default
   .product-left-content centres its children vertically, so next to the taller
   right column the image floats down the card. Pin it to the top on this rail. */
.home-rail--large .product-left-content { justify-content: flex-start; }

/* Clamp the title to 3 lines and reserve that height, so long titles don't
   inflate the whole (equal-height) carousel and every card's title block —
   and everything below it — lines up. Scoped to the large rail. */
.home-rail--large .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.9em;   /* 3 × line-height (1.3) */
}

/* CarouselCard reuses GroupCard's .compact-card and all shared card classes
   (price/freshness/availability/compact-actions/buttons). The only compact-
   specific rule: a smaller 2-line title — GroupCard has no compact title
   because its title lives in the group header. */
.compact-card .product-title {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve both clamped lines, like .product-price-block reserves the old-price
       row: 23.4% of products have a title short enough to wrap to ONE line, and
       without this the price line below sat a full line higher on those cards —
       measured 28 of 30 homepage rails carrying two or more distinct
       price-block offsets. The bottom CTA block is NOT the symptom; it is
       already pinned by .compact-actions-bottom's margin-top:auto. What drifts
       is the middle band (brand / title / price). In em so the
       .home-rail--small font-size override carries it automatically. */
    min-height: 2.5em;
}
.compact-card .product-title a { color: inherit; }
.compact-card .product-title a:hover { color: var(--pink-highlight); text-decoration: none; }

/* ── Section titles (how / faq) ───────────────────────────────────────────── */
.home-section-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

/* ── How it works ─────────────────────────────────────────────────────────── */
.home-how { padding-top: 44px; padding-bottom: 44px; }
.home-how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
/* 4 steps need more room than the old 3 did: drop to 2×2 before the phone
   single-column tier so the cards never squeeze under ~220px. */
@media (max-width: 1000px) {
    .home-how-steps { grid-template-columns: repeat(2, 1fr); max-width: 700px; }
}
.home-how-step { text-align: center; padding: 8px; }
.home-how-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pink-highlight-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.home-how-step h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 6px; color: var(--text-color); }
.home-how-step p { font-size: var(--fs-md); color: var(--text-light); line-height: 1.5; }

/* ── FAQ (native details/summary) ─────────────────────────────────────────── */
.home-faq { padding-top: 24px; padding-bottom: 60px; max-width: 1100px; }

/* Pitch card beside the questions. The card column is capped rather than
   fractional so the questions keep the width they had; it collapses to one
   column at the phone tier, where the card's DOM-first position puts it above
   the FAQ with no `order` needed. */
.home-faq-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 40px;
    align-items: start;
}
.home-faq-cta {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 2em 1.75em;
    text-align: center;
}
.home-faq-cta h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
}
.home-faq-cta p {
    font-size: var(--fs-md);
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}
/* The section heading rides with the questions, not the whole two-column
   band, so it is left-aligned here instead of centred like "How it works". */
.home-faq .home-section-title { text-align: left; margin-bottom: 16px; }
/* The accordion itself (.faq-item / .faq-q / .faq-icon / .faq-answer /
   .faq-more) lives in components.css — /signup renders the same FaqList in
   its pitch panel. Only the layout around it is page CSS. */

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .home-hero { padding: 80px 0 24px; }
    .home-hero-title { font-size: var(--fs-2xl); }
    .home-how-steps { grid-template-columns: 1fr; gap: 8px; max-width: 380px; }
    .home-how-step { padding: 14px; }
    .home-rail-title { font-size: var(--fs-xl); }
    /* One column: the CTA card is first in the DOM, so it lands above the FAQ. */
    .home-faq-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Tighter padding for the benefit carousel on phones. */
    .home-trust-carousel { padding-top: 16px; padding-bottom: 16px; }
}

/* ── Rail picture (desktop only) ──────────────────────────────────────────
   A Selection's page picture, sitting beside its carousel when the admin ticks
   "Show the image on the Homepage" (page_json.show_on_home). /api/home has
   already folded that flag, the picture's presence and the carousel render
   style into one `image` key, so there is nothing to decide here but layout.

   Hidden below 1100px rather than never sent: a narrow row would leave the
   carousel a sliver. Doing it in CSS keeps the payload identical for every
   device — no user-agent guessing, and no cache that varies by it.
   ⚠ 1100 is not arbitrary — it is Splide's own tablet breakpoint in
   SelectionRail. The picture appearing and the per-view count changing have to
   happen at the SAME width, or there is a band where the carousel has been
   given fewer cards but the picture that justified them is gone.

   ⚠ The basis is FIXED (380px), never intrinsic. Splide measures the track once
   on mount to size its slides; a picture that settled its own width when the
   file finally decoded would resize the track underneath a mounted carousel and
   leave every slide the wrong width.

   The width is a straight trade with the carousel, so it is chosen against the
   card size rather than picked by eye:
       carousel = content width − image − gap
   At 1440 the rail has 1128px, so 380 + 20 leaves 728 for the 4 cards
   IMAGE_PER_PAGE gives medium — ~171px each, which is the ~176px a rail with no
   picture already draws. Widening further starts squeezing the cards, and the
   per-view counts in SelectionRail would have to come down with it. */
.home-rail-image { display: none; }

@media (min-width: 1100px) {
    .home-rail-body--with-image {
        display: flex;
        gap: 20px;
        align-items: stretch;
    }

    .home-rail-body--with-image .home-rail-image {
        display: block;
        flex: 0 0 380px;
        width: 380px;
        /* Fills the carousel's height and crops rather than letterboxing — the
           picture is a 600x315-ish social card, far wider than this column. */
        align-self: stretch;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }

    /* min-width:0 is what lets the carousel shrink into the leftover space; a
       flex item defaults to its content's minimum, and Splide's track would
       otherwise refuse to go below the width of its slides and push the picture
       out of the band. */
    .home-rail-body--with-image .home-rail-splide {
        flex: 1 1 auto;
        min-width: 0;
    }
}