/* ==========================================================================
   Help The Poor Initiative — Homepage styles
   Only loaded by index.html. Everything shared (tokens, header, footer,
   buttons, media placeholders) lives in css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 0 190px;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Warm scrim: lifts the top for the white nav, and darkens the base so the
   focus strip reads cleanly against the photograph. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(20, 12, 4, .34) 0%,
      rgba(20, 12, 4, .06) 22%,
      rgba(20, 12, 4, 0)   45%,
      rgba(12, 10, 6, .30) 78%,
      rgba(12, 10, 6, .62) 100%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The logo, masked into a circle. The source JPEG has an opaque white
   background, so it needs the same circular container the header uses —
   dropped bare onto the photograph it would read as a white square. */
.hero-mark {
  display: block;
  width: clamp(112px, 13vw, 158px);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28),
              0 0 0 5px rgba(255, 255, 255, .22);
}

.hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nudges the round emblem past the JPEG's white edge so no seam shows. */
  transform: scale(1.04);
}

.hero-title { margin-bottom: 6px; }

.hero-title-main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6.2vw, 4.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .012em;
  /* Matched to the word HELP THE POOR in the logo directly above it. */
  color: var(--navy-logo);
  text-shadow: 0 2px 18px rgba(255, 248, 236, .5);
}

.hero-title-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.9vw, 2rem);
  font-weight: 700;
  letter-spacing: .40em;
  /* letter-spacing adds trailing space after the last glyph — pull it back
     so the word stays optically centred under the headline. */
  text-indent: .40em;
  /* Matched to the word INITIATIVE in the logo directly above it. */
  color: var(--red-logo);
  text-shadow: 0 2px 14px rgba(255, 248, 236, .55);
}

.hero-rule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(300px, 62vw);
  margin: 16px 0 12px;
}

.hero-rule::before,
.hero-rule::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(238, 124, 32, .75));
}

.hero-rule::after { background: linear-gradient(to left, transparent, rgba(238, 124, 32, .75)); }

.hero-rule span {
  width: 7px;
  height: 7px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--orange);
}

/* The logo's motto. Tracked out so it reads as a motto rather than a sentence,
   matching the treatment of INITIATIVE above it. */
.hero-tagline {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: clamp(.8125rem, 1.5vw, 1.05rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  /* Same trailing-space correction as .hero-title-sub. */
  text-indent: .22em;
  color: #1E160F;
  /* Small tracked text sits right on the busiest part of the photograph, so it
     needs a tighter, denser halo than the headline's single soft glow. */
  text-shadow: 0 1px 2px rgba(255, 250, 240, .95),
               0 0 10px rgba(255, 248, 236, .92),
               0 0 24px rgba(255, 248, 236, .65);
}

.hero-tagline .dot {
  /* Owns its spacing, so the tracking does not double up around it. */
  margin: 0 .55em 0 .33em;
  color: var(--orange);
}

.hero-cta {
  padding: 15px 32px;
  font-size: .9375rem;
}

/* Focus areas strip ------------------------------------------------------ */
.focus-strip {
  position: absolute;
  inset: auto 0 0;
  background: rgba(10, 16, 12, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.focus-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 1440px;
  margin-inline: auto;
}

.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px 22px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

.focus-item:first-child { border-left: 0; }

.focus-icon {
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: 2px;
  color: var(--orange);
}

.focus-item h2 {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.focus-item p {
  margin-top: 5px;
  font-size: .75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   2. Our Programs
   -------------------------------------------------------------------------- */
.programs { padding: 62px 0 48px; }

.program-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.program-card {
  position: relative;   /* anchor for the stretched card link */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.program-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-md);
}

.program-card:hover .media > img:not(.is-missing) { transform: scale(1.06); }

.program-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 18px;
}

.program-body h3 {
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.program-body h3 a { color: var(--accent); }

/* Stretch the title link across the whole card so the entire tile is clickable */
.program-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.program-body p {
  flex: 1;
  margin: 9px 0 16px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
}

.program-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--accent);
}

.program-link svg { transition: transform var(--speed) var(--ease); }
.program-card:hover .program-link svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   3. Campaigns · Stories · Newsletter band
   -------------------------------------------------------------------------- */
.band {
  padding: 20px 0 84px;
  background: var(--surface);
}

.band-grid {
  display: grid;
  /* Campaigns is widest: it carries an image, a progress bar and a CTA, and
     its heading pairs with the longest "view all" label. */
  grid-template-columns: 1.12fr 1fr .76fr;
  gap: 0;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.band-col { padding: 30px clamp(20px, 2.4vw, 30px); }

.band-col + .band-col { border-left: 1px solid var(--line); }

.band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Sized down from the page-level section head so the title and its "view all"
   link share one row inside the narrower band columns, as designed. */
.band-head .section-title {
  font-size: clamp(.9rem, 1.4vw, 1.0625rem);
  letter-spacing: .02em;
}

.band-head .link-more {
  font-size: .65rem;
  letter-spacing: .04em;
  gap: 6px;
}

/* Featured campaign ------------------------------------------------------ */
.campaign {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: 18px;
  align-items: start;
}

.campaign-media {
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
}

.campaign-body {
  display: flex;
  flex-direction: column;
}

.campaign-title {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}

.campaign-title a { color: inherit; }
.campaign-title a:hover { color: var(--green); }

.campaign-text {
  margin: 9px 0 14px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
}

.campaign-figures {
  font-size: .875rem;
  color: var(--muted);
}

.campaign-figures strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
}

.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 18px;
}

