/*
 * Hero slider — full-bleed editorial hero.
 *
 * Slides stack in a grid cell and cross-fade; nothing translates, so a slide
 * change never reflows the page. The photo is a real <img> under the copy
 * rather than a background-image so it can be lazy-loaded, given a
 * fetchpriority, and read by a screen reader.
 */

.oxa-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--nesa-ink);
  isolation: isolate;
}

/* One grid cell, every slide inside it — no absolute positioning, so the
 * slider keeps the height of its tallest slide instead of collapsing. */
.oxa-slider__track {
  display: grid;
  width: 100%;
  height: 100%;
}

.oxa-slider--medium     .oxa-slider__track { min-height: clamp(380px, 52vw, 560px); }
.oxa-slider--large      .oxa-slider__track { min-height: clamp(460px, 68vw, 760px); }
.oxa-slider--fullscreen .oxa-slider__track { min-height: calc(100vh - var(--nesa-header-h, 0px)); }

.oxa-slider__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nesa-dur-slow) var(--oxa-ease), visibility 0s linear var(--nesa-dur-slow);
  color: var(--slide-ink, #fff);
}

.oxa-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--nesa-dur-slow) var(--oxa-ease), visibility 0s;
}

.oxa-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.oxa-slider__slide--focal-left  .oxa-slider__img { object-position: left center; }
.oxa-slider__slide--focal-right .oxa-slider__img { object-position: right center; }

/* The wash. Default is a left-weighted gradient rather than a flat scrim: the
 * copy sits left, so the photo stays fully visible on the right where the
 * model usually is. A custom --slide-overlay switches to a flat tint. */
.oxa-slider__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(0 0 0 / var(--wash, .55)) 0%,
    rgb(0 0 0 / calc(var(--wash, .55) * .7)) 38%,
    rgb(0 0 0 / 0) 72%
  );
}

.oxa-slider__slide[style*="--slide-overlay"]::before {
  background: var(--slide-overlay);
  opacity: var(--wash, .55);
}

.oxa-slider__slide--wash-none   { --wash: 0; }
.oxa-slider__slide--wash-light  { --wash: .3; }
.oxa-slider__slide--wash-medium { --wash: .55; }
.oxa-slider__slide--wash-strong { --wash: .75; }

.oxa-slider__slide--wash-none::before { display: none; }

.oxa-slider__inner {
  /* Aligned to the page gutter, not centred inside a 1440px column. The copy
   * has to start on the same vertical as the logo and the mega-menu columns;
   * centring left it stranded mid-screen on a wide monitor. */
  width: 100%;
  padding: clamp(2rem, 6vw, 5rem) var(--nesa-gutter);
}

.oxa-slider__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--oxa-space-3);
  max-width: 34rem;
}

.oxa-slider__slide--align-center .oxa-slider__content {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.oxa-slider__slide--align-right .oxa-slider__content {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.oxa-slider__eyebrow {
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-wide);
  opacity: .85;
}

/* The one place the design goes heavy sans instead of the display serif. */
.oxa-slider__title {
  margin: 0;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-4xl);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: inherit;
  text-wrap: balance;
}

.oxa-slider__subtitle {
  margin: 0;
  max-width: 30rem;
  font-size: var(--oxa-fs-md);
  line-height: 1.6;
  opacity: .92;
}

.oxa-slider__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oxa-space-2);
  margin-top: var(--oxa-space-2);
}

/*
 * Controls take their colour from --ctl / --ctl-contrast, which the
 * --ink-light / --ink-dark classes set. Everything below is written once
 * against those two variables, so a slide over a bright studio shot and a
 * slide over a dark bedroom shot share one set of rules.
 */
.oxa-slider__slide--ink-light { --ctl: #fff; --ctl-contrast: var(--nesa-ink); }
.oxa-slider__slide--ink-dark  { --ctl: var(--nesa-ink); --ctl-contrast: #fff; }

.oxa-slider__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  background: var(--ctl);
  color: var(--ctl-contrast);
  border: 1px solid var(--ctl);
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  transition: background var(--oxa-dur) var(--oxa-ease), color var(--oxa-dur) var(--oxa-ease);
}
.oxa-slider__cta:hover { background: transparent; color: var(--ctl); }

.oxa-slider__cta--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.oxa-slider__cta--ghost:hover { background: var(--ctl); color: var(--ctl-contrast); }

/* ── Controls ──────────────────────────────────────────────────────────── */

.oxa-slider__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ctl, #fff);
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--oxa-dur) var(--oxa-ease);
  z-index: 2;
}
.oxa-slider__arrow:hover { opacity: 1; }
.oxa-slider__arrow svg { width: 26px; height: 26px; }
.oxa-slider__arrow--prev { left: clamp(.25rem, 2vw, 1.5rem); }
.oxa-slider__arrow--next { right: clamp(.25rem, 2vw, 1.5rem); }

