/* Final article UX cleanup: fewer decorative images, no empty media shells. */
.article-page .article-hotel-gallery:not(:has(.article-media-card)),
.article-page .article-media-track:not(:has(.article-media-card)),
.article-page .article-media:empty,
.article-page .article-media-card:empty{display:none!important}

.article-page .article-media-repaired{margin-top:30px!important;margin-bottom:12px!important}
.article-page .article-media-repaired .article-media-card{border:0!important;background:transparent!important;box-shadow:none!important}
.article-page .property-family-cover{margin-bottom:12px!important}

/* Make the global navigation stable but contextual: the current section is
   visible immediately instead of every page looking identical. */
.site-header .nav-links a[aria-current="page"],
.site-header .nav-links a.is-current{color:#fff!important}
.site-header .nav-links a[aria-current="page"]:after,
.site-header .nav-links a.is-current:after{right:0!important;background:var(--thai-gold)!important}

/* Related reading should feel like a reading list, not a wall of repeated photos. */
.article-page .link-card{min-height:0}
.article-page .link-card:not([data-auto-thumb="1"]){grid-template-columns:112px minmax(0,1fr) auto!important}
.article-page .link-card:not([data-auto-thumb="1"]) .eyebrow{grid-column:1!important;grid-row:1/4!important}
.article-page .link-card:not([data-auto-thumb="1"]) h2,
.article-page .link-card:not([data-auto-thumb="1"]) h3,
.article-page .link-card:not([data-auto-thumb="1"]) p{grid-column:2!important}
.article-page .link-card:not([data-auto-thumb="1"]) .arrow{grid-column:3!important;grid-row:1/4!important}

/* Keep the orientation layer concise after the Worker removes the redundant Guides crumb. */
.article-page .breadcrumbs{max-width:760px}
.article-page .breadcrumbs>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,360px)}

/* Avoid a visually heavy sidebar competing with the article. */
.article-page .side-panel a{padding:10px 0!important}
.article-page .side-panel a:empty{display:none!important}

/* Base styles used to hide the entire primary navigation below 980px. Keep a
   compact second row instead: one finger can always reach the current section
   and adjacent travel tasks, while the brand/utility stay on the first row. */
@media (min-width:821px) and (max-width:980px){
  .site-header .nav{
    min-height:0!important;
    flex-wrap:wrap!important;
    row-gap:0!important;
    padding-top:8px!important;
    padding-bottom:7px!important;
  }
  .site-header .brand{min-height:50px}
  .site-header .nav-utility{margin-left:auto!important}
  .site-header .nav-links{
    order:3!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:3px 0 2px!important;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-header .nav-links::-webkit-scrollbar{display:none}
  .site-header .nav-links a{
    flex:0 0 auto!important;
    min-height:32px!important;
    padding:7px 11px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.055)!important;
    color:rgba(255,255,255,.78)!important;
    font-size:11px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    scroll-snap-align:start;
  }
  .site-header .nav-links a:after{display:none!important}
  .site-header .nav-links a[aria-current="page"],
  .site-header .nav-links a.is-current{
    border-color:var(--thai-gold)!important;
    background:var(--thai-gold)!important;
    color:var(--thai-indigo-deep)!important;
  }
}

@media(max-width:720px){
  .article-page .link-card:not([data-auto-thumb="1"]){grid-template-columns:1fr!important;row-gap:5px!important}
  .article-page .link-card:not([data-auto-thumb="1"]) .eyebrow,
  .article-page .link-card:not([data-auto-thumb="1"]) h2,
  .article-page .link-card:not([data-auto-thumb="1"]) h3,
  .article-page .link-card:not([data-auto-thumb="1"]) p,
  .article-page .link-card:not([data-auto-thumb="1"]) .arrow{grid-column:1!important;grid-row:auto!important}
  .article-page .breadcrumbs>span:last-child{max-width:62vw}
}

@media(max-width:520px){
  .site-header .nav{padding-top:5px!important;padding-bottom:6px!important}
  .site-header .brand{min-height:46px}
  .site-header .nav-links{margin-inline:0!important;padding-top:2px!important}
  .site-header .nav-links a{min-height:30px!important;padding:6px 10px!important;font-size:10px!important}
}

/* Accessibility: the keyboard path should be obvious without changing the
   normal visual hierarchy. */
.skip-link{
  position:fixed;z-index:10000;left:16px;top:12px;
  transform:translateY(-180%);padding:10px 14px;border-radius:8px;
  background:#fff;color:var(--thai-indigo-deep);font-size:12px;font-weight:900;
  box-shadow:0 8px 24px rgba(23,38,64,.22);transition:transform .16s ease;
}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--thai-gold)!important;outline-offset:3px!important;
}

/* Reading typography: better line endings on supported browsers without
   forcing narrower measures or changing editorial copy. */
.article-page .page-title,.article-page .prose h2,.article-page .prose h3{text-wrap:balance}
.article-page .page-lede,.article-page .prose p,.article-page .prose li{text-wrap:pretty}

/* Rendering performance: large below-the-fold modules can skip initial paint.
   Intrinsic sizes reserve space so this does not create layout jumps. */
.article-page .article-hotel-gallery,
.article-page .prose table,
.article-page .card-grid,
.article-page .back-band,
.article-page .source-note{
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}
.article-page .link-card{contain:layout paint}

/* Progressive reading progress indicator. Browsers without scroll-driven
   animation support simply ignore this block. */
@supports (animation-timeline:scroll()){
  body.article-page:before{
    content:"";position:fixed;z-index:9999;left:0;top:0;width:100%;height:3px;
    transform:scaleX(0);transform-origin:0 50%;background:var(--thai-gold);
    animation:do-thailand-reading-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes do-thailand-reading-progress{to{transform:scaleX(1)}}
}

/* Long articles get one compact orientation strip rather than a bulky TOC. */
.article-page .article-jump{
  width:min(100%,760px);margin:18px 0 2px;padding:13px 14px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--soft);
}
.article-page .article-jump>strong{
  display:block;margin-bottom:8px;color:var(--thai-gold-deep);font-size:9px;
  font-weight:900;letter-spacing:.11em;text-transform:uppercase;
}
.article-page .article-jump-links{display:flex;gap:7px;flex-wrap:wrap}
.article-page .article-jump a{
  display:inline-flex;align-items:center;min-height:31px;max-width:250px;
  padding:6px 10px;border:1px solid rgba(23,38,64,.12);border-radius:999px;
  background:#fff;color:var(--thai-indigo);font-size:10px;font-weight:800;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;
}
.article-page .article-jump a:hover{border-color:var(--thai-gold);background:var(--thai-gold-soft)}
.article-page .article-jump+ .content-shell{margin-top:28px}

@media(max-width:720px){
  .article-page .article-jump{margin-top:14px;padding:11px 12px 10px;overflow:hidden}
  .article-page .article-jump-links{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .article-page .article-jump-links::-webkit-scrollbar{display:none}
  .article-page .article-jump a{flex:0 0 auto;max-width:72vw;scroll-snap-align:start}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body.article-page:before{display:none!important}
}