/* SaigonWalks v28 — object sizing, media geometry and grid consistency audit */
:root{
  --sw-card-media-ratio:4/3;
  --sw-editorial-media-ratio:4/3;
  --sw-portrait-media-ratio:3/4;
  --sw-media-gap:22px;
}

body.sw-premium-v28 figure{margin:0}
body.sw-premium-v28 img{display:block}

/* --------------------------------------------------------------------------
   1. IMAGE-CARD SYSTEM
   Media touches the card edge; text receives the padding, never the image.
   -------------------------------------------------------------------------- */
body.sw-premium-v28 .media-card,
body.sw-premium-v28.saigon-stories-page .cluster-item,
body.sw-premium-v28.saigon-stories-page .department-card{
  padding:0!important;
  min-width:0;
  height:100%!important;
}
body.sw-premium-v28 .media-card{
  display:flex!important;
  flex-direction:column!important;
}
body.sw-premium-v28 .media-card>a:first-child,
body.sw-premium-v28.saigon-stories-page .cluster-item>a:first-child,
body.sw-premium-v28.saigon-stories-page .department-card>a:first-child{
  display:block;
  width:100%;
  flex:0 0 auto;
}
body.sw-premium-v28 .sw-thumb-crop,
body.sw-premium-v28 .story-thumb-crop{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--sw-card-media-ratio)!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  flex:none!important;
  background:#ddd3c6;
}
body.sw-premium-v28 .sw-thumb-crop img,
body.sw-premium-v28 .story-thumb-crop img,
body.sw-premium-v28 .media-card .sw-thumb-crop img,
body.sw-premium-v28.saigon-stories-page .cluster-item .story-thumb-crop img,
body.sw-premium-v28.saigon-stories-page .department-card .story-thumb-crop img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center;
  margin:0!important;
  padding:0!important;
}
body.sw-premium-v28 .media-card .card-body{
  padding:24px 24px 26px!important;
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  gap:12px!important;
}
body.sw-premium-v28 .media-card .card-body .tag,
body.sw-premium-v28 .media-card .card-body h3,
body.sw-premium-v28 .media-card .card-body p{margin-top:0}
body.sw-premium-v28 .media-card .card-body .button{margin-top:auto!important;align-self:flex-start}

/* Story cards have their own text wrapper. */
body.sw-premium-v28.saigon-stories-page .cluster-item>div{
  padding:22px 22px 24px!important;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
body.sw-premium-v28.saigon-stories-page .cluster-item>div p{margin-top:12px!important}

/* Department cards have no body wrapper, so pad their textual children directly. */
body.sw-premium-v28.saigon-stories-page .department-card>.ed-label{
  margin:22px 22px 0!important;
}
body.sw-premium-v28.saigon-stories-page .department-card>h3{
  margin:8px 22px 10px!important;
}
body.sw-premium-v28.saigon-stories-page .department-card>p{
  margin:0 22px 24px!important;
}

/* --------------------------------------------------------------------------
   2. GRID GEOMETRY
   -------------------------------------------------------------------------- */
body.sw-premium-v28.tours-page .card-grid,
body.sw-premium-v28.things-to-do-page .card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
}
body.sw-premium-v28.tours-page .card-grid>.card,
body.sw-premium-v28.things-to-do-page .card-grid>.card{height:100%}
body.sw-premium-v28.tours-page .card-grid,
body.sw-premium-v28.things-to-do-page .card-grid{grid-auto-rows:1fr}

/* Two editorial gateways should occupy the whole line, not two cells of a four-column archive. */
body.sw-premium-v28.saigon-stories-page .cluster-list--featured{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  margin-top:28px!important;
}
body.sw-premium-v28.saigon-stories-page .cluster-list--archive{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr;
  gap:22px!important;
  margin-top:24px!important;
}
body.sw-premium-v28.saigon-stories-page .departments{grid-auto-rows:1fr!important;align-items:stretch!important}

body.sw-premium-v28.saigon-stories-page .cluster-list--featured .story-thumb-crop{
  aspect-ratio:16/9!important;
}
body.sw-premium-v28.saigon-stories-page .cluster-list--featured .cluster-item h3{
  font-size:clamp(1.45rem,2vw,2rem)!important;
}
body.sw-premium-v28.saigon-stories-page .cluster-list--archive .cluster-item{
  display:flex!important;
}

/* --------------------------------------------------------------------------
   3. EDITORIAL / HOMEPAGE MEDIA
   Do not force a true portrait photograph into a landscape crop.
   -------------------------------------------------------------------------- */
body.sw-premium-v28 .ed-media{
  width:100%;
  min-width:0;
}
body.sw-premium-v28 .ed-media img,
body.sw-premium-v28 .ed-media.small img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:var(--sw-editorial-media-ratio)!important;
  object-fit:cover!important;
  object-position:center center;
}
body.sw-premium-v28 .ed-media.portrait{
  width:min(100%,420px);
  justify-self:center;
}
body.sw-premium-v28 .ed-media.portrait img,
body.sw-premium-v28 .ed-media.small.portrait img{
  aspect-ratio:var(--sw-portrait-media-ratio)!important;
  object-fit:cover!important;
}
body.sw-premium-v28 .ed-media figcaption{
  min-height:2.9em;
  padding-top:10px;
}

