/* Lertchai Master — public experiences module */
:root {
  --lm-navy:#061a38;
  --lm-navy-2:#0b3c78;
  --lm-blue:#0b579f;
  --lm-gold:#f4c542;
  --lm-gold-deep:#d7a437;
  --lm-page:#f6f8fb;
  --lm-text:#172033;
  --lm-muted:#667085;
  --lm-line:rgba(6,26,56,.09);
  --lm-container:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--lm-font-th,"Prompt",system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--lm-text);
  background:var(--lm-page);
  line-height:1.75;
  letter-spacing:0;
  font-kerning:normal;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.container { width:min(var(--lm-container),calc(100% - 36px)); margin:0 auto; }

/* Shared header support */
.header-shell{display:flex;align-items:center}.brand{display:flex;align-items:center}.brand-logo-wrap{display:flex;align-items:center}.main-nav{display:flex}.nav-menu{display:flex;align-items:center;list-style:none;margin:0;padding:0}.nav-item{position:relative}.nav-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.dropdown{position:absolute;left:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;z-index:1001}.nav-item:hover>.dropdown{opacity:1;visibility:visible;transform:none}.dropdown-intro,.dropdown a{display:block}.menu-toggle{display:none}

/* Footer support */
.site-footer{color:#fff}.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}.footer-brand-name{font-size:1.25rem;font-weight:900}.footer-brand-desc,.footer-developer,.footer-copy,.footer-visitor{color:rgba(255,255,255,.74)}.footer-developer{display:grid;text-align:right}.footer-developer strong{color:#fff}.footer-social{display:flex;flex-wrap:wrap;gap:10px}.footer-social-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px}.footer-social-icon{display:grid;place-items:center}.footer-social-icon img{width:24px;height:24px;object-fit:contain}.footer-icon-fallback{display:none}.footer-line{height:1px;background:rgba(255,255,255,.1)}.back-to-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:var(--lm-navy);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:80}.back-to-top.show{opacity:1;visibility:visible;transform:none}

/* Listing hero — restored without touching the experience cards */
.exp-hero {
  padding:42px 0 34px;
  background:radial-gradient(circle at 88% 15%,rgba(244,197,66,.14),transparent 27%),linear-gradient(135deg,#061a38 0%,#0b3c78 66%,#0b579f 100%);
  color:#fff;
}
.exp-hero-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
}
.exp-hero h1 {
  margin:0;
  color:#fff;
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
}
.exp-hero-stat {
  min-width:150px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(1,15,35,.14);
  text-align:center;
}
.exp-hero-stat strong {
  display:block;
  color:var(--lm-gold);
  font-size:1.85rem;
  font-weight:800;
  line-height:1.05;
}
.exp-hero-stat span {
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.82);
  font-size:.74rem;
  font-weight:600;
}

