/* assets/css/components/front-hero.css
 * @layer components — Homepage hero section
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     HERO — Static (V2) with trust badge + CTAs
     ════════════════════════════════════════════════════════════════════ */

  .front-hero {
    position: relative;
    min-block-size: clamp(28rem, 60vh, 42rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding-block-start: calc(var(--header-height, 4.5rem) + var(--space-l));
    padding-inline: var(--gutter);
  }

  .front-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      oklch(12% 0.007 210 / 90%),
      oklch(15% 0.03 191.9 / 50%) 45%,
      oklch(12% 0.007 210 / 80%)
    );
    z-index: 1;
  }

  .front-hero__content {
    position: relative;
    z-index: 2;
  }

  .front-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-l);
    padding-block: var(--section-space-l);
  }

  /* ── Trust Badge ── */
  .front-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-m);
    border-radius: var(--radius-full);
    background: oklch(100% 0 0 / 10%);
    backdrop-filter: blur(4px);
  }

  .front-hero__badge-icon {
    color: var(--secondary);
    flex-shrink: 0;
  }

  .front-hero__badge-text {
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: oklch(100% 0 0 / 80%);
  }

  .front-hero__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
  }

  .front-hero__description {
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
    color: oklch(100% 0 0 / 80%);
    max-inline-size: 40rem;
  }

  .front-hero__actions {
    display: flex;
    gap: var(--space-m);
    flex-wrap: wrap;
    justify-content: center;
  }

  @media (max-width: 48em) {
    .front-hero__actions {
      flex-direction: column;
      width: 100%;
    }
    .front-hero__actions .btn,
    .front-hero__actions [class*="btn--icon-"] {
      width: 100%;
      justify-content: center;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     HERO — Splide video/image crossfade slider (kept for future use)
     ════════════════════════════════════════════════════════════════════ */

  .front-hero__splide,
  .front-hero__splide .splide__track,
  .front-hero__splide .splide__list {
    block-size: 100%;
  }

  .front-hero__slide {
    position: relative;
    min-block-size: clamp(28rem, 68vh, 50rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--primary-ultra-dark);
    --slide-bg: none;
  }

  .front-hero__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .front-hero__bg-image {
    position: absolute;
    inset: 0;
    background-image: var(--slide-bg);
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
  }

  .front-hero__bg-fallback {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      140deg,
      var(--primary-ultra-dark) 0%,
      var(--primary-dark)       55%,
      oklch(38% 0.09 191.9)     100%
    );
    z-index: 0;
  }

  .front-hero__slide::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 10rem;
    background: linear-gradient(to bottom, transparent, oklch(8% 0.025 191.9 / 60%));
    z-index: 2;
    pointer-events: none;
  }

  /* ── Progress bar ── */
  .front-hero__progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 3px;
    background-color: oklch(100% 0 0 / 15%);
    z-index: 10;
  }

  .front-hero__progress-bar {
    block-size: 100%;
    background-color: var(--secondary);
    inline-size: 0%;
    transform-origin: left;
  }

  /* ── Splide pagination dots ── */
  .front-hero__pagination {
    position: absolute;
    inset-block-end: var(--space-l);
    inset-inline: 0;
    justify-content: center;
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10;
  }

  .front-hero__dot {
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-full);
    background-color: oklch(100% 0 0 / 35%);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .front-hero__dot.is-active {
    background-color: var(--secondary);
    transform: scale(1.4);
  }

  .front-hero__splide.splide--fade .splide__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.4s ease;
  }

  .front-hero__splide.splide--fade .splide__slide.is-active {
    opacity: 1;
    z-index: 1;
    position: relative;
  }

  /* Secondary (blush) CTA on dark bg */
  .front-hero__cta.btn--secondary {
    --btn-secondary-bg:       var(--secondary);
    --btn-secondary-text:     oklch(18% 0.006 30);
    --btn-secondary-bg-hover: var(--secondary-hover, oklch(86% 0.048 30));
  }

}