/* ==========================================================================
   LORQEN — VANTAGE (Draft 13)
   Imagery: the slot map
   --------------------------------------------------------------------------
   THE WHOLE PHOTOGRAPHY LAYER OF THE THEME IS THIS ONE FILE, and it is the
   only file in the theme a non-developer should ever need to open.

   The page templates are shared by every theme and cannot carry a filename,
   so nothing here is markup. Each plate already announces what it is in its
   own `aria-label` — "Standard Sedan", "Barossa Valley", "Airport Transfers"
   — and every hero sits on a body carrying `data-page`. Those two facts are
   the entire addressing scheme: a slot is selected by what it SAYS it is,
   never by its position, so re-ordering a page or adding a service cannot
   break the mapping, and an unmapped slot falls back to the drawn plate
   rather than to a broken image.

   TO CHANGE A PICTURE: the slot map itself has moved to images-map.php,
   right next to this file. Drop the new file into `public/img/` and edit
   one line there -- nothing else. images-map.php builds every url() through
   img_asset(), which appends `?v=<the file's own last-modified time>`
   automatically, so there is no version number to bump by hand and no way
   to forget it: the moment the new file lands on disk, every visitor gets
   it on their very next page load. This file (images.css) still carries
   the scrims, sizing and positioning -- only the per-photo url()s live in
   images-map.php now. The home hero is fixed to hero-home.jpg only (no
   rotation) -- see the note in layout.php.

   DRAFT 13 SPECIFICS. Vantage is the theme at speed: its plates already
   travel at four-fifths of page speed inside over-scaled frames, and its
   grounds change luminance continuously as they cross the screen. Two
   consequences for the photography.

   FIRST, THE PARALLAX IS WHY THE SCRIM MATTERS MORE HERE THAN ANYWHERE ELSE.
   A plate that moves inside its frame passes different parts of the picture
   under the same piece of type, so a scrim that only works for one position
   is not a scrim. This one is deliberately even through the middle and
   weighted at both ends, which is the shape that survives travel.

   SECOND, THE PAGE HEROES HAD NO GROUND OF THEIR OWN. Vantage's markup ships
   .page-hero__bg but signature.css only ever styled .hero__bg — the element
   was in the document doing nothing. It is styled here, because it is the
   element the photograph belongs in.

   FILE SIZES. Heroes are exported at 2400px wide, everything else at 1600px,
   both progressive JPEG.
   ========================================================================== */

:root {
  --plate-scrim:
    linear-gradient(180deg,
      rgba(5, 4, 2, 0.34) 0%,
      rgba(5, 4, 2, 0.08) 34%,
      rgba(5, 4, 2, 0.08) 62%,
      rgba(5, 4, 2, 0.44) 100%);
}

/* ==========================================================================
   1. THE PLATE
   The photograph is added to the near-black ground signature.css draws, so
   an unmapped plate keeps exactly the black panel it has always had.
   ========================================================================== */

