/* ==========================================================================
   Borderlands Foundation — Homepage styles
   Imports tokens.css + base.css first. Warm white, navy + gold, sentence case.
   ========================================================================== */

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  transition: background-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out);
}
.nav--solid {
  background-color: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--color-warm-200);
  padding-block: var(--space-3);
}
.nav__logo { display: flex; align-items: center; gap: var(--space-3); }
.nav__logo img { height: 44px; width: auto; transition: height var(--duration-normal); }
.nav--solid .nav__logo img { height: 38px; }

.nav__links { display: flex; align-items: center; gap: var(--space-8); }
.nav__link {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-navy-900);
  transition: color var(--duration-fast);
  position: relative;
}
/* On the transparent hero (before scroll), nav text is light */
.nav:not(.nav--solid) .nav__link { color: rgba(255,255,255,0.92); }
.nav:not(.nav--solid) .nav__logo { filter: brightness(0) invert(1); }
.nav__link:hover { color: var(--color-gold-500); }

.nav__toggle { display: none; }

/* ===== Hero (light, editorial collage) ===== */
.hero { background: var(--color-warm-50); }

.hero__eyebrow {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-gold-600);
  margin-bottom: var(--space-5);
  letter-spacing: 0.01em;
}
.hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: var(--weight-black);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-navy-950);
  max-width: 15ch;
}
.hero__sub {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-navy-500);
  max-width: 46ch;
  margin-top: var(--space-6);
  font-weight: var(--weight-medium);
}
.hero__cta { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }

/* ===== Editorial collage ===== */
.hero--c { min-height: 94vh; }
.hero--c .hero__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 94vh; align-items: center; }
.hero--c .hero__text {
  padding: var(--space-32) var(--space-12) var(--space-20) max(var(--section-padding-x), calc((100vw - var(--container-xl)) / 2 + var(--space-8)));
}
.hero--c .hero__collage { position: relative; height: 100%; min-height: 520px; }
.hero--c .hero__collage img { position: absolute; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero--c .c-main    { width: 56%; height: 62%; top: 6%; right: 8%; z-index: 2; }
.hero--c .c-summit  { width: 46%; height: 40%; bottom: 10%; left: 4%; z-index: 1; }
.hero--c .c-veteran { width: 32%; height: 34%; bottom: 6%; right: 22%; z-index: 3; }

/* ===== Nav on a light hero ===== */
body.mode-light .nav:not(.nav--solid) .nav__link { color: var(--color-navy-900); }
body.mode-light .nav:not(.nav--solid) .nav__logo { filter: none; }
body.mode-light .nav:not(.nav--solid) .nav__toggle { color: var(--color-navy-900); background: rgba(250,247,241,0.7); }

@media (max-width: 900px) {
  .hero--c .hero__grid { grid-template-columns: 1fr; }
  .hero--c { min-height: auto; }
  .hero--c .hero__text { padding: var(--space-32) var(--section-padding-x) var(--space-12); }
  .hero--c .hero__collage { min-height: 420px; margin: 0 var(--section-padding-x) var(--space-12); }
}

/* --- Section heading kit --- */
.section__head { max-width: 60ch; margin-bottom: var(--space-12); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  font-size: clamp(2rem, 4vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-stone-700);
  margin-top: var(--space-4);
}

/* --- Stakes / the idea --- */
.stakes { background: var(--color-warm-100); color: var(--color-navy-950); }
.stakes .container { max-width: var(--container-lg); }
.stakes__quote {
  font-size: clamp(1.8rem, 3.5vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-navy-950);
}
.stakes__quote .accent { color: var(--color-gold-600); }
.stakes__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-stone-700);
  margin-top: var(--space-6);
  max-width: 60ch;
}

/* --- Founder --- */
.founder { background: var(--color-warm-50); }
.founder__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}
.founder__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder__quote {
  font-size: clamp(1.5rem, 2.6vw, var(--text-2xl));
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-navy-950);
}
.founder__body { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-stone-700); margin-top: var(--space-5); }
.founder__sign { margin-top: var(--space-6); }
.founder__name { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-navy-900); }
.founder__role { color: var(--color-stone-500); font-size: var(--text-base); }
.founder__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); color: var(--color-gold-600); font-weight: var(--weight-semibold); }
.founder__link:hover { gap: var(--space-3); }

