/* Homepage-specific layout , generic pieces live in layout.css/components.css */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-blue-darker) 0%, var(--color-blue) 100%);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-stats {
    justify-content: center;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  margin-bottom: var(--space-lg);
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
  margin-bottom: var(--space-md);
}

.hero p.lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.15rem;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .hero p.lead {
    max-width: none;
    margin-inline: auto;
  }
}

.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

@media (max-width: 900px) {
  .hero-actions {
    justify-content: center;
  }
}

.hero-stats {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

.hero-stats .stat-num {
  color: #fff;
}

.hero-stats .stat-label {
  color: rgba(255, 255, 255, 0.72);
}

/* Program grid */
.program-tile[style*="tile-1"] {
  --tile-color-1: #2b99ce;
  --tile-color-2: #145170;
}

/* Impact / stats band */
.impact-band {
  background: var(--color-blue-darker);
  color: #fff;
}

.impact-band .stat-num {
  color: #fff;
}

.impact-band .stat-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Newsletter CTA band */
.newsletter-band {
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-darker));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 780px) {
  .newsletter-band {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.newsletter-band h2 {
  color: #fff;
}

.newsletter-band p {
  color: rgba(255, 255, 255, 0.85);
}

.newsletter-inline-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.newsletter-inline-form .field {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .newsletter-inline-form {
    justify-content: center;
  }
}