/* 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}
.article-media-hero .article-media-card img{aspect-ratio:16/9!important}

/* Keep media inside its actual host; conflicting prose margins previously
   left the translateX breakout half outside the mobile viewport. */
.article-page .article-media-cover{
  width:100%;
  max-width:1040px;
  margin:32px 0 10px;
  margin-inline:auto!important;
  transform:none!important;
}
.article-page .inner-hero-cover-tight{padding-bottom:20px}
.article-page .inner-hero-cover-tight + .article-layout .content-shell{margin-top:12px}
.article-page .inner-hero-cover-tight + .article-layout .article-media-cover{margin-top:0}
.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)}
.article-media-cover.article-cover-preserve-portrait .article-media-card img{aspect-ratio:4/3}

/*
   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:100%!important;
  max-width:1040px!important;
  min-width:0!important;
  margin:32px 0 44px!important;
  margin-inline:auto!important;
  transform:none!important;
}

/* 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(400px,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}
.amari-phuket-media .article-media-track>figure:not(.article-media-card){margin:0;flex:0 0 88%;scroll-snap-align:start}

/* Keep this Krabi resort comparison's two base images in the first viewport. */
.article-krabi-resort-matchup .inner-hero{padding:12px 0 8px!important}
.article-krabi-resort-matchup .page-title{font-size:clamp(38px,4.2vw,52px);line-height:1.08}
.article-krabi-resort-matchup .page-lede{margin-top:8px;font-size:16px;line-height:1.5}
.article-krabi-resort-matchup .page-rule{margin-top:12px}
.article-krabi-resort-matchup .content-shell{margin-top:8px!important}
.article-krabi-resort-matchup .article-media-hero{margin-top:0!important}

/* 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-media-cover.article-cover-portrait-mobile .article-media-card img{aspect-ratio:3/4}
  .article-media-cover.article-cover-preserve-portrait .article-media-card img{aspect-ratio:3/4}
  .article-krabi-resort-matchup .inner-hero{padding:18px 0 8px!important}
  .article-krabi-resort-matchup .page-title{font-size:clamp(32px,8vw,42px)}
  .article-krabi-resort-matchup .content-shell{margin-top:12px!important}
  .article-krabi-resort-matchup .article-media-hero{margin-top:12px!important}
  .article-page .article-media-cover{
    width:100%;
    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:100%!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}
}

/* Keep this four-friend room decision's two photographs visible near the title. */
.article-surin-friends .inner-hero{padding:12px 0 6px!important}
.article-surin-friends .page-title{font-size:clamp(38px,4vw,50px)!important;line-height:1.06!important}
.article-surin-friends .page-lede{margin-top:8px!important;font-size:16px!important;line-height:1.45!important}
.article-surin-friends .article-media-hero{margin-top:4px!important;margin-bottom:24px!important}
@media(max-width:720px){
  .article-surin-friends .inner-hero{padding:10px 0 2px!important}
  .article-surin-friends .page-title{font-size:clamp(32px,8.7vw,38px)!important;line-height:1.08!important}
  .article-surin-friends .page-lede{font-size:15px!important;line-height:1.45!important}
  .article-surin-friends .article-media-hero{margin-top:8px!important;margin-bottom:22px!important}
}

/* Keep this image-rich Koh Samet comparison's photographs visible on mobile. */
@media(max-width:720px){
  .article-koh-samet-pool-villa-matchup .article-hotel-gallery .article-media-track{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(0,auto))!important;
    grid-auto-columns:calc((100vw - 38px)/2)!important;
    gap:10px!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 0 10px!important;
  }
  .article-koh-samet-pool-villa-matchup .article-hotel-gallery .article-media-card{
    flex:none!important;
    width:auto!important;
    scroll-snap-align:none!important;
  }
  .article-koh-samet-pool-villa-matchup .article-hotel-gallery .article-media-card img{
    aspect-ratio:4/3!important;
  }
  .article-koh-samet-pool-villa-matchup .article-media-hero .article-media-track{
    grid-auto-flow:row!important;
    grid-template-rows:none!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Anantara Bophut Koh Samui Resort"] .article-media-track,
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Celes Samui"] .article-media-track{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:1fr!important;
    grid-template-columns:none!important;
    grid-auto-columns:calc((100vw - 38px)/2)!important;
    gap:10px!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 0 10px!important;
  }
  .article-bophut-friends .article-media-hero .article-media-track,
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Celes Samui shared spaces"] .article-media-track{
    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-rows:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-columns:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  .article-koh-samet-pool-villa-matchup .article-hotel-gallery:not(.article-media-hero):has(.article-media-card:nth-child(4)) .article-media-track{
    grid-template-columns:none!important;
  }
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Anantara Bophut Koh Samui Resort"] .article-media-card,
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Celes Samui"] .article-media-card{flex:none!important;width:auto!important;scroll-snap-align:start!important}
  .article-bophut-friends .article-media-hero .article-media-hint,
  .article-bophut-friends .article-hotel-gallery[data-hotel-name="Celes Samui shared spaces"] .article-media-hint{display:none!important}
  .article-koh-samet-pool-villa-matchup .article-media-hint,
  .article-bophut-friends .article-media-hint{display:block!important;font-size:10px}
}

