/* ============================================================
   HERO COMPONENT — works across all 6 themes
   Variants: text | banner | video | slider
   ============================================================ */

.hero-section {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ──────────────────────────────────────────
   FLUSH MODE — hero takes the full viewport width and sits directly
   under the header (or at top:0 in side-menu layout where there is
   no top header taking vertical space).
   Activated by body.hero-flush (set in index.blade.php when the cart
   is disabled or running in push-mode, i.e. NOT stick).
   ────────────────────────────────────────── */
.hero-flush-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}
body.hero-flush.layout-top .hero-flush-wrap {
    /* Push the hero down by exactly (header + optional top-strip) height
       so it sits flush against the bottom edge of the sticky chrome.
       --top-offset = --header-h + --strip-h, written live by the
       header-sync IIFE in index.blade.php. */
    margin-top: var(--top-offset, var(--header-h, 60px));
}
body.hero-flush.layout-side .hero-flush-wrap {
    /* Side-menu layout has no top header, so the hero starts at the
       very top of the viewport. The sidebar takes a horizontal slice
       on the start side. */
    margin-top: 0;
}
/* When the side layout pairs with the row search variant, the search
   pill is pinned `position: fixed; top: 0` at the top of the content
   area. The flush hero starts at y=0 too and was visually living
   underneath the search row. Push the hero down by the live row
   height so the row stops covering the hero's top portion. The JS
   header-sync IIFE at the bottom of storefront/index.blade.php writes
   `--row-search-h` to :root every layout pass; fall back to 72 px if
   the variable hasn't been written yet (first paint). */
body.hero-flush.layout-side.search-variant-row .hero-flush-wrap {
    margin-top: var(--row-search-h, 72px);
}
/* Mobile (≤767 px) — the side layout collapses to the classic header
   fallback (see responsive.css), so the row search reverts to its
   default `top: 60px` position below that header. The flush hero now
   has to clear BOTH the classic header AND the row search. Add the
   `--header-h` (live header height written by the sync IIFE; default
   60) to the row-search offset. */
@media (max-width: 767px) {
    body.hero-flush.layout-side.search-variant-row .hero-flush-wrap {
        margin-top: calc(var(--header-h, 60px) + var(--row-search-h, 72px));
    }
}
/* Boutique variant is a floating capsule that should sit ABOVE the
   hero rather than push it down. Hero starts at top:0 so the capsule
   visually overlays its upper portion. */
body.hero-flush.layout-top.header-variant-boutique .hero-flush-wrap {
    margin-top: 0;
}
/* In flush mode the hero is edge-to-edge against the viewport, so any
   border-radius leaves ugly gaps in the corners against the page bg.
   Force-clear the radius on every variant + on mobile too. */
