/* POPNIX Flood - ทางหลวงน้ำท่วม/ปิดช่องจราจรของกรมทางหลวง: หมุดสามเหลี่ยมบนแผนที่ + popup (ไม่มี section บนหน้า เจ้าของสั่ง 2026-10-02)
   hw-closed = ปิดช่องจราจร (crit), hw-flood = น้ำท่วม (warn), hw-other = ภัยอื่น เช่น ดินโคลนถล่ม วาตภัย (accent) */
.hw-closed { --c: var(--crit); } .hw-flood { --c: var(--warn); } .hw-other { --c: var(--accent); }

/* ---------- หมุดสามเหลี่ยม (คลองวงกลม ถนนข้าวหลามตัด) ---------- */
.hw-pin { background: none; border: 0; cursor: pointer; }
.hw-pin i { position: absolute; left: 50%; top: 50%; width: 15px; height: 14px; transform: translate(-50%, -55%); background: var(--c);
    clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1.5px var(--core)); }
.hw-pin.hw-closed i { width: 19px; height: 17px; }
.hw-tri { display: inline-block; width: 11px; height: 10px; margin-right: 7px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.legend .hw-tri { border-radius: 0; }
.hw-legend { align-items: center; }
.hw-legend b { color: var(--strong); font-weight: 600; }
.hw-legend small { flex-basis: 100%; color: var(--faint); font-size: .8rem; }
.hw-legend.is-stale small { color: var(--warn); }
.hw-toggle { margin-left: auto; border: 1px solid var(--line-2); background: transparent; color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: .86rem; cursor: pointer; }
.hw-toggle:hover { border-color: var(--accent); }

/* ---------- popup (พื้นขาวของ Leaflet แบบเดียวกับจุดเสี่ยง .rk-pop) ---------- */
.hw-leaf .leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.hw-pop { color: #20394a; }
.hw-pop .hw-tag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: .78rem; font-weight: 600;
    color: color-mix(in srgb, var(--c) 75%, #0b1c27); background: color-mix(in srgb, var(--c) 16%, #fff); }
.hw-pop > b { display: block; margin-top: 6px; color: #0b1c27; font-size: .98rem; line-height: 1.35; }
.hw-pop small { display: block; color: #4d6371; font-size: .8rem; line-height: 1.4; }
.hw-pop p { margin: 6px 0 0; font-size: .84rem; line-height: 1.5; }
.hw-pop .hw-lvl b { color: color-mix(in srgb, var(--c) 80%, #0b1c27); font-size: 1rem; }
.hw-pop .hw-note { color: #5a7384; font-size: .76rem; }
.hw-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hw-media a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e3ecf0; }
.hw-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-vid i { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; color: #fff; background: rgba(0, 0, 0, .5); }
.hw-media a.hw-ph { cursor: zoom-in; }

/* หน้าต่างดูรูปจุดเกิดเหตุ (highways.js viewer): ภาพเต็มพอดีจอบนพื้นเข้ม ปุ่มก่อน/ถัดไปลอยบนภาพ รูปย่อเรียงใต้ภาพ */
.hw-big { position: relative; display: grid; place-items: center; margin: 18px 0 10px; min-height: 12rem; border-radius: var(--r-core); overflow: hidden; background: #071219; touch-action: pan-y; }
.hw-big img { display: block; max-width: 100%; max-height: 74dvh; width: auto; height: auto; object-fit: contain; }
.hw-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 0; border-radius: 50%;
    color: #fff; background: rgba(7, 18, 25, .55); font-size: 1.1rem; cursor: pointer; transition: background .2s var(--ease-out, ease-out), transform .2s var(--ease-out, ease-out); }
.hw-nav:hover { background: rgba(7, 18, 25, .8); }
.hw-nav:active { transform: scale(.94); }
.hw-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hw-nav.prev { left: 10px; } .hw-nav.next { right: 10px; }
.hw-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-count { margin: 0; color: var(--muted); font-size: .88rem; }
.hw-count:empty { display: none; }
.hw-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.hw-thumbs:empty { display: none; }
.hw-th { flex: 0 0 auto; width: 68px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--bg-2); cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.hw-th:hover, .hw-th.on { opacity: 1; }
.hw-th.on { border-color: var(--accent); }
.hw-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-src { margin: 10px 2px 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .hw-nav, .hw-th { transition: none; } }

@media (max-width: 640px) {
    .hw-toggle { margin-left: 0; }
}