/* The track owns the 100% that the bar's percentage is measured against —
   keeping the label outside it so 62% means 62% of the bar, not of the row. */
.progress-track {
  position: relative;
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: #E2E6E0;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  /* Width is animated from 0 by main.js when the bar scrolls into view */
  width: 0;
  transition: width 1.1s var(--ease);
}

.progress-value {
  flex: none;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.campaign-cta {
  align-self: flex-start;
  padding: 11px 22px;
  font-size: .8125rem;
}

/* Latest stories --------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 14px 0;
  align-items: start;
}

.story:first-child { padding-top: 0; }
.story + .story { border-top: 1px solid var(--line); }

.story-media {
  border-radius: var(--radius-sm);
}

.story-body h3 {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
}

.story-body h3 a { color: var(--ink); }
.story-body h3 a:hover { color: var(--green); }

.story-body p {
  margin-top: 6px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Newsletter ------------------------------------------------------------- */
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px 28px;
  background: var(--green-deep);
  color: rgba(255, 255, 255, .78);
  text-align: center;
}

.newsletter-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  color: #fff;
}

.newsletter-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.newsletter-text {
  margin: 10px 0 20px;
  max-width: 30ch;
  font-size: .875rem;
  line-height: 1.65;
}

.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  font-size: .875rem;
  color: var(--ink);
  background: #fff;
}

.newsletter-input::placeholder { color: #9AA39C; }
.newsletter-input:focus { outline: none; }
.newsletter-form:focus-within { box-shadow: 0 0 0 3px rgba(238, 124, 32, .55); }

.newsletter-submit {
  flex: none;
  padding: 12px 18px;
  border-radius: 0;
  font-size: .75rem;
}

.newsletter-submit:hover { transform: none; }

.newsletter-note {
  min-height: 20px;
  margin-top: 12px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--orange-warm);
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .program-grid { grid-template-columns: repeat(3, 1fr); }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .newsletter {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
  .newsletter-text { max-width: 46ch; }
}

@media (max-width: 992px) {
  .hero { padding-bottom: 150px; }

  /* Six focus areas stay reachable as a scroll-snap row rather than a
     six-deep stack of text. */
  .focus-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .focus-list::-webkit-scrollbar { display: none; }
  .focus-item {
    flex: 0 0 258px;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  .hero { padding-bottom: 140px; }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .band-grid { grid-template-columns: 1fr; }
  .band-col + .band-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .hero { padding-bottom: 128px; }
  .hero-title-sub { letter-spacing: .28em; text-indent: .28em; }

  .program-grid { grid-template-columns: 1fr; }

  .campaign { grid-template-columns: 1fr; }
  .campaign-media { aspect-ratio: 16 / 10; }

  .story { grid-template-columns: 72px 1fr; }
}