/*
 * File: public\css\school\childhood.css
 * Purpose: Defines presentation styles for the childhood interface.
 */

:root{
  --ml-blue:#1e2a57;
  --text:#2c3e50;
  --muted:#6b7280;
  --grey:#f3f4f6;
  --shadow: 0 10px 24px rgba(0,0,0,.12);
  --radius: 14px;
}

body{
  color: var(--text);
  background:#fff;
}

/* HERO */
.child-overlay{
  background: var(--hero-overlay);
  text-align:center;
  padding: 0 20px;
}
.child-overlay h1{
  font-size:50px;
  font-weight:800;
}

/* SECTIONS */
.section{
  padding: 56px 0;
}
.section.white{ background:#fff; }
.section.grey{ background: var(--grey); }

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items:center;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* pill heading */
.pill-wrap{
  text-align:center;
  margin-bottom:18px;
}
.pill{
  display:inline-block;
  background: var(--ml-blue);
  color:#fff;
  padding: 12px 26px;
  border-radius: 999px;
}
.pill h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}

/* text */
.lead, .body{
  color:#374151;
  line-height:1.75;
}
.lead{ font-size:16.5px; margin:0; }
.body{ font-size:16px; margin:0 0 14px; }
.muted{ color: var(--muted); }

/* image card */
.image-card{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.image-card img{
  width:100%;
  height: 320px;
  object-fit: cover;
  display:block;
}

/* goals bullets */
.bullets{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.bullets li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.dot{
  color: var(--ml-blue);
  font-weight: 900;
  margin-top: 4px;
}

/* hours */
.hours-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 900px){
  .hours-grid{ grid-template-columns:1fr; }
}
.hours-card{
  background:#f9fafb;
  border: 2px solid var(--ml-blue);
  border-radius: var(--radius);
  padding: 26px;
}
.hours-card h3{
  margin:0 0 10px;
  color: var(--ml-blue);
  font-size:22px;
  font-weight:800;
}
.hours-time{
  margin:0 0 10px;
  font-weight:700;
}
.hours-notes{
  max-width: 900px;
  margin: 18px auto 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* contact strip */
.contact-strip{
  background: var(--ml-blue);
  color:#fff;
  padding: 28px 0;
  text-align:center;
}
.contact-strip p{
  margin:0;
  font-size:18px;
  line-height:1.6;
  padding: 0 18px;
}
.contact-strip a{
  color:#fff;
  text-decoration: underline;
  font-weight:800;
}
.contact-strip a:hover{ opacity:.85; }
.pill { padding: 6px 16px; }
.pill h2 { font-size: 16px; }
.pill-wrap { margin-bottom: 10px; }