/* Listing page */
.exp-page { min-height:60vh; }
.exp-content { padding:34px 0 64px; }
.exp-category-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.exp-category-tabs a { padding:8px 13px; border:1px solid #dce4ee; border-radius:999px; background:#fff; color:#41546d; font-size:.77rem; font-weight:600; box-shadow:0 5px 14px rgba(6,26,56,.035); }
.exp-category-tabs a:hover,.exp-category-tabs a.active { color:#fff; background:var(--lm-navy); border-color:var(--lm-navy); }
.exp-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0 0 18px; }
.exp-section-head h2 { margin:0; color:var(--lm-navy); font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:700; line-height:1.45; }
.exp-section-head p { margin:4px 0 0; color:var(--lm-muted); font-size:.82rem; }
.exp-section-head a { color:var(--lm-blue); font-size:.76rem; font-weight:800; white-space:nowrap; }
.exp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.exp-card { min-width:0; overflow:hidden; border:1px solid rgba(7,36,77,.095); border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(7,36,77,.055); transition:border-color .22s ease,box-shadow .22s ease; }
.exp-card:hover { border-color:rgba(11,87,159,.18); box-shadow:0 15px 34px rgba(7,36,77,.09); }
.exp-card-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#eef3f8 0%,#f8fafc 100%); }
.exp-card-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.exp-card-placeholder { width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:3px; color:rgba(7,36,77,.48); font-weight:900; letter-spacing:.08em; }
.exp-card-badge { position:absolute; left:12px; top:12px; max-width:calc(100% - 24px); padding:5px 9px; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(255,255,255,.94); color:var(--lm-navy-2); font-size:.65rem; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; box-shadow:0 4px 12px rgba(7,36,77,.08); }
.exp-card-body { padding:16px 17px 18px; }
.exp-card-date { margin-bottom:7px; color:#a96f00; font-size:.81rem; font-weight:800; line-height:1.45; }
.exp-card h3 { display:-webkit-box; min-height:3.35em; margin:0 0 7px; overflow:hidden; color:var(--lm-navy-2); font-size:.98rem; font-weight:700; line-height:1.67; text-wrap:balance; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.exp-card p { display:-webkit-box; min-height:3.35em; margin:0; overflow:hidden; color:var(--lm-muted); font-size:.77rem; line-height:1.72; text-wrap:pretty; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.exp-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.exp-card-meta span { max-width:100%; padding:5px 8px; border:1px solid transparent; border-radius:8px; font-size:.64rem; line-height:1.45; }
.exp-card-meta span.exp-card-meta-organizer { background:#fff9e8; border-color:#ecd88c !important; color:#0b2d5b; font-size:0.82rem; font-weight:700; line-height:1.60; letter-spacing:0; padding:6px 9px; }
.exp-card-meta span.exp-card-meta-location { background:#f3f6fa; color:#667085; font-weight:500; }
.exp-empty { padding:44px 24px; border:1px dashed #ccd7e4; border-radius:18px; background:#fff; text-align:center; color:#7b8797; }
.exp-empty strong { display:block; color:#40536c; margin-bottom:4px; }

.exp-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:32px; }
.exp-page-link { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 11px; border:1px solid #d8e1ec; border-radius:11px; background:#fff; color:#41546d; font-size:.76rem; font-weight:700; line-height:1; box-shadow:0 5px 14px rgba(6,26,56,.035); transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }
a.exp-page-link:hover { border-color:var(--lm-navy); background:#f7f9fc; color:var(--lm-navy); box-shadow:0 8px 18px rgba(6,26,56,.07); }
.exp-page-link.active { border-color:var(--lm-navy); background:var(--lm-navy); color:#fff; box-shadow:0 8px 18px rgba(6,26,56,.13); }
.exp-page-nav { min-width:auto; gap:6px; padding-inline:13px; }
.exp-page-ellipsis { display:inline-grid; place-items:center; min-width:20px; height:38px; color:#8b97a8; font-size:.9rem; font-weight:700; }

/* Detail page */
.exp-detail-wrap { padding:34px 0 64px; }
.exp-breadcrumb { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:16px; color:#718096; font-size:.72rem; }
.exp-breadcrumb a:hover { color:var(--lm-blue); }
.exp-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.exp-detail-main,.exp-detail-side { border:1px solid var(--lm-line); border-radius:21px; background:#fff; box-shadow:0 10px 30px rgba(6,26,56,.055); }
.exp-detail-main { overflow:hidden; }
.exp-detail-body { padding:26px; }
.exp-detail-body h1 { margin:6px 0 12px; color:var(--lm-navy); font-size:clamp(1.55rem,3vw,2.35rem); font-weight:700; line-height:1.45; }
.exp-detail-category { color:var(--lm-gold-deep); font-size:.75rem; font-weight:900; }
.exp-detail-summary { padding:14px 16px; margin:18px 0; border-left:4px solid var(--lm-gold); border-radius:0 10px 10px 0; background:#fffaf0; color:#4a5568; }
.exp-detail-content { color:#3f4d61; font-size:.94rem; line-height:1.9; white-space:pre-line; }
.exp-detail-side { position:sticky; top:100px; padding:19px; }
.exp-meta-list { display:grid; gap:12px; margin:0; }
.exp-meta-list div { padding-bottom:10px; border-bottom:1px dashed #e2e8f0; }
.exp-meta-list div:last-child { border-bottom:0; padding-bottom:0; }
.exp-meta-list dt { color:#8a94a6; font-size:.65rem; }
.exp-meta-list dd { margin:3px 0 0; color:#33465f; font-size:.79rem; font-weight:600; }
.exp-external { display:flex; justify-content:center; margin-top:15px; padding:9px 12px; border-radius:10px; background:var(--lm-navy); color:#fff; font-size:.75rem; font-weight:800; }

/* Cover: the uploaded file is already 16:9. This layer only displays it. */
.exp-lightbox-trigger { position:relative; }
.exp-cover-trigger { display:block; width:100%; padding:0; overflow:hidden; border:0; background:#eef2f6; cursor:zoom-in; line-height:0; }
.exp-detail-cover { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center; }
.exp-image-zoom-hint { position:absolute; right:12px; bottom:12px; padding:6px 10px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(6,26,56,.78); color:#fff; font-size:.65rem; font-weight:700; line-height:1.2; opacity:.9; }
.exp-lightbox-trigger:focus-visible { outline:3px solid rgba(11,87,159,.28); outline-offset:3px; }

/* Gallery: exactly the same simple 4:3 pattern used by BKP, two columns. */
.exp-gallery { margin-top:20px; }
.exp-gallery h2 { color:var(--lm-navy); font-size:1.15rem; }
.exp-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.exp-gallery-item { display:block; width:100%; margin:0; padding:0; overflow:hidden; border:1px solid var(--lm-line); border-radius:16px; background:#fff; cursor:zoom-in; line-height:0; }
.exp-gallery-item img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; }
.exp-gallery-item:hover,.exp-gallery-item:focus-visible { border-color:rgba(11,87,159,.24); box-shadow:0 10px 24px rgba(6,26,56,.08); }

/* Lightbox: display the same final gallery file without any transform/filter. */
body.exp-lightbox-open { overflow:hidden; }
.exp-lightbox[hidden] { display:none; }
.exp-lightbox { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:22px; }
.exp-lightbox-backdrop { position:absolute; inset:0; background:rgba(2,10,24,.92); }
.exp-lightbox-stage { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto; align-items:center; width:min(1280px,96vw); height:min(900px,94vh); padding:48px 58px 24px; }
.exp-lightbox-figure { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:0; margin:0; height:100%; }
.exp-lightbox-image { display:block; width:auto; height:auto; max-width:min(100%,1200px); max-height:calc(94vh - 118px); object-fit:contain; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.4); background:#071327; }
.exp-lightbox-caption { max-width:min(900px,85vw); margin-top:12px; color:rgba(255,255,255,.88); font-size:.82rem; line-height:1.6; text-align:center; }
.exp-lightbox-counter { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.11); color:#fff; font-size:.72rem; font-weight:700; white-space:nowrap; }
.exp-lightbox-close,.exp-lightbox-nav { display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); background:rgba(8,24,49,.74); color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.18); cursor:pointer; }
.exp-lightbox-close:hover,.exp-lightbox-nav:hover { background:rgba(255,255,255,.18); }
.exp-lightbox-close:focus-visible,.exp-lightbox-nav:focus-visible { outline:3px solid rgba(244,197,66,.55); outline-offset:3px; }
.exp-lightbox-close { position:absolute; right:8px; top:4px; width:42px; height:42px; border-radius:50%; font-size:1.65rem; line-height:1; }
.exp-lightbox-nav { width:48px; height:48px; border-radius:50%; font-size:2rem; line-height:1; }
.exp-lightbox-prev { grid-column:1; grid-row:1; justify-self:start; margin-right:10px; }
.exp-lightbox-next { grid-column:3; grid-row:1; justify-self:end; margin-left:10px; }
.exp-lightbox-nav[hidden] { display:none; }

@media(max-width:1000px) {
  .exp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exp-detail-grid { grid-template-columns:1fr; }
  .exp-detail-side { position:static; }
}

@media(max-width:900px) {
  .menu-toggle{display:grid;place-items:center}.main-nav-wrap{position:static}.nav-menu{display:none!important;position:absolute;z-index:1100;flex-direction:column;align-items:stretch}.nav-menu.active{display:flex!important}.nav-item{width:100%}.nav-link{width:100%}.dropdown{position:static!important;display:none;opacity:1!important;visibility:visible!important;transform:none!important}.nav-item.open>.dropdown{display:block}.footer-top{flex-direction:column}.footer-developer{text-align:left}
}

@media(max-width:680px) {
  .container { width:min(100% - 24px,var(--lm-container)); }
  .exp-hero { padding:30px 0 26px; }
  .exp-hero-inner { grid-template-columns:1fr; gap:14px; }
  .exp-hero-stat { justify-self:start; min-width:132px; padding:12px 15px; }
  .exp-content,.exp-detail-wrap { padding-top:24px; }
  .exp-grid { grid-template-columns:1fr; }
  .exp-pagination { gap:6px; margin-top:26px; }
  .exp-page-link { min-width:36px; height:36px; padding:0 9px; border-radius:10px; }
  .exp-page-nav span { display:none; }
  .exp-page-nav { min-width:36px; padding:0 9px; font-size:1rem; }
  .exp-page-ellipsis { height:36px; }
  .exp-section-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .exp-detail-body { padding:19px; }
  .exp-gallery-grid { grid-template-columns:1fr; }
  .footer-social{gap:6px}.footer-social-item{font-size:.78rem}
  .exp-image-zoom-hint { right:9px; bottom:9px; padding:5px 8px; font-size:.61rem; }
  .exp-lightbox { padding:0; }
  .exp-lightbox-stage { width:100vw; height:100dvh; padding:58px 12px 58px; grid-template-columns:42px minmax(0,1fr) 42px; }
  .exp-lightbox-figure { grid-column:1 / -1; grid-row:1 / span 2; width:100%; padding:0 4px; }
  .exp-lightbox-image { max-width:100%; max-height:calc(100dvh - 150px); border-radius:8px; }
  .exp-lightbox-caption { max-width:92vw; margin-top:10px; font-size:.75rem; }
  .exp-lightbox-close { top:10px; right:10px; width:40px; height:40px; }
  .exp-lightbox-nav { position:absolute; top:50%; width:40px; height:40px; font-size:1.8rem; transform:translateY(-50%); }
  .exp-lightbox-prev { left:10px; margin:0; }
  .exp-lightbox-next { right:10px; margin:0; }
  .exp-lightbox-counter { bottom:14px; }
}