/* ==========================================================================
   Fuller Living — Home Page
   --------------------------------------------------------------------------
   Section order follows the guide's emotional pacing:
     Hero → Value-Pain intro (+ 3 tiles) → Seven Domains → Who This Is For
     → Shop preview → Founder → Newsletter
   Mobile-first. Generous whitespace. Nothing shouts.
   ========================================================================== */

/* Full-bleed section helper — robust even if the theme adds a container.
   Each section paints edge-to-edge; inner .fl-container re-centers content. */
.home-main > section {
  position: relative;
  width: 100%;
}

/* Alternating calm background bands for gentle rhythm */
.home-intro,
.home-audience,
.home-founder { background-color: var(--color-bg); }

.home-domains,
.home-shop { background-color: var(--color-bg-alt); }

/* Small entrance motion (progressive enhancement). The hidden state is gated
   behind html.fl-js, which a tiny head script adds only when JS is on — so if
   scripting fails, content stays fully visible. JS toggles .is-visible. */
html.fl-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
html.fl-js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.fl-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.home-hero {
  /* Editorial autumn lake-path photo, given a warm cream treatment, under a
     cream legibility scrim so all hero text stays WCAG-AA readable. The
     scrim is deliberately strong all the way through the text band (not just
     top/bottom) — an earlier lighter version left a gap right where the
     subhead + body copy sit, which reviewers found hard to read against the
     photo's brighter, higher-contrast passages. Mobile keeps an even wash
     (text spans full width); desktop switches to a directional wash so the
     path still breathes on the right. WebP with a JPEG fallback via
     image-set. Text also gets a soft cream halo (see .home-hero__eyebrow,
     h1, __subhead, __body below) as a second, image-independent safety net. */
  background-color: var(--fl-cream);
  background-image:
    linear-gradient(180deg,
      rgba(250, 244, 233, 0.8) 0%,
      rgba(250, 244, 233, 0.74) 20%,
      rgba(250, 244, 233, 0.76) 55%,
      rgba(242, 245, 240, 0.97) 100%),
    linear-gradient(90deg,
      rgba(250, 244, 233, 0.84) 0%,
      rgba(250, 244, 233, 0.7) 62%,
      rgba(250, 244, 233, 0.62) 100%),
    image-set(
      url("../images/home-hero-mobile.webp") type("image/webp"),
      url("../images/home-hero-mobile.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 42%;
  overflow: hidden;
}
.home-hero__inner {
  padding-block: clamp(3.5rem, 2rem + 9vw, 8rem);
  max-width: 54rem;
}
/* A soft cream halo behind every hero text element — a second, image-
   independent line of defense for legibility. Subtle by design (reads as
   gentle "paper" softness, not a harsh drop shadow) but guarantees contrast
   at every letter's edge no matter what's directly behind it in the photo. */
.home-hero__eyebrow,
.home-hero h1,
.home-hero__lede,
.home-hero__ifs,
.home-hero__welcome {
  text-shadow: 0 1px 3px rgba(250, 248, 245, 0.9), 0 0 18px rgba(250, 248, 245, 0.6);
}

.home-hero__eyebrow { color: var(--fl-teal-deep); }
.home-hero h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

/* Body copy for the long-form hero narrative. Deliberately strong ink, not
   the site-wide "muted" body tone — that color is fine on flat cream but has
   very little safety margin sitting over a photo instead. Generous spacing
   throughout this block on purpose — a lot of text sits in the hero now, so
   it needs real breathing room between beats rather than reading as a wall
   of text. */
.home-hero__lede {
  font-size: var(--text-lg);
  color: var(--color-ink);
  max-width: 40rem;
  margin-bottom: var(--space-md);
}
.home-hero__lede:last-of-type { margin-bottom: var(--space-xl); }

/* Three parallel "If..." lines — a quiet, guarded litany, kept as plain
   short lines rather than a bulleted list (bullets read too clinical here). */
.home-hero__ifs {
  max-width: 26rem;
  margin: var(--space-lg) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 2;
  color: var(--color-ink);
}

/* The hero's key insight line — an opaque card, so (unlike the plain hero
   text above) it doesn't need the cream halo to stay legible over the photo. */
.home-hero__pull {
  max-width: 34rem;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  background-color: var(--fl-mauve-tint);
  border-radius: var(--radius-card);
}

/* "Welcome to Fuller Living." — a warm, spoken turn into the closing
   invitation, distinct from the boxed pull-quote above it. Extra margin-top
   marks it as a deliberate pause/turn, not just another paragraph. */
.home-hero__welcome {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h3);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Soft decorative "horizon" arc at the base of the hero */
.home-hero__arc {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 140%;
  transform: translateX(-50%);
  pointer-events: none;
  color: var(--fl-cream);
}

/* ==========================================================================
   VALUE-PAIN INTRODUCTION
   ========================================================================== */
.home-intro__lede {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}
.home-intro__pull {
  max-width: 40rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  background-color: var(--fl-mauve-tint);
  border-radius: var(--radius-container);
}

/* Three parallel "If..." lines — read like a quiet, guarded litany. Kept as
   plain short lines (not a bulleted list) since bullets would feel too
   clinical for this raw, emotional beat. */
/* Three feature tiles */
.home-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.home-tile:hover {
  transform: translateY(var(--lift-hover));
  box-shadow: var(--shadow-md);
}
.home-tile__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fl-teal-deep);
}
.home-tile h3 { margin: 0; font-size: var(--text-h4); }
.home-tile p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.home-tile .home-textlink { margin-top: auto; padding-top: var(--space-xs); }

