/**
 * CF Hero — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Two-column hero: slide carousel (left) + brand pulse-wave SVG (right).
 *
 * Modes:
 *   .cf-hero--light-sky    Briefing-grade
 *   .cf-hero--light-slate  Analytical / operational
 *   .cf-hero--light-paper  Editorial (DEFAULT — matches mockup)
 *   .cf-hero--light-mint   Positive outcome / growth
 *   .cf-hero--dark-navy    Brand authority anchor
 *   .cf-hero--dark-ops     GSOC / command center
 *
 * Override variables:
 *   --cfh-bg-soft / --cfh-bg   gradient endpoints (top → bottom)
 *   --cfh-eyebrow              eyebrow color
 *   --cfh-heading              h1 color
 *   --cfh-accent               <em> italic accent color
 *   --cfh-lead                 lead paragraph color
 *   --cfh-line                 dot indicator + section bottom border
 *   --cfh-btn-primary-bg       primary button background
 *   --cfh-btn-primary-fg       primary button text
 *   --cfh-btn-primary-hov      primary button hover background
 *   --cfh-btn-ghost            ghost button text + underline
 *   --cfh-btn-ghost-hov        ghost button hover
 */

.cf-hero {
  /* Base = light_paper (the mockup). Mode classes below override. */
  --cfh-bg-soft: var(--cf-blue-gray-lightest);
  --cfh-bg: var(--cf-white);
  --cfh-eyebrow: var(--cf-sky-mid);
  --cfh-heading: var(--cf-navy);
  --cfh-accent: var(--cf-sky-mid);
  --cfh-lead: var(--cf-blue-gray);
  --cfh-line: var(--cf-blue-gray-tint);
  --cfh-btn-primary-bg: var(--cf-navy);
  --cfh-btn-primary-fg: var(--cf-white);
  --cfh-btn-primary-hov: var(--cf-sky-mid);
  --cfh-btn-ghost: var(--cf-navy);
  --cfh-btn-ghost-hov: var(--cf-sky-mid);

  background: linear-gradient(180deg, var(--cfh-bg-soft) 0%, var(--cfh-bg) 100%);
  color: var(--cfh-lead);
  border-bottom: 1px solid var(--cfh-line);
  /* Top padding is 0 so the inner content sits flush to the section's
     top edge (the navbar / preceding section's bottom rule is what
     should define the seam, not a band of empty hero gradient).
     Horizontal padding 32 / 40 keeps the serif heading + visual
     column off the viewport edges; bottom padding gives the hero
     breathing room above whatever follows. */
  padding: 0 32px 56px;
  font-family: var(--cf-font-stack);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .cf-hero {
    padding: 0 40px 72px;
  }
}

.cf-hero *,
.cf-hero *::before,
.cf-hero *::after {
  box-sizing: inherit;
}

.cf-hero--fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Modes ──────────────────────────────────────────────────────────── */
.cf-hero--light-sky {
  --cfh-bg-soft: var(--cf-sky-light);
  --cfh-bg: var(--cf-white);
  --cfh-eyebrow: var(--cf-sky-mid);
  --cfh-heading: var(--cf-navy);
  --cfh-accent: var(--cf-sky-mid);
  --cfh-lead: var(--cf-blue-gray);
}

.cf-hero--light-slate {
  --cfh-bg-soft: var(--cf-blue-gray-lightest);
  --cfh-bg: var(--cf-white);
  --cfh-eyebrow: var(--cf-navy);
  --cfh-heading: var(--cf-navy);
  --cfh-accent: var(--cf-navy);
  --cfh-lead: var(--cf-blue-gray);
}

.cf-hero--light-paper {
  --cfh-bg-soft: var(--cf-blue-gray-lightest);
  --cfh-bg: var(--cf-white);
  --cfh-eyebrow: var(--cf-sky-mid);
  --cfh-heading: var(--cf-navy);
  --cfh-accent: var(--cf-sky-mid);
  --cfh-lead: var(--cf-blue-gray);
}

