/* Do Thailand final layout guard.
   Loaded last by the Worker on every HTML response so legacy inline/page CSS cannot
   re-introduce mixed reading axes, trapped hotel galleries or hub overlap. */

/* ---------- global geometry safety ---------- */
html,body{max-width:100%}
.container{min-width:0}
img,svg,video,iframe{max-width:100%}
.nav-utility{white-space:nowrap}

/* Older articles still contain a retired Seasons nav item. Keep the desktop nav
   visible while hiding only that retired item; never hide the whole navigation. */
.nav-links a[href="/guides/seasons/"],
.footer-col a[href="/guides/seasons/"]{display:none!important}
@media(min-width:981px){
  .nav-links:has(a[href="/guides/seasons/"]){display:flex!important}
}

/* ---------- long-form article: one visual axis ---------- */
.article-page .inner-hero>.container{
  width:min(calc(100% - 48px),1126px)!important;
  max-width:1126px!important;
  margin-inline:auto!important;
}
.article-page .inner-hero>.container:not(:has(.side-panel)){
  width:min(calc(100% - 48px),760px)!important;
  max-width:760px!important;
}
.article-page .breadcrumbs,
.article-page .page-title,
.article-page .page-lede,
.article-page .page-rule,
.article-page .article-media-cover{margin-left:0!important;margin-right:0!important}
.article-page .page-title,
.article-page .page-lede,
.article-page .article-media-cover{width:100%!important;max-width:760px!important}
.article-page .content-shell{
  display:grid!important;
  grid-template-columns:minmax(0,760px) 300px!important;
  gap:66px!important;
  align-items:start!important;
  justify-content:start!important;
  width:100%!important;
  max-width:1126px!important;
  min-width:0!important;
}
.article-page .content-shell:not(:has(>.side-panel)){
  grid-template-columns:minmax(0,760px)!important;
  max-width:760px!important;
}
.article-page .content-shell>.prose{grid-column:1!important;min-width:0!important;max-width:760px!important;width:100%!important}
.article-page .content-shell>.side-panel{grid-column:2!important;min-width:0!important;width:100%!important}
.article-page .prose>*{min-width:0;max-width:100%}
.article-page .prose :is(article,section,div){min-width:0}
.article-page .prose a{overflow-wrap:anywhere}
.article-page .prose :is(img,video,iframe){max-width:100%;height:auto}
.article-page .prose table{max-width:100%}

/* Quarantine cleanup: when the Worker removes a known low-res/duplicated image,
   its empty card/section must collapse rather than leave a caption or blank frame. */
.article-page .article-media-card:not(:has(img)),
.article-page .article-media-cover:not(:has(img)),
.article-page .article-hotel-gallery:not(:has(img)){display:none!important}

/* ---------- hotel media: never get trapped in a page-specific grid ---------- */
/* Immediate media host. */
.article-page .prose :is(article,section,div):has(>.article-hotel-gallery){
  grid-column:1/-1!important;
  min-width:0!important;
  max-width:100%!important;
}
/* One additional wrapper level covers evidence-card structures without ever
   targeting the .prose root itself. */
.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-page .article-hotel-gallery{
  grid-column:1/-1!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:28px 0 40px!important;
}
.article-page .article-hotel-gallery .article-media-track{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  padding:0!important;
}
.article-page .article-hotel-gallery .article-media-card{min-width:0!important;width:auto!important;max-width:none!important}
.article-page .article-hotel-gallery .article-media-card img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
}
.article-page .article-hotel-gallery .article-media-hint{display:none!important}

/* ---------- flat hub DOM: stable desktop columns ---------- */
.inner-hero>.container:has(>.hub-index){
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  column-gap:64px!important;
  align-items:start!important;
  min-width:0!important;
}
.inner-hero>.container:has(>.hub-index)>:is(.breadcrumbs,.page-kicker,.page-title,.page-lede,.page-rule){
  grid-column:1/-1!important;
  min-width:0!important;
}
.inner-hero>.container:has(>.hub-index)>.hub-index{
  grid-column:1!important;
  grid-row:auto/span 200!important;
  align-self:start!important;
  min-width:0!important;
}
.inner-hero>.container:has(>.hub-index)>:is(.section-title,.card-grid,.back-band){
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  margin-left:0!important;
}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{min-width:0!important}

