/* Homeschool Town — home page sections */

/* ---- Hero ---- */
.hero {
  background-image: var(--grad-hero);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero__inner {
  display: grid; gap: var(--s-7); align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
}
@media (max-width: 56rem) { .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); } }

.hero__title {
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.025em;
  max-width: 14ch; margin-block: var(--s-4) var(--s-4);
}
.hero__lead { font-size: var(--t-lead); color: var(--muted); max-width: 46ch; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* a small location pill above the title */
.hero__where {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--bg); color: var(--primary);
  border: 1px solid var(--border-warm); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3); font-size: var(--t-xs); font-weight: 500;
}
.hero__where .icon { font-size: 1rem; }
.hero__where strong { color: var(--ink); font-weight: 600; }

/* hero visual: a small fanned cluster of real place cards */
.hero__visual { position: relative; display: grid; gap: var(--s-4); }
@media (max-width: 56rem) { .hero__visual { max-width: 30rem; } }
.place-mini {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-sm);
}
.place-mini:nth-child(odd) { transform: rotate(-0.6deg); }
.place-mini:nth-child(even) { transform: rotate(0.7deg); margin-inline-start: var(--s-5); }
@media (max-width: 56rem) { .place-mini { transform: none !important; margin-inline-start: 0 !important; } }
.place-mini__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.15; }
.place-mini__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.place-mini__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---- Section heading row ---- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-h2); }
.section-head p { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s-2); }
.section-head__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.section-head__link .icon { transition: transform var(--dur) var(--ease-out-quart); }
.section-head__link:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .section-head__link:hover .icon { transform: none; } }

/* ---- How it works (genuine 3-step sequence) ---- */
.steps { background-image: var(--grad-surface); border-block: 1px solid var(--border); }
.steps__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 52rem) { .steps__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  background: var(--clay-tint); color: var(--primary); font-size: 1.5rem;
}
.step--green .step__icon { background: var(--accent-tint); color: var(--accent-hover); }
.step h3 { font-size: var(--t-h3); }
.step p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.step__n { font-size: var(--t-xs); font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }

/* ---- Promise band ---- */
.promise {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center;
  background: var(--accent-tint); border: 1px solid oklch(0.52 0.105 150 / 0.2);
  border-radius: var(--r-xl); padding: clamp(var(--s-5), 4vw, var(--s-7));
}
@media (max-width: 48rem) { .promise { grid-template-columns: 1fr; text-align: left; gap: var(--s-4); } }
.promise__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg);
  background: var(--accent); color: var(--on-accent); font-size: 1.9rem;
}
.promise h2 { font-size: var(--t-h3); color: var(--ink); }
.promise p { color: var(--ink-soft); font-size: var(--t-sm); max-width: 60ch; margin-top: var(--s-2); }