.media,
.gallery__cell {
  background:
    var(--plate-scrim),
    var(--plate-img, none),
    linear-gradient(150deg, var(--green-2) 0%, var(--green-3) 58%, var(--green-4) 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

.surface-ivory :is(.media, .gallery__cell) {
  background:
    var(--plate-scrim),
    var(--plate-img, none),
    linear-gradient(150deg, var(--pewter-2) 0%, var(--pewter-3) 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   2. THE HOME HERO
   --------------------------------------------------------------------------
   THIS FILE LOADS LAST (see theme.json: … signature.css, fx.css, images.css),
   so ANY rule here beats the same selector in signature.css. Every scrim that
   sits on a photograph therefore has to be written HERE — a "softened hero
   scrim" written in signature.css is silently ignored, which is exactly what
   happened on 2026-09-13 before this note existed.

   THE SCRIM IS A GRADIENT ACROSS THE SECTION, NOT A PANEL BEHIND THE TEXT.
   It used to be three stacked layers on this element — a vertical wash to
   0.9, a 96deg wash starting at 0.92, and a radial — which between them took
   the client's own photograph from mean 121 to mean 56 in the seat area: the
   cream leather rendered grey, and the client said so. The left-to-right
   gradient now lives on `.hero::before` (signature.css), full-bleed, black at
   the left edge and gone by three-quarters across. What is left here is only
   what the picture itself needs: a light top and foot wash so the header and
   the trust list stay clean.

   POSITION IS TOP-ANCHORED. At 1920px the hero box is ~216px shorter than the
   picture; taking that out of the middle (the old `center 42%`) cut the
   passenger's head off. 12% keeps the roof line and the head, and loses the
   footwell instead.
   ========================================================================== */

/* THE FOOT WASH, RESTORED 2026-09-19. The note above says this gradient is
   "a light top and foot wash so the header and the trust list stay clean",
   but both of its bottom stops had been left at 0.00 — so there was no foot
   wash at all, and the trust list ("Licensed & accredited chauffeurs" and
   its two neighbours) was reading straight off the photograph.

   It is the third item that suffers most, and the reason is worth writing
   down: the hero copy's ground is .hero__inner::before, which is a LEFT to
   RIGHT gradient that has faded to nothing by 88% across. The trust list is
   the one block in the hero that spans the full width — three equal columns
   above 860px — so its third column sits exactly where that scrim has run
   out. A vertical wash at the foot is what covers it.

   The middle stays at zero on purpose. The client's complaint that made
   these gradients light in the first place was about the seat area going
   grey, and the seat is mid-frame; darkening only from 58% down leaves the
   picture where they approved it. */
body[data-page="home"] .hero__bg {
  background:
    linear-gradient(180deg,
      rgba(5, 4, 2, 0.30) 0%,
      rgba(5, 4, 2, 0.00) 26%,
      rgba(5, 4, 2, 0.00) 58%,
      rgba(5, 4, 2, 0.30) 82%,
      rgba(5, 4, 2, 0.46) 100%),
    var(--hero-home-img, url("../../../../img/hero-home.jpg?v=0.0.5"));
  background-size: cover, cover;
  background-position: center, var(--art-pos, center 4%);
  background-repeat: no-repeat;
}

/* One of a small rotating set, chosen at random by an inline script in
   <head> (see layout.php) before first paint, so there is no flash of the
   fallback image. The custom property above defaults to the original photo
   for no-JS visitors and for every other theme, which never sets it. */

/* ==========================================================================
   3. THE PAGE HEROES
   The element existed in the markup and was never styled. It is given the
   band's own ground so an unmapped page looks exactly as it did before, and
   the photograph is one variable away.
   ========================================================================== */

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Light. The left-to-right scrim that makes the copy readable is on
     `.page-hero::before`; doubling it here is what turned these frames grey. */
  background:
    linear-gradient(180deg,
      rgba(16, 13, 9, 0.38) 0%,
      rgba(16, 13, 9, 0.06) 34%,
      rgba(16, 13, 9, 0.00) 68%,
      rgba(16, 13, 9, 0.00) 100%),
    var(--page-hero-img, linear-gradient(0deg, transparent, transparent));
  background-size: cover, cover;
  background-position: center, var(--art-pos, center 26%);
  background-repeat: no-repeat;
}

/* The wine page keeps its oxblood ground under the photograph. */
body[data-page="wine-tours"] .page-hero--wine .page-hero__bg {
  background:
    linear-gradient(180deg,
      rgba(74, 20, 29, 0.52) 0%,
      rgba(74, 20, 29, 0.14) 38%,
      rgba(58, 16, 23, 0.00) 70%,
      rgba(38, 10, 15, 0.00) 100%),
    var(--page-hero-img, linear-gradient(0deg, transparent, transparent));
  background-size: cover, cover;
  background-position: center, var(--art-pos, center 30%);
  background-repeat: no-repeat;
}

/* Per-page --page-hero-img values now live in images-map.php (auto-versioned). */

/* ==========================================================================
   4. THE PLATES
   ========================================================================== */

/* The full per-plate list (services, fleet, wine regions, narrative scenes) now lives in images-map.php, auto-versioned. */

/* ==========================================================================
   5. WHAT CHANGES ONCE THERE IS A PHOTOGRAPH
   Vantage sets its art-direction note on a solid chip in the middle of the
   plate, which is the right thing for an empty frame and the wrong thing
   over a picture.
   ========================================================================== */

.media[aria-label] .media__hint { display: none; }

/* ==========================================================================
   6. THE PHONE
   --------------------------------------------------------------------------
   Every scrim in this file was drawn for a wide viewport, where the type
   sits in the LEFT THIRD of the hero and the photograph is free to show
   itself in the remaining two. The 96deg wash exists for exactly that: it
   darkens the side the words are on and lets go of the other.

   On a phone there is no other side. The text column is the full width, so
   the horizontal wash applies its darkest value under the whole picture and
   stacks with the vertical one — measured at roughly 0.79 combined opacity
   over the headline, which is why the hero photograph read as a grey field
   rather than a car. Mobile gets a single vertical scrim instead: dark
   enough at the top for the header and at the foot for the trust list,
   released through the middle where the photograph has to do its work.

   The values here are the floor, not a preference: ivory #F6F2E9 over the
   lightest pixel of these photographs at 0.46 black still measures above
   7:1, which is AAA for the display sizes and AA for the lead.
   ========================================================================== */

@media (max-width: 767px) {
  /* Plates: the parallax travel is already cut to 1.1 scale on mobile
     (signature.css), so the scrim no longer has to cover as much drift. */
  :root {
    --plate-scrim:
      linear-gradient(180deg,
        rgba(5, 4, 2, 0.26) 0%,
        rgba(5, 4, 2, 0.04) 32%,
        rgba(5, 4, 2, 0.06) 64%,
        rgba(5, 4, 2, 0.38) 100%);
  }

  /* Lighter than the desktop foot: on a phone body[data-page="home"]
     .hero::before already carries a vertical black that reaches the floor
     (signature.css, the max-width: 900px block), so this only has to top it
     up rather than do the job alone. */
  body[data-page="home"] .hero__bg {
    background:
      linear-gradient(180deg,
        rgba(5, 4, 2, 0.34) 0%,
        rgba(5, 4, 2, 0.06) 30%,
        rgba(5, 4, 2, 0.04) 62%,
        rgba(5, 4, 2, 0.18) 84%,
        rgba(5, 4, 2, 0.30) 100%),
      var(--hero-home-img, url("../../../../img/hero-home.jpg?v=0.0.5"));
    background-size: cover, cover;
    background-position: center, var(--art-pos-sm, var(--art-pos, center 10%));
    background-repeat: no-repeat;
  }


  .page-hero__bg {
    background:
      linear-gradient(180deg,
        rgba(16, 13, 9, 0.42) 0%,
        rgba(16, 13, 9, 0.10) 34%,
        rgba(16, 13, 9, 0.00) 66%,
        rgba(16, 13, 9, 0.00) 100%),
      var(--page-hero-img, linear-gradient(0deg, transparent, transparent));
    background-size: cover, cover;
    background-position: center, var(--art-pos-sm, var(--art-pos, center 22%));
    background-repeat: no-repeat;
  }


  body[data-page="wine-tours"] .page-hero--wine .page-hero__bg {
    background:
      linear-gradient(180deg,
        rgba(74, 20, 29, 0.56) 0%,
        rgba(74, 20, 29, 0.18) 38%,
        rgba(58, 16, 23, 0.00) 68%,
        rgba(38, 10, 15, 0.00) 100%),
      var(--page-hero-img, linear-gradient(0deg, transparent, transparent));
    background-size: cover, cover;
    background-position: center, var(--art-pos-sm, var(--art-pos, center 24%));
    background-repeat: no-repeat;
  }


  /* A phone screen is held at a third of the viewing distance of a laptop
     and is usually the brighter display, so the same file reads flatter on
     it. One notch of contrast and saturation, applied to the photograph's
     own layer only — never to a layer carrying type. */
  .media,
  .gallery__cell,
  .hero__bg,
  .page-hero__bg { filter: saturate(1.06) contrast(1.05); }
}

/* ==========================================================================
   7. HERO ART DIRECTION — OCTOBER 2026 PHOTOGRAPHY
   --------------------------------------------------------------------------
   The hero slides come from the database (Admin -> Pages -> Hero), and the
   slider and layout.php label each one with `data-art`: the photograph's own
   file name, without folder or extension. Everything below that is specific
   to one picture is keyed on that name, so the direction belongs to the
   PICTURE and not to its place in the list. Re-order the slides, or replace
   one with an upload from Admin, and nothing here follows the wrong image;
   the replacement simply has no entry and renders plain.

   FLIP AND CROP ARE CSS, NEVER PIXELS. The files are the client's, only
   resized: no mirroring, no cropping in an editor. A flip is the individual
   `scale: -1 1` property (not `transform`, which the drift animation owns on
   the same element), with the origin moved to the centre of the frame so the
   mirror does not shift the picture sideways. The focal point is
   `background-position`, which is `object-position` for a background.

   TWO PLACES EVERY PICTURE IS PAINTED. Slide one is painted by the layout's
   own <style> onto .hero__bg / .page-hero__bg before any script runs, and
   then handed to a slider layer. Both are given the same direction (the
   body[data-hero-first] rules and the .hero-slides__layer[data-art] rules),
   so the hand-over is invisible. `--art-pos-sm` is a phone-only focal point
   where the brief's position loses the subject on a tall, narrow crop.

   Positions without an entry in the brief are `center top`, the theme's own
   default for a hero.
   ========================================================================== */

/* A layer must not inherit the first slide's direction through <body>. */
.hero-slides__layer {
  --art-pos: center top;
  --art-pos-sm: initial;
  --art-dim: 0;
}
.hero-slides__layer :is(.hero-slides__img, .hero-slides__still) {
  background-position: var(--art-pos, center top);
}
@media (max-width: 767px) {
  .hero-slides__layer :is(.hero-slides__img, .hero-slides__still) {
    background-position: var(--art-pos-sm, var(--art-pos, center top));
  }
}

/* Per-photograph shading is a layer over the photograph inside the layer, so
   it travels with the picture through the lift and is never touched by the
   filter animation on the photograph itself. */
.hero-slides__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 2, var(--art-dim, 0));
  pointer-events: none;
}

/* The still and the clip of a video slide fill the drifting frame. */
.hero-slides__still,
.hero-slides__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-slides__still {
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-slides__video {
  object-fit: cover;
  object-position: var(--art-pos, center top);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-slides__video.is-playing { opacity: 1; }
/* A clip has its own motion: no drift on top of it (the lift-in brightening
   stays). */
.hero-slides__layer[data-has-video] .hero-slides__img {
  animation: lq-bloom-expose var(--slide-change, 2100ms) cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

.hero__bg { transition: opacity 0.9s ease; }


/* home-1-chauffeur-opening-door-luxury-sedan-adelaide */
.hero-slides__layer[data-art="home-1-chauffeur-opening-door-luxury-sedan-adelaide"] { --art-pos: center top; }
body[data-hero-first="home-1-chauffeur-opening-door-luxury-sedan-adelaide"] { --art-pos: center top; }
/* home-2-chauffeur-opening-luxury-people-mover-adelaide */
.hero-slides__layer[data-art="home-2-chauffeur-opening-luxury-people-mover-adelaide"] { --art-pos: center center; }
body[data-hero-first="home-2-chauffeur-opening-luxury-people-mover-adelaide"] { --art-pos: center center; }
.hero-slides__layer[data-art="home-2-chauffeur-opening-luxury-people-mover-adelaide"] .hero-slides__img {
  /* Wide, undrifted and lightly shaded: the whole car and the passenger
     seated in it, not a close crop. */
  animation: lq-bloom-expose var(--slide-change, 2100ms) cubic-bezier(0.25, 0.8, 0.3, 1) both;
}
.hero[data-art="home-2-chauffeur-opening-luxury-people-mover-adelaide"] .hero__bg { opacity: 0.5; }
/* home-3-chauffeur-welcoming-passenger-sedan-adelaide */
/* about-1-chauffeur-white-gloves-black-car-adelaide */
/* about-2-chauffeur-opening-rear-door-sedan-adelaide */
.hero-slides__layer[data-art="about-2-chauffeur-opening-rear-door-sedan-adelaide"] { --art-dim: 0.2; }
/* about-3-professional-chauffeur-luxury-car-adelaide */
.hero-slides__layer[data-art="about-3-professional-chauffeur-luxury-car-adelaide"] { --art-pos: center top; }
body[data-hero-first="about-3-professional-chauffeur-luxury-car-adelaide"] { --art-pos: center top; }
/* services-1-adelaide-airport-meet-and-greet-chauffeur */
.hero-slides__layer[data-art="services-1-adelaide-airport-meet-and-greet-chauffeur"] { --art-pos: center center; }
body[data-hero-first="services-1-adelaide-airport-meet-and-greet-chauffeur"] { --art-pos: center center; }
/* services-2-wedding-transfers-bride-black-sedan-adelaide */
.hero-slides__layer[data-art="services-2-wedding-transfers-bride-black-sedan-adelaide"] { --art-pos: center 35%; }
body[data-hero-first="services-2-wedding-transfers-bride-black-sedan-adelaide"] { --art-pos: center 35%; }
/* services-3-chauffeur-people-mover-door-adelaide */
.hero-slides__layer[data-art="services-3-chauffeur-people-mover-door-adelaide"] { --art-pos: center 30%; }
body[data-hero-first="services-3-chauffeur-people-mover-door-adelaide"] { --art-pos: center 30%; }
/* wine-tours-1-seppeltsfield-road-barossa-valley-aerial */
.hero-slides__layer[data-art="wine-tours-1-seppeltsfield-road-barossa-valley-aerial"] :is(.hero-slides__still, .hero-slides__video) { filter: saturate(0.75) brightness(0.8); }
body[data-hero-first="wine-tours-1-seppeltsfield-road-barossa-valley-aerial"] .page-hero__bg { filter: saturate(1.05) contrast(1.04) saturate(0.75) brightness(0.8); }
/* wine-tours-2-private-wine-tasting-vineyard-view */
/* wine-tours-3-barrel-cellar-wine-tasting-adelaide */
/* fleet-1-luxury-sedan-hotel-evening-adelaide */
/* fleet-2-black-executive-sedans-adelaide */
.hero-slides__layer[data-art="fleet-2-black-executive-sedans-adelaide"] { --art-pos: center 60%; }
body[data-hero-first="fleet-2-black-executive-sedans-adelaide"] { --art-pos: center 60%; }
/* fleet-3-black-people-movers-evening-adelaide */
.hero-slides__layer[data-art="fleet-3-black-people-movers-evening-adelaide"] { --art-pos: center 40%; }
body[data-hero-first="fleet-3-black-people-movers-evening-adelaide"] { --art-pos: center 40%; }
/* corporate-1-executive-chauffeur-door-adelaide */
.hero-slides__layer[data-art="corporate-1-executive-chauffeur-door-adelaide"] { --art-pos: center 35%; }
body[data-hero-first="corporate-1-executive-chauffeur-door-adelaide"] { --art-pos: center 35%; }
/* corporate-2-executive-airport-rear-seat-adelaide */
.hero-slides__layer[data-art="corporate-2-executive-airport-rear-seat-adelaide"] { --art-pos: center 5%; }
body[data-hero-first="corporate-2-executive-airport-rear-seat-adelaide"] { --art-pos: center 5%; }
/* corporate-3-executive-arrival-office-adelaide */
.hero-slides__layer[data-art="corporate-3-executive-arrival-office-adelaide"] { --art-pos: center 30%; }
body[data-hero-first="corporate-3-executive-arrival-office-adelaide"] { --art-pos: center 30%; }
/* contact-1-adelaide-riverbank-night */
.hero-slides__layer[data-art="contact-1-adelaide-riverbank-night"] { --art-pos: center 35%; }
body[data-hero-first="contact-1-adelaide-riverbank-night"] { --art-pos: center 35%; }
/* contact-2-chauffeur-welcome-adelaide */
.hero-slides__layer[data-art="contact-2-chauffeur-welcome-adelaide"] { --art-pos: center 5%; }
body[data-hero-first="contact-2-chauffeur-welcome-adelaide"] { --art-pos: center 5%; }
/* contact-3-glenelg-jetty-night-adelaide */
.hero-slides__layer[data-art="contact-3-glenelg-jetty-night-adelaide"] { --art-pos: center 70%; }
body[data-hero-first="contact-3-glenelg-jetty-night-adelaide"] { --art-pos: center 70%; }

/* --- Wine Tours: the "Good to Know" panel --------------------------------
   Flipped, so the barrel and glass land on the right where the scrim lets
   the picture breathe. The brief's `object-position: right center` is read
   as what you SEE after the flip, which is the left of the source file. */
.packages__aside::before {
  background-position: left center;
  transform: scale(-1.04, 1.04);
}
.packages__aside:hover::before { transform: scale(-1.08, 1.08); }


/* ==========================================================================
   8. FULL-FRAME HEROES (client request, 19 Oct 2026)
   --------------------------------------------------------------------------
   The hero shows the WHOLE photograph: never cropped, never stretched.
   - Every hero photograph is `contain`ed, not `cover`ed.
   - The hero BOX takes the proportions of the page's first photograph
     (--hero-ar, below), so on a wide screen the hero is exactly as tall as
     the picture at that width: no bars, nothing cut off.
   - The zoom/drift/parallax that enlarged the picture (and so cut its edges)
     is switched off for hero photographs.
   - Below 900px the photograph is a full-width band at its own proportions
     and the headline sits underneath it on the dark ground, because a phone
     is too narrow for a headline to sit over an uncropped landscape picture.
   - Square and tall files are given a 3:2 box (ratio floor 1.5), so a hero
     is never taller than it is wide. A slide whose shape differs from the
     first one is centred inside the box on the dark ground.
   Photographs are served from the largest uploaded file at every screen size
   (the tier fallback already runs upward) so nothing is down-scaled below it.
   ========================================================================== */
:root { --hero-ar: 1.7778; }
body[data-hero-first="about-1-chauffeur-white-gloves-black-car-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="about-2-chauffeur-opening-rear-door-sedan-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="about-3-professional-chauffeur-luxury-car-adelaide"] { --hero-ar: 1.7844; }
body[data-hero-first="contact-1-adelaide-riverbank-night"] { --hero-ar: 1.7778; }
body[data-hero-first="contact-2-chauffeur-welcome-adelaide"] { --hero-ar: 1.7765; }
body[data-hero-first="contact-3-glenelg-jetty-night-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="corporate-1-executive-chauffeur-door-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="corporate-2-executive-airport-rear-seat-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="corporate-3-executive-arrival-office-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="fleet-1-luxury-sedan-hotel-evening-adelaide"] { --hero-ar: 1.7844; }
body[data-hero-first="fleet-2-black-executive-sedans-adelaide"] { --hero-ar: 1.787; }
body[data-hero-first="fleet-3-black-people-movers-evening-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="home-1-chauffeur-opening-door-luxury-sedan-adelaide"] { --hero-ar: 1.791; }
body[data-hero-first="home-2-chauffeur-opening-luxury-people-mover-adelaide"] { --hero-ar: 1.791; }
body[data-hero-first="home-3-chauffeur-welcoming-passenger-sedan-adelaide"] { --hero-ar: 1.8032; }
body[data-hero-first="services-1-adelaide-airport-meet-and-greet-chauffeur"] { --hero-ar: 1.5; }
body[data-hero-first="services-2-wedding-transfers-bride-black-sedan-adelaide"] { --hero-ar: 1.5; }
body[data-hero-first="services-3-chauffeur-people-mover-door-adelaide"] { --hero-ar: 1.5375; }
body[data-hero-first="wine-tours-1-seppeltsfield-road-barossa-valley-aerial"] { --hero-ar: 1.7778; }
body[data-hero-first="wine-tours-2-private-wine-tasting-vineyard-view"] { --hero-ar: 1.7844; }

.hero-slides__layer,
.hero-slides__img,
.hero-slides__still,
.hero__bg,
.page-hero__bg,
body[data-page] .hero__bg,
body[data-page] .page-hero__bg,
body[data-page="wine-tours"] .page-hero--wine .page-hero__bg {
  background-size: 100% 100%, contain !important;
  background-position: center, center center !important;
  background-repeat: no-repeat !important;
}
.hero-slides__img,
.hero-slides__still { background-size: contain !important; background-position: center center !important; }
.hero-slides__video { object-fit: contain !important; object-position: center center !important; }

/* No enlargement, no drift, no parallax on the picture. */
.hero-slides__img,
.hero-slides__layer .hero-slides__img { animation: none !important; transform: none; will-change: auto; }
.hero__bg, .page-hero__bg, .hero-slides { --fx-parallax-scale: 1; transform: none !important; }

@media (min-width: 900px) {
  /* The header bar sits above the hero (not over it), so the box is exactly
     the picture at its own proportions. */
  .hero,
  .page-hero { min-height: calc(100vw / var(--hero-ar)); }
}

@media (max-width: 899.98px) {
  .hero,
  .page-hero {
    min-height: 0;
    padding-top: calc(100vw / var(--hero-ar) + 1.75rem);
  }
  .hero-slides,
  .hero__bg,
  .page-hero__bg {
    top: 0;
    bottom: auto;
    height: calc(100vw / var(--hero-ar));
    max-height: none;
  }
  .hero-slides__layer, .hero-slides__img { max-height: none; }
}

/* --------------------------------------------------------------------------
   MIRRORED HEROES. Set per slide in Admin -> Pages -> Hero Images ("Flip"),
   stored in page_hero_slides.flip; the six October-brief photographs are
   ticked by default (App\Libraries\HeroFlip). CSS only: the files are never
   edited. `scale` is its own property so the drift animation's `transform`
   is not disturbed.
   -------------------------------------------------------------------------- */
.hero-slides__layer[data-flip="1"] .hero-slides__img { scale: -1 1; transform-origin: 50% 50%; }
body[data-hero-flip="1"] :is(.hero__bg, .page-hero__bg) { scale: -1 1; }

/* --------------------------------------------------------------------------
   PHONE HERO: A BRIGHT PICTURE BAND. Below 900px the photograph is a band
   of its own and the headline sits underneath it on the dark ground (see
   section 8), so the band carries none of the scrims that used to make the
   headline legible over the picture: no left-to-right wash, no top and foot
   gradients, no per-photograph dimming. The photograph shows as it was shot.
   -------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .hero::before,
  .page-hero::before,
  body[data-page] .hero::before,
  body[data-page] .page-hero::before { background: none !important; opacity: 0 !important; }

  .hero__bg,
  .page-hero__bg,
  body[data-page] .hero__bg,
  body[data-page] .page-hero__bg,
  body[data-page="wine-tours"] .page-hero--wine .page-hero__bg {
    background-image: var(--hero-home-img, var(--page-hero-img, none)) !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.04) !important;
  }
  .hero-slides__layer::after { background: none !important; }
  .hero-slides__layer,
  .hero-slides__img { filter: none !important; }
  .hero-slides__layer[data-art] .hero-slides__img,
  .hero[data-art] .hero__bg { opacity: 1; }
}