/* ==========================================================================
   SEVEN DOMAINS
   ========================================================================== */
.home-domains__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.home-domain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.home-domain:hover {
  transform: translateY(var(--lift-hover));
  box-shadow: var(--shadow-card);
}
.home-domain__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--fl-periwinkle-tint);
  color: var(--fl-periwinkle-strong);
}
.home-domain__icon svg { width: 1.6rem; height: 1.6rem; }
.home-domain h3 { margin: 0; font-size: var(--text-lg); }
.home-domain p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.home-domain .home-textlink { margin-top: var(--space-2xs); }

/* ==========================================================================
   WHO THIS IS FOR
   ========================================================================== */
.home-audience__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 56rem;
  margin: 0 auto var(--space-xl);
  padding: 0;
  list-style: none;
}
.home-audience__list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-form);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}
.home-audience__check {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15em;
  color: var(--fl-sage-strong);
}
.home-audience__closing {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--color-heading);
}

/* ==========================================================================
   SHOP PREVIEW
   ========================================================================== */
.home-shop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 62rem;
  margin-inline: auto;
}
.home-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
}
.home-product__badge {
  align-self: flex-start;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  background-color: var(--fl-teal-tint);
  color: var(--fl-teal-deep);
}
.home-product--app .home-product__badge {
  background-color: var(--fl-sage-tint);
  color: var(--fl-sage-strong);
}
.home-product h3 { margin: 0; font-size: var(--text-h3); }
.home-product__desc { margin: 0; color: var(--color-text-muted); }
/* Full-width CTA inside product cards: friendlier tap target, and long labels
   never overflow the narrower card column. */
.home-product .fl-btn { align-self: stretch; margin-top: var(--space-2xs); }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.home-founder__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.home-founder__figure { margin: 0; }
.home-founder__photo {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  display: block;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-lg);
  background-color: var(--fl-sage-tint);
}
.home-founder h2 { max-width: 18ch; }
.home-founder__body {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.home-newsletter { background-color: var(--color-bg); }
.home-newsletter__card {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  text-align: center;
  border-radius: var(--radius-container);
  background-color: var(--fl-teal-tint);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(109, 148, 116, 0.25) 0%, rgba(109, 148, 116, 0) 60%),
    radial-gradient(90% 120% at 0% 100%, rgba(196, 160, 184, 0.22) 0%, rgba(196, 160, 184, 0) 60%);
  border: 1px solid var(--color-border);
}
.home-newsletter__card h2 { margin-bottom: var(--space-sm); }
.home-newsletter__card p {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--color-text-muted);
}
.home-newsletter__card .fl-btn { margin-top: var(--space-md); }
.home-newsletter__note {
  margin-top: var(--space-sm) !important;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   RESPONSIVE — tablet and up
   ========================================================================== */
@media (min-width: 640px) {
  .home-audience__list { grid-template-columns: 1fr 1fr; }
  .home-shop__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  /* Desktop hero: larger image + directional wash. Text sits on the left, so
     the scrim stays solid there all the way through the text band (not just
     top/bottom — see the mobile block above for why) and fades right so the
     path/trees still show. */
  .home-hero {
    background-image:
      linear-gradient(180deg,
        rgba(250, 244, 233, 0.55) 0%,
        rgba(250, 244, 233, 0.46) 26%,
        rgba(250, 244, 233, 0.48) 58%,
        rgba(242, 245, 240, 0.9) 100%),
      linear-gradient(90deg,
        rgba(250, 244, 233, 0.96) 0%,
        rgba(250, 244, 233, 0.85) 34%,
        rgba(250, 244, 233, 0.55) 64%,
        rgba(250, 244, 233, 0.24) 100%),
      image-set(
        url("../images/home-hero.webp") type("image/webp"),
        url("../images/home-hero.jpg") type("image/jpeg"));
    background-position: center center;
  }

  .home-tiles { grid-template-columns: repeat(3, 1fr); }
  .home-domains__grid { grid-template-columns: 1fr 1fr; }
  .home-founder__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-2xl);
  }
  .home-founder__photo { max-width: none; }
}

@media (min-width: 1024px) {
  .home-domains__grid { grid-template-columns: repeat(3, 1fr); }
  /* The 7th domain (Grace) centers gracefully on the final row */
  .home-domain:last-child { grid-column: 2 / 3; }
}