.cf-hero--light-mint {
  --cfh-bg-soft: var(--cf-apple-pale);
  --cfh-bg: var(--cf-white);
  --cfh-eyebrow: var(--cf-leaf);
  --cfh-heading: var(--cf-navy);
  --cfh-accent: var(--cf-leaf);
  --cfh-lead: var(--cf-blue-gray);
  --cfh-btn-primary-bg: var(--cf-leaf);
  --cfh-btn-primary-fg: var(--cf-navy);
  --cfh-btn-primary-hov: var(--cf-navy);
}

.cf-hero--dark-navy {
  --cfh-bg-soft: var(--cf-navy);
  --cfh-bg: var(--cf-navy-lifted);
  --cfh-eyebrow: var(--cf-sky);
  --cfh-heading: var(--cf-navy-lightest);
  --cfh-accent: var(--cf-sky);
  --cfh-lead: color-mix(in srgb, var(--cf-navy-lightest) 75%, transparent);
  --cfh-line: rgba(255, 255, 255, 0.10);
  --cfh-btn-primary-bg: var(--cf-sky);
  --cfh-btn-primary-fg: var(--cf-navy);
  --cfh-btn-primary-hov: var(--cf-navy-lightest);
  --cfh-btn-ghost: var(--cf-navy-lightest);
  --cfh-btn-ghost-hov: var(--cf-sky);
}

.cf-hero--dark-ops {
  --cfh-bg-soft: var(--cf-slate-section);
  --cfh-bg: var(--cf-slate-card);
  --cfh-eyebrow: var(--cf-golden-orange);
  --cfh-heading: var(--cf-blue-gray-tint);
  --cfh-accent: var(--cf-golden-orange);
  --cfh-lead: var(--cf-blue-gray-soft);
  --cfh-line: rgba(255, 255, 255, 0.08);
  --cfh-btn-primary-bg: var(--cf-golden-orange);
  --cfh-btn-primary-fg: var(--cf-slate-section);
  --cfh-btn-primary-hov: var(--cf-blue-gray-tint);
  --cfh-btn-ghost: var(--cf-blue-gray-tint);
  --cfh-btn-ghost-hov: var(--cf-golden-orange);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.cf-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cf-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .cf-hero__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
  }
}

/* ── Carousel ───────────────────────────────────────────────────────── */
.cf-hero__carousel {
  position: relative;
  min-height: 360px;
}

.cf-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cf-hero__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.cf-hero__slide.is-exiting {
  opacity: 0;
  transform: translateX(-40px);
}

.cf-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cfh-eyebrow);
  font-weight: 600;
  margin-bottom: 24px;
}

.cf-hero__title {
  /* Floor lowered from 48px so phones don't get hero-on-desktop type
     forced into a 375px viewport. Steepened the slope (6vw → 8vw) so
     the heading scales up faster as room opens up, hitting the
     original 76px ceiling around the desktop breakpoint. */
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 8vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--cfh-heading);
  margin: 0 0 28px;
  /* Defensive: long unbreakable words (URLs, hashtags) shouldn't
     punch through the section padding on narrow viewports. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.cf-hero__title em {
  font-style: italic;
  color: var(--cfh-accent);
}

.cf-hero__lead {
  font-size: 19px;
  color: var(--cfh-lead);
  max-width: 540px;
  margin: 0 0 40px;
  line-height: 1.5;
}

.cf-hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.cf-hero__btn-primary {
  background: var(--cfh-btn-primary-bg);
  color: var(--cfh-btn-primary-fg);
  border: none;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.cf-hero__btn-primary:hover {
  background: var(--cfh-btn-primary-hov);
}

.cf-hero__btn-ghost {
  color: var(--cfh-btn-ghost);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cfh-btn-ghost);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cf-hero__btn-ghost:hover {
  color: var(--cfh-btn-ghost-hov);
  border-color: var(--cfh-btn-ghost-hov);
}

/* ── Dot indicators (line style) ────────────────────────────────────── */
/* Sits at section level (sibling of .cf-hero__grid) so it anchors near
   the bottom of the section padding, not the carousel column. */
