/* =========================================================================
   Home page specific styles
   See DESIGN-SYSTEM.md for tokens/components used here.
   All tokens, buttons, cards (canonical), pills, tags, and container are
   expected to come from foundation.css and design-system.css.
   ========================================================================= */

/* Home-only: smooth scroll for anchor jumps, warm mist body background */
html { scroll-behavior: smooth; }
body.page-marketing { background: var(--hvb-mist); }

/* Scope hover-underline to content area only so it does not underline
   injected nav/footer links. */
main a { color: var(--hvb-teal); text-decoration: none; }
main a:hover { text-decoration: underline; }

/* Give the home hero more vertical presence than the default */
body.page-marketing .site-hero { min-height: 70vh; }

/* -------------------------------------------------------------------------
   Hero proof-card strip (Research-backed / Grant-ready / Community-first)
   Stacked rows directly below the hero.
   ------------------------------------------------------------------------- */
.hero-proof {
  display: grid;
  gap: 10px;
}
.hero-proof .proof-card {
  background: #fff;
  border: 1px solid rgba(14, 59, 46, 0.12);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow-1);
}
.hero-proof .proof-card strong {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hvb-green);
}
.hero-proof .proof-card span {
  display: block;
  margin-top: 6px;
  color: var(--hvb-slate);
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   Home section rhythm + heading pattern
   Kept scoped so other pages using <section>, <h2>, .kicker, .subhead
   don't pick up these home-specific sizes.
   ------------------------------------------------------------------------- */
body.page-marketing section { padding: 56px 0; }

body.page-marketing .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
body.page-marketing .kicker {
  font-family: var(--font-head);
  color: var(--hvb-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
body.page-marketing h2 {
  margin: 6px 0 0;
  font-family: var(--font-head);
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--hvb-black);
}
body.page-marketing .subhead {
  margin: 10px 0 0;
  color: var(--hvb-slate);
  max-width: 80ch;
}

/* -------------------------------------------------------------------------
   .grid3 — 3-column card grid used in several home bands
   ------------------------------------------------------------------------- */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .grid3 { grid-template-columns: 1fr; }
}

/* Systems showcase: equal-height cards regardless of title line count */
.grid3 .card {
  display: flex;
  flex-direction: column;
}
.grid3 .card figure {
  margin: 0 0 12px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.grid3 .card figure img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.grid3 .card h3 {
  min-height: 2.6em;
}

/* -------------------------------------------------------------------------
   Systems showcase (.proof-grid — 4 cards: Monticello / Taylor-Montgomery /
   Beacon / Ulster). Uses foundation.css .proof-grid + .proof-card, plus
   these home-specific refinements for equal-height cards + media framing.
   ------------------------------------------------------------------------- */
.proof-grid { align-items: stretch; }
.proof-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(14, 59, 46, 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-level-1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.proof-card__link:hover,
.proof-card__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-level-2);
}
.proof-card__link img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.proof-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.proof-card__body h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--hvb-black);
  min-height: 2.6em;
  line-height: 1.3;
}
.proof-card__body p {
  margin: 0;
  color: var(--hvb-slate);
  font-size: 14px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Lane cards (Partner lanes section)
   ------------------------------------------------------------------------- */
.lane-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lane-card__header h3 { margin: 0; }

/* -------------------------------------------------------------------------
   Drivers for change (4-card grid with images + outline CTA)
   CTAs now use the canonical .btn .btn-outline from design-system.css;
   this section only lays out the cards + defines hover lift.
   ------------------------------------------------------------------------- */
.drivers {
  padding: clamp(40px, 5vw, 68px) 0 clamp(36px, 4vw, 56px);
  background: radial-gradient(circle at top left, rgba(14, 59, 46, 0.05), transparent 55%);
}
.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 2vw, 36px);
  margin-top: 40px;
  align-items: stretch;
}
.driver-card {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.driver-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(14, 59, 46, 0.15);
  background: #fff;
  box-shadow: var(--shadow-level-2);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.driver-card-link:hover,
.driver-card-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-level-3);
}
.driver-card-link:focus-visible {
  outline: 3px solid rgba(31, 111, 98, 0.35);
  outline-offset: 6px;
}
.driver-card-link .media-frame {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.driver-card-link .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.driver-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px 26px 26px;
}
.driver-card-content h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--hvb-black);
}
.driver-card-content p {
  margin: 0;
  color: var(--hvb-slate);
  line-height: 1.55;
  font-size: 15px;
}
.driver-card-content .driver-cta { margin-top: auto; }
/* Inherit canonical .btn .btn-outline; brighten on card hover */
.driver-card-link:hover .btn-outline,
.driver-card-link:focus-visible .btn-outline {
  background: var(--hvb-mist);
  border-color: rgba(14, 59, 46, 0.6);
}

