/* Skytrain promotions section — ported from Claude Design "Promotion.dc.html".
   Scoped under .skpromos; header/footer/topbar/FAQ from the design are intentionally dropped
   (the WordPress theme provides page chrome). */
.skpromos{
  --pp-teal:#0e8ba8;--pp-pink:#e5187f;--pp-cyan:#25b7cf;--pp-ink:#12333d;
  --pp-muted:#456871;--pp-muted2:#6b8b93;--pp-line:#e2f0f4;--pp-soft:#eef8fb;
  color:var(--pp-ink);
}
/* keep the theme (Dent-All forces Prompt everywhere) from breaking the intended type mix */
.skpromos,.skpromos *{font-family:'Noto Sans Thai',sans-serif!important;box-sizing:border-box}
.skpromos-h2,.skpromos .skpromo2-title,.skpromos .skpromo2-price .pp{font-family:'Prompt','Noto Sans Thai',sans-serif!important}
/* neutralise the site's Markdown filter wrapping text runs in Bootstrap-pink <code> */
.skpromos code{all:unset!important;display:contents!important}

.skpromos-head{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;margin-bottom:36px}
.skpromos-h2{font-size:34px;font-weight:700;margin:0;line-height:1.2}
.skpromos-sub{font-size:16px;color:var(--pp-muted);margin:10px 0 0;max-width:640px;line-height:1.6}
.skpromos-filter{display:flex;flex-wrap:wrap;gap:9px}
.skpromos-filter button{font-size:14px;font-weight:600;padding:10px 17px;border-radius:999px;cursor:pointer;
  border:1.5px solid #cfe8ef;background:#fff;color:var(--pp-muted);transition:all .18s}
.skpromos-filter button:hover{border-color:var(--pp-teal)}
.skpromos-filter button.is-on{background:var(--pp-teal);border-color:var(--pp-teal);color:#fff}

.skpromos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.skpromo2{position:relative;background:#fff;border:1px solid var(--pp-line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 0 rgba(13,58,71,.03);transition:box-shadow .25s,transform .25s}
.skpromo2:hover{box-shadow:0 22px 44px rgba(13,58,71,.13);transform:translateY(-4px)}
.skpromo2.is-click{cursor:pointer}
/* full-card link overlay (used when a promo has a click-through URL) */
.skpromo2-hit{position:absolute;inset:0;z-index:3}
/* poster thumbnail — 1080×1350 (4:5), scaled to card width */
.skpromo2-img{position:relative;width:100%;aspect-ratio:4/5;background:var(--pp-soft);display:flex;align-items:center;justify-content:center}
.skpromo2-img img{width:100%;height:100%;object-fit:cover;display:block}
.skpromo2-noimg{color:#9cc3ce;font-size:14px}
.skpromo2-zoom{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(13,58,71,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;pointer-events:none}
.skpromo2.is-click:hover .skpromo2-zoom{opacity:1}
.skpromo2-hot{position:absolute;top:14px;left:14px;background:var(--pp-pink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.14em;padding:6px 12px;border-radius:999px}
.skpromo2-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.skpromo2-cat{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--pp-cyan);text-transform:uppercase}
.skpromo2-title{font-size:22px;font-weight:600;margin:0;line-height:1.35}
.skpromo2-desc{font-size:14px;line-height:1.7;color:#5b7c85;margin:0}
.skpromo2-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:10px}
.skpromo2-price .pp{font-size:32px;font-weight:700;color:var(--pp-pink);line-height:1}
.skpromo2-price .pn{font-size:14px;color:var(--pp-muted2);text-decoration:line-through}
.skpromo2-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eef6f8;padding-top:14px}
.skpromo2-foot>span:first-child{font-size:12px;color:#8ba6ad;white-space:nowrap}
.skpromo2-branch{font-size:12px;color:var(--pp-teal);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skpromo-empty{text-align:center;color:#5b7c85;padding:44px;font-family:'Noto Sans Thai',sans-serif}

/* image lightbox (shown when a promo has no click-through link) */
.skpromo-lb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px}
.skpromo-lb[hidden]{display:none}
.skpromo-lb-bg{position:absolute;inset:0;background:rgba(8,26,32,.82);backdrop-filter:blur(2px)}
.skpromo-lb-fig{position:relative;margin:0;z-index:1;max-width:min(92vw,560px);max-height:92vh;display:flex}
.skpromo-lb-fig img{max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);display:block}
.skpromo-lb-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#12333d;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}

@media(max-width:980px){.skpromos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.skpromos-grid{grid-template-columns:1fr}.skpromos-h2{font-size:27px}}