.cf-hero__dots {
  display: flex;
  gap: 12px;
  margin-top: 48px;
}

@media (min-width: 1024px) {
  .cf-hero__dots {
    margin-top: 72px;
  }
}

/* The button is now a 44×44 transparent hit target meeting WCAG 2.5.5;
   the visible 3px bar lives inside as .cf-hero__dot-bar so the visual
   treatment is unchanged while touch / pointer accuracy is greatly
   improved. */
.cf-hero__dot {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* Reset hit gap so the dot row reads as a tight cluster, not a
     gappy 44px-wide button strip. The bar inside defines the visual
     spacing via its own width. */
}

.cf-hero__dot:focus-visible {
  outline: 2px solid var(--cfh-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.cf-hero__dot-bar {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--cfh-line);
  transition:
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
}

.cf-hero__dot:hover .cf-hero__dot-bar {
  background: var(--cfh-accent);
}

.cf-hero__dot.is-active .cf-hero__dot-bar {
  background: var(--cfh-accent);
  width: 44px;
}

/* ── Visual column ──────────────────────────────────────────────────── */
/* Hidden below the desktop breakpoint. On phones the SVG would eat
   ~327px between the CTAs and the dots — pushing the actions below
   the fold and stealing attention from the message. The desktop
   composition keeps its full two-column layout. */
.cf-hero__visual {
  display: none;
}

@media (min-width: 1024px) {
  .cf-hero__visual {
    display: block;
    position: relative;
    aspect-ratio: 1;
  }
}

.cf-hero__visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Pulse-wave animation (targets the baked-in default SVG) ───────── */
.cf-hero__visual .pulse-wave {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}

.cf-hero__visual .wave-1 {
  animation-name: cfHeroWaveTravel;
  animation-duration: 9s;
}

.cf-hero__visual .wave-2 {
  animation-name: cfHeroWaveTravel;
  animation-duration: 7s;
  animation-delay: -3s;
}

.cf-hero__visual .wave-3 {
  animation-name: cfHeroWaveTravel;
  animation-duration: 5s;
  animation-delay: -2s;
}

@keyframes cfHeroWaveTravel {
  from { transform: translateX(0); }
  to   { transform: translateX(400px); }
}

/* ── Entrance animations (first paint) ──────────────────────────────── */
.cf-hero__slide.is-active .cf-hero__eyebrow,
.cf-hero__slide.is-active .cf-hero__title,
.cf-hero__slide.is-active .cf-hero__lead,
.cf-hero__slide.is-active .cf-hero__actions,
.cf-hero__visual {
  opacity: 0;
  transform: translateY(20px);
  animation: cfHeroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cf-hero__slide.is-active .cf-hero__eyebrow { animation-delay: 0.10s; }
.cf-hero__slide.is-active .cf-hero__title   { animation-delay: 0.25s; }
.cf-hero__slide.is-active .cf-hero__lead    { animation-delay: 0.45s; }
.cf-hero__slide.is-active .cf-hero__actions { animation-delay: 0.65s; }
.cf-hero__visual                            { animation-delay: 0.40s; transform: translateX(20px); }

@keyframes cfHeroFadeIn {
  to { opacity: 1; transform: translate(0, 0); }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cf-hero__slide,
  .cf-hero__slide.is-active .cf-hero__eyebrow,
  .cf-hero__slide.is-active .cf-hero__title,
  .cf-hero__slide.is-active .cf-hero__lead,
  .cf-hero__slide.is-active .cf-hero__actions,
  .cf-hero__visual,
  .cf-hero__visual .pulse-wave,
  .cf-hero__btn-primary,
  .cf-hero__btn-ghost,
  .cf-hero__dot,
  .cf-hero__dot-bar {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}