/* ============================================================
   โรงเรียนนิลประพันธ์ — Home hero (full-bleed photo · liquid glass)
   Loaded only on index.html, after css/styles.css
   ============================================================ */

.vhero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: clamp(600px, 80vh, 840px);
}
.vhero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
/* dark wash on the left for legible copy — kept light so the photo reads through */
.vscrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18,13,6,.72) 0%, rgba(18,13,6,.5) 26%,
    rgba(18,13,6,.2) 50%, rgba(18,13,6,.04) 70%, transparent 84%);
}
/* frosted-glass blur faded to the left third (iOS-like) */
.vfrost {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(90deg, #000 0%, #000 26%, transparent 52%);
          mask: linear-gradient(90deg, #000 0%, #000 26%, transparent 52%);
}
.vwrap {
  position: relative; z-index: 5; width: 100%;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px,4vw,56px);
  align-items: center; padding-top: 52px; padding-bottom: 52px;
}

/* ---------- copy ---------- */
.vcopy h1 {
  color: #fff; font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
  font-size: clamp(38px, 5vw, 64px); margin: 0; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(15,9,0,.4);
}
.vcopy h1 .hl { color: #F2C24A; }
.vsub {
  margin-top: 14px; color: #fff; font-weight: 700;
  font-size: clamp(18px, 2.1vw, 23px); max-width: 34ch; text-wrap: pretty;
  text-shadow: 0 2px 20px rgba(15,9,0,.4);
}
.vtag {
  margin-top: 14px; color: rgba(255,255,255,.92); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 21px); max-width: 36ch; text-wrap: pretty;
  text-shadow: 0 2px 18px rgba(15,9,0,.35);
}
.vcta { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }

/* glass CTA button — sits on top of the hero photo, next to .btn--primary */
.btn--glass {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.btn--glass:hover {
  background: rgba(255,255,255,.24); border-color: #fff;
  transform: translateY(-3px); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 12px 28px rgba(15,9,0,.3);
}

/* ---------- inline stats (count-up) ---------- */
.vstats { display: flex; gap: clamp(20px, 3vw, 42px); margin-top: 40px; flex-wrap: wrap; }
.vstat { position: relative; }
.vstat + .vstat::before {
  content: ""; position: absolute; left: calc(-1 * clamp(10px,1.5vw,21px));
  top: 6%; height: 88%; width: 1px; background: rgba(255,255,255,.28);
}
.vstat .n {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; color: #fff; line-height: 1;
  letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(15,9,0,.35);
}
.vstat .n b { color: #F2C24A; font-weight: 700; font-size: .5em; }
.vstat .l { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.82); font-weight: 600; line-height: 1.35; }

/* ============================================================
   LIQUID-GLASS CARD
   ============================================================ */
.gcard {
  position: relative; width: 100%; max-width: 400px; justify-self: end; align-self: center;
  background: linear-gradient(155deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.4) 100%);
  backdrop-filter: blur(30px) saturate(185%);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(18,11,2,.42),
              inset 0 1.5px 1px rgba(255,255,255,.85),
              inset 0 -12px 32px rgba(255,255,255,.1);
}
/* specular highlight sweep */
.gcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(158deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 72%);
}
.gcard > * { position: relative; z-index: 2; }
.gcard__bar { height: 5px; background: linear-gradient(90deg, var(--yellow), #FFE08A 45%, var(--yellow-dark)); }
.gcard__head { padding: 20px 22px 14px; }
.gcard__live { display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: var(--yellow-deep); letter-spacing: .01em; }
.gcard__live .d { width: 8px; height: 8px; border-radius: 50%; background: #1F9D57;
  box-shadow: 0 0 0 0 rgba(31,157,87,.6); animation: gpulse 2.4s infinite; }
@keyframes gpulse { 0%{box-shadow:0 0 0 0 rgba(31,157,87,.5);} 70%{box-shadow:0 0 0 7px rgba(31,157,87,0);} 100%{box-shadow:0 0 0 0 rgba(31,157,87,0);} }
.gcard__head h2, .gcard__head h3 { font-size: 21px; font-weight: 800; margin-top: 6px; color: #1a1611; }
.gcard__head .sub { font-size: 13.5px; color: #4a443b; font-weight: 600; margin-top: 2px; }

.glevel { display: flex; align-items: center; gap: 13px; padding: 13px 22px;
  border-top: 1px solid rgba(255,255,255,.4); }
.glevel__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #1F9D57; color: #fff; box-shadow: 0 4px 10px rgba(31,157,87,.35); }
.glevel__ic svg { width: 17px; height: 17px; }
.glevel__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.glevel__t { font-size: 15.5px; font-weight: 700; color: #1a1611; line-height: 1.25; }
.glevel__s { font-size: 12.5px; color: #4a443b; font-weight: 600; line-height: 1.25; }
.glevel__tag { flex: none; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--yellow-deep);
  background: rgba(255,238,190,.7); padding: 4px 11px; border-radius: 100px; }
.gcontact { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.4); }
.gcontact a { flex: 1; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none;
  border-radius: 8px; padding: 4px 6px; margin: -4px -6px;
  transition: color .2s var(--ease), background .2s var(--ease); }
.gcontact a:hover, .gcontact a:focus-visible { color: #5A4509; background: rgba(255,255,255,.5); }
.gcontact svg { width: 17px; height: 17px; color: var(--yellow-deep); flex: none; }
.gcard__cta { padding: 16px 22px 18px; }
.gcard__cta .btn { width: 100%; justify-content: center; }
.gcard__visit { padding: 0 22px 22px; text-align: center; }
.gcard__visit a {
  font-size: 13.5px; font-weight: 700; color: var(--yellow-deep);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138,100,6,.4);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.gcard__visit a:hover { color: #5A4509; text-decoration-color: currentColor; }

/* ============================================================
   ACADEMIC RESULTS ("ตัวเลขที่พ่อแม่วางใจได้")
   ============================================================ */
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px,3vw,36px); text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.rp-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.rp-card .big {
  font-size: clamp(38px, 4.4vw, 54px); font-weight: 700; line-height: 1;
  color: var(--yellow-dark); letter-spacing: -.02em;
}
.rp-card .big small { font-size: .38em; font-weight: 700; color: var(--ink); margin-left: 4px; }
.rp-card .cap { margin-top: 14px; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.4; text-wrap: pretty; }
.rp-card .sub { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.rp-links { display: flex; gap: clamp(18px,3vw,40px); flex-wrap: wrap; margin-top: 30px; }
.rp-links a {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; color: var(--yellow-deep);
  transition: color .25s var(--ease);
}
.rp-links a svg { transition: transform .3s var(--ease); }
.rp-links a:hover { color: var(--ink); }
.rp-links a:hover svg { transform: translateX(4px); }

/* ============================================================
   ACADEMIC RESULTS v2 — O-NET bar / ring / trend (o1-*)
   ============================================================ */
.o1-grid { display: grid; grid-template-columns: 1.15fr .85fr 1.35fr; gap: 20px; align-items: stretch; }
.o1-card, .trend-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.o1-card:hover, .trend-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.o1-card .kk, .trend-card .kk { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--yellow-deep); text-transform: uppercase; }
.o1-card .cap, .trend-card .cap { margin-top: 8px; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.4; text-wrap: pretty; }
.o1-card .sub, .trend-card .sub { margin-top: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.o1-viz {
  margin-top: 18px; flex: 1;
  /* การ์ดนี้ยืดสูงเท่าการ์ด ring/trend ข้างๆ (align-items:stretch บน .o1-grid)
     แต่เนื้อหา legend+บาร์ 4 แถวสั้นกว่า เหลือพื้นที่ว่างด้านล่าง —
     กระจาย legend+barpair ทั้งหมดให้เต็มความสูงที่เหลือแทนการชิดบนแล้วเว้นว่างล่าง */
  display: flex; flex-direction: column; justify-content: space-between;
}
/* ตัด margin-top เดิมของ barpair ออกเมื่ออยู่ใน o1-viz เพราะ justify-content:space-between
   ด้านบนทำหน้าที่เว้นช่องไฟระหว่างแถวแทนแล้ว (กันบวกซ้อนกันสองระบบ) */
.o1-viz .barpair { margin-top: 0; }

.legend { display: flex; gap: 16px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; }
.legend i, i.li-us, i.li-nat { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
i.li-us { background: linear-gradient(135deg, var(--yellow-bright), var(--yellow-dark)); }
i.li-nat { background: var(--ink-3); }

.barpair { display: grid; grid-template-columns: 78px 1fr 52px; align-items: center; gap: 8px; margin-top: 12px; }
.barpair:first-child { margin-top: 0; }
.bl { font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* wrapper กันบั๊ก: .barpair เป็น grid 3 คอลัมน์ แต่มี bartrack 2 อัน (us+nat) ต้อง
   ครอบไว้ในคอลัมน์กลางคอลัมน์เดียว ไม่งั้น bartrack ตัวที่ 2 จะ auto-flow ไปทับคอลัมน์ป้ายชื่อวิชา */
.btracks { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bartrack { position: relative; height: 14px; background: var(--bg-soft); border-radius: 100px; overflow: hidden; }
.gridlines { position: absolute; inset: 0; }
.gridlines i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(41,37,31,.08); }
.barfill {
  position: relative; height: 100%; border-radius: 100px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap;
  transition: width 1s var(--ease);
}
.barfill.us { background: linear-gradient(90deg, var(--yellow-dark), var(--yellow-bright)); }
.barfill.nat { background: var(--ink-3); }
.gap-chip {
  justify-self: end; font-size: 11.5px; font-weight: 700; color: var(--yellow-deep);
  background: var(--yellow-tint); padding: 3px 8px; border-radius: 100px; white-space: nowrap;
}

/* ring — คอลัมน์การ์ดนี้แคบกว่าการ์ดอื่น (.85fr) ต้องกันข้อความ "ทุกคน" หัก
   กลางคำ (คำเดียวไม่มีช่องว่าง เบราว์เซอร์ตัดมั่วถ้าไม่กัน keep-all) และย่อวงแหวน
   ลงเล็กน้อยจากดีไซน์ต้นฉบับ (148px) เพื่อเหลือที่ให้ข้อความพอ */
.ring-wrap { display: flex; align-items: center; gap: 18px !important; }
svg.ring { flex: none; width: 128px !important; height: 128px !important; }
.ring .rt { fill: none; stroke: var(--bg-soft); stroke-width: 10; }
.ring .rf {
  fill: none; stroke: url(#g100); stroke-width: 10; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1s var(--ease);
}
.ring-num { font-size: 20px; font-weight: 700; fill: var(--ink); }
.ring-side { min-width: 0; flex: 1; }
.ring-side .big {
  font-size: clamp(26px, 5vw, 36px) !important; font-weight: 700; color: var(--yellow-dark);
  line-height: 1.05; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere;
}
.ring-side .small { color: var(--ink-2); font-weight: 600; line-height: 1.35; word-break: keep-all; }
.subj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.subj-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-weight: 600; line-height: 1.4; }
.subj-list li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #1F9D57; }

/* trend sparklines */
.trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; margin-top: 16px; }
.spark { min-width: 0; }
.shead { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; margin-bottom: 4px; }
.sname { font-size: 13px; font-weight: 700; color: var(--ink); }
.schip { font-size: 11px; font-weight: 700; color: var(--yellow-deep); background: var(--yellow-tint); padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.spark svg { width: 100%; height: auto; display: block; max-width: 100%; }
.sfill { fill: url(#gtrend); opacity: .12; }
.sline { fill: none; stroke: url(#gtrend); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nline { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 3; }
.sdot { fill: var(--yellow-dark); }
.ndot { fill: var(--ink-3); }
.sval { font-size: 11px; font-weight: 700; fill: var(--ink-2); }

@media (prefers-reduced-motion: reduce){
  .barfill, .ring .rf { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px){
  .vwrap { grid-template-columns: 1fr; gap: 30px; padding-top: 38px; padding-bottom: 48px; }
  .vhero { min-height: 0; }
  .vcopy h1 { font-size: clamp(34px, 7vw, 52px); }
  .gcard { justify-self: start; max-width: 460px; }
  .vscrim { background: linear-gradient(180deg, rgba(18,13,6,.72) 0%, rgba(18,13,6,.5) 45%, rgba(18,13,6,.66) 100%); }
  .vfrost { -webkit-mask: none; mask: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .rp-grid { grid-template-columns: repeat(2, 1fr); }
  .o1-grid { grid-template-columns: 1fr; }
  /* จอแคบ: o1-grid เหลือคอลัมน์เดียว การ์ดแต่ละใบเลยไม่ถูกยืดสูงเท่าการ์ดข้างๆ
     อีกต่อไป (ต่างจาก desktop ที่ align-items:stretch ทำให้การ์ดเว้นว่างด้านล่าง)
     ความสูงการ์ดจึงตามเนื้อหาจริง — justify-content:space-between บน .o1-viz
     เลยไม่มีพื้นที่ส่วนเกินให้กระจาย ทำให้แถว barpair ชิดกันแน่นเกินไป
     (เห็นชัดตอนป้าย "ภาษาอังกฤษ" ตัดขึ้น 2 บรรทัด) แก้โดยเลิกพึ่ง flex-fill
     แล้วเว้นระยะระหว่างแถวตรงๆ แทน ไม่ต้องยึดความสูงการ์ดให้เท่ากันในโหมดนี้ */
  .o1-viz { justify-content: flex-start; }
  .o1-viz .barpair { margin-top: 22px; }
  .o1-viz .barpair:first-child { margin-top: 0; }
}
@media (max-width: 640px){
  .rp-grid { grid-template-columns: 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
  .barpair { grid-template-columns: 66px 1fr 46px; }
  /* ป้ายวิชาแคบลงอีก (66px) "ภาษาอังกฤษ" ตัดขึ้นบรรทัดใหม่บ่อยขึ้น เว้นช่องไฟ
     ระหว่างแถวเพิ่มอีกนิดเพื่อกันดูอัดแน่น */
  .o1-viz .barpair { margin-top: 26px; }
  .o1-viz .barpair:first-child { margin-top: 0; }
  /* trend-grid ยุบเหลือ 1 คอลัมน์ → การ์ดกว้างขึ้นเกือบ 2 เท่า แต่ viewBox ของ
     sparkline คงที่ (240x112) เส้น/จุด/ตัวเลขเลยบวมตามความกว้างที่เพิ่มขึ้น
     ลดสัดส่วนลงให้ใกล้เคียงตอน desktop 2 คอลัมน์ */
  .sline { stroke-width: 1.8; }
  .nline { stroke-width: 1.2; }
  .sdot { r: 3.5px; }
  .ndot { r: 2.6px; }
  .sval { font-size: 8.5px; }
}
/* M-02: จอแคบมาก — สถิติ 4 ช่องจัดเป็น grid 2 คอลัมน์ ปิดเส้นคั่นที่คำนวณจากแถวเดียว */
@media (max-width: 420px){
  .vstats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .vstat + .vstat::before { display: none; }
  svg.ring { width: 120px !important; height: 120px !important; }
  .gap-chip, .schip { font-size: 10px; padding: 2px 6px; }
}