/* signature placeholder */
.sig-placeholder {
  width: 180px; height: 48px;
  border: 1.5px dashed var(--color-warm-200);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-stone-300);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

/* --- Impact bar --- */
.impact { background: var(--color-gold-100); color: var(--color-navy-950); }
.impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.impact__num {
  font-size: clamp(2.4rem, 5vw, var(--text-5xl));
  font-weight: var(--weight-black);
  color: var(--color-gold-600);
  line-height: 1;
  letter-spacing: -0.03em;
}
.impact__label { color: var(--color-navy-700); margin-top: var(--space-3); font-size: var(--text-base); }

/* --- Programs --- */
.programs { background: var(--color-warm-50); }
.program {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-warm-200);
}
.program:first-of-type { border-top: none; }
.program--flip .program__media { order: 2; }
.program__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: var(--shadow-md);
}
.program__media img { width: 100%; height: 100%; object-fit: cover; }
.program__media--placeholder {
  background: var(--color-warm-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-stone-300);
  font-size: var(--text-sm);
  box-shadow: none;
  border: 1px solid var(--color-warm-200);
}
.program__tie { color: var(--color-gold-600); font-weight: var(--weight-semibold); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.program__name { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.program__desc { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-stone-700); margin-top: var(--space-3); }
.program__meta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.badge {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: var(--color-gold-100); color: var(--color-gold-600);
}
.badge--building { background: var(--color-navy-100); color: var(--color-navy-700); }
.program__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-navy-900); font-weight: var(--weight-semibold); }
.program__link:hover { gap: var(--space-3); color: var(--color-gold-600); }

/* --- Voices --- */
.voices { background: var(--color-warm-100); color: var(--color-navy-950); }
.voices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.voice {
  background: var(--color-warm-50);
  border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.voice__mark { color: var(--color-gold-500); font-size: var(--text-5xl); line-height: 0.5; font-weight: var(--weight-black); }
.voice__text { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-navy-950); margin-top: var(--space-4); font-weight: var(--weight-medium); }
.voice__who { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.voice__who img { width: 52px; height: 52px; border-radius: var(--radius-full); object-fit: cover; }
.voice__name { font-weight: var(--weight-bold); }
.voice__title { color: var(--color-stone-500); font-size: var(--text-sm); }
.voices__note { text-align: center; margin-top: var(--space-8); color: var(--color-stone-300); font-size: var(--text-sm); }

/* --- Episodes (podcast) --- */
.episodes { background: var(--color-warm-50); }
.episodes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.ep {
  display: flex; flex-direction: column;
  background: var(--color-warm-50);
  border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.ep:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ep__cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-navy-900); }
.ep__cover img { width: 100%; height: 100%; object-fit: cover; }
.ep__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,41,0); transition: background var(--duration-normal);
}
.ep:hover .ep__play { background: rgba(15,23,41,0.35); }
.ep__play svg { width: 56px; height: 56px; opacity: 0; transform: scale(0.8); transition: all var(--duration-normal) var(--ease-spring); color: #fff; }
.ep:hover .ep__play svg { opacity: 1; transform: scale(1); }
.ep__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.ep__meta { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-gold-600); }
.ep__title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: -0.01em; margin-top: var(--space-2); }
.ep__desc { font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-stone-700); margin-top: var(--space-3); }
.ep__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ep__tag { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-navy-700); background: var(--color-warm-100); border-radius: var(--radius-full); padding: 4px 10px; }
.ep__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--color-navy-900); font-weight: var(--weight-semibold); }
.ep__link:hover { gap: var(--space-3); color: var(--color-gold-600); }
.ep--hidden { display: none; }
.episodes__more { display: flex; justify-content: center; margin-top: var(--space-10); }