/* ---------- legal/editorial utility pages ---------- */
.inner-hero>.container:has(>.legal-copy){
  width:min(calc(100% - 48px),760px)!important;
  max-width:760px!important;
  margin-inline:auto!important;
}
.inner-hero>.container:has(>.legal-copy)>.legal-copy,
.inner-hero>.container:has(>.legal-copy)>.back-band{width:100%!important;max-width:760px!important}

/* ---------- tablet ---------- */
@media(max-width:980px){
  .article-page .inner-hero>.container{
    width:min(calc(100% - 48px),760px)!important;
    max-width:760px!important;
  }
  .article-page .content-shell,
  .article-page .content-shell:not(:has(>.side-panel)){
    grid-template-columns:minmax(0,1fr)!important;
    gap:34px!important;
    max-width:760px!important;
  }
  .article-page .content-shell>.prose,
  .article-page .content-shell>.side-panel{grid-column:1!important;max-width:760px!important}
  .article-page .side-panel{position:static!important}

  .inner-hero>.container:has(>.hub-index){display:block!important}
  .inner-hero>.container:has(>.hub-index)>.hub-index{
    position:static!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    margin:38px 0 28px!important;
    padding:0 0 10px!important;
  }
  .inner-hero>.container:has(>.hub-index)>.hub-index::before{display:none!important}
  .inner-hero>.container:has(>.hub-index)>.hub-index>a{
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
  }
  .inner-hero>.container:has(>.hub-index)>:is(.section-title,.card-grid,.back-band){width:100%!important;margin-left:0!important}
}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .article-page .inner-hero>.container,
  .article-page .inner-hero>.container:not(:has(.side-panel)),
  .inner-hero>.container:has(>.legal-copy){
    width:min(calc(100% - 28px),760px)!important;
  }
  .article-page .content-shell{gap:26px!important}

  /* Hotel media becomes an intentional swipe rail only on small screens. */
  .article-page .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;
  }
  .article-page .article-hotel-gallery .article-media-card{
    flex:0 0 86%!important;
    scroll-snap-align:start!important;
  }
  .article-page .article-hotel-gallery .article-media-card img{aspect-ratio:16/10!important}
  .article-page .article-hotel-gallery .article-media-hint{display:block!important;margin:6px 0 0!important;font-size:10px!important}

  /* Any comparison table can scroll inside the article instead of widening the page. */
  .article-page .prose table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media(max-width:480px){
  .footer-grid{grid-template-columns:minmax(0,1fr)!important}
  .footer-brand,.footer-col:last-child{grid-column:1!important}
}

/* ========================================================================
   MOBILE UX PASS — 2026-08-10
   Sitewide polish is intentionally kept here because the Worker injects this
   guard on every HTML response. These rules improve touch targets, readable
   type, gutters, mobile card density and horizontal-overflow containment
   without changing the desktop layout.
   ======================================================================== */

@media(max-width:980px){
  body{overflow-x:clip}
  html{scroll-padding-top:82px}
  :target{scroll-margin-top:82px}

  .nav{min-height:68px!important;gap:14px!important}
  .brand{gap:9px!important}
  .brand-mark{width:40px!important;height:40px!important;flex-basis:40px!important}
  .brand-mark img{width:40px!important;height:40px!important}
  .brand-word{font-size:19px!important}
  .nav-utility{
    margin-left:auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:0 13px!important;
  }

  .btn,.section-link{min-height:44px}
  input,select,textarea,button{font-size:16px}
  pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  iframe{width:100%}

  .inner-hero>.container:has(>.hub-index)>.hub-index>a{
    min-height:44px!important;
    padding-inline:14px!important;
    font-size:13px!important;
  }
  .article-page .side-panel a{
    display:flex!important;
    align-items:center!important;
    min-height:44px!important;
  }
}