/* -------------------------------------------------------------------------
   Home-specific card styling overrides
   NOTE: base .card lives in design-system.css. We don't redefine it.
   We only style .card h3 / .card p within home's section contexts.
   ------------------------------------------------------------------------- */
body.page-marketing .card h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--hvb-black);
}
body.page-marketing .card p {
  margin: 0;
  color: var(--hvb-slate);
}

/* Tag row wrapper used inside lane cards. Individual .tag styling comes
   from design-system.css; .mini only provides the flex row layout. */
.mini {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* -------------------------------------------------------------------------
   How it Works — 5-step timeline
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
.step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(31, 111, 98, 0.06), rgba(31, 111, 98, 0.02)),
    url("../textures/tx_circular-flow_tile.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, 520px 520px;
  border: 1px solid rgba(14, 59, 46, 0.1);
}
.num {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(14, 59, 46, 0.1);
  border: 1px solid rgba(14, 59, 46, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  color: var(--hvb-green);
  font-size: 18px;
}
.step h3 {
  margin: 0 0 6px;
  font-family: var(--font-head);
}
.step p {
  margin: 0;
  color: var(--hvb-slate);
}

/* -------------------------------------------------------------------------
   Teaser gallery — systems library 4-tile preview
   ------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 980px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
.thumb {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(14, 59, 46, 0.12);
  background: #fff;
  box-shadow: var(--shadow-level-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.thumb:hover,
.thumb:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-level-2);
}
.thumb figure { margin: 0; }
.thumb figure img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.thumb .cap {
  padding: 10px 10px 12px;
  color: var(--hvb-black);
  font-weight: 600;
  font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   Newsletter signup form
   ------------------------------------------------------------------------- */
.form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
input[type="email"] {
  flex: 1 1 240px;
  padding: 12px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(14, 59, 46, 0.18);
  outline: none;
  font-size: 14px;
}
input[type="email"]:focus {
  border-color: rgba(31, 111, 98, 0.55);
  box-shadow: 0 0 0 4px rgba(31, 111, 98, 0.16);
}

/* -------------------------------------------------------------------------
   Region hub (Why the Hudson Valley leads)
   ------------------------------------------------------------------------- */
.region-hub {
  padding: 56px 0 64px;
  margin-top: 48px;
  background: linear-gradient(180deg, rgba(232, 248, 241, 0.7), rgba(232, 248, 241, 0.3) 60%, transparent 100%);
}
.region-hub .section-head { margin-bottom: 12px; }
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.region-copy {
  background: #fff;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-level-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.region-copy p {
  margin: 0;
  color: var(--hvb-slate);
  line-height: 1.6;
}
.region-bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--hvb-slate);
  display: grid;
  gap: 6px;
}
.region-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.region-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-level-3);
  display: flex;
  flex-direction: column;
}
.region-card figure {
  margin: 0;
  aspect-ratio: unset;
  height: 250px;
}
.region-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.region-card-body { padding: var(--space-5); }
.region-card-body strong {
  display: block;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* Research & downloads media frames */
section[aria-label="Research and downloads"] .media-frame {
  aspect-ratio: 4/3;
  height: 180px;
}
section[aria-label="Research and downloads"] .media-frame img {
  height: 100%;
}