﻿/* pages.css – sv-page-* */
.sv-page-hero { background:linear-gradient(135deg, var(--sv-surface) 0%, var(--sv-bg-mid) 100%); padding:var(--sv-s16) 0; border-bottom:1px solid var(--sv-border); }
.sv-page-hero__title { font-size:var(--sv-fs-3xl); font-family:var(--sv-font-serif); color:var(--sv-primary); margin-bottom:var(--sv-s6); }
.sv-page-hero__sub { font-size:var(--sv-fs-lg); color:var(--sv-text-muted); margin:0; }
.sv-page-body { padding:var(--sv-s20) 0; }
.sv-page-body h2,.sv-page-body h3 { font-family:var(--sv-font-serif); color:var(--sv-primary); }
.sv-page-body h2 { font-size:var(--sv-fs-2xl); margin-bottom:var(--sv-s6); }
.sv-page-body h3 { font-size:var(--sv-fs-lg); margin:var(--sv-s6) 0 var(--sv-s4); }
.sv-page-body__grid { display:grid; grid-template-columns:1fr 300px; gap:var(--sv-s8); }
.sv-page-body__main { grid-column:1; }
.sv-page-body__main section { margin-bottom:var(--sv-s12); }
.sv-page-body__main h2 { font-family:var(--sv-font-serif); font-size:var(--sv-fs-2xl); color:var(--sv-primary); margin-bottom:var(--sv-s6); }
.sv-page-body__main h3 { font-size:var(--sv-fs-lg); color:var(--sv-teal); margin:var(--sv-s6) 0 var(--sv-s4); }
.sv-page-body__main p { font-size:var(--sv-fs-base); line-height:var(--sv-lh-relaxed); color:var(--sv-text); margin-bottom:var(--sv-s4); }
.sv-page-body__main a { color:var(--sv-primary); text-decoration:underline; transition:color var(--sv-t-fast); }
.sv-page-body__main a:hover { color:var(--sv-teal); }
.sv-page-body__main strong { color:var(--sv-primary); font-weight:600; }
.sv-page-body__main ul,.sv-page-body__main ol { margin:var(--sv-s4) 0 var(--sv-s6); padding-left:var(--sv-s6); }
.sv-page-body__main li { margin-bottom:var(--sv-s3); line-height:var(--sv-lh-relaxed); color:var(--sv-text); }
.sv-sidebar { grid-column:2; }
.sv-sidebar__box { background:var(--sv-surface); padding:var(--sv-s8); border-radius:var(--sv-r-md); border:1px solid var(--sv-border); }
.sv-sidebar__box h3 { font-family:var(--sv-font-serif); font-size:var(--sv-fs-lg); color:var(--sv-primary); margin-bottom:var(--sv-s6); }
.sv-sidebar__box p { font-size:var(--sv-fs-sm); color:var(--sv-text-muted); margin-bottom:var(--sv-s4); }
@media (max-width:768px) {
  .sv-page-hero { padding:var(--sv-s8) 0; }
  .sv-page-hero__title { font-size:var(--sv-fs-2xl); }
  .sv-page-hero__sub { font-size:var(--sv-fs-base); }
  .sv-page-body__grid { grid-template-columns:1fr; }
  .sv-sidebar { grid-column:1; }
}