body.hero-flush .hero-flush-wrap .hero-section,
body.hero-flush .hero-flush-wrap .hero-banner,
body.hero-flush .hero-flush-wrap .hero-video,
body.hero-flush .hero-flush-wrap .hero-slider,
body.hero-flush .hero-flush-wrap .hero-text {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* When the hero is flush, the content-wrapper does NOT need its own
   top padding to clear the header — the hero already created that
   space. JS still adjusts wrapper paddingTop when there is a top-strip
   or row-search, but for the common case this rule removes the gap
   between the hero and the products row. */
body.hero-flush .content-wrapper {
    padding-top: 0 !important;
}

/* ──────────────────────────────────────────
   TEXT VARIANT
   Full-width block coloured with --primary,
   centred title + subtitle.
   ────────────────────────────────────────── */
.hero-text {
    min-height: var(--hero-h, 50vh);
    background: var(--primary, var(--primary-color, #1abc9c));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
}
.hero-text-inner { max-width: 680px; width: 100%; }
.hero-text .hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.hero-text .hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: rgba(255,255,255,.82);
    margin-top: 14px;
    line-height: 1.5;
}

/* No-background flavour of the text variant — the merchant can flip
   the "רקע" toggle in the dock to render the title + subtitle (and
   the optional CTA) directly on the page background. We strip the
   primary fill and switch typography to the page text colours so
   white-on-white never happens. */
.hero-text.hero-text--no-bg {
    background: transparent !important;
}
.hero-text.hero-text--no-bg .hero-title {
    color: var(--text, #0e1015) !important;
    text-shadow: none !important;
}
.hero-text.hero-text--no-bg .hero-subtitle {
    color: var(--text-muted, rgba(15, 23, 42, 0.62)) !important;
}
html[data-scheme="dark"] .hero-text.hero-text--no-bg .hero-title {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] .hero-text.hero-text--no-bg .hero-subtitle {
    color: rgba(255, 255, 255, 0.62) !important;
}

/* CTA button — rendered when the merchant fills in cta_label for the
   text or banner hero variant. Same primary-coloured pill on both,
   with a subtle white outline when over the dark banner overlay so
   it stays legible. */
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 12px 28px;
    background: var(--primary, #1abc9c);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
    color: #fff;
    text-decoration: none;
}
/* On the no-bg text variant the section background is the page bg,
   so the default primary pill already pops; no override needed. */
.hero-text.hero-text--no-bg .hero-cta {
    background: var(--primary, #1abc9c);
    color: #fff;
}
/* Banner variant — keep the primary pill but add a faint white
   outline so it survives over busy banner imagery. */
.hero-cta.hero-cta--on-banner {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ──────────────────────────────────────────
   BANNER VARIANT
   Full-width image with dark overlay + text.
   ────────────────────────────────────────── */
.hero-banner {
    min-height: var(--hero-h, 50vh);
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,var(--hero-overlay, 0.38));
}
.hero-banner-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 32px;
    max-width: 720px;
    width: 100%;
}
.hero-banner .hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero-banner .hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: rgba(255,255,255,.85);
    margin-top: 14px;
    line-height: 1.5;
}
.hero-banner-empty {
    min-height: var(--hero-h, 50vh);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #888;
    background: #f3f4f6;
    font-size: 14px;
}
html[data-scheme="dark"] .hero-banner-empty {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
}

/* ──────────────────────────────────────────
   VIDEO VARIANT
   YouTube embed sized by --hero-h so the height matches the
   builder's "גובה" slider. The iframe fills the wrap.
   ────────────────────────────────────────── */
.hero-video { background: #000; }
.hero-video-wrap {
    position: relative;
    width: 100%;
    height: var(--hero-h, 50vh);
    overflow: hidden;
}
.hero-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
/* ──────────────────────────────────────────
   SLIDER VARIANT
   The slider partial (storefront/components/hero/slider.blade.php)
   writes --hero-height / --hero-height-md / --hero-height-sm to the
   section's inline style; the per-breakpoint @media blocks below
   honour them with cascading fallbacks. JS for arrows/dots/autoplay
   ships inline next to the partial.
   ────────────────────────────────────────── */
/* The slider variant became a gallery: instead of one image at a time
   with prev/next, it lays out hero.slides[] in a responsive CSS grid
   driven by --hero-slider-cols-{sm|md|xl}. The merchant uploads any
   number of images via the slider drawer's gallery upload UI; the grid
   here decides how many of them sit per row at each breakpoint. */
.hero-slider {
    position: relative;
    width: 100%;
    border-radius: 14px;
    background: transparent;
}
/* Horizontal scroll-snap slider. Each slide takes a fraction of the
   visible track based on the per-breakpoint `--hero-slider-cols-*`
   CSS vars (e.g. cols-sm=1 → one slide at a time on phones, cols-xl=3
   → three at a time on desktop). Gap eats a tiny part of each tile so
   the math accounts for it. Snap-mandatory + snap-align: start makes
   each slide click cleanly into the leading edge. */
.hero-slider__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px;
    width: 100%;
    scroll-behavior: smooth;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide {
    position: relative;
    /* The per-row count maps to a fraction of the track minus the
       gap. `calc((100% - (N-1)*gap) / N)` — same formula the products
       slider uses for its breakpoint-driven flex-basis. */
    flex: 0 0 calc((100% - (var(--hero-slider-cols-sm, 1) - 1) * 10px) / var(--hero-slider-cols-sm, 1));
    scroll-snap-align: start;
    height: var(--hero-height-sm, var(--hero-height-md, var(--hero-height, 50vh)));
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    .hero-slider__track { gap: 12px; }
    .hero-slider__slide {
        flex-basis: calc((100% - (var(--hero-slider-cols-md, var(--hero-slider-cols-sm, 2)) - 1) * 12px) / var(--hero-slider-cols-md, var(--hero-slider-cols-sm, 2)));
        height: var(--hero-height-md, var(--hero-height, 50vh));
    }
}
@media (min-width: 1100px) {
    .hero-slider__track { gap: 14px; }
    .hero-slider__slide {
        flex-basis: calc((100% - (var(--hero-slider-cols-xl, var(--hero-slider-cols-md, 3)) - 1) * 14px) / var(--hero-slider-cols-xl, var(--hero-slider-cols-md, 3)));
        height: var(--hero-height, 50vh);
    }
}
/* Pagination dots — one per slide, active stretches into a pill. Same
   family the categories / blog / reviews / products sliders use, so
   the visual rhythm matches across every horizontal-scroll component. */
.hero-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.hero-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s ease;
}
.hero-slider__dot:hover { background: rgba(0, 0, 0, 0.30); }
.hero-slider__dot.is-active {
    width: 22px;
    background: var(--primary, var(--primary-color, #111));
}
html[data-scheme="dark"] .hero-slider__dot { background: rgba(255, 255, 255, 0.22); }
html[data-scheme="dark"] .hero-slider__dot:hover { background: rgba(255, 255, 255, 0.36); }
html[data-scheme="dark"] .hero-slider__dot.is-active { background: #fff; }
/* Preview stub slides — render when the merchant hasn't uploaded any
   slides yet. A soft primary-tinted gradient stands in for the image
   and a centred placeholder icon hints "drop an image here". The
   overlay is hidden on stubs so the icon stays legible against the
   tint instead of being washed out by the dark scrim. */
.hero-slider__slide--stub {
    background:
        linear-gradient(135deg,
            rgba(var(--primary-rgb, 17, 17, 17), 0.18) 0%,
            rgba(var(--primary-rgb, 17, 17, 17), 0.06) 100%),
        #f3f4f6;
    color: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
}
.hero-slider__slide--stub .hero-slider__overlay { display: none; }
.hero-slider__slide--stub .hero-slider__content {
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    padding: 16px;
}
.hero-slider__slide--stub .hero-slider__title {
    color: rgba(0, 0, 0, 0.75) !important;
    font-size: 18px;
    font-weight: 600;
    margin: 12px 0 0 0;
    text-shadow: none;
}
.hero-slider__stub-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0.32);
    display: block;
}
/* Dark scheme — invert the surface so stubs still read as placeholders
   on a dark page instead of glowing white tiles. */
html[data-scheme="dark"] .hero-slider__slide--stub {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 100%),
        #1a1a22;
    color: rgba(255, 255, 255, 0.55);
}
html[data-scheme="dark"] .hero-slider__slide--stub .hero-slider__content,
html[data-scheme="dark"] .hero-slider__slide--stub .hero-slider__title {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-scheme="dark"] .hero-slider__stub-icon {
    color: rgba(255, 255, 255, 0.32);
}
.hero-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, calc(var(--hero-overlay) + 0.1)) 0%,
        rgba(0, 0, 0, var(--hero-overlay)) 70%,
        rgba(0, 0, 0, calc(var(--hero-overlay) - 0.05)) 100%);
    pointer-events: none;
}
.hero-slider__content {
    position: relative;
    z-index: 1;
    padding: 32px 48px;
    max-width: 620px;
    color: #fff;
    text-align: start;
}
.hero-slider__title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero-slider__subtitle {
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.45;
    margin: 0;
    opacity: 0.95;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero-slider__price {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 18px;
    background: var(--primary-color, #fff);
    color: #111;
    border-radius: 100px;
    font-weight: 800;
    font-size: 16px;
}

/* Nav arrows — logical inset properties so LTR and RTL both land
   on the visually-correct edge without an explicit [dir="rtl"] flip. */
.hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.18s, transform 0.18s;
}
.hero-slider__nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.06);
}
.hero-slider__nav--prev { inset-inline-start: 14px; }
.hero-slider__nav--next { inset-inline-end: 14px; }

