/* school-pages.css
 * Loaded by all 30 *-college-tutoring.html, -shs-tutoring.html, and other
 * school-profile pages. Defines the hero, stat-strip, story, known-for,
 * considerations, pathway, transport, and CTA sections.
 *
 * Theme tokens come from the per-page inline <style> --theme/--theme-2 vars.
 * Falls back to violet/pink when --theme isn't set.
 */

/* ====== HERO ====== */
.hero{
 position:relative;
 padding:140px 24px 70px;
 background:radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--theme,#A556EF) 14%, transparent), transparent 55%),
            linear-gradient(180deg, #fbfbff 0%, #fdf5ff 100%);
 text-align:center;
 overflow:hidden;
}
.hero-inner{
 max-width:880px;
 margin:0 auto;
 position:relative;
}
.hero-crest{
 display:flex;
 justify-content:center;
 margin-bottom:24px;
}
.hero-crest .crest{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:88px;
 height:88px;
 border-radius:24px;
 background:#fff;
 border:1px solid rgba(11,26,52,.08);
 box-shadow:0 18px 40px -22px rgba(11,26,52,.28);
 overflow:hidden;
 position:relative;
}
.hero-crest .crest::before{
 content:attr(data-letters);
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-family:'Fredoka','Inter',sans-serif;
 font-weight:600;
 font-size:30px;
 color:var(--c, var(--theme, #A556EF));
 letter-spacing:-.02em;
}
.hero-crest .crest img{
 width:100%;
 height:100%;
 object-fit:contain;
 padding:8px;
 background:#fff;
 position:relative;
 z-index:1;
}
.hero-crest .crest img.failed{display:none}
.pill-row{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:8px;
 margin-bottom:22px;
}
.pill{
 display:inline-flex;
 align-items:center;
 padding:6px 14px;
 border-radius:999px;
 background:#fff;
 border:1px solid rgba(11,26,52,.08);
 color:var(--ink-soft,#1e3a5f);
 font-size:12.5px;
 font-weight:600;
 letter-spacing:.01em;
}
.hero h1{
 font-size:clamp(36px,5.6vw,60px);
 line-height:1.02;
 letter-spacing:-.03em;
 font-weight:900;
 color:var(--ink,#0b1a34);
 margin:0 0 18px;
}
.hero h1 .accent{
 font-family:'Instrument Serif',serif;
 font-style:italic;
 font-weight:400;
 background:linear-gradient(120deg, var(--theme,#A556EF), var(--theme-2,#EC4899));
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
 padding:0 .06em .12em 0;
}
.hero p.kicker{
 display:block;
 max-width:640px;
 margin:0 auto;
 padding:0;
 background:none;
 color:var(--ink-soft,#1e3a5f);
 font-size:clamp(15.5px, 1.5vw, 18px);
 font-weight:500;
 line-height:1.6;
 letter-spacing:0;
 text-transform:none;
}

/* ====== STAT STRIP ====== */
.stat-strip{
 padding:36px 0 6px;
 background:#fbfbff;
}
.stat-strip .container{
 max-width:1080px;
 margin:0 auto;
 padding:0 24px;
}
.stat-grid{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:14px;
}
@media(max-width:760px){
 .stat-grid{grid-template-columns:repeat(2,1fr)}
}
.stat{
 background:#fff;
 border:1px solid var(--border,#e6e8f2);
 border-radius:14px;
 padding:18px 16px;
 text-align:center;
}
.stat .num{
 font-family:'Instrument Serif',serif;
 font-style:italic;
 font-size:30px;
 font-weight:400;
 line-height:1;
 color:var(--theme,#A556EF);
 margin-bottom:6px;
}
.stat .lbl{
 font-size:11.5px;
 font-weight:700;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:var(--muted,#5a6a85);
 line-height:1.3;
}

/* ====== STORY + PATHWAY (narrow text-only sections) ====== */
.story{padding:60px 24px}
.pathway{
 padding:60px 24px;
 background:linear-gradient(180deg, #fbfbff, #fff);
 border-top:1px solid var(--border,#e6e8f2);
}
.story .narrow,
.pathway .narrow,
.transport .narrow{
 max-width:760px;
 margin:0 auto;
}
.story h2,
.pathway h2{
 font-size:clamp(26px, 3.6vw, 34px);
 font-weight:900;
 letter-spacing:-.02em;
 color:var(--ink,#0b1a34);
 margin:0 0 18px;
 line-height:1.15;
}
.story p,
.pathway p{
 font-size:16px;
 line-height:1.7;
 color:var(--ink,#0b1a34);
 margin:0 0 16px;
}
.story p:last-child,
.pathway p:last-child{margin-bottom:0}
.story strong,
.pathway strong{font-weight:700;color:var(--ink,#0b1a34)}

/* ====== KNOWN-FOR (2-col card grid) ====== */
.known-for{
 padding:64px 24px;
 background:linear-gradient(180deg, #fff, #fbfbff);
 border-top:1px solid var(--border,#e6e8f2);
}
.known-for .container{
 max-width:1080px;
 margin:0 auto;
}
.known-for h2{
 font-size:clamp(26px, 3.6vw, 34px);
 font-weight:900;
 letter-spacing:-.02em;
 color:var(--ink,#0b1a34);
 margin:0 0 28px;
 text-align:center;
 line-height:1.15;
}
.known-grid{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:18px;
}
@media(max-width:760px){
 .known-grid{grid-template-columns:1fr}
}
.known{
 background:#fff;
 border:1px solid var(--border,#e6e8f2);
 border-left:3px solid var(--theme,#A556EF);
 border-radius:14px;
 padding:22px 24px;
}
.known h3{
 font-size:17px;
 font-weight:800;
 color:var(--ink,#0b1a34);
 margin:0 0 8px;
 letter-spacing:-.01em;
 line-height:1.3;
}
.known p{
 font-size:14.5px;
 color:var(--ink-soft,#1e3a5f);
 line-height:1.6;
 margin:0;
}

/* ====== CONSIDERATIONS ====== */
.considerations{
 padding:64px 24px;
 background:#fff;
 border-top:1px solid var(--border,#e6e8f2);
}
.considerations .container{
 max-width:1080px;
 margin:0 auto;
}
.considerations h2{
 font-size:clamp(26px, 3.6vw, 34px);
 font-weight:900;
 letter-spacing:-.02em;
 color:var(--ink,#0b1a34);
 margin:0 0 14px;
 text-align:center;
 line-height:1.15;
}
.considerations p.lead{
 font-size:15.5px;
 color:var(--ink-soft,#1e3a5f);
 max-width:640px;
 margin:0 auto 28px;
 text-align:center;
 line-height:1.6;
}
.consider-list{
 display:grid;
 grid-template-columns:repeat(2, 1fr);
 gap:14px;
}
@media(max-width:760px){
 .consider-list{grid-template-columns:1fr}
}
.consider{
 background:#fbfbff;
 border:1px solid var(--border,#e6e8f2);
 border-radius:14px;
 padding:20px 22px;
}
.consider h4{
 font-size:15.5px;
 font-weight:800;
 color:var(--ink,#0b1a34);
 margin:0 0 6px;
 letter-spacing:-.005em;
}
.consider p{
 font-size:14px;
 color:var(--ink-soft,#1e3a5f);
 line-height:1.6;
 margin:0;
}

/* ====== TRANSPORT ====== */
.transport{
 padding:48px 24px 56px;
 background:#fff;
 border-top:1px solid var(--border,#e6e8f2);
}
.transport .dist-card{
 background:linear-gradient(135deg, #fbfbff, #f3eaff);
 border:1px solid var(--border,#e6e8f2);
 border-radius:18px;
 padding:24px 28px;
 display:flex;
 align-items:flex-start;
 gap:18px;
}
.transport .dist-icon{
 flex-shrink:0;
 font-size:30px;
 line-height:1;
}
.transport .dist-card h3{
 font-size:17px;
 font-weight:800;
 color:var(--ink,#0b1a34);
 margin:0 0 6px;
 letter-spacing:-.01em;
}
.transport .dist-card p{
 font-size:14.5px;
 color:var(--ink-soft,#1e3a5f);
 line-height:1.6;
 margin:0;
}

/* ====== CTA SECTION ======
 * Note: .cta-card itself is styled globally in styles.css (the violet→pink→amber
 * gradient card used across the site). We only set the outer section's spacing
 * here so the gradient card sits on a clean light page background, not a dark
 * navy strip.
 */
.cta-section{
 padding:60px 24px 90px;
 background:transparent;
}
.cta-section .container{
 max-width:1100px;
 margin:0 auto;
}

/* ====== SOURCES-NOTE (small citation footnote between CTA and FAQ) ====== */
.sources-note{
 padding:22px 24px 28px;
 background:#fbfbff;
 border-top:1px solid var(--border,#e6e8f2);
}
.sources-note .container{
 max-width:780px;
 margin:0 auto;
 font-size:13px;
 color:var(--muted,#5a6a85);
 line-height:1.55;
 text-align:center;
}
.sources-note a{
 color:var(--theme,#A556EF);
 text-decoration:underline;
 text-decoration-thickness:1px;
 text-underline-offset:2px;
}
.sources-note a:hover{
 color:var(--theme-2,#EC4899);
}

/* ====== CTA-STRIP (Trinity College variant) ====== */
.cta-strip{
 padding:70px 24px;
 background:linear-gradient(135deg, #1d0b3a 0%, #2a124d 100%);
 color:#fff;
 text-align:center;
}
.cta-strip .container{
 max-width:780px;
 margin:0 auto;
}
.cta-strip h2{
 font-size:clamp(28px, 4vw, 38px);
 font-weight:900;
 letter-spacing:-.02em;
 line-height:1.1;
 margin:0 0 14px;
}
.cta-strip h2 .accent{
 font-family:'Instrument Serif',serif;
 font-style:italic;
 font-weight:400;
 background:linear-gradient(120deg, #F5A8FF, #FFD1E0);
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
}
.cta-strip p{
 font-size:16px;
 color:rgba(255,255,255,.78);
 max-width:560px;
 margin:0 auto 24px;
 line-height:1.6;
}