/* educator_club_v1 · Educator Learning Club (EDUCATOR_CLUB_SPEC_v1 + SITE_PAGES_COMMON_v1 + Designer calls 05:09). Layout only: no text here. */
/* --- rhythm: spec 72 desktop / 40 phone; edges over the 144 / 96 empty-band caps go to the 56 / 32 floor (set per edge below) --- */
main > section.band{padding-top:72px!important;padding-bottom:72px!important}
main > section.hero{padding-top:56px!important;padding-bottom:72px!important}
main .sec-head{margin-bottom:32px}
main .sec-head h2{margin-bottom:0}
main > section.band > .wrap > :first-child{margin-top:0!important}
main > section.band > .wrap > :last-child,main > section.band > .wrap > :last-child > :last-child{margin-bottom:0!important}
/* frosted cards (C3) */
main .ec-g3 > .card,main .ec-rail > li,main .ec-cta,#responsible-implementation .intro{
  background:rgba(255,255,255,.66)!important;border:1px solid #D6DCE8;border-radius:22px;box-shadow:0 8px 24px rgba(20,32,74,.08);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  main .ec-g3 > .card,main .ec-rail > li,main .ec-cta,#responsible-implementation .intro{background:#fff!important}}
.hero .hero-photo{border:1px solid #D6DCE8;border-radius:22px;padding:10px;background:rgba(255,255,255,.66);box-shadow:0 8px 24px rgba(20,32,74,.08);overflow:hidden}
.hero .hero-photo img{border-radius:14px}
h1,h2,h3,h4{text-wrap:balance} main p,main li{text-wrap:pretty}
main .card > :last-child,#responsible-implementation .intro > :last-child,.ec-cta > :last-child{margin-bottom:0!important}
main .ec-g3 > .card > p:last-of-type{margin-bottom:0!important}
main .card > .btn-row,main .card > a.btn{margin-top:auto}
.ec-rail > li{padding:16px 20px;min-height:44px;display:flex;align-items:center}
.ec-rail > li strong{display:block}
#responsible-implementation .intro{padding:24px}
.ec-cta{padding:32px;text-align:center}
.ec-cta .btn-row{justify-content:center}

@media (min-width:769px){
  /* 2 · three levels: 4/4/4 stepped (live order kept: 3 → 2 → 1; the step rises toward level 1) */
  .ec-g3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:start}
  .ec-levels > .card:nth-child(1){margin-top:48px}
  .ec-levels > .card:nth-child(2){margin-top:24px}
  /* 3 · scope: 4/4/4 */
  #scope-the-right-learning-experience .ec-g3{align-items:stretch}
  /* 4 · pathway: 4-step rail 3/3/3/3, photo under it at 7 cols */
  #how-the-pathway-works .intro{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
  #how-the-pathway-works .ec-rail{grid-column:1 / -1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important;margin:0}
  #how-the-pathway-works .intro > .photo{grid-column:1 / span 7;margin:0}
  /* 5 · responsible 5/7 */
  #responsible-implementation .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #responsible-implementation .wrap > .sec-head{margin-bottom:0}
  #responsible-implementation .intro{max-width:none;margin:0}
  /* 6 · FAQ 5/7 */
  #before-you-begin .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #before-you-begin .faq{max-width:none;margin:0}
  #before-you-begin .faq summary{padding-top:10px;padding-bottom:10px;min-height:44px}
  /* 7 · next step: 8-col centred CTA card */
  #leadership-curriculum-classroom .wrap > .sec-head{text-align:center;max-width:calc(8/12*100%);margin-left:auto;margin-right:auto}
  .ec-cta{max-width:calc(8/12*100%);margin-left:auto!important;margin-right:auto!important}
  /* 8 · contact 6/6 */
  #contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  #contact .intro{max-width:none;margin:0}
}
@media (max-width:768px){
  main > section.band{padding-top:40px!important;padding-bottom:40px!important}
  main > section.hero{padding-top:32px!important;padding-bottom:40px!important}
  main .sec-head{margin-bottom:24px}
  .hero .hero-photo img{max-height:260px;width:100%;object-fit:cover}
  /* swipe rows: equal heights; photo cards give the extra height to the photo, text-only cards spread their items; nothing hidden */
  main [data-mobswipe]{align-items:stretch}
  main [data-mobswipe] > .card{display:flex;flex-direction:column;height:auto}
  main [data-mobswipe] > .card > figure.photo{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  main [data-mobswipe] > .card > figure.photo img{flex:1 1 auto;height:auto;min-height:100%;object-fit:cover}
  main [data-mobswipe] > .card:not(:has(> figure.photo)){justify-content:space-evenly}
  .ec-rail{--mobswipe-w:46%}
  #responsible-implementation .intro,.ec-cta{padding:20px}
  #before-you-begin .faq summary{padding-top:10px;padding-bottom:10px;min-height:44px}
}
/* every edge on this page passed the cap at 72 / 40 -> both sides at the 56 / 32 floor */
@media (min-width:769px){main > section.band{padding-top:56px!important;padding-bottom:56px!important}main > section.hero{padding-bottom:56px!important}}
@media (max-width:768px){main > section.band{padding-top:32px!important;padding-bottom:32px!important}main > section.hero{padding-bottom:32px!important}}
/* inner trims: photo is last in the DOM but shown first, so the visually-last item keeps no bottom margin; card pads at spec 24 */
main .ec-g3 > .card:has(> figure.photo:last-child) > :nth-last-child(2){margin-bottom:0!important}
@media (min-width:769px){main .ec-g3 > .card{padding-bottom:16px!important}.ec-cta{padding:24px}}
/* full content width for the 3-card grids (an older theme rule left them at a fixed narrow width); no lone-card rule on 3-ups */
@media (min-width:769px){
  main .ec-g3{width:100%!important;max-width:none!important}
  main .ec-g3 > .card:last-child{grid-column:auto!important;width:auto!important;justify-self:stretch!important}
}
main .ec-g3 figure.photo{margin-bottom:16px!important}
main .ec-g3 figure.photo figcaption:empty{display:none}
@media (max-width:768px){main .ec-g3[data-mobswipe]{width:100%!important;max-width:100%!important}}
.ec-rail > li{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}