/* Shared surfaces and rhythm for the complete detail-page family. Typography is separate. */
:root{--detail-navy:#102c53;--detail-blue:#2458e8;--detail-canvas:#f5f7fb;--detail-rule:#dce3ee;--detail-shadow:0 16px 48px #17335b0b;--detail-sky:#eaf3ff;--detail-warm:#fff7e9}
body.detail-layout{background:var(--detail-canvas)}
.detail-layout .site-header{position:relative;isolation:isolate;border-bottom-color:var(--detail-rule)}
.detail-layout .site-header::before{content:'';position:absolute;inset:0;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);z-index:-1;pointer-events:none}
.detail-layout .site-footer{background:#fff;border-top-color:var(--detail-rule)}
.detail-layout main{color:var(--detail-navy)}
.detail-panel{min-width:0;background:#fff;border:1px solid var(--detail-rule);border-radius:24px;box-shadow:var(--detail-shadow)}
.detail-panel--soft{background:var(--detail-sky);border-color:#d7e6fb}
.detail-panel--blue{background:linear-gradient(125deg,#102c53,#1d4693);border-color:transparent;color:#fff;position:relative;isolation:isolate;overflow:hidden}
.detail-panel--blue::before{content:'';position:absolute;width:340px;height:340px;border:1px solid #ffffff12;border-radius:50%;right:-100px;top:-130px;z-index:-1;box-shadow:0 0 0 64px #ffffff04,0 0 0 128px #ffffff03;pointer-events:none}
.detail-section-heading{display:flex;align-items:center;gap:14px;min-width:0;margin-bottom:24px}
.detail-section-heading>h2,.detail-section-heading>h3{min-width:0;margin:0}
.detail-section-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:#edf3ff;color:var(--detail-blue)}
.detail-section-icon>.icon{width:22px;height:22px}
.detail-kicker{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:var(--detail-blue)}
.detail-kicker>.icon{width:17px;height:17px}
.detail-layout .school-card{padding:12px;border:1px solid var(--detail-rule);border-radius:24px;background:#fff;box-shadow:0 8px 24px #183b6510}
.detail-layout .school-card .card-cover{border-radius:16px}
.detail-layout .school-card .card-content{padding:0 6px 6px}
.detail-layout .school-card:hover{border-color:#b8c9e7;box-shadow:0 16px 36px #17335b14}
@media(max-width:680px){.detail-panel{border-radius:20px}.detail-section-heading{gap:12px;margin-bottom:20px}.detail-section-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}.detail-layout .school-card{padding:10px;border-radius:22px}}