/* ============================================
   HANNAH GOLDY: home page ("What are you here for?")
   Two paths: personal training and the program.
   Builds on brand.css + training.css.
   ============================================ */

.home__ig {
  font-family: var(--font-accent); letter-spacing: 0.14em; font-size: 14px;
  color: var(--gold); display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}
.home__ig:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.home__hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62svh; display: flex; align-items: flex-end;
  padding: 120px 0 clamp(40px, 8vw, 64px);
}
.home__media { position: absolute; inset: 0; z-index: -2; }
.home__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.home__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(22,34,46,0.72) 0%, rgba(22,34,46,0.25) 32%, rgba(22,34,46,0.82) 74%, var(--navy) 100%),
    linear-gradient(90deg, rgba(22,34,46,0.7) 0%, rgba(22,34,46,0.05) 70%);
}
.home__intro h1 { margin-bottom: 16px; text-shadow: 0 2px 10px rgba(11,18,25,0.62), 0 1px 34px rgba(11,18,25,0.5); }
.home__intro .lede { text-shadow: 0 1px 8px rgba(11,18,25,0.7); }

/* ---------- The two paths ---------- */
.home__paths {
  display: grid; gap: 18px;
  padding-top: clamp(28px, 6vw, 48px); padding-bottom: clamp(56px, 10vw, 96px);
}
@media (min-width: 820px) { .home__paths { grid-template-columns: 1fr 1fr; gap: 24px; } }

.path {
  display: flex; flex-direction: column;
  background: var(--navy-mid);
  border: 1px solid var(--border-gold);
  border-radius: 6px; overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.path:hover, .path:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.path__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); }
.path__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.path__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.path__kicker {
  font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
.path h2 { color: var(--gold); margin-bottom: 12px; }
.path p { font-size: 16px; line-height: 1.65; color: var(--text-light); }
.path__note, .path__full {
  margin-top: 12px; font-size: 15px !important;
  border-left: 3px solid var(--gold); padding: 8px 12px;
  background: rgba(232,201,106,0.08); border-radius: 0 3px 3px 0;
}
.path__go {
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-accent); font-size: 17px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}
.path--full h2::after {
  content: "Waitlist"; margin-left: 10px; vertical-align: middle;
  font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.16em;
  color: var(--navy); background: var(--gold); padding: 3px 8px; border-radius: 3px;
}

/* ---------- Desktop hero: photo in a framed panel ----------
   The source photos top out around 1,400px, so a full-bleed background has to be
   stretched 1.4-1.8x on a desktop screen (up to 3.7x on Retina) and looks pixelated.
   From 960px up the photo sits in a panel on the right at or below its real size,
   and the headline gets its own column instead of sitting on top of her face. */
@media (min-width: 960px) {
  .home__hero {
    min-height: 0; align-items: center;
    padding: 150px 0 110px;
    background:
      radial-gradient(70% 60% at 82% 38%, rgba(232,201,106,0.09), transparent 62%),
      var(--navy);
  }
  .home__scrim { display: none; }
  .home__media {
    left: auto; bottom: auto;
    top: 118px;
    right: max(var(--gutter), calc((100vw - 1140px) / 2 + var(--gutter)));
    width: min(38vw, 460px);
    height: calc(100% - 196px);
    max-height: 620px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-lg);
  }
  .home__media img { object-position: 64% 32%; }
  .home__intro { padding-right: calc(min(38vw, 460px) + 64px + var(--gutter)); }
  .home__intro h1, .home__intro .lede { text-shadow: none; }
}