/* Unified hero component (.ch-hero) — used by /campana/{slug}/, the homepage
   campaign hero block, and each Promotion slide in the homepage swiper.

   All theme-able knobs come from inline CSS custom properties set by hero.phtml:
     --ch-text, --ch-bg-color, --ch-bg-gradient, --ch-img-fit,
     --ch-focal-{desktop|tablet|mobile}, --ch-text-x/y/w[-tablet/-mobile],
     --ch-scrim, --ch-badge.
   Layout, scrim anchor, text anchor, and text-align come in as modifier classes. */

.ch-hero {
    position: relative;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    color: var(--ch-text, #fff);
    background: var(--ch-bg-color, #0f172a);
    isolation: isolate;
}

@media (max-width: 899px) { .ch-hero { aspect-ratio: 16 / 9; min-height: 240px; } }
@media (max-width: 599px) { .ch-hero { aspect-ratio: 4 / 5;  min-height: 360px; } }

.ch-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--ch-bg-gradient, none);
    z-index: 0;
    pointer-events: none;
}

/* ------------- Image layer ------------- */
.ch-hero__picture,
.ch-hero__picture img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.ch-hero__picture img {
    object-fit: var(--ch-img-fit, cover);
    object-position: var(--ch-focal-desktop, 50% 50%);
    display: block;
}
@media (max-width: 899px) {
    .ch-hero__picture img { object-position: var(--ch-focal-tablet, var(--ch-focal-desktop, 50% 50%)); }
}
@media (max-width: 599px) {
    .ch-hero__picture img { object-position: var(--ch-focal-mobile, var(--ch-focal-desktop, 50% 50%)); }
}

/* ------------- Scrim variants ------------- */
.ch-hero__scrim {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--ch-scrim, .6);
}
.ch-scrim--bottom { background: linear-gradient(to top,    rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 45%, transparent 75%); }
.ch-scrim--top    { background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 45%, transparent 75%); }
.ch-scrim--left   { background: linear-gradient(to right,  rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, transparent 75%); }
.ch-scrim--right  { background: linear-gradient(to left,   rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, transparent 75%); }
.ch-scrim--full   { background: rgba(0,0,0,.55); }
.ch-scrim--radial { background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.85) 90%); }

/* ------------- Foreground / overlay cutout ------------- */
.ch-hero__overlay {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    --ch-overlay-size: 35%;
}
.ch-hero__overlay img { width: 100%; height: auto; display: block; }
.ch-hero__overlay--right  { right: 4%;  bottom: 0; width: var(--ch-overlay-size); }
.ch-hero__overlay--left   { left: 4%;   bottom: 0; width: var(--ch-overlay-size); }
.ch-hero__overlay--top    { left: 50%;  top: 4%;   width: var(--ch-overlay-size); transform: translateX(-50%); }
.ch-hero__overlay--bottom { left: 50%;  bottom: 0; width: var(--ch-overlay-size); transform: translateX(-50%); }
.ch-hero__overlay--free   { width: var(--ch-overlay-size); }

/* ------------- Text block ------------- */
.ch-hero__text {
    position: absolute;
    z-index: 4;
    left:  var(--ch-text-x, 6%);
    top:   var(--ch-text-y, 92%);
    max-width: var(--ch-text-w, 60%);
    padding: 1.25rem;
    color: var(--ch-text, #fff);
    text-align: left;
}
.ch-hero--text-center .ch-hero__text { text-align: center; }
.ch-hero--text-right  .ch-hero__text { text-align: right; }

/* Anchor → transform mapping (interprets text X/Y as the anchor point) */
.ch-hero__text--top-left      { transform: translate(0, 0); }
.ch-hero__text--top-center    { transform: translate(-50%, 0); }
.ch-hero__text--top-right     { transform: translate(-100%, 0); }
.ch-hero__text--middle-left   { transform: translate(0, -50%); }
.ch-hero__text--middle-center { transform: translate(-50%, -50%); }
.ch-hero__text--middle-right  { transform: translate(-100%, -50%); }
.ch-hero__text--bottom-left   { transform: translate(0, -100%); }
.ch-hero__text--bottom-center { transform: translate(-50%, -100%); }
.ch-hero__text--bottom-right  { transform: translate(-100%, -100%); }

.ch-hero__text--backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
}