.hero-slider__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5;
}
.hero-slider__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.18s, width 0.18s;
    padding: 0;
}
.hero-slider__dot.is-active {
    background: #fff;
    width: 26px;
    border-radius: 5px;
}

/* ──────────────────────────────────────────
   PER-BREAKPOINT HEIGHTS
   The builder lets merchants set a separate height for desktop, tablet,
   and mobile. Each var falls back to the next-larger breakpoint's value
   if unset, so a store that only configured the desktop value still
   gets a sensible banner on small screens.
   ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-text,
    .hero-banner,
    .hero-banner-empty { min-height: var(--hero-h-md, var(--hero-h, 50vh)); }
    .hero-video-wrap   { height:     var(--hero-h-md, var(--hero-h, 50vh)); }
    /* Slider height moved onto .hero-slider__slide (each slide gets
       its own height) so the grid layout sizes each cell directly. */
}
@media (max-width: 640px) {
    .hero-text,
    .hero-banner,
    .hero-banner-empty { min-height: var(--hero-h-sm, var(--hero-h-md, var(--hero-h, 50vh))); }
    .hero-video-wrap   { height:     var(--hero-h-sm, var(--hero-h-md, var(--hero-h, 50vh))); }
    .hero-slider {
        /* legacy no-op kept so the media-query block stays balanced */
        border-radius: 10px;
    }
    .hero-slider__content { padding: 24px 22px; }
    .hero-slider__nav     { width: 34px; height: 34px; }
}

