/* ============================================================
   SOLUA — For Homeschooling Families
   Extends styles.css + parents.css. Reuses the proven layout
   components (par-hero, help-grid, ages band, timeline, par-quote,
   first-teacher). Identity: soft indigo (Advent — study, watchful
   attention) as the lead accent, a horizontal "school day bells"
   strip, the classical-trivium stages, and a Scripture band.
   ============================================================ */

:root { --indigo: #6B7B9E; --indigo-deep: #51607F; }

/* ---------- hero: re-tint the glows toward indigo ---------- */
.hs-hero .hero-glow {
  background: radial-gradient(circle, rgba(107,123,158,0.50) 0%, rgba(107,123,158,0.12) 44%, transparent 68%);
}
.hs-hero .hero-glow.two {
  background: radial-gradient(circle, rgba(212,183,133,0.24) 0%, transparent 66%);
}
.hs-hero .ph-card .ph-ico { background: rgba(107,123,158,0.24); color: #A9B6D2; }

/* ---------- editorial statement (reuses .first-teacher) ---------- */
.classroom .ft-eyebrow { color: var(--indigo); }
.classroom p.lead b { color: var(--indigo-deep); }

/* ---------- help cards: indigo icon tiles ---------- */
.hs-help .help .h-ico { background: rgba(107,123,158,0.13); color: var(--indigo); }

/* ---------- "school day, prayed" — horizontal bells strip ---------- */
.bells { background: var(--hero-ink); color: var(--color-cream); position: relative; overflow: hidden; }
.bells .hero-glow { top: -28%; left: -10%; right: auto; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(107,123,158,0.34) 0%, transparent 66%); }
.bells .wrap { position: relative; z-index: 2; }
.bells .section-head { max-width: 640px; }
.bells .section-head h2 { color: var(--color-cream); }
.bells .section-head .eyebrow { color: #A9B6D2; }
.bells .section-head p { color: rgba(250,247,242,0.7); }

.bell-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.bell {
  position: relative; border-radius: var(--radius-lg); padding: 26px 24px 28px;
  background: rgba(250,247,242,0.05); border: 1px solid rgba(250,247,242,0.12);
  display: flex; flex-direction: column;
  transition: background var(--duration-base) var(--ease-calm);
}
.bell:hover { background: rgba(250,247,242,0.08); }
.bell .b-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--seg, var(--indigo)); color: var(--color-cream); margin-bottom: 18px; }
.bell .b-ico svg { width: 23px; height: 23px; }
.bell .b-time { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250,247,242,0.56); margin: 0 0 6px; }
.bell h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.14; }
.bell p { font-size: 14.5px; line-height: 1.5; color: rgba(250,247,242,0.72); margin: 0; text-wrap: pretty; }
.bell .b-latin { font-style: italic; color: rgba(250,247,242,0.6); }
.bell .b-step { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 700;
  color: rgba(250,247,242,0.32); letter-spacing: 0.04em; }

/* ---------- classical-trivium stages — re-uses .ages / .age-row ---------- */
/* segment colors set inline per row */

/* ---------- Scripture band (reuses pattern, indigo tint) ---------- */
.verse { background: var(--color-surface-1); position: relative; overflow: hidden; text-align: center; }
.verse .vglow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 760px; height: 760px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(107,123,158,0.14) 0%, transparent 62%); }
.verse .wrap { position: relative; z-index: 2; max-width: 900px; }
.verse .v-cross {
  width: 50px; height: 50px; border-radius: 15px; margin: 0 auto 30px;
  display: grid; place-items: center; background: rgba(107,123,158,0.14); color: var(--indigo-deep);
}
.verse .v-cross svg { width: 24px; height: 24px; }
.verse blockquote {
  margin: 0; font-weight: 300; font-style: italic;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.28; letter-spacing: -0.02em;
  color: var(--color-text-primary); text-wrap: balance;
}
.verse cite {
  display: block; margin-top: 26px; font-style: normal; font-weight: 600;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo-deep);
}

/* ---------- homeschool quote (reuses .par-quote) — larger photo ---------- */
.hs-quote .pq-who .stars { color: var(--color-christmas); }
.hs-quote .wrap { gap: 56px; }
.hs-quote .pq-photo { width: 240px; height: 280px; }

/* ---------- closing accent ---------- */
.hs-closing .closing-badge { background: var(--indigo); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .bell-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .bell-row { grid-template-columns: 1fr; }
  .hs-quote .pq-photo { width: 100%; height: 280px; }
}