.oxa-slider {
  /* Default control colour for the arrows/dots, which sit outside the slides
   * and so cannot inherit --ctl. Overridden per active slide below. */
  color: #fff;
}
.oxa-slider:has(.oxa-slider__slide--ink-dark.is-active) { color: var(--nesa-ink); }

.oxa-slider__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  translate: -50% 0;
  display: flex;
  gap: .5rem;
  z-index: 2;
}

/* Bars, not circles — matches the flat, square language of the rest. */
.oxa-slider__dot {
  width: 34px;
  height: 2px;
  padding: 0;
  border: 0;
  background: currentColor;
  opacity: .35;
  cursor: pointer;
  transition: opacity var(--oxa-dur) var(--oxa-ease);
}
.oxa-slider__dot.is-active { opacity: 1; }

/* Tap targets stay 44px tall even though the bar reads as 2px. */
.oxa-slider__dot::before {
  content: "";
  position: absolute;
  inset-block: -1rem;
  width: 34px;
}

@media (max-width: 767px) {
  .oxa-slider__content { max-width: none; }
  .oxa-slider__ctas    { width: 100%; }
  .oxa-slider__cta     { flex: 1 1 auto; padding-inline: 1rem; }
  .oxa-slider__arrow   { display: none; }

  /* On a phone the gradient has to work top-to-bottom — there is no room for
   * copy beside the model, so it sits under her. */
  .oxa-slider__slide::before {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / calc(var(--wash, .55) * .35)) 0%,
      rgb(0 0 0 / calc(var(--wash, .55) * .85)) 100%
    );
  }
  .oxa-slider__slide { align-items: flex-end; }
}

/* ── Headline treatments ───────────────────────────────────────────────── */

/*
 * Two headline styles, because a slogan and a sentence do not want the same
 * setting. `--display` is the existing heavy uppercase slogan. `--plain` is
 * for a headline that reads as a sentence: sentence case, regular weight, and
 * a bold second line via title_emphasis. Squeezing the second kind into the
 * first gave a shouted, letter-spaced sentence.
 */
.oxa-slider__title--plain {
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
  /* A shade smaller than the slogan: a sentence needs more characters per line
   * before it wraps, and the slogan size wraps it after three words. */
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

/* Block so the emphasised half always starts its own line, whatever the
 * viewport — a wrapped inline <strong> would break mid-phrase. */
.oxa-slider__title-em {
  display: block;
  font-weight: 700;
}

/* ── CTA arrow ─────────────────────────────────────────────────────────── */

.oxa-slider__cta-arrow {
  flex-shrink: 0;
  margin-left: .625rem;
  transition: transform var(--oxa-dur) var(--oxa-ease);
}
.oxa-slider__cta--arrow:hover .oxa-slider__cta-arrow { transform: translateX(3px); }

/* ── Content inset ─────────────────────────────────────────────────────── */

/*
 * Push the copy in from the page edge.
 *
 * The default is flush to --nesa-gutter, which is right over a full-bleed
 * photograph. A studio shot with the subject on one side is different: the copy
 * wants to sit inside the negative space rather than hug the browser edge.
 *
 * padding-inline-start, so it follows the writing direction and needs no
 * mirroring for the right-aligned variant.
 */
.oxa-slider__slide--inset-small  .oxa-slider__inner { padding-inline-start: calc(var(--nesa-gutter) + 4vw); }
.oxa-slider__slide--inset-medium .oxa-slider__inner { padding-inline-start: calc(var(--nesa-gutter) + 8vw); }
.oxa-slider__slide--inset-large  .oxa-slider__inner { padding-inline-start: calc(var(--nesa-gutter) + 14vw); }

/* On a phone the copy is over the photo, not beside it, and any inset just
 * squeezes the line length. */
@media (max-width: 767px) {
  .oxa-slider__slide--inset-small  .oxa-slider__inner,
  .oxa-slider__slide--inset-medium .oxa-slider__inner,
  .oxa-slider__slide--inset-large  .oxa-slider__inner { padding-inline-start: var(--nesa-gutter); }
}

/*
 * The display headline, a size down.
 *
 * It inherited --oxa-fs-4xl, clamp(2.5rem, 6vw, 5rem) — 80px on a wide monitor,
 * which read as shouting and wrapped a three-word headline onto three lines.
 */
.oxa-slider__title--display {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
}