@media (max-width: 899px) {
    .ch-hero__text {
        left:  var(--ch-text-x-tablet, var(--ch-text-x, 6%));
        top:   var(--ch-text-y-tablet, var(--ch-text-y, 92%));
        max-width: var(--ch-text-w-tablet, var(--ch-text-w, 70%));
    }
}
@media (max-width: 599px) {
    .ch-hero__text {
        left:  var(--ch-text-x-mobile, var(--ch-text-x, 6%));
        top:   var(--ch-text-y-mobile, var(--ch-text-y, 92%));
        max-width: var(--ch-text-w-mobile, var(--ch-text-w, 88%));
        padding: 0.85rem;
    }
}

/* ------------- Text content -------------
   Selectors are scoped under `.ch-hero` to win over global h1/h2/h3 rules
   (e.g. common.css forces h2 to a small blue style; lots of pages set their
   own h2 sizes). Font-family + size use explicit media queries instead of
   clamp() so older/odd browsers can't fall back to a giant UA default. */
.ch-hero .ch-hero__badge {
    display: inline-block;
    background: var(--ch-badge, #e0285a);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    font-family: inherit;
}
.ch-hero .ch-hero__eyebrow {
    display: block;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.4rem;
    font-family: inherit;
}
.ch-hero .ch-hero__title {
    font-family: 'Lato', 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 28px;
    line-height: 1.1;
    margin: 0 0 0.6rem 0;
    font-weight: 800;
    color: var(--ch-text, #fff);
    border: 0;
    padding: 0;
    background: transparent;
    display: block;
    text-shadow: none;
    letter-spacing: -0.01em;
}
@media (min-width: 600px) { .ch-hero .ch-hero__title { font-size: 36px; } }
@media (min-width: 900px) { .ch-hero .ch-hero__title { font-size: 44px; } }
@media (min-width: 1280px){ .ch-hero .ch-hero__title { font-size: 52px; } }

.ch-hero .ch-hero__subtitle {
    font-family: 'Lato', 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 1.1rem 0;
    opacity: 0.95;
    color: var(--ch-text, #fff);
}
@media (min-width: 900px)  { .ch-hero .ch-hero__subtitle { font-size: 17px; } }
@media (min-width: 1280px) { .ch-hero .ch-hero__subtitle { font-size: 18px; } }
.ch-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ch-hero__cta {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ch-hero__cta--solid    { background: #ff6a00; color: #fff; }
.ch-hero__cta--solid:hover { background: #e85d00; transform: translateY(-1px); }
.ch-hero__cta--outline  { background: transparent; color: #fff; border: 2px solid currentColor; }
.ch-hero__cta--outline:hover { background: rgba(255,255,255,.12); }
.ch-hero__cta--ghost    { background: transparent; color: #fff; text-decoration: underline; padding-left: 0; padding-right: 0; }

/* ------------- Layout-specific tweaks (most layout work is done via text x/y vars) ------------- */
.ch-hero--image-only-text-below {
    aspect-ratio: auto;
    min-height: 0;
}
.ch-hero--image-only-text-below .ch-hero__picture,
.ch-hero--image-only-text-below .ch-hero__picture img {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 7;
}
.ch-hero--image-only-text-below .ch-hero__text {
    position: relative;
    inset: auto;
    transform: none !important;
    max-width: 1000px;
    margin: 1.5rem auto 2rem auto;
    padding: 0 1.25rem;
    color: #1a1a1a;
}
.ch-hero--image-only-text-below.ch-hero--text-center .ch-hero__text { text-align: center; }
.ch-hero--image-only-text-below .ch-hero__title { color: #1a1a1a; }

/* In-slider context: hero becomes the full slide backdrop. Aspect ratio and
   min-height are dropped so it stretches to whatever height .hero-slider sets. */
.ch-hero--in-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 0;
}
.swiper-slide--has-products .ch-hero__text {
    max-width: var(--ch-text-w-with-products, 50%);
}
@media (max-width: 599px) {
    .swiper-slide--has-products .ch-hero__text { max-width: var(--ch-text-w-mobile, 88%); }
}

/* ------------- Per-breakpoint layout swap (mobile-only override class) ------------- */
@media (max-width: 599px) {
    .ch-hero--mobile-centered .ch-hero__text {
        left: 50% !important;
        top:  50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center;
    }
    .ch-hero--mobile-full-bleed-bottom .ch-hero__text {
        left: 6% !important;
        top:  92% !important;
        transform: translate(0, -100%) !important;
    }
}

/* ============================================================================
   COUNTDOWN — rendered inside .ch-hero__text when the campaign has a
   countdown_end_at deadline. Scoped under .ch-hero so the styles don't bleed
   onto legacy .campaign-countdown elements outside the hero.
   ============================================================================ */
.ch-hero .ch-hero__countdown {
    display: inline-block;
    margin-bottom: 1rem;
    text-align: left;
}
.ch-hero .ch-hero__countdown-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.65;
    margin-bottom: 8px;
    color: var(--ch-text, #fff);
    border: 0;
    padding: 0;
    background: transparent;
}
.ch-hero .ch-hero__countdown-timer {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
}
.ch-hero .ch-hero__countdown-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ch-hero .ch-hero__countdown-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-family: 'Lato', 'Roboto', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--ch-text, #fff);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ch-hero .ch-hero__countdown-cap {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.55;
    color: var(--ch-text, #fff);
}
.ch-hero .ch-hero__countdown-sep {
    font-size: 22px;
    font-weight: 700;
    opacity: 0.3;
    margin: 14px 6px 0;
    color: var(--ch-text, #fff);
}
@media (min-width: 900px) {
    .ch-hero .ch-hero__countdown-value { min-width: 64px; height: 64px; font-size: 28px; }
    .ch-hero .ch-hero__countdown-sep   { font-size: 26px; }
}

/* ============================================================================
   COVER LINK — wraps the full hero in a clickable area when the design has
   no CTA labels but a primary URL is configured. Sits above scrim/decoration
   but below the text block (text would block clicks if it had its own links).
   ============================================================================ */
.ch-hero__cover-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: transparent;
    text-indent: -9999px;
    overflow: hidden;
}
.ch-hero__cover-link:focus-visible {
    outline: 3px solid #ff6a00;
    outline-offset: -3px;
}
/* When both a cover-link AND a text block exist, the text sits on top so a
   user can still read it; the link area covers everything else.            */
.ch-hero:has(.ch-hero__cover-link) .ch-hero__text { z-index: 5; pointer-events: none; }

/* ============================================================================
   DECORATIONS — opt-in animated background effects. Each preset adds a set
   of decorative children (rendered by hero.phtml) that pick up their colors
   from CSS variables defined here on the .ch-hero--decoration-{preset} root.
   ============================================================================ */

/* Default palette (used by aurora-* + particles presets). */
.ch-hero--decoration-aurora,
.ch-hero--decoration-aurora-particles,
.ch-hero--decoration-particles {
    --chero-aurora-1: rgba(56, 189, 248, 0.18);
    --chero-aurora-2: rgba(139, 92, 246, 0.15);
    --chero-aurora-3: rgba(20, 184, 166, 0.12);
    --chero-glow-1:   rgba(56, 189, 248, 0.35);
    --chero-glow-2:   rgba(139, 92, 246, 0.30);
    --chero-particle-color: rgba(255, 255, 255, 0.6);
    --chero-particle-glow:  rgba(56, 189, 248, 0.7);
}

/* ── Aurora (sweeping color washes + glow orbs) ─────────────────────────── */
.ch-hero .chero-aurora {
    position: absolute;
    inset: -50%;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 55% at 40% 50%, var(--chero-aurora-3) 0%, transparent 60%),
        radial-gradient(ellipse 55% 35% at 75% 45%, var(--chero-aurora-1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 25% 30%, var(--chero-aurora-2) 0%, transparent 65%);
    animation: ch-aurora-drift 22s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
@keyframes ch-aurora-drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-5%, 4%) rotate(3deg); }
}

.ch-hero .chero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 2;
}
.ch-hero .chero-glow-1 {
    width: 420px; height: 420px;
    top: -80px; right: -60px;
    background: var(--chero-glow-1);
    animation: ch-glow-1 14s ease-in-out infinite alternate;
}
.ch-hero .chero-glow-2 {
    width: 360px; height: 360px;
    bottom: -70px; left: -40px;
    background: var(--chero-glow-2);
    animation: ch-glow-2 18s ease-in-out infinite alternate;
}
@keyframes ch-glow-1 {
    0%   { transform: translate(0, 0) scale(1);     opacity: 0.6; }
    100% { transform: translate(-35px, 25px) scale(1.12); opacity: 0.8; }
}
@keyframes ch-glow-2 {
    0%   { transform: translate(0, 0) scale(1);     opacity: 0.5; }
    100% { transform: translate(30px, -20px) scale(1.15); opacity: 0.7; }
}

/* ── Rings (slow rotating outlines) ─────────────────────────────────────── */
.ch-hero .chero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.04);
    pointer-events: none;
    z-index: 2;
}
.ch-hero .chero-ring-1 {
    width: 600px; height: 600px;
    top: -180px; right: -160px;
    animation: ch-ring-spin 80s linear infinite;
}
.ch-hero .chero-ring-2 {
    width: 450px; height: 450px;
    bottom: -120px; left: -110px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.03);
    animation: ch-ring-spin 60s linear infinite reverse;
}
.ch-hero .chero-ring-3 {
    width: 200px; height: 200px;
    top: 25%; left: 12%;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.025);
    animation: ch-ring-spin 100s linear infinite;
}
@keyframes ch-ring-spin {
    to { transform: rotate(360deg); }
}

/* ── Particles (drifting dots) ─────────────────────────────────────────── */
.ch-hero .chero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.ch-hero .chero-particles span {
    position: absolute;
    border-radius: 50%;
    background: var(--chero-particle-color, rgba(255,255,255,0.6));
    box-shadow: 0 0 8px 2px var(--chero-particle-glow, rgba(56,189,248,0.7));
    animation: ch-float var(--p-dur) var(--p-delay) ease-in-out infinite;
}
.ch-hero .chero-particles span:nth-child(1) { left: 8%;  top: 82%; width: 4px; height: 4px; --p-dur: 9s;  --p-delay: 0s;   --p-dx: 18px;  --p-dy: -130px; }
.ch-hero .chero-particles span:nth-child(2) { left: 20%; top: 74%; width: 2px; height: 2px; --p-dur: 12s; --p-delay: 2s;   --p-dx: -12px; --p-dy: -95px;  }
.ch-hero .chero-particles span:nth-child(3) { left: 42%; top: 88%; width: 3px; height: 3px; --p-dur: 8s;  --p-delay: 0.8s; --p-dx: 10px;  --p-dy: -150px; }
.ch-hero .chero-particles span:nth-child(4) { left: 62%; top: 78%; width: 2px; height: 2px; --p-dur: 13s; --p-delay: 3.5s; --p-dx: -22px; --p-dy: -105px; }
.ch-hero .chero-particles span:nth-child(5) { left: 78%; top: 86%; width: 3px; height: 3px; --p-dur: 10s; --p-delay: 1.2s; --p-dx: 14px;  --p-dy: -120px; }
.ch-hero .chero-particles span:nth-child(6) { left: 33%; top: 68%; width: 2px; height: 2px; --p-dur: 14s; --p-delay: 4s;   --p-dx: -8px;  --p-dy: -85px;  }
.ch-hero .chero-particles span:nth-child(7) { left: 52%; top: 92%; width: 4px; height: 4px; --p-dur: 7s;  --p-delay: 1.8s; --p-dx: 25px;  --p-dy: -140px; }
.ch-hero .chero-particles span:nth-child(8) { left: 90%; top: 70%; width: 2px; height: 2px; --p-dur: 15s; --p-delay: 2.8s; --p-dx: -16px; --p-dy: -110px; }
@keyframes ch-float {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    12%      { opacity: 0.8; }
    50%      { transform: translate(var(--p-dx), var(--p-dy)); opacity: 1; }
    88%      { opacity: 0.6; }
}

/* ── Radial-blue (the legacy promotion-slider treatment) ────────────────── */
.ch-hero__slide-mask {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(102deg,
            rgba(6, 16, 42, 0.96) 0%,
            rgba(6, 16, 42, 0.88) 28%,
            rgba(6, 16, 42, 0.42) 58%,
            transparent           86%),
        linear-gradient(to top, rgba(6, 16, 42, 0.55) 0%, transparent 60%);
}
.ch-hero__slide-radial {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 88% 18%, rgba(255, 220, 180, 0.18) 0%, rgba(255, 220, 180, 0) 55%),
        radial-gradient(60% 60% at 8% 92%, rgba(232, 83, 14, 0.18) 0%, rgba(232, 83, 14, 0) 60%);
}

/* Respect reduced-motion preferences for all decoration animations. */
@media (prefers-reduced-motion: reduce) {
    .ch-hero .chero-aurora,
    .ch-hero .chero-glow,
    .ch-hero .chero-ring,
    .ch-hero .chero-particles span {
        animation: none !important;
    }
}