/* SD IT Lukmanul Hakim Bangkinang – V6
   Prinsip: putih, biru sekolah, hierarki tipografi jelas, dokumentasi asli, tanpa ornamen logo semu.
   CSS tambahan, tidak memodifikasi skema database dan tidak mengubah halaman admin fungsional. */
:root{
  --forest:#193d54;
  --forest-dark:#102e42;
  --gold:#40a9df;
  --paper:#fff;
  --border:#e2e9ed;
  --ink:#243645;
  --content-width:1180px;
  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);color:#314355;background:#fff;line-height:1.7}
body :where(h1,h2,h3,h4){text-wrap:pretty}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #37aae9;outline-offset:3px}
.container{width:min(var(--content-width),calc(100% - 48px))}
.topstripe{background:#edf6fc;color:#274c66;border-bottom:1px solid #e0edf4;font-size:.75rem;font-weight:650;letter-spacing:.01em}
.topstripe .tiny-spark{display:none}
.site-header{background:rgba(255,255,255,.98);border-bottom:1px solid #e4ebef;box-shadow:0 5px 22px rgba(24,65,92,.04)}
.nav-wrap{min-height:94px;gap:16px}
.brand{gap:13px;min-width:0}
.brand-logo{width:70px;height:70px;object-fit:contain;border-radius:9px;background:#fff;flex-shrink:0}
.brand-words{max-width:285px;line-height:1.35;gap:1px;color:#193d54}
.brand-words strong{font-weight:850;font-size:clamp(.8rem,1.1vw,1rem);line-height:1.24;letter-spacing:.015em}
.brand-words small{font-size:.75rem;font-weight:750;color:#245d80;letter-spacing:.1em}
.brand-tagline{color:#456a7a;font-size:.67rem;font-weight:700;line-height:1.3;letter-spacing:0;margin-top:3px;max-width:285px}
.main-nav{gap:clamp(8px,.95vw,18px)}
.main-nav>a,.main-nav>.nav-dropdown>summary{color:#315367;font-weight:700;font-size:.81rem}
.main-nav>a:hover,.main-nav>a.selected,.main-nav>.nav-dropdown>summary:hover{color:#146f9f}
.main-nav .nav-cta{border-radius:8px;box-shadow:none;background:#1a739e;color:#fff!important;padding:11px 18px!important}
.main-nav .nav-cta:hover{background:#125a7e}
.nav-dropdown[open]>summary{border-bottom-color:#40a9df}
.nav-submenu{border:1px solid #e5edf1;box-shadow:0 16px 38px rgba(18,50,69,.12)}
.hero{background:linear-gradient(117deg,#123851 0%,#1d5676 100%);color:#fff}
.hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:565px;gap:clamp(30px,5vw,80px)}
.hero-copy{padding:75px 0 80px}
.hero-chip{border-color:rgba(255,255,255,.28)!important;background:rgba(255,255,255,.1)!important;color:#e5f4fc!important;font-size:.77rem}
.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.7rem,4.2vw,4.5rem);letter-spacing:-.034em;line-height:1.12;max-width:650px}
.hero-copy h1 em{font-style:normal;color:#a9dafa}
.hero-copy>p{font-size:1.03rem;line-height:1.84;color:#ecf5fa;max-width:580px}
.hero-sign{margin-top:37px;padding-top:16px;color:#d9eefa;font-size:.92rem;font-weight:700;letter-spacing:.01em}
.hero-actions{gap:11px;flex-wrap:wrap}
.hero-actions .btn.light{background:#fff;color:#19536e}
.hero-actions .btn.outline-light{border-color:#d0e8f4;color:#fff}
.hero-visual.school-hero-photo{height:420px;width:100%;max-width:535px;display:block;position:relative;border:7px solid rgba(255,255,255,.85);border-radius:19px;box-shadow:0 25px 60px rgba(2,28,45,.22);overflow:hidden;transform:none;justify-self:end;background:#cedfe7}
.school-hero-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.school-hero-photo-caption{position:absolute;inset:auto 0 0;padding:45px 24px 23px;color:#fff;background:linear-gradient(transparent,rgba(8,35,55,.83))}
.school-hero-photo-caption span{display:block;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:#c6e9ff;font-weight:800;margin-bottom:3px}
.school-hero-photo-caption strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.2rem;line-height:1.3}
.trust-band{border-bottom:1px solid #ebeff3;background:#f9fcfe}
.value-icon{color:#318cc0;font-weight:850;font-family:var(--font-ui)}
.values-strip strong{color:#29465a}
.values-strip small{color:#617888}
.section{padding-block:clamp(48px,5vw,79px)}
.section-lead .eyebrow,.intro-copy .eyebrow,.inner-hero .eyebrow{color:#269ed5}
.section-lead h2,.intro-copy h2{color:#203b4d;font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em;font-size:clamp(1.8rem,3vw,2.65rem)}
.soft-section{background:#f5f9fc}
.decor-panel{background:#f5fbff;min-height:380px;border:1px solid #dceaf3;box-shadow:none;border-radius:18px;display:grid;place-items:center}
.decor-panel-inner{min-height:295px;width:100%;border:0;border-radius:0;color:#254862;gap:18px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.15rem,2vw,1.6rem)}
.school-intro-emblem{max-width:155px;width:50%;height:auto;object-fit:contain;border-radius:7px}
.feature-grid{gap:20px}
.feature-card{border:1px solid #e3eaf0;border-radius:16px;background:#fff;box-shadow:0 4px 20px rgba(21,56,80,.035)}
.feature-glyph{font-size:1.23rem;color:#2195cd;font-family:var(--font-ui);font-weight:850}
.feature-card h3{color:#254b62}
.feature-card p{color:#607787}
.feature-card>span{color:#267da8}
.inner-hero{background:linear-gradient(115deg,#163d56,#216083);padding:64px 0 70px}
.inner-hero h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em}
.inner-hero p{color:#e2f1f9}
.news-grid{gap:24px}
.news-card{border:1px solid #e2eaf0;border-radius:15px;box-shadow:0 4px 20px rgba(24,65,92,.035)}
.news-card:hover{box-shadow:0 12px 35px rgba(24,65,92,.1)}
.news-card .news-art{height:230px;background:#eaf2f7}
.news-card .news-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.news-card:hover .news-art img{transform:scale(1.025)}
.news-card .news-content{padding:22px 23px 25px;gap:11px}
.news-card .news-content small{color:#377e9d;font-weight:800;letter-spacing:.015em}
.news-card .news-content h3{font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;font-weight:700;line-height:1.42;color:#223e50}
.news-card .news-content p{color:#667887}
.news-card .news-content .text-link{color:#176d9c}
.footer{background:#11354c}
.footer :where(a,h3){color:#e9f3f8}
.footer-bottom{border-top-color:rgba(255,255,255,.12)}

/* Halaman artikel: komposisi penerbitan, bukan kartu admin atau blok besar yang sempit */
.school-article-page{background:#fff;padding:0 0 90px;color:#334859}
.school-breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:26px 0 13px;font-size:.8rem;color:#738899}
.school-breadcrumb a{color:#296a94;text-decoration:none;font-weight:650}
.school-breadcrumb a:hover{text-decoration:underline}
.school-breadcrumb>span:last-child{color:#738899}
.school-article-heading{max-width:900px;padding:25px 0 29px}
.school-article-category{font-size:.73rem;letter-spacing:.16em;font-weight:850;color:#208cc5;margin:0 0 11px}
.school-article-heading h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4.5vw,3.45rem);font-weight:700;letter-spacing:-.035em;line-height:1.2;color:#19394e;margin:0;overflow-wrap:anywhere}
.school-article-byline{font-size:.85rem;color:#708597;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:21px 0 0}
.school-editorial-layout{display:grid;grid-template-columns:minmax(0,785px) minmax(252px,1fr);gap:clamp(28px,4vw,52px);align-items:start}
.school-editorial-main{min-width:0}
.school-editorial-cover{margin:0 0 33px}
.school-editorial-cover img{display:block;width:100%;height:auto;max-height:545px;aspect-ratio:16 / 10;object-fit:cover;object-position:center;border-radius:14px;background:#f2f7fa}
.school-editorial-cover figcaption{font-size:.75rem;color:#8b9dab;text-align:right;margin-top:9px}
.school-article-standfirst{font-size:1.16rem;font-weight:650;color:#3b5a6e;line-height:1.8;margin:0 0 30px;padding:0 0 24px;border-bottom:1px solid #e1eaf0}
.article-prose.school-editorial-prose{max-width:100%;font-size:clamp(1rem,1.2vw,1.085rem);line-height:1.94;color:#364a59;overflow-wrap:anywhere}
.school-editorial-prose :where(p,div){line-height:1.94}
.school-editorial-prose p{margin:0 0 1.35em}
.school-editorial-prose h2{font-family:Georgia,"Times New Roman",serif;color:#214459;line-height:1.35;margin:1.7em 0 .7em;font-size:1.65rem}
.school-editorial-prose h3{font-family:Georgia,"Times New Roman",serif;color:#214459;margin:1.55em 0 .6em;font-size:1.32rem}
.school-editorial-prose ul,.school-editorial-prose ol{padding-left:1.55rem;margin-bottom:1.4em}
.school-editorial-prose li{margin-bottom:.45em}
.school-editorial-prose blockquote{border-left:4px solid #45b1e7;background:#f4faff;color:#34566e;padding:16px 22px;border-radius:0 10px 10px 0;margin:1.5em 0}
.school-editorial-prose a{color:#167cae;text-decoration:underline;text-underline-offset:3px}
.school-event-info{display:flex;align-items:flex-start;flex-direction:column;gap:6px;padding:20px 24px;background:#f4fafe;border:1px solid #dcebf4;border-radius:12px;margin:0 0 26px;font-size:.91rem;color:#386078}
.school-event-info strong{font-weight:800;color:#1a5b80}
.school-article-foot{margin-top:45px;border-top:1px solid #e2eaf1;padding-top:24px}
.school-back-link{color:#236d96;font-size:.91rem;text-decoration:none;font-weight:750}
.school-back-link:hover{text-decoration:underline}
.school-article-aside{display:flex;flex-direction:column;gap:22px;min-width:0;position:sticky;top:126px}
.school-aside-card{border:1px solid #e1eaf0;background:#f9fcfe;border-radius:15px;padding:24px 23px}
.school-aside-kicker{font-size:.69rem;color:#2383b0;letter-spacing:.14em;font-weight:850;margin:0 0 7px}
.school-aside-card h2{font-family:Georgia,"Times New Roman",serif;color:#23465b;font-size:1.25rem;line-height:1.35;margin:0 0 10px}
.school-aside-card>p:not(.school-aside-kicker){color:#718493;font-size:.84rem;line-height:1.55;margin:0 0 12px}
.school-aside-nav{display:grid;gap:0;margin-top:8px}
.school-aside-nav a{padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;border-bottom:1px solid #e2ebf2;font-size:.87rem;color:#3c5d71;font-weight:700}
.school-aside-nav a:last-child{border:0}
.school-aside-nav a span{color:#2488b6}
.school-aside-nav a:hover{color:#137eae}
.school-aside-news{background:#fff}
.school-related-item{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:start;gap:12px;color:#2e4d61;text-decoration:none;padding:13px 0;border-bottom:1px solid #e6eef3}
.school-related-item:last-child{border:0;padding-bottom:0}
.school-related-item img{width:86px;height:67px;object-fit:cover;border-radius:7px;background:#e9f3f8}
.school-related-item span{min-width:0}
.school-related-item small{display:block;color:#8497a5;font-size:.69rem;line-height:1.4;margin-bottom:4px}
.school-related-item strong{display:block;color:#2a495b;font-size:.81rem;line-height:1.45;font-weight:750;overflow-wrap:anywhere}
.school-related-item:hover strong{color:#148ac0}

@media(max-width:1180px){
  .nav-wrap{min-height:82px}
  .main-nav{gap:8px}
  .main-nav>a,.main-nav>.nav-dropdown>summary{font-size:.78rem}
  .brand-words{max-width:245px}
  .brand-logo{width:60px;height:60px}
  .brand-tagline{font-size:.62rem}
  .hero-grid{gap:30px}
}
@media(max-width:1120px){
  .nav-wrap{position:relative}
  .main-nav{background:#fff!important;border:1px solid #e3ecf2!important}
  .main-nav.is-open{display:flex}
}
@media(max-width:920px){
  .school-editorial-layout{grid-template-columns:minmax(0,1fr)}
  .school-article-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:12px}
  .school-article-heading{max-width:100%}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
  .hero-visual.school-hero-photo{height:370px}
  .school-intro-emblem{max-width:135px}
}
@media(max-width:760px){
  .container{width:calc(100% - 34px)}
  .topstripe-inner{min-height:31px;justify-content:center;text-align:center}
  .brand-logo{width:55px;height:55px}
  .brand-words strong{font-size:.8rem}
  .brand-words small{font-size:.68rem}
  .brand-tagline{font-size:.59rem}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:0;padding-bottom:32px}
  .hero-copy{padding:56px 0 20px}
  .hero-copy h1{font-size:clamp(2.25rem,8vw,3.35rem)}
  .hero-visual.school-hero-photo{height:clamp(220px,55vw,350px);max-width:100%;width:100%;transform:none;margin:8px 0 16px;justify-self:stretch}
  .hero-sign{margin-top:26px}
  .school-article-heading{padding:15px 0 23px}
  .school-article-page{padding-bottom:65px}
  .school-breadcrumb{padding:23px 0 8px}
  .school-aside-card{padding:20px}
  .school-related-item{grid-template-columns:74px minmax(0,1fr)}
  .school-related-item img{height:62px;width:74px}
  .decor-panel{min-height:260px}
  .decor-panel-inner{min-height:220px}
  .inner-hero{padding-block:60px}
}
@media(max-width:590px){
  .brand-logo{height:48px;width:48px}
  .brand-words{max-width:min(250px,calc(100vw - 130px))}
  .brand-words strong{font-size:.72rem}
  .brand-words small{font-size:.65rem;letter-spacing:.06em}
  .brand-tagline{font-size:.57rem}
  .school-article-heading h1{font-size:clamp(1.84rem,7vw,2.6rem);line-height:1.22}
  .school-article-aside{grid-template-columns:1fr}
  .school-editorial-cover img{aspect-ratio:4 / 3;max-height:385px}
  .school-editorial-cover{margin-bottom:20px}
  .school-editorial-prose h2{font-size:1.4rem}
  .school-editorial-prose h3{font-size:1.2rem}
  .school-article-standfirst{font-size:1.045rem}
  .school-article-byline{font-size:.77rem}
  .news-card .news-art{height:215px}
  .school-hero-photo-caption{padding:35px 17px 18px}
  .school-hero-photo-caption strong{font-size:1.03rem}
}
@media(max-width:380px){
  .brand-tagline{display:none}
  .brand-words{max-width:205px}
  .brand-words strong{font-size:.69rem}
  .topstripe{font-size:.63rem}
}
@media print{
  .school-article-aside,.school-breadcrumb,.site-header,.topstripe,.footer,.school-article-foot{display:none!important}
  .school-editorial-layout{display:block}
  .school-article-page{padding:0}
  .school-article-heading h1{color:#111}
  .school-editorial-cover img{max-height:450px;page-break-inside:avoid}
}