/* ==========================================================================
   HERO SLIDESHOW

   Split layout rather than a full-bleed banner. The garment photography is
   portrait, cut out on black and around 400px wide, so stretching it across a
   1400px viewport would upscale it four times and crop the model out of frame.
   A text panel beside a portrait image frame shows it at close to native size.
   ========================================================================== */

.heroslider { position: relative; overflow: hidden; background: var(--bg); isolation: isolate; }

/* Slides share one grid cell, so the section is as tall as the tallest slide
   and nothing jumps as they change. */
.heroslider__track { display: grid; }
.heroslide {
  grid-area: 1 / 1;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease);
}
.heroslide.is-current { opacity: 1; visibility: visible; z-index: 1; }

/* --- Media --- */

.heroslide__media { position: relative; background: #111; overflow: hidden; }
.heroslide__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.heroslide__media picture { display: block; height: 100%; }

.heroslide__media img { object-position: center 30%; }
.heroslide--focus-top .heroslide__media img { object-position: center top; }
.heroslide--focus-upper .heroslide__media img { object-position: center 22%; }
.heroslide--focus-centre .heroslide__media img { object-position: center center; }
.heroslide--focus-bottom .heroslide__media img { object-position: center bottom; }

/* The scrim only earns its place over the image, and only on the stacked
   mobile layout where text sits on top of the photograph. */
.heroslide__scrim { display: none; }

/* --- Text --- */

.heroslide__body {
  display: flex;
  align-items: center;
  background: var(--bg);
  padding: clamp(28px, 5vw, 72px) var(--gutter);
}
.heroslide__inner { max-width: 32rem; width: 100%; }

.heroslide__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-sm);
  color: var(--ink);
  text-wrap: balance;
}
.heroslide__sub {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--sp-lg);
  max-width: 40ch;
}
.heroslide__cta { min-width: 190px; text-align: center; }

.heroslide--centre .heroslide__body { justify-content: center; text-align: center; }
.heroslide--centre .heroslide__sub { margin-inline: auto; }

/* --- Desktop split --- */

@media (min-width: 900px) {
  .heroslide { grid-template-columns: 1fr minmax(0, 0.92fr); min-height: min(72svh, 660px); }
  .heroslide__body { padding-inline: clamp(40px, 5vw, 96px); grid-column: 1; grid-row: 1; }
  .heroslide__media { grid-column: 2; grid-row: 1; }
  .heroslide__inner { margin-left: 0; margin-right: auto; }
  .heroslide--centre .heroslide__inner { margin-inline: auto; }

  /* 'Right' puts the picture first and the words after it. */
  .heroslide--right { grid-template-columns: minmax(0, 0.92fr) 1fr; }
  .heroslide--right .heroslide__media { grid-column: 1; }
  .heroslide--right .heroslide__body { grid-column: 2; }
}

/* --- Mobile stack --- */

@media (max-width: 899px) {
  .heroslide { grid-template-rows: 52svh auto; }
  .heroslide__media { grid-row: 1; }
  .heroslide__body { grid-row: 2; padding: var(--sp-lg) var(--gutter) calc(var(--sp-lg) + 34px); }
  .heroslide__inner { max-width: none; }
  .heroslide__cta { width: 100%; }
}

/* --- Controls --- */

.heroslider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer; border-radius: 50%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (min-width: 900px) { .heroslider__arrow { display: flex; } }
.heroslider__arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.heroslider__arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.heroslider__arrow--prev { left: clamp(12px, 1.6vw, 24px); }
.heroslider__arrow--next { right: clamp(12px, 1.6vw, 24px); }
.heroslider__arrow svg { width: 18px; height: 18px; }

.heroslider__dots {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(14px, 2vw, 26px);
  display: flex; gap: 10px;
}
.heroslider__dot {
  width: 30px; height: 2px; padding: 12px 0; border: 0; background: none;
  cursor: pointer; position: relative;
}
.heroslider__dot::after {
  content: ""; position: absolute; inset: 12px 0;
  background: rgba(30,30,30,.28);
  transition: background var(--t-fast) var(--ease);
}
.heroslider__dot.is-active::after { background: var(--ink); }
.heroslider__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.heroslider__pause {
  position: absolute; z-index: 3;
  right: clamp(12px, 1.6vw, 24px); bottom: clamp(12px, 2vw, 22px);
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.heroslider__pauseIcon {
  width: 9px; height: 11px;
  border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);
}
.heroslider__pause[aria-pressed="true"] .heroslider__pauseIcon {
  width: 0; height: 0; border: 0;
  border-left: 10px solid var(--ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.heroslider__pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 899px) {
  .heroslider__dots { bottom: 10px; }
  .heroslider__pause { right: 10px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroslide { transition: none; }
}