/* Cinematic hero slideshow — shared across editions (US / UAE / Saudi).
   CSP-safe: served same-origin (style-src 'self'). Progressive-enhancement:
   slide 1 shows with no JS; hero.js adds `.js` to hand control to .is-active. */

.au-hero { position: relative; isolation: isolate; overflow: hidden;
  min-height: 660px; display: flex; align-items: center; }

.au-hero-bg { position: absolute; inset: 0; z-index: 0; background: #000; }
.au-hero-slide { position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s ease-in-out; will-change: opacity; }
.au-hero-slide img { width: 100%; height: 100%; object-fit: cover;
  object-position: center 38%; display: block; }

/* No-JS / pre-JS: first slide is visible */
.au-hero-bg .au-hero-slide:first-child { opacity: 1; }
/* JS ready: control passes to .is-active */
.au-hero-bg.js .au-hero-slide:first-child { opacity: 0; }
.au-hero-bg.js .au-hero-slide.is-active { opacity: 1; }

/* Legibility scrim — heavy on the text side (inline-start), fading to near-clear
   on the open side so the photo still reads cinematic. Layered over a gentle
   vertical wash for the eyebrow (top) and the stats/dots (bottom). Holds white
   text over bright daytime/sunset slides, not just dark night skylines. */
.au-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.66) 100%); }
[dir="rtl"] .au-hero-scrim {
  background:
    linear-gradient(270deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.66) 100%); }
/* Mobile: copy wraps to full width, so the side gradient's weak tail no longer
   sits under empty space. Switch to a flat vertical darken that keeps the
   300-weight subhead legible over even the brightest daytime/sunset slide. */
@media (max-width: 820px) {
  .au-hero-scrim, [dir="rtl"] .au-hero-scrim {
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.72) 100%); }
}

.au-hero > .au-wrap { position: relative; z-index: 2; width: 100%; }

/* Slide indicators */
.au-hero-dots { position: absolute; z-index: 3; bottom: 20px; inset-inline-start: 40px;
  display: flex; gap: 8px; }
.au-hero-dot { width: 28px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.34); transition: background .3s; }
.au-hero-dot:hover { background: rgba(255,255,255,.6); }
.au-hero-dot.is-active { background: #ffc72c; }
.au-hero-dot:focus-visible { outline: 2px solid #ffc72c; outline-offset: 3px; }

@media (max-width: 820px) {
  .au-hero { min-height: 560px; }
  .au-hero-slide img { object-position: center 42%; }
  .au-hero-dots { inset-inline-start: 20px; }
}
@media (max-width: 480px) { .au-hero { min-height: 500px; } }

@media (prefers-reduced-motion: reduce) {
  .au-hero-slide { transition: opacity .01ms; }
}