/* ==========================================================================
   school-history.css — สไตล์เฉพาะหน้า "ประวัติโรงเรียน" (school-history.html)
   ใช้ CSS variables ร่วมกับ css/styles.css กลาง (ไม่แก้ไฟล์กลาง)
   ========================================================================== */

.hx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(229,169,16,.16), transparent 62%),
    radial-gradient(900px 480px at 88% 112%, rgba(68,96,78,.28), transparent 62%),
    #29251F;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 88vh, 840px);
  padding: clamp(80px,10vw,120px) 0 clamp(56px,7vw,90px);
}
.hx-hero__inner {
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hx-hero__eyebrow { color: #F2BC30; }
.hx-hero__title {
  margin: 18px 0 0;
  font-size: clamp(32px,5.4vw,62px);
  line-height: 1.28;
  color: #fff;
  text-wrap: balance;
  max-width: 820px;
}
.hx-hero__lead {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: clamp(15.5px,1.7vw,18px);
  line-height: 1.85;
  color: rgba(255,255,255,.72);
  text-wrap: pretty;
}
.hx-hero__anchors {
  margin-top: clamp(26px,3.4vw,38px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.hx-hero__anchors a {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}
.hx-hero__anchors a:hover,
.hx-hero__anchors a:focus-visible {
  background: rgba(242,188,48,.16);
  border-color: rgba(242,188,48,.6);
}
.hx-hero__cue {
  margin-top: clamp(38px,5vw,58px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hx-hero__cue span:first-child {
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(255,255,255,.5);
}
.hx-hero__cue-bar {
  width: 2px;
  height: 46px;
  display: block;
  background: linear-gradient(#F2BC30, rgba(242,188,48,0));
  animation: hx-cue 2s var(--ease) infinite;
}
@keyframes hx-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* เส้น timeline ที่วาดตัวเองตาม scroll */
#hx-exhibit { position: relative; }
.hx-rail {
  position: absolute;
  left: calc(max((100% - 1200px) / 2, 0px) + 26px);
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(138,100,6,.14);
  z-index: 4;
  pointer-events: none;
}
.hx-rail__line {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(#E5A910, #C8910A);
  transform: scaleY(0);
  transform-origin: top;
}
.hx-dot {
  position: absolute;
  left: calc(max((100% - 1200px) / 2, 0px) + 21px);
  top: clamp(70px,9.5vw,128px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #DED5C2;
  border: 2px solid #F8F5EE;
  z-index: 5;
  transition: background .4s, box-shadow .4s;
}
.hx-dot.is-active { background: #E5A910; box-shadow: 0 0 0 6px rgba(229,169,16,.22); }
.hx-dot.is-passed { background: #E5A910; }

/* บทที่ 1-5 */
.hx-chapter { position: relative; padding: clamp(64px,9vw,120px) 0 clamp(56px,8vw,100px); }
.hx-wrap { padding-left: clamp(64px, 7vw, 84px); }
.hx-chapter--1 { background: #E9DCC3; }
.hx-chapter--2 { background: #F1E7D2; }
.hx-chapter--3 { background: #F1ECE0; }
.hx-chapter--4 { background: #F8F5EE; }
.hx-chapter--5 { background: #FFFFFF; padding-bottom: clamp(64px,9vw,110px); }

.hx-chapter__head { position: relative; margin-bottom: clamp(30px,4vw,52px); }
.hx-year-wm {
  position: absolute;
  right: 0; top: -28px;
  font-size: clamp(96px,13vw,176px);
  font-weight: 800;
  line-height: 1;
  color: rgba(138,100,6,.08);
  pointer-events: none;
  user-select: none;
}
.hx-chapter__head h2 {
  font-size: clamp(26px,3.4vw,40px);
  line-height: 1.3;
  margin: 14px 0 0;
  color: #29251F;
  text-wrap: balance;
  max-width: 720px;
  position: relative;
}

.hx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(28px,4.5vw,60px);
  align-items: start;
}

.hx-text { display: flex; flex-direction: column; gap: 18px; }
.hx-text p {
  margin: 0;
  font-size: clamp(16px,1.5vw,17.5px);
  line-height: 1.95;
  color: #4A443B;
  text-wrap: pretty;
}
.hx-text .name-nowrap { display: inline-block; }

.hx-quote {
  margin-top: 8px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hx-quote__mark {
  font-size: 46px;
  line-height: .9;
  color: #C8910A;
  font-weight: 800;
  font-family: Georgia, serif;
}
.hx-quote p {
  margin: 0;
  font-size: clamp(18px,2vw,21px);
  font-weight: 700;
  color: #6B5A2E;
  line-height: 1.7;
  text-wrap: balance;
}

.hx-stats {
  margin-top: 14px;
  border-top: 2px solid rgba(138,100,6,.3);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 14px;
}
.hx-stat { flex: 1 1 130px; padding-right: 18px; }
.hx-stat__num { font-size: clamp(20px,2vw,24px); font-weight: 800; color: #29251F; line-height: 1.2; }
.hx-stat__num--gold { color: #8A6406; }
.hx-stat__label { font-size: 13px; color: #756E64; font-weight: 600; margin-top: 3px; }

.hx-figures { display: flex; flex-direction: column; gap: 26px; }
.hx-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hx-figure--secondary { width: 78%; }
.hx-figure--end { align-self: flex-end; }
.hx-figure__frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(64,52,20,.14);
  transition: filter .7s var(--ease);
  background: #EAE3D4;
}
.hx-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-figure__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #8A7A55;
  background: repeating-linear-gradient(135deg, #EFE7D3, #EFE7D3 10px, #E8DEC5 10px, #E8DEC5 20px);
}
.hx-figure figcaption { padding: 2px 6px 0; display: flex; flex-direction: column; gap: 2px; }
.hx-figure figcaption b { font-size: 13.5px; color: #29251F; }
.hx-figure figcaption span { font-size: 13px; color: #756E64; }

/* บทที่ 5 การ์ดผู้บริหาร */
.hx-director-card {
  background: #fff;
  border: 1px solid #EAE3D4;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(64,52,20,.12);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.hx-director-card__photo {
  flex: 1 1 190px;
  max-width: 260px;
  min-height: 190px;
  aspect-ratio: 1/1;
  align-self: stretch;
}
.hx-director-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-director-card__body {
  flex: 1 1 240px;
  padding: clamp(20px,2.6vw,32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.hx-director-card__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #8A6406; }
.hx-director-card__name { margin: 0; font-size: clamp(19px,2vw,22px); color: #29251F; line-height: 1.45; }
.hx-director-card__desc { margin: 0; font-size: 14.5px; line-height: 1.8; color: #756E64; }

/* HUD ยุคลอยด้านล่าง */
.hx-hud {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  opacity: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(41,37,31,.94);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px 13px;
  box-shadow: 0 14px 34px rgba(30,20,0,.28);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}
.hx-hud.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hx-hud__year { font-weight: 800; font-size: 15px; color: #F2BC30; white-space: nowrap; }
.hx-hud__sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); flex: 0 0 auto; }
.hx-hud__title { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-hud__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; display: block; background: linear-gradient(90deg, #E5A910, #C8910A); transform: scaleX(0); transform-origin: left; }
@keyframes hx-tick { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hx-hud__year.tick, .hx-hud__title.tick { animation: hx-tick .45s var(--ease) both; }

/* Responsive / a11y */
@media (max-width: 760px) {
  .hx-year-wm { display: none; }
  .hx-rail, .hx-dot { display: none; }
  .hx-wrap { padding-left: 24px !important; }
}
@media (max-width: 380px) {
  .hx-wrap { padding-left: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-hero__cue-bar { animation: none; }
  .hx-figure__frame { transition: none; }
}