/* ==============================================================================
   HERO SLIDER (templates/partials/hero-slider.html, static/js/hero-slider.js)

   The slider of Furnitor's Home 3 (custom-slider-02, doc/07, ADR-040),
   measured on the demo: the full height of the window from 992 px and
   600 px under it (custom-height-sm), the title centred at 40 px with a
   line height of 1 (fs-40 lh-1) until 1750 px and 90 px from there
   (fs-xxl-90), 30 px between it and the button (mb-6), the slide's own
   line 50 px over the bottom (mb-8) and the dots across from it.

   The demo's photo is pale and its words are ink. Ours are buildings,
   some of them dark, so the words are white on a veil of black, darker
   where the words are (see the veil below), which keeps the title, the
   button and the header readable over the palest photo (doc/07,
   contrast).

   The photos cross-fade as on Turismo: the one coming in rises from 0 to
   1 in 1.5 s over the one leaving, which stays opaque under it for
   0.8 s and only then goes out, so the middle of the change never shows
   the page through. With less motion the change is a cut.
   ============================================================================== */

.hero-slider {
  position: relative;
  display: grid;
  height: 600px;
  overflow: hidden;
  background: var(--ink);
  color: var(--overlay-text);
}

@media (min-width: 62em) {
  .hero-slider {
    height: 100vh;
    height: 100svh;
    min-height: 600px;
  }
}

.hero-slider__slides,
.hero-slider__caption,
.hero-slider__controls {
  grid-area: 1 / 1;
}

.hero-slider__slides {
  position: relative;
}

/* The slide on screen is in the flow and above the rest; the others are
   stacked under it, transparent and inert. isolation keeps each slide's
   line under the one coming in while both are painted. */
.hero-slider__slide {
  position: absolute;
  inset: 0;
  isolation: isolate;
  opacity: 0;
  transition: opacity 0s linear 0.8s;
}

.hero-slider__slide.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity 1.5s ease;
}

.hero-slider__slide picture,
.hero-slider__image {
  width: 100%;
  height: 100%;
}

.hero-slider__image {
  display: block;
  object-fit: cover;
}

/* The veil, over the photo and under the words: a light shade over the
   whole photo, darker where the words are, under the header at the top,
   behind the title and the button in the middle, and under the slide's
   line and the dots at the foot. Measured on the three photos at 1440
   and 375 px (doc/07, contrast), it keeps every word at 4.5:1 or more,
   the title at 3:1 or more, over the palest of them, a render with a
   white wall; one flat veil dark enough for that dimmed every photo. */
.hero-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 200px),
    linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 220px),
    radial-gradient(ellipse 55% 35% at 50% 52%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
    var(--photo-veil);
  pointer-events: none;
}

/* The slide's line at its foot, the demo's "Designed by…": the
   project's name, which links to it, and its use and place. */
.hero-slider__credit {
  position: absolute;
  z-index: 1;
  inset: auto 0 50px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-inline-end: 9rem;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

/* The line of the slide that leaves goes at once: under the one fading
   in, the two lines would show through each other for a second and a
   half. */
.hero-slider__slide:not(.is-active) .hero-slider__credit {
  visibility: hidden;
}

.hero-slider__credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
}

.hero-slider__credit a:hover {
  color: inherit;
  text-decoration-color: currentColor;
}

.hero-slider__place::before {
  content: "·" / "";
  margin-inline-end: 0.4em;
}

/* --------------------------------------------------------------------------
   Title and button, over every photo, centred in both directions.
   Inside, the page's ink and paper swap, so the site's one button is
   white and fills white.
   -------------------------------------------------------------------------- */
.hero-slider__caption {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 75px var(--gutter) 0;
  text-align: center;
  pointer-events: none;
  --text-primary: var(--overlay-text);
  --page-bg: var(--ink);
  --focus-ring: var(--overlay-text);
}

.hero-slider__caption > * {
  pointer-events: auto;
}

.hero-slider__title {
  max-width: 20em;
  margin: 0 0 30px;
  color: inherit;
  font-size: var(--fs-40);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--lh-1);
  text-wrap: balance;
}

@media (min-width: 109.375em) {
  .hero-slider__title {
    font-size: var(--fs-90);
  }
}

/* --------------------------------------------------------------------------
   Dots and the pause button: bottom right, across from the slide's line,
   on a desktop; bottom left under it on a phone, as the demo moves them.
   The theme's dots are 30 × 3 bars, square; the hit area is 24 px tall
   (WCAG 2.5.8) through a transparent border.
   -------------------------------------------------------------------------- */
.hero-slider__controls {
  z-index: 3;
  align-self: end;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container-max);
  margin-bottom: 50px;
  padding-inline: var(--gutter);
  --focus-ring: var(--overlay-text);
}

/* The theme's fraction, "01 — 03", around the dots: the photo on screen
   and how many there are, for the eye only (the dots already say both
   to a screen reader). */
.hero-slider__count {
  font-size: var(--fs-16);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hero-slider__dots {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-slider__dot {
  display: block;
  width: 30px;
  height: 24px;
  border: solid transparent;
  border-width: 11px 0 10px;
  background: rgba(255, 255, 255, 0.55);
  background-clip: padding-box;
  transition: background-color var(--transition-overlay);
}

.hero-slider__dot:hover,
.hero-slider__dot[aria-current="true"] {
  background-color: var(--overlay-text);
}

/* Pause: two bars; play: a triangle, drawn with borders so no icon font
   is needed. 24 × 24 like the dots. */
.hero-slider__pause {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.hero-slider__pause[hidden] {
  display: none;
}

.hero-slider__pause > span {
  width: 8px;
  height: 10px;
  border-inline: 3px solid currentColor;
}

.hero-slider__pause.is-paused > span {
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  border-inline: 9px solid currentColor;
  border-inline-end: 0;
}

@media (max-width: 61.9375em) {
  /* On a phone the header takes two rows and the title two lines, over a
     photo only 600 px tall: the veil goes further down from the top and
     wider round the middle. */
  .hero-slider__slide::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 260px),
      linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 220px),
      radial-gradient(ellipse 90% 40% at 50% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)),
      var(--photo-veil);
  }

  .hero-slider__credit {
    bottom: 76px;
    padding-inline-end: var(--gutter);
  }

  .hero-slider__controls {
    justify-content: flex-start;
    margin-bottom: 30px;
  }
}

/* Less motion: the photo changes at once. */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide,
  .hero-slider__slide.is-active {
    transition: none;
  }
}