/* KoriNavi-style hub compatibility + photo catalogue cards for Do Thailand.
   The first block keeps today's flat hub DOM safe. When the structural automation
   can run again, the same visual system switches to .hub-layout/.hub-main. */

/* ========================================================================
   CURRENT FLAT-DOM SAFETY LAYER
   No floats. No margin-left compensation. The old direct children become a
   real grid immediately, so section headings cannot overlap the guide index.
   ======================================================================== */
.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)>.breadcrumbs,
.inner-hero>.container:has(>.hub-index)>.page-kicker,
.inner-hero>.container:has(>.hub-index)>.page-title,
.inner-hero>.container:has(>.hub-index)>.page-lede,
.inner-hero>.container:has(>.hub-index)>.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;
  position:sticky!important;
  top:102px!important;
  display:block!important;
  align-self:start!important;
  width:100%!important;
  min-width:0!important;
  margin:58px 0 0!important;
  padding:0!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  background:#fff!important;
}
.inner-hero>.container:has(>.hub-index)>.hub-index::before{
  content:"GUIDE INDEX"!important;
  display:block!important;
  margin:0!important;
  padding:0 0 12px!important;
  transform:translateY(-28px)!important;
  color:#8994a5!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
.inner-hero>.container:has(>.hub-index)>.hub-index>a{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-height:46px!important;
  margin:0!important;
  padding:11px 0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#344054!important;
  font-size:13px!important;
  font-weight:780!important;
  line-height:1.35!important;
  white-space:normal!important;
}
.inner-hero>.container:has(>.hub-index)>.hub-index>a:hover{
  color:var(--thai-indigo)!important;
  background:transparent!important;
}
.inner-hero>.container:has(>.hub-index)>.hub-index>a::after{display:none!important}
.inner-hero>.container:has(>.hub-index)>.hub-index>a>.hub-count{
  flex:0 0 auto!important;
  margin-left:auto!important;
  padding-left:8px!important;
  color:var(--thai-gold-deep)!important;
  font-size:11px!important;
  font-weight:900!important;
}
.inner-hero>.container:has(>.hub-index)>.section-title,
.inner-hero>.container:has(>.hub-index)>.card-grid,
.inner-hero>.container:has(>.hub-index)>.back-band{
  grid-column:2!important;
  min-width:0!important;
  width:100%!important;
  margin-left:0!important;
}
.inner-hero>.container:has(>.hub-index)>.section-title{
  margin-top:58px!important;
  margin-bottom:18px!important;
  padding:0!important;
  color:#101828!important;
  font-size:31px!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
}
.inner-hero>.container:has(>.hub-index)>.section-title::before,
.inner-hero>.container:has(>.hub-index)>.section-title::after{display:none!important}
.inner-hero>.container:has(>.hub-index)>.back-band{
  margin-top:4px!important;
  padding:24px 26px!important;
  border:1px solid var(--line)!important;
  border-left:4px solid var(--thai-gold)!important;
  background:#f7f9fc!important;
}

/* ========================================================================
   PHOTO CATALOGUE — works for both current flat DOM and future hub-main DOM
   ======================================================================== */
.hub-main>.card-grid,
.inner-hero>.container:has(>.hub-index)>.card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 2px!important;
  border:0!important;
}
.hub-main>.card-grid>.link-card,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{
  position:relative!important;
  display:flex!important;
  min-width:0!important;
  min-height:100%!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(23,38,64,.06)!important;
  clip-path:none!important;
  transform:none!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.hub-main>.card-grid>.link-card:hover,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:hover{
  padding:0!important;
  border-color:#b9c5d4!important;
  background:#fff!important;
  box-shadow:0 14px 28px rgba(23,38,64,.11)!important;
  transform:translateY(-3px)!important;
}
.hub-main>.card-grid>.link-card>.kori-card-thumb,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.kori-card-thumb{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  overflow:hidden!important;
  aspect-ratio:16/9!important;
  background:linear-gradient(135deg,#eef2f7,#dce4ee)!important;
}
.hub-main>.card-grid>.link-card>.kori-card-thumb img,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.kori-card-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .28s ease!important;
}
.hub-main>.card-grid>.link-card:hover>.kori-card-thumb img,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:hover>.kori-card-thumb img{transform:scale(1.035)!important}

/* Never let a newly published, not-yet-enriched article collapse the card row. */
.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{
  content:""!important;
  position:static!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  background:linear-gradient(135deg,#edf1f6 0%,#dce4ee 100%)!important;
  box-shadow:none!important;
}

.hub-main>.card-grid>.link-card .eyebrow,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .eyebrow{
  display:block!important;
  margin:15px 16px 0!important;
  color:var(--thai-gold-deep)!important;
  font-size:10px!important;
  line-height:1.4!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!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{
  display:block!important;
  margin:7px 16px 0!important;
  color:#101828!important;
  font-size:18px!important;
  line-height:1.36!important;
  letter-spacing:-.02em!important;
}
.hub-main>.card-grid>.link-card p,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card p{
  display:block!important;
  flex:1 1 auto!important;
  margin:9px 16px 42px!important;
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.58!important;
}
.hub-main>.card-grid>.link-card .arrow,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .arrow{
  position:absolute!important;
  right:14px!important;
  bottom:13px!important;
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  border:1px solid var(--thai-indigo)!important;
  border-radius:50%!important;
  color:transparent!important;
  font-size:0!important;
  white-space:nowrap!important;
}
.hub-main>.card-grid>.link-card .arrow::after,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .arrow::after{
  content:"→";
  color:var(--thai-indigo);
  font-size:13px;
  font-weight:900;
}
.hub-main>.card-grid>.link-card:hover .arrow,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:hover .arrow{
  border-color:var(--thai-gold)!important;
  background:var(--thai-gold)!important;
}
.hub-main>.card-grid>.link-card:hover .arrow::after,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:hover .arrow::after{color:var(--thai-indigo-deep)!important}

@media(max-width:1100px){
  .hub-main>.card-grid,
  .inner-hero>.container:has(>.hub-index)>.card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ========================================================================
   TABLET — critical breakpoint for the screenshot supplied by the user.
   The sidebar is removed from the grid and becomes a one-line scroll rail.
   ======================================================================== */
@media(max-width:980px){
  /* Current flat DOM */
  .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;
    width:100%!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:thin!important;
    margin:38px 0 28px!important;
    padding:0 0 10px!important;
    border:0!important;
    background:transparent!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;
    min-height:40px!important;
    padding:0 13px!important;
    border:1px solid var(--line)!important;
    border-radius:9px!important;
    background:#fff!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
  .inner-hero>.container:has(>.hub-index)>.hub-index>a:hover{
    border-color:var(--thai-gold)!important;
    background:var(--thai-gold-soft)!important;
  }
  .inner-hero>.container:has(>.hub-index)>.hub-index>a>.hub-count{
    margin-left:3px!important;
    padding-left:2px!important;
  }
  .inner-hero>.container:has(>.hub-index)>.section-title,
  .inner-hero>.container:has(>.hub-index)>.card-grid,
  .inner-hero>.container:has(>.hub-index)>.back-band{
    width:100%!important;
    margin-left:0!important;
  }
  .inner-hero>.container:has(>.hub-index)>.section-title{
    margin-top:48px!important;
    font-size:29px!important;
  }
  .inner-hero>.container:has(>.hub-index)>.hub-index+.section-title{margin-top:0!important}

  /* Future structural DOM: explicitly neutralise content.css flex-wrap:wrap. */
  .hub-layout .hub-index{
    flex-wrap:nowrap!important;
    overflow-y:hidden!important;
  }
}

@media(max-width:640px){
  .hub-main>.card-grid,
  .inner-hero>.container:has(>.hub-index)>.card-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
  }
  .hub-main>.card-grid>.link-card,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{
    display:grid!important;
    grid-template-columns:126px minmax(0,1fr)!important;
    grid-template-rows:auto auto 1fr!important;
    min-height:104px!important;
    border-radius:12px!important;
  }
  .hub-main>.card-grid>.link-card>.kori-card-thumb,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.kori-card-thumb{
    grid-column:1!important;
    grid-row:1 / 4!important;
    min-height:104px!important;
    aspect-ratio:auto!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{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:126px!important;
    min-height:104px!important;
    aspect-ratio:auto!important;
  }
  .hub-main>.card-grid>.link-card .eyebrow,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .eyebrow{
    grid-column:2!important;
    grid-row:1!important;
    margin:13px 38px 0 14px!important;
    font-size:9px!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{
    grid-column:2!important;
    grid-row:2!important;
    margin:4px 38px 13px 14px!important;
    font-size:17px!important;
    line-height:1.34!important;
    overflow-wrap:anywhere!important;
  }
  .hub-main>.card-grid>.link-card p,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card p{display:none!important}
  .hub-main>.card-grid>.link-card .arrow,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .arrow{
    right:10px!important;
    bottom:10px!important;
    width:27px!important;
    height:27px!important;
  }
  .inner-hero>.container:has(>.hub-index)>.section-title{font-size:25px!important}
}


/* Hub navigation v2 — category pages are decision indexes, not an undifferentiated
   wall of articles. Keep the local jump index obvious and give every card a
   clear content hierarchy on desktop and mobile. */
.inner-hero>.container:has(>.hub-index){column-gap:42px!important}
.inner-hero>.container:has(>.hub-index)>.hub-index{border-top:2px solid var(--thai-indigo)!important}
.inner-hero>.container:has(>.hub-index)>.hub-index::before{content:"JUMP TO A PLACE OR TASK"!important;color:var(--thai-indigo)!important}
.inner-hero>.container:has(>.hub-index)>.hub-index>a{position:relative!important;padding-right:10px!important}
.inner-hero>.container:has(>.hub-index)>.hub-index>a:hover{padding-left:8px!important;color:var(--thai-indigo-deep)!important}
.inner-hero>.container:has(>.hub-index)>.section-title{position:relative!important;margin-top:50px!important;padding-bottom:12px!important;border-bottom:1px solid var(--line)!important}
.inner-hero>.container:has(>.hub-index)>.section-title::after{display:block!important;content:""!important;position:absolute!important;left:0!important;bottom:-1px!important;width:68px!important;height:3px!important;background:var(--thai-gold)!important}
/* Every local cover is an intentional visual card; text-only records stay compact
   instead of fabricating a large empty thumbnail. */
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb))::before{display:none!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb)){min-height:206px!important;padding:18px!important;background:linear-gradient(145deg,#fff 0%,#f7f9fc 100%)!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb)) .eyebrow{margin:0!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb)) h2,
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb)) h3{margin:10px 0 0!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card:not(:has(>.link-card-thumb)) p{margin:10px 0 38px!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .link-card-thumb{display:block!important;flex:0 0 auto!important;width:100%!important;overflow:hidden!important;aspect-ratio:16/9!important;background:#edf1f6!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .link-card-thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
@media(max-width:980px){
  .inner-hero>.container:has(>.hub-index)>.hub-index{position:static!important;margin:30px 0 26px!important;border-top:0!important}
  .inner-hero>.container:has(>.hub-index)>.hub-index::before{display:none!important}
  .inner-hero>.container:has(>.hub-index)>.hub-index>a{min-height:44px!important;padding-inline:14px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:#fff!important}
  .inner-hero>.container:has(>.hub-index)>.hub-index>a:first-child{border-color:var(--thai-indigo)!important;background:var(--thai-indigo)!important;color:#fff!important}
}
@media(max-width:640px){
  .inner-hero>.container:has(>.hub-index)>.section-title{margin-top:34px!important;font-size:27px!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid{grid-template-columns:1fr!important;gap:12px!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{border-radius:12px!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card .eyebrow{margin:13px 15px 0!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card h2,
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card h3{margin:7px 15px 0!important;font-size:20px!important;line-height:1.25!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card p{margin:8px 15px 40px!important;font-size:14px!important;line-height:1.55!important}
}

/* The runtime adds a normalized cover to older cards. Hide the legacy cover
   only when that normalized cover exists; otherwise cards retain their own image. */
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]>.kori-card-thumb{display:none!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]>.link-card-thumb{display:block!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]>.link-card-thumb>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}

@media(max-width:640px){
  /* Category cards become a deliberate vertical reading unit on phones. */
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]{display:flex!important;flex-direction:column!important;align-items:stretch!important;height:auto!important;min-height:0!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]>.link-card-thumb{width:100%!important;height:auto!important;aspect-ratio:16/9!important}
  .inner-hero>.container:has(>.hub-index)>.card-grid>.link-card[data-auto-thumb="1"]>.link-card-thumb>img{width:100%!important;height:100%!important}
}

/* Hub-card layout contract: category cards must never inherit article-grid placement.
   Keep every image, label, heading, summary and CTA inside its own card. */
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-width:0!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>*{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.link-card-thumb{order:0!important;flex:none!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.eyebrow{order:1!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>h2,.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>h3{order:2!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>p{order:3!important}
.inner-hero>.container:has(>.hub-index)>.card-grid>.link-card>.arrow{order:4!important;margin-top:auto!important;align-self:flex-start!important}

/* Fallback for category hubs: do not depend on :has() for the card geometry.
   The jump index always precedes its card grids in the published hub markup.
   This keeps every thumbnail and text block inside its own card even when an
   older selector engine or an interrupted stylesheet cascade skips :has(). */
.inner-hero>.container>.hub-index~.card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 28px!important;
  border:0!important;
}
.inner-hero>.container>.hub-index~.card-grid>.link-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(23,38,64,.06)!important;
  clip-path:none!important;
  transform:none!important;
}
.inner-hero>.container>.hub-index~.card-grid>.link-card>*{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card[data-auto-thumb="1"]>.kori-card-thumb{display:none!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card>.link-card-thumb,
.inner-hero>.container>.hub-index~.card-grid>.link-card>.kori-card-thumb{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  overflow:hidden!important;
  aspect-ratio:16/9!important;
  background:#edf1f6!important;
}
.inner-hero>.container>.hub-index~.card-grid>.link-card>.link-card-thumb img,
.inner-hero>.container>.hub-index~.card-grid>.link-card>.kori-card-thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card .eyebrow{display:block!important;margin:15px 16px 0!important;color:var(--thai-gold-deep)!important;font-size:10px!important;line-height:1.4!important;letter-spacing:.06em!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card h2,
.inner-hero>.container>.hub-index~.card-grid>.link-card h3{display:block!important;margin:7px 16px 0!important;color:#101828!important;font-size:18px!important;line-height:1.36!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card p{display:block!important;flex:1 1 auto!important;margin:9px 16px 42px!important;color:var(--muted)!important;font-size:13px!important;line-height:1.58!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card .arrow{position:absolute!important;right:14px!important;bottom:13px!important;display:grid!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;border:1px solid var(--thai-indigo)!important;border-radius:50%!important;color:transparent!important;font-size:0!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card .arrow::after{content:"→";color:var(--thai-indigo);font-size:13px;font-weight:900}
.inner-hero>.container>.hub-index~.card-grid>.link-card:not(:has(>.link-card-thumb,>.kori-card-thumb)){min-height:190px!important;padding:18px!important;background:linear-gradient(145deg,#fff 0%,#f7f9fc 100%)!important}
.inner-hero>.container>.hub-index~.card-grid>.link-card:not(:has(>.link-card-thumb,>.kori-card-thumb)) .eyebrow{margin:0!important}

@media(max-width:1100px){.inner-hero>.container>.hub-index~.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){
  .inner-hero>.container>.hub-index~.card-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .inner-hero>.container>.hub-index~.card-grid>.link-card .eyebrow{margin:13px 15px 0!important}
  .inner-hero>.container>.hub-index~.card-grid>.link-card h2,
  .inner-hero>.container>.hub-index~.card-grid>.link-card h3{margin:7px 15px 0!important;font-size:20px!important;line-height:1.25!important}
  .inner-hero>.container>.hub-index~.card-grid>.link-card p{margin:8px 15px 40px!important;font-size:14px!important;line-height:1.55!important}
}

/* Destination hubs do not always have a jump index.  Without this explicit
   contract they inherit the compact list thumbnail from content.css: the image
   is only 150px wide while the card occupies a catalogue column. */
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  margin:0 0 34px!important;
  border:0!important;
}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:336px!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(23,38,64,.06)!important;
  content-visibility:auto;
  contain-intrinsic-size:336px;
}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>*{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb,
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#eef2f7,#dce4ee)!important;
}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb>img,
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
/* A labelled editorial tile is safer than a fabricated location photo when a
   published hub card has no licensed visual yet. It keeps the card grid aligned. */
.link-card-thumb--placeholder{display:grid!important;place-items:end start!important;padding:18px!important;background:linear-gradient(135deg,#152a49 0%,#315d7c 58%,#d39a31 170%)!important;color:#fff!important}
.link-card-thumb--placeholder>span{max-width:18ch!important;font-family:Georgia,serif!important;font-size:clamp(17px,2vw,25px)!important;font-weight:700!important;line-height:1.1!important;text-wrap:balance!important;text-shadow:0 1px 1px rgba(0,0,0,.2)!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.eyebrow{display:block!important;margin:15px 16px 0!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>h2,
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>h3{display:block!important;margin:7px 16px 0!important;font-size:20px!important;line-height:1.28!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>p{display:block!important;flex:1 1 auto!important;margin:9px 16px 48px!important;font-size:14px!important;line-height:1.55!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.arrow{position:absolute!important;right:14px!important;bottom:13px!important;display:grid!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;border:1px solid var(--thai-indigo)!important;border-radius:50%!important;color:transparent!important;font-size:0!important}
body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.arrow::after{content:"→";color:var(--thai-indigo);font-size:13px;font-weight:900}
@media(max-width:1100px){body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid{grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card{display:grid!important;grid-template-columns:126px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;min-height:104px!important;content-visibility:visible}
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb,
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb{grid-column:1!important;grid-row:1/4!important;min-height:104px!important;aspect-ratio:auto!important}
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>.eyebrow{grid-column:2!important;grid-row:1!important;margin:13px 38px 0 14px!important}
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>h2,
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>h3{grid-column:2!important;grid-row:2!important;margin:4px 38px 13px 14px!important;font-size:17px!important}
  body[data-primary-section="DESTINATIONS"] .inner-hero>.container>.card-grid>.link-card>p{display:none!important}
}

/* The all-guides landing page is also a catalogue, not the old compact-list
   component. Keep its visual hierarchy identical to destination hubs. */
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;width:100%!important;margin:0 0 34px!important;border:0!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;min-width:0!important;min-height:336px!important;overflow:hidden!important;padding:0!important;border:1px solid var(--line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 8px 22px rgba(23,38,64,.06)!important;content-visibility:auto;contain-intrinsic-size:336px}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>*{grid-column:auto!important;grid-row:auto!important;min-width:0!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb,
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb{display:block!important;flex:0 0 auto!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;overflow:hidden!important;background:linear-gradient(135deg,#eef2f7,#dce4ee)!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb>img,
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb>img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.eyebrow{display:block!important;margin:15px 16px 0!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>h2,
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>h3{display:block!important;margin:7px 16px 0!important;font-size:20px!important;line-height:1.28!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>p{display:block!important;flex:1 1 auto!important;margin:9px 16px 48px!important;font-size:14px!important;line-height:1.55!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.arrow{position:absolute!important;right:14px!important;bottom:13px!important;display:grid!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;border:1px solid var(--thai-indigo)!important;border-radius:50%!important;color:transparent!important;font-size:0!important}
body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.arrow::after{content:"→";color:var(--thai-indigo);font-size:13px;font-weight:900}
@media(max-width:1100px){body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid{grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card{display:grid!important;grid-template-columns:126px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;min-height:104px!important;content-visibility:visible}
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.link-card-thumb,
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.kori-card-thumb{grid-column:1!important;grid-row:1/4!important;min-height:104px!important;aspect-ratio:auto!important}
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>.eyebrow{grid-column:2!important;grid-row:1!important;margin:13px 38px 0 14px!important}
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>h2,
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>h3{grid-column:2!important;grid-row:2!important;margin:4px 38px 13px 14px!important;font-size:17px!important}
  body[data-primary-section="GUIDES"] .inner-hero>.container>.card-grid>.link-card>p{display:none!important}
}