/* A&D hero — standalone, versioned, no dependencies.
   Rules are scoped under .ad-hero; no global selectors, no @import, no url() assets. */

.ad-hero {
  --ad-hero-ink: #ffffff;
  --ad-hero-green: #2e7d32;
  --ad-hero-green-dark: #1f5c24;
  --ad-hero-overlay: linear-gradient(180deg, rgba(10, 26, 12, 0.30) 0%, rgba(10, 26, 12, 0.22) 45%, rgba(10, 26, 12, 0.58) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 560px;
  min-height: max(560px, calc(100svh - 138px));
  height: auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: #0f1c12;
  color: var(--ad-hero-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ad-hero *,
.ad-hero *::before,
.ad-hero *::after { box-sizing: border-box; }

/* Media layer ------------------------------------------------------------ */
.ad-hero__media { position: absolute; inset: 0; z-index: 0; }

.ad-hero__poster {
  /* Absolute + object-fit so the photo fills a video-shaped box without
     letterboxing and without shifting layout (no reflow when the iframe
     appears on top of it). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The player holder is mounted (layout-measurable) as soon as an embed exists
   so background playback can start, but it stays invisible until playback is
   confirmed: display:none is never used, because it can stop startup. */
.ad-hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.ad-hero.is-playing .ad-hero__video { opacity: 1; visibility: visible; }

.ad-hero__video iframe,
.ad-hero__video > video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /* Mobile/portrait crop: cover the hero instead of letterboxing. */
  min-width: 177.78vh; /* 16/9 of the viewport height */
  min-height: 56.25vw; /* 9/16 of the viewport width */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none; /* decorative layer; controls live in our own button */
}

/* Until playback is confirmed the player stays hidden, so the photo shows. */
.ad-hero__video[hidden] { display: none; }

.ad-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--ad-hero-overlay);
  pointer-events: none;
}

/* Copy ------------------------------------------------------------------ */
.ad-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
}

.ad-hero__content { max-width: 42rem; }

.ad-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ad-hero__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--ad-hero-ink);
  text-wrap: balance;
}

.ad-hero__text {
  margin: 0 0 28px;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
}

.ad-hero__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ad-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ad-hero__btn--primary { background-color: var(--ad-hero-green); color: #fff; }
.ad-hero__btn--primary:hover,
.ad-hero__btn--primary:focus-visible { background-color: var(--ad-hero-green-dark); }

.ad-hero__btn--ghost { border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.ad-hero__btn--ghost:hover,
.ad-hero__btn--ghost:focus-visible { background-color: rgba(255, 255, 255, 0.16); }

/* Controls -------------------------------------------------------------- */
.ad-hero__controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}

.ad-hero__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background-color: rgba(12, 26, 14, 0.62);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.ad-hero__toggle:hover { background-color: rgba(12, 26, 14, 0.82); }
.ad-hero__toggle[hidden] { display: none; }

.ad-hero__toggle-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px; /* play triangle */
  border-color: transparent transparent transparent #fff;
}

.ad-hero__toggle[aria-pressed="true"] .ad-hero__toggle-icon {
  width: 12px;
  height: 14px;
  border: 0;
  background:
    linear-gradient(#fff, #fff) left / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 4px 100% no-repeat; /* pause bars */
}

/* Focus visibility everywhere (keyboard control). */
.ad-hero :focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}

/* Screen-reader only text. */
.ad-hero__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Small screens: shorter hero, content anchored to the bottom. */
@media (max-width: 767px) {
  .ad-hero { min-height: 480px; max-height: none; align-items: flex-end; }
  .ad-hero__inner { padding: 64px 18px 88px; }
  .ad-hero__controls { right: 12px; bottom: 12px; }
  .ad-hero__title { text-wrap: wrap; }
}

/* Respect reduced motion: drop height animation-ish sizing and transitions. */
@media (prefers-reduced-motion: reduce) {
  .ad-hero__btn { transition: none; }
}

/* No-JS / JS-failed safety: tokens are injected for JS-capable browsers only. */
.ad-hero:not(.is-ready) .ad-hero__controls { display: none; }

/* Forced-colors / high contrast keeps text legible over the photo. */
@media (forced-colors: active) {
  .ad-hero__scrim { display: none; }
  .ad-hero { background-color: Canvas; color: CanvasText; }
}

/* If the fallback photo itself fails to load, the hero still reads as the dark
   site surface rather than an empty white band. */
.ad-hero.is-photo-missing { background-color: #0f1c12; }

/* Isolate the component from the archived Astra heading/button rules. */
.ad-hero .ad-hero__title { font-family: inherit; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; text-transform: none; color: #fff; }
.ad-hero .ad-hero__btn { color: #fff; text-decoration: none; }
.ad-hero .ad-hero__toggle { text-transform: none; letter-spacing: normal; }
.ad-hero .ad-hero__scrim { background: linear-gradient(90deg, rgba(8,25,13,.72), rgba(8,25,13,.22)); }
.ad-hero .ad-hero__inner { padding-top: 70px; padding-bottom: 92px; }
@media(max-width:767px) {
  .ad-hero { min-height: 620px; }
  .ad-hero .ad-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .ad-hero .ad-hero__inner { padding: 56px 20px 100px; }
  .ad-hero .ad-hero__scrim { background: rgba(8,25,13,.6); }
}

.ad-hero .ad-hero__poster { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ad-hero .ad-hero__media { container-type: size; }
@supports(width: 1cqw) {
  .ad-hero .ad-hero__video iframe { width: max(100cqw, 177.778cqh); height: max(100cqh, 56.25cqw); min-width: 0; min-height: 0; max-width: none; }
}