/* ------------------------------------------------------------------
   Hero banner (index.html)

   The site header is position:fixed, so the banner is offset by the
   header's measured height. The old <br><br> spacer gave 51px against a
   71px header, which both left a white gap and let the header clip the
   top of the banner.

   Height follows the banner image's own 2067x761 ratio so
   background-size:cover has nothing to crop on desktop. The previous
   min-height:100vh squeezed a 2.72:1 image into a 1.58:1 box, zooming it
   ~18% and discarding roughly 1000px of its width.
   ------------------------------------------------------------------ */

:root{
  /* Fallback only. header-offset.js measures the real header and overwrites
     this, because the navbar re-flows to 71 / 61 / 63 / 65px across
     breakpoints. */
  --header-h: 71px;
  --banner-ratio: 2067 / 761;
}

/* padding, not margin: a margin here collapses straight through the unstyled
   .main-wrapper into <body>, shifting the body (and with it the fixed header's
   static position) down instead of clearing the header — which left a white
   band above the header and hid the banner's top edge behind it. */
.main-slider{
  padding-top: var(--header-h);
}

.main-slider .item{
  position: relative;            /* anchor .overlay:before to the banner itself */
  display: flex;
  align-items: center;
  /* width:100% pins the inline axis so aspect-ratio can only ever drive the
     height. Without it, once min-height wins the ratio resolves the *width*
     instead (480px x 2.72 = 1306px), overflowing the viewport between roughly
     768px and 1300px and letting .main-slider's overflow:hidden clip the
     banner's right-hand side. */
  width: 100%;
  aspect-ratio: var(--banner-ratio);
  min-height: 30rem;             /* keeps room for the copy on narrower desktops */
  max-height: calc(100svh - var(--header-h));
  padding-block: 3rem;
}

/* slide-01.webp is the 2067x761 photo with 300px of wall/table added on its
   left (source: tools/source-images/slide-01.png). The box keeps the photo's
   own ratio, so `cover` always has that extra strip to spare; anchoring left
   spends it on the left and pushes the laptop clear of the heading at every
   desktop width, at the cost of empty table on the right. */
@media (min-width: 768px){
  .main-slider .item{ background-position: left center; }
}

/* .overlay:before is absolutely positioned, so in-flow content would paint
   underneath the dark wash without an explicit stacking context. */
.main-slider .item > .container{
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Portrait viewports: the 2.72:1 ratio would collapse into a thin strip,
   so let min-height drive and keep the image centred. */
@media (max-width: 767.98px){
  .main-slider .item{
    aspect-ratio: auto;
    min-height: min(32rem, calc(100svh - var(--header-h)));
  }
}