/* --- Donate CTA (light) --- */
.donate { background: var(--color-warm-100); color: var(--color-navy-950); text-align: center; }
.donate__title { font-size: clamp(2rem, 4vw, var(--text-4xl)); font-weight: var(--weight-black); letter-spacing: -0.02em; color: var(--color-navy-950); max-width: 20ch; margin-inline: auto; }
.donate__sub { font-size: var(--text-lg); color: var(--color-stone-700); margin-top: var(--space-5); max-width: 56ch; margin-inline: auto; }
.donate__tiers { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.tier {
  background: var(--color-warm-50); border: 1px solid var(--color-warm-200);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); min-width: 120px;
}
.tier strong { display: block; font-size: var(--text-2xl); color: var(--color-gold-600); }
.tier span { font-size: var(--text-sm); color: var(--color-stone-500); }
.donate__cta { margin-top: var(--space-8); }
.donate__legal { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-stone-500); }

/* --- Footer --- */
.footer { background: var(--color-navy-950); color: var(--color-navy-100); padding-block: var(--space-16) var(--space-8); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
.footer__logo img { height: 48px; filter: brightness(0) invert(1); }
.footer__tag { margin-top: var(--space-4); max-width: 32ch; font-size: var(--text-base); color: var(--color-navy-100); }
.footer__col h4 { color: var(--color-white); font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.footer__col a { display: block; padding-block: var(--space-1); color: var(--color-navy-100); font-size: var(--text-base); }
.footer__col a:hover { color: var(--color-gold-400); }
.footer__bottom {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--color-navy-700);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-navy-100);
}

/* --- Reveal on scroll --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .founder__grid, .program, .program--flip .program__media,
  .voices__grid, .impact__grid, .footer__top {
    grid-template-columns: 1fr;
  }
  .episodes__grid { grid-template-columns: repeat(2, 1fr); }
  .program--flip .program__media { order: 0; }
  .impact__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
  .featured__body { padding: 0 var(--space-8) var(--space-8); }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    background: var(--color-navy-900); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: var(--space-6); padding: var(--space-12);
    transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-out);
  }
  .nav__links.open { transform: none; }
  .nav__links .nav__link { color: var(--color-white) !important; font-size: var(--text-xl); }
  .nav__toggle {
    display: flex; z-index: var(--z-modal); width: 44px; height: 44px;
    align-items: center; justify-content: center; color: var(--color-navy-900);
    background: rgba(250,247,241,0.9); border-radius: var(--radius-md);
  }
  .nav:not(.nav--solid) .nav__toggle { color: var(--color-white); background: rgba(0,0,0,0.25); }
}
@media (max-width: 540px) {
  .impact__grid { grid-template-columns: 1fr 1fr; }
  .episodes__grid { grid-template-columns: 1fr; }
  .nav { padding: var(--space-3) var(--space-4); }
}

.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__bottom a:hover { color: var(--color-gold-400); }

/* --- Programs dropdown (match inner pages; keeps homepage nav identical) --- */
.nav__drop { position: relative; }
.nav__drop > .nav__link::after { content:""; display:inline-block; margin-left:6px; vertical-align:middle; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; transition:transform var(--duration-fast); opacity:.7; }
.nav__drop:hover > .nav__link::after, .nav__drop:focus-within > .nav__link::after { transform: rotate(180deg); }
.nav__menu { position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:288px; padding:var(--space-3); background:var(--color-white); border:1px solid var(--color-warm-200); border-radius:var(--radius-lg); box-shadow:0 20px 44px rgba(15,23,41,.16); display:grid; gap:2px; opacity:0; visibility:hidden; transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); z-index:var(--z-modal); }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity:1; visibility:visible; transform:translate(-50%,4px); }
.nav__menu a { display:block; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-navy-900); transition:background var(--duration-fast), color var(--duration-fast); }
.nav__menu a:hover { background:var(--color-warm-100); color:var(--color-gold-600); }
.nav__menu a small { display:block; font-weight:var(--weight-regular); color:var(--color-stone-500); font-size:12px; }
@media (max-width:900px){
  .nav__drop { width:100%; }
  .nav__drop > .nav__link::after { display:none; }
  .nav__menu { position:static; transform:none; opacity:1; visibility:visible; min-width:0; margin-top:var(--space-3); padding:0 0 0 var(--space-3); background:transparent; border:0; box-shadow:none; border-left:2px solid rgba(212,160,23,.5); border-radius:0; }
  .nav__menu a { color:rgba(255,255,255,.82); padding:var(--space-2) 0; }
  .nav__menu a small { display:none; }
  .nav__menu a:hover { background:transparent; color:var(--color-white); }
}