/* Keep the Koh Samet room galleries swipeable while showing four photos at once. */
@media(max-width:720px){
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery:not(.article-media-hero) .article-media-track,
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery:not(.article-media-hero):has(.article-media-card:nth-child(4)) .article-media-track{
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(0,auto))!important;
    grid-template-columns:none!important;
    grid-auto-columns:calc((100vw - 44px)/2)!important;
    gap:10px!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 0 10px!important;
  }
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery .article-media-card{scroll-snap-align:start!important}
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery .article-media-hint{display:block!important}
}

/* Three-image room galleries must scroll as well; two rows otherwise fit all three cards without a swipe. */
@media(max-width:720px){
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery:not(.article-media-hero):has(.article-media-card:nth-child(3)):not(:has(.article-media-card:nth-child(4))) .article-media-track{
    display:flex!important;
    grid-auto-flow:initial!important;
    grid-template-rows:none!important;
    grid-template-columns:none!important;
    grid-auto-columns:auto!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 12vw 10px 0!important;
  }
  .article-page.article-koh-samet-pool-villa-matchup .article-hotel-gallery:not(.article-media-hero):has(.article-media-card:nth-child(3)):not(:has(.article-media-card:nth-child(4))) .article-media-card{
    flex:0 0 88%!important;
    width:auto!important;
    scroll-snap-align:start!important;
  }
}

/* Keep this Chiang Mai comparison photo-forward without removing the mobile swipe. */
@media(max-width:720px){
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery:has(.article-media-card:nth-child(4)) .article-media-track{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(0,auto))!important;
    grid-template-columns:none!important;
    grid-auto-columns:calc((100vw - 44px)/2)!important;
    gap:10px!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 0 10px!important;
  }
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery:has(.article-media-card:nth-child(4)) .article-media-card,
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery[aria-label="Rachamankha Grand Deluxe room photographs"] .article-media-card{
    flex:none!important;
    width:auto!important;
    scroll-snap-align:start!important;
  }
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery:has(.article-media-card:nth-child(4)) .article-media-card img{aspect-ratio:4/3!important}
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-media-hero .article-media-track{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-columns:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery[aria-label="Rachamankha Grand Deluxe room photographs"] .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;
  }
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery[aria-label="Rachamankha Grand Deluxe room photographs"] .article-media-card{flex:0 0 88%!important}
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-hotel-gallery .article-media-hint{display:block!important}
  .article-page.article-chiang-mai-courtyard-vs-pool-suite .article-media-hero .article-media-hint{display:none!important}
}

/* Keep the four-photo V Villas room gallery balanced on this Hua Hin page.
   The mobile rules above still turn it into a horizontal swipe gallery. */
@media(min-width:721px){
  .article-page[data-content-group-id="DT-PATH-20261007-CAPE-NIDHRA-V-VILLAS-COUPLES01"] .article-hotel-gallery[aria-label="V Villas Hua Hin One-Bedroom Pool Villa interior gallery"] .article-media-track{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Rights-pending galleries have no public images; do not reserve empty space. */
.article-media[data-hotel-media="pending-rights"]:not(:has(.article-media-card img)){
  display:none!important;
}
.article-page .inner-hero:has(.article-media-hero[data-hotel-media="pending-rights"]):not(:has(.article-media-hero img)){
  padding-bottom:20px!important;
}
.article-page .inner-hero:has(.article-media-hero[data-hotel-media="pending-rights"]):not(:has(.article-media-hero img))+.content-shell{
  margin-top:20px!important;
}
@media(max-width:640px){
  .article-page .inner-hero:has(.article-media-hero[data-hotel-media="pending-rights"]):not(:has(.article-media-hero img)){
    padding-bottom:16px!important;
  }
  .article-page .inner-hero:has(.article-media-hero[data-hotel-media="pending-rights"]):not(:has(.article-media-hero img))+.content-shell{
    margin-top:18px!important;
  }
}

/* Give the long Koh Samet comparison more breathing room between ideas. */
.article-page.article-koh-samet-pool-villa-matchup .content-shell>.prose{
  max-width:720px;
  margin-inline:auto;
}
.article-page.article-koh-samet-pool-villa-matchup .prose p:not(.ota-eyebrow){
  line-height:1.88!important;
  margin-bottom:25px!important;
}
.article-page.article-koh-samet-pool-villa-matchup .prose h2{
  margin-top:54px!important;
  margin-bottom:18px!important;
  font-size:clamp(27px,2.4vw,31px)!important;
  line-height:1.25!important;
}
@media(max-width:720px){
  .article-page.article-koh-samet-pool-villa-matchup .prose p:not(.ota-eyebrow){
    margin-bottom:22px!important;
  }
  .article-page.article-koh-samet-pool-villa-matchup .prose h2{
    margin-top:46px!important;
    font-size:25px!important;
  }
}


/* Original editorial decision covers: abstract diagrams, never hotel photography. */
.article-decision-cover{width:100%;max-width:1040px;margin:24px auto 32px}
.article-decision-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;box-shadow:0 14px 36px rgba(23,38,64,.11);background:#f2eee5}
.article-decision-cover figcaption{padding:9px 2px 0;color:#6f7784;font-size:12px;line-height:1.5}
@media(max-width:720px){.article-decision-cover{margin:18px auto 24px}.article-decision-cover img{border-radius:12px}.article-decision-cover figcaption{font-size:11px}}