@media(max-width:640px){
  html{scroll-padding-top:74px}
  :target{scroll-margin-top:74px}

  .container{width:min(calc(100% - 36px),var(--max))!important}
  .article-page .inner-hero>.container,
  .article-page .inner-hero>.container:not(:has(.side-panel)),
  .inner-hero>.container:has(>.legal-copy){
    width:min(calc(100% - 36px),760px)!important;
  }

  /* Header: keep brand recognition while preserving a 44px utility target. */
  .nav{min-height:64px!important;gap:10px!important}
  .brand-mark{width:36px!important;height:36px!important;flex-basis:36px!important}
  .brand-mark img{width:36px!important;height:36px!important}
  .brand-word{font-size:18px!important;letter-spacing:-.035em!important}
  .brand-word small{margin-top:3px!important;font-size:7.5px!important;letter-spacing:.12em!important}
  .nav-utility{
    min-height:44px!important;
    padding:0 12px!important;
    clip-path:none!important;
    border-radius:10px!important;
    font-size:12.5px!important;
  }

  /* Homepage: shorter first screen, stronger tap targets, no tiny secondary copy. */
  .hero{padding:10px 0 38px!important}
  .hero-frame,.hero-content{min-height:460px!important}
  .hero-frame{clip-path:none!important;border-radius:18px!important}
  .hero-content{padding:190px 20px 28px!important}
  .hero h1{font-size:clamp(36px,10.5vw,42px)!important;line-height:1.03!important;letter-spacing:-.04em!important}
  .hero h1 br{display:none}
  .hero-route,.hero-place{display:none!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important}
  .hero-actions .btn{width:100%!important;min-height:50px!important;font-size:14px!important}

  .section{padding:44px 0!important}
  .section-head{align-items:flex-start!important;gap:10px!important;margin-bottom:18px!important}
  .section-title{font-size:30px!important;line-height:1.12!important}
  .section-link{display:inline-flex;align-items:center;flex:0 0 auto;font-size:13px!important}

  .destination-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .destination-card{min-height:215px!important;aspect-ratio:16/10!important}
  .destination-card .label{left:18px!important;right:16px!important;bottom:16px!important;padding-right:48px!important}
  .destination-card h3{font-size:27px!important}
  .destination-card p{font-size:14px!important;line-height:1.45!important}
  .circle-arrow{width:40px!important;height:40px!important}

  /* The four homepage decision categories become a swipe rail with the next card
     visibly peeking in, instead of compressing four columns into tiny text. */
  .topic-rail{
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 1px 10px!important;
    border:0!important;
    background:transparent!important;
    scrollbar-width:none!important;
  }
  .topic-rail::-webkit-scrollbar{display:none}
  .topic-link{
    flex:0 0 82%!important;
    min-height:150px!important;
    padding:18px!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:#fff!important;
    scroll-snap-align:start!important;
  }
  .topic-number{margin-bottom:10px!important;font-size:11px!important}
  .topic-link strong{font-size:23px!important}
  .topic-link span:last-child{max-width:none!important;font-size:14px!important;line-height:1.55!important}

  .home-latest-grid{grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  .story-wide,.story-narrow{grid-column:1!important}
  .home-story-media{aspect-ratio:16/9!important}
  .home-story-body{min-height:0!important;padding:18px 17px 16px!important}
  .home-story h3{font-size:24px!important;line-height:1.2!important}
  .home-story p{font-size:14.5px!important;line-height:1.62!important}
  .home-story-footer{font-size:11px!important;padding-top:15px!important}
  .home-story-footer time{font-size:11px!important}
  .home-story-arrow{width:38px!important;height:38px!important;flex-basis:38px!important}

  .decision-band{
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px!important;
    padding:26px 20px!important;
    clip-path:none!important;
    border-radius:16px!important;
  }
  .decision-band h2{font-size:30px!important;line-height:1.12!important}
  .decision-band p{font-size:15px!important;line-height:1.65!important}
  .decision-actions{display:grid!important;grid-template-columns:1fr!important;justify-content:stretch!important;gap:10px!important;width:100%!important}
  .decision-actions .btn,.decision-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:48px!important;
    font-size:14px!important;
  }

  /* Long-form reading: a real mobile gutter and slightly tighter vertical rhythm. */
  .inner-hero{padding-top:28px!important;padding-bottom:46px!important}
  .article-page .inner-hero{padding-top:30px!important;padding-bottom:48px!important}
  .breadcrumbs{gap:6px!important;margin-bottom:16px!important;font-size:11.5px!important;line-height:1.5!important}
  .page-kicker{font-size:10.5px!important;line-height:1.45!important}
  .article-page .page-title{font-size:clamp(31px,9vw,37px)!important;line-height:1.12!important;letter-spacing:-.035em!important}
  .article-page .page-lede{font-size:16px!important;line-height:1.68!important}
  .article-page .page-rule{margin-top:19px!important}
  .article-page .content-shell,.article-page .content-shell:not(:has(>.side-panel)){margin-top:27px!important;gap:24px!important}
  .article-page .prose,.article-page .prose p,.article-page .prose li{font-size:17px!important;line-height:1.78!important}
  .article-page .prose p{margin-bottom:17px!important}
  .article-page .prose h2{margin:44px 0 14px!important;font-size:26px!important;line-height:1.24!important}
  .article-page .prose h3{margin:28px 0 10px!important;font-size:21px!important;line-height:1.34!important}
  .article-page .prose ul,.article-page .prose ol{padding-left:20px!important;margin-bottom:22px!important}
  .callout{margin:24px 0!important;padding:18px!important}
  .article-page .side-panel{padding:18px!important;border-radius:12px!important}

  .article-page .article-hotel-gallery{margin:24px 0 32px!important}
  .article-page .article-hotel-gallery .article-media-track{padding-right:10vw!important}
  .article-page .article-hotel-gallery .article-media-card{flex-basis:88%!important}
  .article-page .article-hotel-gallery .article-media-hint{font-size:11px!important;line-height:1.45!important}

  /* Common hand-authored comparison components across newer guides. */
  .compare-wrap{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important}
  .compare-table{font-size:14px!important}
  .compare-table th,.compare-table td{padding:12px 13px!important}
  .verdict-panel,.friction-meter,.gyg-card{padding:20px!important}
  .verdict-panel strong{font-size:24px!important;line-height:1.2!important}
  .choice-map article,.fit-list div{padding:18px!important}
  .gyg-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:48px!important;
    padding:12px 16px!important;
    font-size:14px!important;
  }

  .site-footer{padding:46px 0 calc(24px + env(safe-area-inset-bottom))!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 20px!important}
  .footer-brand{grid-column:1/-1!important}
  .footer-brand p{max-width:360px!important;font-size:14px!important;line-height:1.6!important}
  .footer-col h4{font-size:11px!important;margin-bottom:10px!important}
  .footer-col a{margin:0!important;padding:6px 0!important;font-size:14px!important;line-height:1.45!important}
  .footer-note{margin-top:30px!important;font-size:11px!important}
}

@media(max-width:420px){
  .container,
  .article-page .inner-hero>.container,
  .article-page .inner-hero>.container:not(:has(.side-panel)),
  .inner-hero>.container:has(>.legal-copy){
    width:min(calc(100% - 32px),760px)!important;
  }
  .brand-word small{display:none!important}
  .topic-link{flex-basis:88%!important}

  .hub-main>.card-grid>.link-card,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{
    grid-template-columns:108px minmax(0,1fr)!important;
  }
  .hub-main>.card-grid>.link-card:not(:has(>.kori-card-thumb))::before,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.kori-card-thumb))::before{
    width:108px!important;
  }
  .hub-main>.card-grid>.link-card h2,
  .hub-main>.card-grid>.link-card h3,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card h2,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card h3{
    margin-right:34px!important;
    font-size:16.5px!important;
  }

  .footer-grid{grid-template-columns:minmax(0,1fr)!important}
  .footer-brand,.footer-col,.footer-col:last-child{grid-column:1!important}
}

@media(hover:none){
  .home-story:hover,.destination-card:hover,.link-card:hover,.btn:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}