/* Local media + UX overrides.
   Keep core site surfaces independent from third-party hotlinks, but do not
   manufacture the same fallback photo for dozens of unrelated articles. */
.hero-media{
  background-image:linear-gradient(90deg,rgba(23,38,64,.92),rgba(23,38,64,.63) 47%,rgba(23,38,64,.08) 78%),url('/assets/media/articles/stay-sukhumvit-vs-siam-cover.webp')!important;
}
.photo.bangkok,.destination-card .photo.bangkok,.destinations .photo.bangkok{
  background-image:url('/assets/media/articles/stay-where-to-stay-bangkok-cover.webp')!important;
}
.photo.chiangmai,.destination-card .photo.chiangmai,.destinations .photo.chiangmai{
  background-image:url('/assets/media/articles/itineraries-chiang-mai-4-days-cover.webp')!important;
}
.photo.phuket,.destination-card .photo.phuket,.destinations .photo.phuket{
  background-image:url('/assets/media/articles/stay-where-to-stay-phuket-cover.webp')!important;
}
.photo.krabi,.destination-card .photo.krabi,.destinations .photo.krabi{
  background-image:url('/assets/media/articles/stay-ao-nang-vs-railay-cover.webp')!important;
}
.photo.samui,.destination-card .photo.samui,.destinations .photo.samui{
  background-image:url('/assets/media/articles/stay-koh-samui-one-resort-vs-split-stay-cover.webp')!important;
}
.photo.pattaya,.destination-card .photo.pattaya,.destinations .photo.pattaya{
  background-image:url('/assets/media/articles/transport-pattaya-to-koh-larn-ferry-vs-speedboat-cover.webp')!important;
}

/* Article/hub cards: image-enhanced rows only when a real/dynamic article
   thumbnail can load. The Worker removes failed thumbnails instead of showing
   the same generic Bangkok/Samui image repeatedly. */
.link-card[data-auto-thumb="1"]{
  grid-template-columns:148px 108px minmax(0,1fr) auto!important;
  column-gap:18px!important;
  align-items:center!important;
  padding-block:16px!important;
}
.link-card[data-auto-thumb="1"] .link-card-thumb{
  grid-column:1!important;
  grid-row:1/4!important;
  display:block;
  width:148px;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:12px;
  background:#EEEAE3;
  box-shadow:0 6px 18px rgba(23,38,64,.06);
}
.link-card[data-auto-thumb="1"] .link-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.link-card[data-auto-thumb="1"] .eyebrow{
  grid-column:2!important;
  grid-row:1/4!important;
  margin:0!important;
}
.link-card[data-auto-thumb="1"] h2,.link-card[data-auto-thumb="1"] h3,.link-card[data-auto-thumb="1"] p{
  grid-column:3!important;
}
.link-card[data-auto-thumb="1"] .arrow{
  grid-column:4!important;
  grid-row:1/4!important;
}

/* Make the article orientation layer easier to scan. */
.article-page .breadcrumbs{
  gap:6px!important;
  margin-bottom:20px!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.article-page .breadcrumbs a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #E5E0D7;
  border-radius:999px;
  background:#FBF8F2;
  text-decoration:none!important;
}
.article-page .breadcrumbs a:hover{background:#F8EBCF}
.article-page .breadcrumbs span[aria-hidden="true"]{opacity:.55}

/* Per-article jump navigation is generated from that article's own H2s, so
   it changes with the content instead of repeating one generic navigation. */
.article-jump-nav{
  width:min(100%,760px);
  margin:26px 0 4px;
  padding:16px 18px 17px;
  border:1px solid #E2DDD4;
  border-radius:14px;
  background:#FBF8F2;
}
.article-jump-label{
  display:block;
  margin:0 0 10px;
  color:var(--thai-gold-deep);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.article-jump-links{display:flex;gap:8px;flex-wrap:wrap}
.article-jump-links a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #DED8CF;
  border-radius:999px;
  background:#fff;
  color:var(--thai-indigo);
  font-size:10px;
  font-weight:800;
  line-height:1.3;
  text-decoration:none!important;
}
.article-jump-links a:hover{border-color:var(--thai-gold);background:var(--thai-gold-soft)}

/* The base stylesheet says NEXT STEP in English. Localize that UI chrome. */
html[lang="zh-Hant"] .article-page .side-panel:before{content:"下一步"!important}
html[lang="zh"] .article-page .side-panel:before{content:"下一步"!important}
html[lang="ja"] .article-page .side-panel:before{content:"次に読む"!important}
html[lang="ko"] .article-page .side-panel:before{content:"다음 단계"!important}

/* When no same-language version exists, keep the useful English link but make
   the language switch explicit instead of surprising the reader after click. */
.article-page main a[data-cross-language="en"]:after{
  content:"EN";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  margin-left:6px;
  padding:0 5px;
  border:1px solid #D9D2C8;
  border-radius:999px;
  background:#fff;
  color:#7A8798;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  vertical-align:2px;
  text-decoration:none;
}

@media(max-width:820px){
  .link-card[data-auto-thumb="1"]{
    grid-template-columns:124px minmax(0,1fr)!important;
    column-gap:14px!important;
    row-gap:5px!important;
    align-items:start!important;
  }
  .link-card[data-auto-thumb="1"] .link-card-thumb{
    grid-column:1!important;
    grid-row:1/5!important;
    width:124px;
    aspect-ratio:4/3;
  }
  .link-card[data-auto-thumb="1"] .eyebrow,.link-card[data-auto-thumb="1"] h2,.link-card[data-auto-thumb="1"] h3,.link-card[data-auto-thumb="1"] p,.link-card[data-auto-thumb="1"] .arrow{
    grid-column:2!important;
    grid-row:auto!important;
  }
  .link-card[data-auto-thumb="1"] h2,.link-card[data-auto-thumb="1"] h3{
    font-size:21px!important;
  }
  .link-card[data-auto-thumb="1"] .arrow{
    justify-self:start!important;
    margin-top:3px!important;
  }
}

@media(max-width:640px){
  .article-jump-nav{margin-top:22px;padding:14px 14px 15px;overflow:hidden}
  .article-jump-links{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .article-jump-links a{flex:0 0 auto;max-width:78vw;scroll-snap-align:start}
  .hero-media{
    background-image:linear-gradient(180deg,rgba(23,38,64,.18),rgba(23,38,64,.30) 38%,rgba(23,38,64,.95) 78%),url('/assets/media/articles/stay-sukhumvit-vs-siam-cover.webp')!important;
  }
}

@media(max-width:520px){
  .link-card[data-auto-thumb="1"]{
    grid-template-columns:96px minmax(0,1fr)!important;
    column-gap:12px!important;
    padding-block:14px!important;
  }
  .link-card[data-auto-thumb="1"] .link-card-thumb{
    width:96px;
    border-radius:9px;
  }
  .link-card[data-auto-thumb="1"] h2,.link-card[data-auto-thumb="1"] h3{
    font-size:18px!important;
    line-height:1.22!important;
  }
  .link-card[data-auto-thumb="1"] p{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .article-page .breadcrumbs a{min-height:28px;padding:4px 8px}
}