/* ==========================================================================
   beale horton — Education / Cocoa360 Center
   A brief page: the place where the model lives, and is taught in action.
   Reuses tokens from home.css.
   ========================================================================== */

/* ---------- hero: full-bleed photo, copy at bottom ---------- */
.edu-hero{ position:relative; padding:0; overflow:hidden; }
.edu-hero__bg{ position:absolute; inset:0; }
.edu-hero__bg image-slot, .edu-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.edu-hero__bg::after{
  content:''; position:absolute; inset:0;
  --scrim: color-mix(in srgb, var(--deep) 35%, #070d18);
  background:linear-gradient(0deg, color-mix(in srgb, var(--scrim) 88%, transparent) 0%, color-mix(in srgb, var(--scrim) 48%, transparent) 34%, transparent 62%);
}
.edu-hero__inner{
  position:relative; z-index:2;
  min-height:max(72vh, 560px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:80px; padding-bottom:80px;
}
.edu-hero h1{
  color:var(--white); max-width:820px; margin:0 auto;
  font-size:calc(clamp(38px, 4.6vw, 60px) * var(--type-scale)); line-height:1.05;
}
.edu-hero__sub{ margin:20px auto 0; max-width:620px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.88); }
.edu-hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; justify-content:center; }

/* ---------- intro: the model, funded by the farm ---------- */
.edu-intro .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.edu-intro h2{ max-width:520px; }
.edu-intro p{ margin-top:18px; font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:560px; }
.edu-intro__photo{ border-radius:var(--r-card); overflow:hidden; height:420px; }
.edu-intro__photo image-slot, .edu-intro__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- pillars: school / clinic / internships ---------- */
.edu-pillars{ background:var(--cream); }
.edu-pillars__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:48px; }
.edu-pillar{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.edu-pillar:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 30px rgba(13,43,107,.08); }
.edu-pillar__photo{ height:210px; }
.edu-pillar__photo image-slot, .edu-pillar__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.edu-pillar__body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.edu-pillar h3{ font-size:21px; }
.edu-pillar p{ margin-top:10px; font-size:14.5px; line-height:1.68; color:var(--ink-soft); flex:1; }
.edu-pillar .text-link{ margin-top:16px; font-size:14px; }

/* ---------- taught in action: dark band, loop steps ---------- */
.edu-taught{ background:var(--deep); color:var(--white); }
.edu-taught h2{ color:var(--white); max-width:640px; }
.edu-taught__lede{ margin-top:16px; max-width:600px; color:var(--deep-tint); font-size:16.5px; line-height:1.7; }
.edu-taught__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:48px; }
.edu-learn{
  border:1px solid var(--deep-hair); border-radius:var(--r-card);
  padding:28px; background:rgba(255,255,255,.05);
}
.edu-learn h3{ color:var(--white); font-size:19px; }
.edu-learn p{ margin-top:10px; font-size:14.5px; line-height:1.68; color:var(--deep-tint); }

/* ---------- programs list ---------- */
.edu-programs .wrap--head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.edu-programs__list{ margin-top:44px; border-top:1.5px solid var(--line); }
.edu-program{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;
  gap:24px; align-items:center;
  padding:26px 6px; border-bottom:1.5px solid var(--line);
  transition:background-color .16s ease;
}
.edu-program:hover{ background:var(--cream); }
.edu-program h3{ font-size:20px; }
.edu-program__when{ display:block; margin-top:6px; font-size:13px; color:var(--ink-soft); }
.edu-program p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.edu-program .btn{ padding:9px 20px; font-size:13.5px; border-radius:var(--r-pill); white-space:nowrap; }

/* ---------- visit CTA ---------- */
.edu-visit{ background:var(--cream); }
.edu-visit .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.edu-visit p{ margin-top:16px; font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:520px; }
.edu-visit__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.edu-visit__photo{ border-radius:var(--r-card); overflow:hidden; height:340px; }
.edu-visit__photo image-slot, .edu-visit__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .edu-pillars__grid, .edu-taught__grid{ grid-template-columns:1fr; }
  .edu-intro .wrap, .edu-visit .wrap{ grid-template-columns:1fr; gap:40px; }
  .edu-intro__photo{ height:300px; }
  .edu-program{ grid-template-columns:1fr; gap:12px; align-items:start; }
}