/* เทมเพลต "เกี่ยวกับเรา — หน้าเดียวแบบเล่าเรื่อง" (page-templates/about-story.php) */

.story-hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--navy)}
.story-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.04);animation:story-zoom 14s ease-out forwards}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,35,64,.15) 30%,rgba(19,35,64,.92))}
.story-hero .wrap{position:relative;z-index:2;padding:0 0 64px}
.story-hero .eyebrow{color:#ffb599}
.story-hero .eyebrow::before{background:#ffb599}
.story-hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.2rem);margin:0}
.story-hero-sub{margin:8px 0 0;color:#dfe5f0;font-family:var(--font-head);font-size:1.1rem}
.story-down{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:#fff;font-family:var(--font-head);font-size:.95rem;opacity:.85}
.story-down span{display:inline-block;animation:story-bob 1.8s ease-in-out infinite}
.story-down:hover{opacity:1;color:#fff}
@keyframes story-zoom{to{transform:scale(1)}}
@keyframes story-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.story-intro{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.story-intro h2{font-size:clamp(1.7rem,3vw,2.4rem);position:relative;padding-top:18px}
.story-intro h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:4px;border-radius:2px;background:var(--accent)}
.story-lead p{font-size:1.08rem;color:var(--ink)}
.story-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:26px}
.story-index a{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;font-family:var(--font-head);font-weight:500;transition:.2s}
.story-index a b{color:var(--accent);font-size:.9rem}
.story-index a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}

.story-stats{padding:clamp(40px,6vw,64px) 0}
.story-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px}
.story-stat-grid div{border-left:2px solid rgba(255,181,153,.45);padding:4px 0 4px 18px}
.story-stat-grid b{display:block;font-family:var(--font-head);font-size:clamp(2rem,3.6vw,2.8rem);color:#fff;line-height:1.1}
.story-stat-grid span{color:#cfd7e6;font-size:.95rem}

.story-chapter{background:#fff}
.story-chapter.alt{background:var(--bg)}
.story-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start}
.story-side{position:sticky;top:110px}
.story-no{font-family:var(--font-head);font-weight:600;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
.story-side h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:6px 0 14px}
.story-more{font-family:var(--font-head);font-size:.92rem;color:var(--muted)}
.story-more:hover{color:var(--accent)}
.story-chapter .content > .prose > h2:first-child{display:none}

.story-extra-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.story-extra-head h2{margin:0}
.story-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px}
.story-people > div{text-align:center}
.story-people img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px}
.story-people b{display:block;font-family:var(--font-head);color:var(--navy);line-height:1.35}
.story-people span{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}

.story-next{background:var(--navy)}
.story-next a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:44px 0;color:#fff}
.story-next span{color:#ffb599;font-family:var(--font-head);font-size:.95rem}
.story-next b{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600}
.story-next em{font-style:normal;font-family:var(--font-head);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:10px 22px;transition:.2s}
.story-next a:hover em{background:var(--accent);border-color:var(--accent)}

@media (max-width:860px){
  .story-intro,.story-grid{grid-template-columns:1fr;gap:18px}
  .story-side{position:static}
  .story-stat-grid{grid-template-columns:repeat(2,1fr)}
  .story-next a{grid-template-columns:1fr;gap:6px;padding:34px 0}
  .story-next em{justify-self:start;margin-top:8px}
}