/* ──────────────────────────────────────────
   Responsive tweaks
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .hero-text,
    .hero-banner { min-height: 260px; padding: 48px 20px; }
    .hero-video-wrap { padding-bottom: 56.25%; } /* 16:9 on mobile */
}

/* =========================================================================
   WOODMART POLISH LAYER for hero variants
   ========================================================================= */

.hero-section {
    border-radius: 14px;
    margin-bottom: 24px;
    position: relative;
    isolation: isolate;
}

/* ── TEXT variant: gradient background + animated entrance ── */
.hero-text {
    background: linear-gradient(135deg,
        var(--primary, var(--primary-color, #1abc9c)) 0%,
        color-mix(in srgb, var(--primary, var(--primary-color, #1abc9c)) 65%, #000) 100%) !important;
    position: relative;
    overflow: hidden;
}
.hero-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 60% at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.hero-text-inner {
    position: relative;
    z-index: 1;
    animation: hero-fade-up 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}
.hero-text .hero-title {
    letter-spacing: -0.025em;
    font-weight: 800;
}
.hero-text .hero-subtitle { margin-top: 16px; }

/* ── BANNER variant: stronger gradient overlay + CTA ── */
.hero-banner {
    border-radius: 14px;
    overflow: hidden;
    background-position: center !important;
}
.hero-banner-overlay {
    background: linear-gradient(135deg,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.45) 45%,
        rgba(0,0,0,0.25) 100%) !important;
}
.hero-banner-inner {
    animation: hero-fade-up 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}
.hero-banner .hero-title { letter-spacing: -0.025em; }
.hero-banner .hero-cta {
    display: inline-block;
    margin-top: 22px;
    padding: 13px 30px;
    background: #fff;
    color: #111;
    border-radius: 100px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.hero-banner .hero-cta:hover {
    background: var(--primary-color, #111);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

/* ── VIDEO variant ── */
.hero-video {
    border-radius: 14px;
    overflow: hidden;
}

/* ── Entrance animation ── */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile refinements ── */
@media (max-width: 768px) {
    .hero-section { border-radius: 10px; margin-bottom: 18px; }
    .hero-text .hero-title,
    .hero-banner .hero-title { font-size: clamp(1.75rem, 6vw, 2.2rem) !important; }
    .hero-banner .hero-cta { padding: 11px 22px; font-size: 12px; }
}