/* Hero background photo (Bangkok skyline) — loaded only on pages with the
   `hero_skyline` front-matter flag. Was an inline <style> in base.njk where every
   rule needed !important; as a stylesheet loaded after style.css, source order
   already wins at equal specificity. */
.hero {
  position: relative;
  background: #0a1220;
}
/* The original ::before paints a solid gradient over the whole hero,
   hiding any background-image on .hero. Replace it with the photo. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 18, 32, 0.45) 0%, rgba(10, 18, 32, 0.65) 55%, rgba(10, 18, 32, 0.88) 100%),
    url('/assets/bkk-skyline-v3.webp') center 35% / cover no-repeat;
  z-index: 0;
}
@media (min-width: 769px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 18, 32, 0.45) 0%, rgba(10, 18, 32, 0.65) 55%, rgba(10, 18, 32, 0.88) 100%),
      url('/assets/bkk-skyline-v3.webp') center 35% / cover no-repeat;
  }
}
/* Mobile: a portrait crop (760x1900) sized to the tall mobile hero so cover
   no longer upscales a soft strip. Same overlay as desktop to keep the look
   identical. AVIF (v7, ~93KB) is served to browsers that support it; the
   WebP v3 declaration below is the fallback for older browsers (iOS < 16).
   Versioned filenames cache-bust the 30-day image cache (see _headers). */
@media (max-width: 768px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 18, 32, 0.45) 0%, rgba(10, 18, 32, 0.65) 55%, rgba(10, 18, 32, 0.88) 100%),
      url('/assets/bkk-skyline-mobile-v3.webp') center / cover no-repeat;
  }
  @supports (background-image: image-set(url("i.avif") type("image/avif"))) {
    .hero::before {
      background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.45) 0%, rgba(10, 18, 32, 0.65) 55%, rgba(10, 18, 32, 0.88) 100%),
        image-set(url('/assets/bkk-skyline-mobile-v7.avif') type('image/avif')) center / cover no-repeat;
    }
  }
}
/* Hide the original star/particle decoration so it doesn't fight the photo */
.hero .hero__stars { display: none; }
/* Make sure content sits above the background layer */
.hero .hero__inner { position: relative; z-index: 1; }
/* Lift text contrast a touch over the photo */
.hero h1,
.hero .hero__lead,
.hero .hero__meta,
.hero .hero__metric strong,
.hero .hero__metric span {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
/* Numerals stay in the heading serif (Cormorant Garamond); lining figures
   are applied globally in style.css via font-variant-numeric on body.
   .num is kept as an explicit hook in case we want extra emphasis later. */
.num {
  font-family: inherit;
}
/* Match the hero lead paragraph: first metric flush-left, last flush-right,
   middle centered between — labels wrap like the original layout */
.hero .hero__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: var(--s-5);
  max-width: 700px;
  margin-left: 0;
  margin-right: 0;
}
.hero .hero__metric {
  flex: 0 0 148px;
}
@media (max-width: 560px) {
  .hero .hero__metrics {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-5) var(--s-4);
  }
  .hero .hero__metric {
    flex: 1 1 40%;
    min-width: 0;
  }
}
/* On narrow screens, drop the hard line break inside the H1 so the heading
   flows as one sentence and wraps naturally to 2 lines instead of 3. */
@media (max-width: 700px) {
  .hero h1 br { display: none; }
  /* Tighten the hero's outer gaps to match its internal rhythm:
     top padding (128px) -> 64px = the button->divider gap (--s-8);
     bottom padding (96px) -> 32px = the divider->metrics gap (--s-6). */
  .hero {
    padding-top: var(--s-8);
    padding-bottom: var(--s-6);
  }
}