/* Mila Stays v156 — OPEN ARTICLES ONLY
   FINAL AUTHORITATIVE ARTICLE IMAGE STANDARD.
   Do not use on Selected by Mila cards or any other site section.
   Earlier legacy article CSS may still provide layout/typography, but image geometry is fixed here. */

/* ---------- Article hero layout: keep approved title/grid behaviour ---------- */
@media (min-width:981px){
  body.article-page .article-hero-grid{
    grid-template-columns:minmax(0,1fr) 360px!important;
    column-gap:52px!important;
    row-gap:24px!important;
    align-items:center!important;
  }

  body.article-page .article-hero h1{
    font-size:48px!important;
    line-height:1.04!important;
    letter-spacing:-.01em!important;
    margin-bottom:16px!important;
    max-width:760px!important;
  }
}

@media (min-width:621px) and (max-width:980px){
  body.article-page .article-hero h1{
    font-size:42px!important;
    line-height:1.05!important;
  }
}

@media (max-width:620px){
  body.article-page .article-hero h1{
    font-size:36px!important;
    line-height:1.06!important;
  }
}

/* ---------- ONE image contract for every open article ----------
   Hero: landscape 320px, portrait 260px, square 280px.
   Inline: landscape 400px, portrait 330px, square 340px.
   Original proportions are always preserved; no crop, no stretch. */
body.article-page figure.article-hero-media,
body.article-page figure.article-inline-media,
body.article-page figure.article-inline-media.article-inline-media-bean{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:visible!important;
  background:transparent!important;
  text-align:center!important;
}

body.article-page figure.article-hero-media img,
body.article-page figure.article-inline-media img,
body.article-page figure.article-inline-media.article-inline-media-bean img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:18px!important;
  transform:none!important;
}

/* First image beside the article title — desktop. */
@media (min-width:981px){
  body.article-page figure.article-hero-media.article-orientation-landscape,
  body.article-page figure.article-hero-media.article-orientation-panorama{
    width:320px!important;
    max-width:320px!important;
    justify-self:end!important;
  }
  body.article-page figure.article-hero-media.article-orientation-portrait{
    width:260px!important;
    max-width:260px!important;
    justify-self:end!important;
  }
  body.article-page figure.article-hero-media.article-orientation-square{
    width:280px!important;
    max-width:280px!important;
    justify-self:end!important;
  }

  body.article-page figure.article-inline-media.article-orientation-landscape,
  body.article-page figure.article-inline-media.article-orientation-panorama{
    width:400px!important;
    max-width:400px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-portrait{
    width:330px!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square{
    width:340px!important;
    max-width:340px!important;
  }
  /* Legacy compact classes follow the same final orientation standard. */
  body.article-page figure.article-inline-media.article-orientation-portrait.article-size-portrait-compact{
    width:330px!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square.article-size-square-compact{
    width:340px!important;
    max-width:340px!important;
  }
}

/* Tablet — same maximum sizes, responsive to the available column. */
@media (min-width:621px) and (max-width:980px){
  body.article-page .article-hero-grid{
    grid-template-columns:1fr!important;
    row-gap:30px!important;
  }
  body.article-page figure.article-hero-media{justify-self:center!important;}
  body.article-page figure.article-hero-media.article-orientation-landscape,
  body.article-page figure.article-hero-media.article-orientation-panorama{
    width:min(78vw,320px)!important;
    max-width:320px!important;
  }
  body.article-page figure.article-hero-media.article-orientation-portrait{
    width:min(66vw,260px)!important;
    max-width:260px!important;
  }
  body.article-page figure.article-hero-media.article-orientation-square{
    width:min(70vw,280px)!important;
    max-width:280px!important;
  }

  body.article-page figure.article-inline-media.article-orientation-landscape,
  body.article-page figure.article-inline-media.article-orientation-panorama{
    width:min(82vw,400px)!important;
    max-width:400px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-portrait{
    width:min(70vw,330px)!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square{
    width:min(76vw,340px)!important;
    max-width:340px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-portrait.article-size-portrait-compact{
    width:min(70vw,330px)!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square.article-size-square-compact{
    width:min(76vw,340px)!important;
    max-width:340px!important;
  }
}

/* Mobile — compact reading rhythm, with the same locked maxima. */
@media (max-width:620px){
  body.article-page .article-hero-grid{
    grid-template-columns:1fr!important;
    row-gap:24px!important;
  }
  body.article-page figure.article-hero-media{justify-self:center!important;}
  body.article-page figure.article-hero-media.article-orientation-landscape,
  body.article-page figure.article-hero-media.article-orientation-panorama{
    width:min(84vw,320px)!important;
    max-width:320px!important;
  }
  body.article-page figure.article-hero-media.article-orientation-portrait{
    width:min(76vw,260px)!important;
    max-width:260px!important;
  }
  body.article-page figure.article-hero-media.article-orientation-square{
    width:min(80vw,280px)!important;
    max-width:280px!important;
  }

  body.article-page figure.article-inline-media.article-orientation-landscape,
  body.article-page figure.article-inline-media.article-orientation-panorama{
    width:min(88%,400px)!important;
    max-width:400px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-portrait{
    width:min(82%,330px)!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square{
    width:min(84%,340px)!important;
    max-width:340px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-portrait.article-size-portrait-compact{
    width:min(82%,330px)!important;
    max-width:330px!important;
  }
  body.article-page figure.article-inline-media.article-orientation-square.article-size-square-compact{
    width:min(84%,340px)!important;
    max-width:340px!important;
  }
}

/* Special locked exception — “Why a holiday apartment needs its own signature”.
   Only this open article keeps the white background + 82% seal scale. */
body.article-page.article-signature-special figure.article-hero-media{
  background:#fff!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
body.article-page.article-signature-special figure.article-hero-media img{
  background:#fff!important;
  object-fit:contain!important;
  transform:scale(.82)!important;
  transform-origin:center center!important;
}

/* ---------- Reading rhythm: slightly tighter, easier to scan ---------- */
body.article-page .article-content,
body.article-page .article-editorial-copy{
  line-height:1.58!important;
}

body.article-page .article-content p,
body.article-page .article-editorial-copy p{
  line-height:1.58!important;
  margin-bottom:14px!important;
}

body.article-page .article-content h2,
body.article-page .article-editorial-copy h2{
  margin-top:30px!important;
  margin-bottom:14px!important;
}

body.article-page .article-editorial-row{
  margin-top:32px!important;
  margin-bottom:36px!important;
}

body.article-page .article-editorial-media-stack{
  margin-top:20px!important;
  margin-bottom:22px!important;
  gap:18px!important;
}