/* about.css — ข้อมูลโรงเรียน. Clean, calm, readable. Shared chrome in site.css. */

.container.about-wrap { max-width:880px; margin:0 auto; padding:2.5rem 1.5rem; }

/* one clean, airy block per section */
.about-sec { background:#fff; border:1px solid #eee; border-radius:14px; padding:1.7rem 1.9rem; margin-bottom:1.4rem; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.about-sec > *:first-child { margin-top:0; }
.about-sec > *:last-child { margin-bottom:0; }

/* headings */
h2.sec { font-size:1.3rem; color:var(--primary); font-weight:700; line-height:1.4; margin:0 0 1.1rem; padding-left:.85rem; border-left:4px solid var(--accent); }
h3.subsec { font-size:1.04rem; color:var(--primary); font-weight:700; margin:1.5rem 0 .6rem; padding-left:.7rem; border-left:3px solid var(--accent); }

/* body text */
p { font-size:.97rem; line-height:2; color:#3f3f3f; margin-bottom:1rem; }
.about-sec a { color:#b8860b; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(184,134,11,.35); }
.about-sec a:hover { color:#111; border-color:#111; }

/* key/value tables */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; margin:.3rem 0 .8rem; border-radius:10px; overflow:hidden; border:1px solid #ececec; }
th { background:#1f1f1f; color:var(--accent); padding:.65rem 1rem; text-align:left; font-size:.88rem; }
td { padding:.65rem 1rem; border-top:1px solid #f0f0f0; vertical-align:top; }
table tr td:first-child { font-weight:600; color:#333; width:38%; background:#fafafa; }
tr:hover td { background:#fffdf3; }

/* feature cards */
.card-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; margin:1.1rem 0 .3rem; }
.card { background:#fafaf6; border:1px solid #eee; border-radius:12px; padding:1.3rem 1.1rem; text-align:center; transition:transform .18s, box-shadow .18s; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.09); }
.card .icon { font-size:2rem; margin-bottom:.5rem; }
.card .card-img { width:100%; height:120px; object-fit:cover; border-radius:9px; margin-bottom:.6rem; }
.card strong { color:var(--primary); display:block; font-size:.96rem; }
.card small { color:#666; font-size:.82rem; line-height:1.6; display:block; margin-top:.3rem; }

/* vision / quote — soft warm callout (no dark box) */
.vision-quote { background:linear-gradient(135deg,#fffdf4 0%,#fff3cf 100%); color:#403a23; border:1px solid #ffe8a3; border-left:5px solid var(--accent);
  border-radius:14px; padding:1.5rem 2rem 1.6rem 3rem; font-size:1.08rem; font-weight:600; line-height:1.95; margin:.3rem 0; text-align:left; position:relative; }
.vision-quote::before { content:'\201C'; font-family:Georgia,serif; font-size:3.4rem; line-height:1; color:#e0a800; opacity:.55; position:absolute; top:.4rem; left:.85rem; }

/* mission / policy list */
.policy-list { margin:.3rem 0 .2rem 1.3rem; }
.policy-list li { font-size:.96rem; line-height:1.95; color:#3f3f3f; margin-bottom:.55rem; }
.policy-list li::marker { color:#d4a017; font-weight:700; }

/* identity tags */
.identity-row { display:flex; flex-wrap:wrap; gap:.6rem; margin:.5rem 0 .2rem; }
.identity-tag { background:#fff7da; color:#7a5c00; border:1px solid #ffe08a; border-radius:30px; padding:.4rem 1.1rem; font-size:.9rem; font-weight:600; }

/* facilities grid + lightbox (used by js/about.js) */
.facility-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin:1.1rem 0 .3rem; }
.facility-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.08); border:1px solid #eee; transition:transform .18s,box-shadow .18s; cursor:pointer; }
.facility-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.13); }
.facility-card-img-wrap { position:relative; overflow:hidden; height:140px; }
.facility-count { position:absolute; top:.4rem; right:.4rem; background:rgba(0,0,0,.65); color:#fff; font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:20px; }
.facility-card-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.facility-card:hover .facility-card-img-wrap img { transform:scale(1.06); }
.facility-card-img-wrap::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .2s; }
.facility-card:hover .facility-card-img-wrap::after { background:rgba(0,0,0,.18); }
.facility-card-body { padding:.7rem 1rem .8rem; text-align:center; }
.facility-card-body strong { color:var(--primary); display:block; font-size:.9rem; font-weight:700; margin-bottom:.25rem; line-height:1.35; }
.facility-card-body span { color:#b8860b; font-size:1rem; font-weight:700; }
.facility-lb { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:9500; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; padding:3rem 1rem 2rem; }
.facility-lb.open { display:flex; }
.facility-lb-close { position:fixed; top:1rem; right:1.2rem; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.2rem; width:38px; height:38px; border-radius:50%; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; }
.facility-lb-close:hover { background:rgba(255,255,255,.3); }
.facility-lb-main { display:flex; align-items:center; gap:.8rem; }
.facility-lb-main img { max-width:min(80vw,720px); max-height:65vh; object-fit:contain; border-radius:10px; display:block; box-shadow:0 8px 40px rgba(0,0,0,.6); pointer-events:none; }
.facility-lb-arr { background:rgba(255,255,255,.15); border:none; color:#fff; font-size:2.4rem; width:48px; height:48px; border-radius:50%; cursor:pointer; transition:background .15s; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.facility-lb-arr:hover { background:rgba(255,255,255,.3); }
.facility-lb-arr:disabled { opacity:.2; pointer-events:none; }
.facility-lb-info { text-align:center; margin-top:.7rem; }
.facility-lb-title { color:#fff; font-size:.95rem; font-weight:600; }
.facility-lb-counter { color:rgba(255,255,255,.5); font-size:.78rem; margin-top:.2rem; }
.facility-lb-dots { display:flex; gap:.5rem; align-items:center; }
.facility-lb-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); border:none; cursor:pointer; padding:0; transition:background .15s,transform .15s; }
.facility-lb-dot.active { background:var(--accent); transform:scale(1.35); }

@media (max-width:600px) {
  .container.about-wrap { padding:1.8rem 1rem; }
  .about-sec { padding:1.3rem 1.2rem; }
  h2.sec { font-size:1.15rem; }
  table tr td:first-child { width:auto; }
}