/* Feature split cards: image and copy stretch to the same card height. */
body.sw-premium-v28 .route-lead,
body.sw-premium-v28 .story-lead-tile,
body.sw-premium-v28 .issue-cover{
  align-items:stretch!important;
}
body.sw-premium-v28 .route-lead>a:first-child,
body.sw-premium-v28 .story-lead-tile>a:first-child,
body.sw-premium-v28 .issue-cover>a:first-child{
  display:block;
  height:100%;
  min-height:420px;
  overflow:hidden;
}
body.sw-premium-v28 .route-lead>a:first-child>img,
body.sw-premium-v28 .story-lead-tile>a:first-child>img,
body.sw-premium-v28 .issue-cover>a:first-child>img,
body.sw-premium-v28 .issue-cover>a:first-child>.story-thumb-crop{
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  margin:0!important;
}

/* Compact homepage/story rows. */
body.sw-premium-v28 .story-row,
body.sw-premium-v28 .cluster-item{min-width:0}
body.sw-premium-v28 .story-row>a:first-child{
  display:block;
  width:140px;
  aspect-ratio:4/3;
  overflow:hidden;
}
body.sw-premium-v28 .story-row>a:first-child>img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  margin:0!important;
}

/* --------------------------------------------------------------------------
   4. TOUR IMAGE STRIPS AND GALLERIES
   Every object in one row shares the same geometry.
   -------------------------------------------------------------------------- */
body.sw-premium-v28 .route-visual-strip .wrap{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:start!important;
}
body.sw-premium-v28 .route-visual-strip figure{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
}
body.sw-premium-v28 .route-visual-strip img,
body.sw-premium-v28 .route-visual-strip figure:first-child img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center center;
  margin:0!important;
}
body.sw-premium-v28 .route-visual-strip figcaption{
  flex:1 1 auto;
  min-height:4.5em;
  padding-top:12px;
}
/* All three photographs in Tales of Cho Lon are true portraits; preserve that composition. */
body.sw-premium-v28.tales-of-cho-lon-page .route-visual-strip img,
body.sw-premium-v28.tales-of-cho-lon-page .route-visual-strip figure:first-child img{
  aspect-ratio:3/4!important;
}

body.sw-premium-v28 .gallery-strip{
  align-items:stretch!important;
  gap:18px!important;
}
body.sw-premium-v28 .gallery-strip img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  margin:0!important;
}
body.sw-premium-v28 .story-note-gallery,
body.sw-premium-v28 .gallery{
  align-items:start;
}
body.sw-premium-v28 .story-note-gallery figure,
body.sw-premium-v28 .gallery figure{height:100%}
body.sw-premium-v28 .story-note-gallery img,
body.sw-premium-v28 .gallery img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  margin:0!important;
}
body.sw-premium-v28 .article-figure img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/10!important;
  object-fit:cover!important;
}
body.sw-premium-v28 .article-more.article-route-strip a{
  grid-template-rows:auto 1fr!important;
}
body.sw-premium-v28 .article-more.article-route-strip img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  margin:0!important;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE BEHAVIOUR
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  body.sw-premium-v28.tours-page .card-grid,
  body.sw-premium-v28.things-to-do-page .card-grid,
  body.sw-premium-v28.saigon-stories-page .cluster-list--archive{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:820px){
  body.sw-premium-v28 .route-visual-strip .wrap{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.sw-premium-v28 .route-visual-strip figure:first-child{
    grid-column:auto!important;
  }
  body.sw-premium-v28 .route-lead>a:first-child,
  body.sw-premium-v28 .story-lead-tile>a:first-child,
  body.sw-premium-v28 .issue-cover>a:first-child,
  body.sw-premium-v28 .route-lead>a:first-child>img,
  body.sw-premium-v28 .story-lead-tile>a:first-child>img,
  body.sw-premium-v28 .issue-cover>a:first-child>img,
  body.sw-premium-v28 .issue-cover>a:first-child>.story-thumb-crop{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
  }
}
@media(max-width:700px){
  body.sw-premium-v28.tours-page .card-grid,
  body.sw-premium-v28.things-to-do-page .card-grid,
  body.sw-premium-v28.saigon-stories-page .cluster-list--featured,
  body.sw-premium-v28.saigon-stories-page .cluster-list--archive,
  body.sw-premium-v28 .route-visual-strip .wrap{
    grid-template-columns:1fr!important;
  }
  body.sw-premium-v28 .media-card .card-body{padding:21px 21px 23px!important}
  body.sw-premium-v28 .story-row{
    grid-template-columns:112px minmax(0,1fr)!important;
  }
  body.sw-premium-v28 .story-row>a:first-child{width:112px}
  body.sw-premium-v28 .ed-media.portrait{width:min(88vw,410px)}
  body.sw-premium-v28 .route-visual-strip figcaption,
  body.sw-premium-v28 .ed-media figcaption{min-height:0}
}