/* Do Thailand article media only.
   Prose stays readable; key editorial media can break out wider for a cleaner,
   more magazine-like article experience. */

.article-media{width:100%;min-width:0;margin:28px 0 42px}
.article-media-card{margin:0;min-width:0}
.article-media-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#eef1f4;border-radius:16px}
.article-media-card figcaption{padding:9px 2px 0;color:#6f7784;font-size:11px;line-height:1.5}
.article-media-card figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Main cover: deliberately wider than the reading column. */
.article-page .article-media-cover{
  width:min(1040px,calc(100vw - 48px));
  max-width:none;
  margin:32px 0 10px;
  margin-left:50%;
  transform:translateX(-50%);
}
.article-media-cover .article-media-card{width:100%}
.article-media-cover .article-media-card img{box-shadow:0 14px 36px rgba(23,38,64,.11)}

/*
   Gallery injection can land inside page-specific evidence grids. Only the
   immediate media host and one wrapper above it may span all grid columns.
*/
.article-page .prose :is(article,section,div):has(>.article-hotel-gallery),
.article-page .prose :is(article,section,div):has(>:is(article,section,div)>.article-hotel-gallery){
  grid-column:1/-1!important;
  min-width:0!important;
  max-width:100%!important;
}
.article-hotel-gallery{
  grid-column:1/-1!important;
  justify-self:stretch!important;
  width:min(1040px,calc(100vw - 48px))!important;
  max-width:none!important;
  min-width:0!important;
  margin:32px 0 44px!important;
  margin-left:50%!important;
  transform:translateX(-50%);
}

/* Desktop: use the wider breakout, then let the number of surviving images
   decide the grid. One image becomes large, two become balanced, three stay
   comfortably readable instead of turning into tiny tiles. */
.article-hotel-gallery .article-media-track{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  padding:0!important;
}
.article-hotel-gallery .article-media-card{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(23,38,64,.075)!important;
}
.article-hotel-gallery .article-media-card img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;border-radius:0!important;object-fit:cover!important}
.article-hotel-gallery .article-media-card figcaption{display:none}
.article-media-hint{display:none;margin:7px 0 0;color:#7b8491;font-size:11px;line-height:1.4}
.article-media-track::-webkit-scrollbar{height:6px}
.article-media-track::-webkit-scrollbar-thumb{background:#c8cdd4;border-radius:99px}

/* Editorial cleanup for the Samui shuttle decision page. */
.shuttle-verdict{margin:32px 0 42px!important;padding:24px 26px!important;border:1px solid var(--line)!important;border-left:4px solid var(--thai-indigo)!important;background:linear-gradient(90deg,#f4f3f9,#fff)!important}
.shuttle-verdict h2{margin:0 0 12px!important;font-size:26px!important;line-height:1.25!important}
.clock-strip{gap:12px!important;margin:28px 0 42px!important}
.clock-strip article{padding:19px!important;border:1px solid var(--line)!important;border-top:3px solid var(--thai-gold)!important;border-radius:12px;background:#fff!important}
.clock-strip h3{margin:6px 0 7px!important;font-size:21px!important;line-height:1.25!important}
.hotel-evidence{margin:30px 0 46px!important}
.hotel-evidence article{grid-template-columns:160px minmax(0,1fr)!important;gap:20px!important;padding:24px 0!important}
.hotel-evidence b{font-size:15px;line-height:1.45}
.friction-meter{margin:34px 0 46px!important;overflow:hidden;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(23,38,64,.04)}
.friction-meter header{padding:18px 20px!important;background:#f7f9fc!important}
.friction-meter header h2{font-size:25px!important}
.friction-row{grid-template-columns:150px minmax(0,1fr) 110px!important;gap:16px!important;padding:17px 20px!important}
.split-night{gap:14px!important;margin:30px 0 44px!important}
.split-night article{padding:22px!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(23,38,64,.035)}
.split-night h3{font-size:23px!important;line-height:1.28!important}
.stay22-card{margin:38px 0 44px!important;padding:24px!important;border:1px solid var(--line)!important;border-top:4px solid #6f56d9!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(23,38,64,.055)!important}
.stay22-card h3{font-size:24px!important;line-height:1.28!important}
.stay22-button{min-height:46px;padding:12px 16px!important;border-radius:10px!important}

@media(max-width:720px){
  .article-page .article-media-cover{
    width:calc(100vw - 28px);
    margin-top:24px;
  }
  .article-media-cover .article-media-card img{border-radius:12px}
  .article-media-cover .article-media-card figcaption{font-size:10px}

  /* Mobile: intentional horizontal swipe with a visible next-card cue. */
  .article-hotel-gallery{
    width:calc(100vw - 28px)!important;
    margin-top:26px!important;
    margin-bottom:36px!important;
  }
  .article-hotel-gallery .article-media-track{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 12vw 10px 0!important;
    scrollbar-width:thin!important;
  }
  .article-hotel-gallery .article-media-card{flex:0 0 88%!important;scroll-snap-align:start!important;border-radius:12px!important}
  .article-hotel-gallery .article-media-card img{height:auto!important;aspect-ratio:16/10!important}
  .article-media-hint{display:block!important;font-size:10px}

  .shuttle-verdict{padding:21px 20px!important;margin:28px 0 36px!important}
  .shuttle-verdict h2{font-size:23px!important}
  .clock-strip,.split-night{grid-template-columns:1fr!important}
  .clock-strip article,.split-night article{padding:19px!important}
  .hotel-evidence article,.friction-row{grid-template-columns:1fr!important;gap:6px!important}
  .friction-row em{margin-top:0!important}
  .stay22-card{padding:21px 20px!important}
}