/*
 * Home page (front-page.php) — GDL-282.
 * The hero is a forest ground the rolling video slots into (GDL-288);
 * the badge marquee runs text placeholders until artwork arrives.
 */

body.home .site-main { padding-top: 0; }
body.home .site-footer { margin-top: 0; }

/* ------------------------------------------------------------
   Hero — full-viewport, deep forest ground (video pending)
   ------------------------------------------------------------ */
.home-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--clr-forest-deep);
  padding: 8rem 0 5rem;
}

.home-hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(169, 183, 162, 0.16), transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(176, 141, 69, 0.12), transparent 52%),
    linear-gradient(175deg, var(--clr-forest) 0%, var(--clr-forest-deep) 72%);
}

/* The rolling hero video drops in here (GDL-288) */
.home-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark wash over the video so the overlay text stays readable */
.home-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 38, 29, 0.4), rgba(27, 45, 34, 0.62));
}

.home-hero-content { position: relative; z-index: 1; }

.home-hero h1 {
  color: var(--clr-text-inverse);
  max-width: 17ch;
  margin-left: auto;
  margin-right: auto;
}

.home-hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--clr-sage-light));
  animation: lwt-scroll-cue 2.6s var(--ease-soft) infinite;
}

@keyframes lwt-scroll-cue {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Dark hero sits under the absolute header — the menu button must read on forest */
body.home .nav-toggle {
  color: var(--clr-text-inverse);
  border-color: rgba(244, 240, 230, 0.35);
}
body.home .nav-toggle:hover {
  background: var(--clr-cream);
  border-color: var(--clr-cream);
  color: var(--clr-forest-deep);
}

/* ------------------------------------------------------------
   Welcome — heading, litany + closing statement
   ------------------------------------------------------------ */
/* "WELCOME." sits on its own line in the MENU style Kelly loves (draft 2) */
.home-welcome-word {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-brass);
  margin-bottom: 1.1rem;
}

/* One sentence per line at every width: each line is its own block */
.home-litany-line,
.home-statement-line { display: block; }
.home-statement-line { text-wrap: balance; }

.home-litany {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.25rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--clr-forest);
  margin: var(--space-block) 0;
}

.home-statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  text-align: center;
  color: var(--clr-forest-ink);
  margin: var(--space-block) auto 0;
}

/* ------------------------------------------------------------
   Pillars — "Made to last a lifetime" grid
   ------------------------------------------------------------ */
.home-pillars ul {
  list-style: none;
  margin: var(--space-block) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3.5rem;
}

.home-pillars li {
  border-top: 1px solid rgba(38, 61, 47, 0.16);
  padding-top: 1.3rem;
  margin: 0;
}

.home-pillars li strong {
  color: var(--clr-forest-ink);
  font-weight: 600;
}

/* Seven pillars in two columns leaves an orphan (Kelly, slide 18): an odd last item spans the row */
.home-pillars li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   CTA — forest close
   ------------------------------------------------------------ */
.home-cta { text-align: center; }

.home-cta .lead,
.home-cta p {
  margin-left: auto;
  margin-right: auto;
}

/* The CTA stays centred (Kelly likes it as is), so it opts out of justified body copy */
.home-cta p:not([class]) { text-align: center; hyphens: manual; }

.home-cta-closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--clr-text-inverse);
}

.home-cta .btn { margin-top: 0.6rem; }

/* ------------------------------------------------------------
   Badge marquee — rolling accreditation strip
   ------------------------------------------------------------ */
.home-badges {
  overflow: hidden;
  padding: 2.6rem 0;
  border-top: 1px solid rgba(38, 61, 47, 0.1);
}

.home-badges-track {
  display: flex;
  width: max-content;
  animation: lwt-marquee 60s linear infinite;
}

.home-badges-track:hover { animation-play-state: paused; }

.home-badges-set {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
}

@keyframes lwt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .home-badges { padding-left: 2rem; padding-right: 2rem; }
  .home-badges-track { animation: none; width: auto; }
  .home-badges-set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .home-badges-set[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .home-hero { min-height: 78vh; }
  /* A litany sentence wraps on phone; the gap keeps each sentence reading as one line */
  .home-litany { line-height: 1.5; }
  .home-litany-line + .home-litany-line { margin-top: 0.6rem; }
  /* Two columns stay on phone (Kelly, draft 2); smaller type and tighter gaps so they fit */
  .home-pillars ul { gap: 1.4rem 1.25rem; }
  .home-pillars li { font-size: 0.875rem; line-height: 1.55; padding-top: 1rem; }
}