/* ==========================================================================
   Hero slideshow.

   The mockup's hero is 1920 x 522 — a 3.68:1 band — with 80px circular arrows
   inset 41px from each edge and centred vertically.
   ========================================================================== */

.gsjc-hero {

  position: relative;
  overflow: hidden;
  background: var(--gsjc-surface-invert);   /* shows while an image decodes */

  /* The mockup's band was 1920x522 — 27.2% of the width — drawn for a still.
     With a 16:9 video behind it that proportion showed the middle 49% of the
     frame and cut the conductor off at the hairline: his head sits in the top
     third of the picture (frames sampled at 1s and 6s: roughly 5% to 33% of
     the height). 39% of the width shows 70% of the frame; with the crop
     favouring the top (object-position below) that is 4.5% to 74.5%, and the
     head is whole. 561px at 1440; the 44rem cap keeps a 1920 screen at 704,
     which is still 65% of the frame.

     A MINIMUM, not a fixed ratio. A headline is written by someone else,
     later, and at a fixed ratio a long one simply overflows: the first draft
     clipped the button off the bottom edge. The band grows to fit its slide
     and never shrinks below this. */
  min-height: clamp(24rem, 39vw, 44rem);

  /* Dark ground: the focus ring flips to Ochre or it vanishes into a photo. */
  --gsjc-focus-ring: var(--gsjc-ochre);
  --gsjc-focus-halo: var(--gsjc-umber);
}

/* Only one slide is ever in flow — the rest are `hidden`, so display:none takes
   them out entirely. That lets the visible slide set the band's height, which a
   stack of absolutely positioned slides cannot do. */
.gsjc-hero__viewport { display: flex; min-height: inherit; }

.gsjc-hero__slide {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.gsjc-hero__slide[hidden] { display: none; }

/* --- The layers, in order -------------------------------------------------
     0  the still, and the video over it
     1  the scrim
     2  the panel, the pause control, the arrows

   Stated explicitly because the first version left them all at auto. The
   scrim is a ::before, which is the FIRST child, and a positioned element
   with z-index auto paints in tree order — so the image, a later sibling,
   painted over the scrim and the contrast floor described below was never
   in effect. Measured: scrim and image both computed z-index auto. */
.gsjc-hero__image,
.gsjc-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Motion -----------------------------------------------------------------
   The video sits over the still and covers it while playing. Paused — by the
   visitor, or by a reduced-motion preference the script honours — it is
   hidden and the still shows through, rather than freezing on a frame
   somebody happens to be mid-blink in.

   Cropped towards the top, not the centre: 15% aligns the frame's 15% line
   with the box's, which with 30% of the frame to lose puts the window 4.5%
   from the top — heads kept, the foreground backs-of-heads at the bottom
   given up. The still underneath keeps its centre crop; it is a different
   photograph with its own framing. */
.gsjc-hero__video {
  object-position: 50% 15%;
}

.gsjc-hero__motion.is-paused .gsjc-hero__video {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces with the script: with JS off the video would still
     autoplay, so the stylesheet hides it and the still carries the slide. */
  .gsjc-hero__video {
    visibility: hidden;
  }
}

/* A small disc in the corner opposite the copy: present because a looping
   video must be stoppable, quiet because nobody comes to the page for it.
   The same white disc as the arrows, at the arrows' phone size. */
.gsjc-hero__pause {
  position: absolute;
  z-index: 2;
  right: var(--global-content-edge-padding, 1.5rem);
  bottom: var(--gsjc-space-md);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--gsjc-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gsjc-umber);
  cursor: pointer;
  transition: background-color 0.18s var(--gsjc-ease);
}

.gsjc-hero__pause:hover,
.gsjc-hero__pause:focus-visible {
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);
}

.gsjc-hero__pause-icon { width: 1.25rem; height: 1.25rem; }

/* One glyph at a time: the pause bars while playing, the play triangle
   while paused. aria-pressed="true" means the pause is in effect. */
.gsjc-hero__pause-icon--play,
.gsjc-hero__pause[aria-pressed="true"] .gsjc-hero__pause-icon--pause { display: none; }
.gsjc-hero__pause[aria-pressed="true"] .gsjc-hero__pause-icon--play  { display: block; }

/* --- Text over a photograph ----------------------------------------------
   The scrim is not decoration. A headline over an arbitrary photograph has no
   guaranteed contrast, and this photograph will be chosen by somebody else,
   later, without a contrast checker. Umber at 0.75 puts white text at 8.94:1
   even if the picture behind it is pure white, and higher as it darkens — so
   the floor holds regardless of what gets uploaded. */
.gsjc-hero__slide:has(.gsjc-hero__panel)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(17, 12, 8, 0.78) 0%,
    rgba(17, 12, 8, 0.75) 42%,
    rgba(17, 12, 8, 0.30) 68%,
    rgba(17, 12, 8, 0) 100%
  );
}

/* Kadence's container formula again, so the headline starts on the same left
   edge as every paragraph, the logo and the footer wordmark. Padding rather
   than a fixed offset, so it holds at any width. */
.gsjc-hero__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--global-content-width, var(--gsjc-container));
  margin-inline: auto;
  padding-inline: var(--global-content-edge-padding, 1.5rem);
  padding-block: var(--gsjc-space-2xl);
  color: var(--gsjc-white);
}

.gsjc-hero__panel > * { max-width: 34rem; }
.gsjc-hero__panel > * + * { margin-top: var(--gsjc-space-sm); }

/* Smaller than the page's display size. At 64px a four-line headline needed
   more room than the band has, and the hero is a banner rather than a poster. */
.gsjc-hero .gsjc-hero__heading {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: var(--gsjc-lh-tight);
  color: var(--gsjc-white);
}

.gsjc-hero__text {
  font-size: var(--gsjc-fs-lead);
  color: var(--gsjc-sandstone);
}

/* The button itself is defined once in base.css, with the concert ticket
   link and core Button blocks. Nothing hero-specific remains. */

/* --- Announcement slide: the whole thing is the link ---------------------- */
.gsjc-hero__cover { position: absolute; inset: 0; }

/* --- Arrows ---------------------------------------------------------------
   A white disc with an Umber glyph rather than an outline. An outlined arrow
   has to sit on a photograph nobody has chosen yet; a filled disc carries its
   own 19:1 and cannot be lost against a pale image. */
.gsjc-hero__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--gsjc-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gsjc-umber);
  cursor: pointer;
  transition: background-color 0.18s var(--gsjc-ease);
}

.gsjc-hero__nav svg { width: 1.4rem; height: 1.4rem; }
.gsjc-hero__nav--prev { left: clamp(0.75rem, 2.1vw, 2.5rem); }
.gsjc-hero__nav--next { right: clamp(0.75rem, 2.1vw, 2.5rem); }

.gsjc-hero__nav:hover,
.gsjc-hero__nav:focus-visible {
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);
}

/* --- Narrow screens -------------------------------------------------------
   A 3.68:1 band at 375px is 102px tall, which is a strip rather than a hero.
   The ratio squares up and the scrim runs bottom-to-top, since a left-hand
   column has nowhere to go. */
@media (max-width: 900px) {
  .gsjc-hero {
    min-height: clamp(18rem, 62vw, 26rem);
  }

  /* On narrow screens the scrim moves ONTO the panel rather than staying a
     band-wide gradient. Where the panel lands vertically depends on how much
     text it holds, so a gradient tuned to one position stops guaranteeing
     anything at another — a first version put the headline at roughly 0.25
     scrim, which is about 1.4:1 over a pale photograph. A background on the
     panel itself always covers exactly the text, whatever its height. */
  .gsjc-hero__slide:has(.gsjc-hero__panel)::before {
    background: linear-gradient(
      0deg,
      rgba(17, 12, 8, 0.55) 0%,
      rgba(17, 12, 8, 0.15) 60%,
      rgba(17, 12, 8, 0) 100%
    );
  }

  .gsjc-hero__panel {
    background: linear-gradient(
      0deg,
      rgba(17, 12, 8, 0.88) 0%,
      rgba(17, 12, 8, 0.76) 100%
    );
  }

  .gsjc-hero__panel {
    align-self: flex-end;
    padding-block: var(--gsjc-space-lg);
  }

  .gsjc-hero__panel > * { max-width: none; }

  /* --- Arrows, moved out of the text ------------------------------------
     Centred vertically on the band, the arrows land INSIDE the copy on a
     phone: the panel is bottom-aligned and grows to fill the band, so at
     375px both discs sat on top of the paragraph (measured: prev at
     x 12-56, y -183..-139; the text at x 24-351, y -189..-128).

     Moving them is not enough on its own, because how far up the panel
     reaches depends on how much text a slide holds — an editor writes that
     later. So the panel RESERVES a strip at its foot exactly as tall as a
     disc, and the arrows sit in it. Reserved space cannot be grown into,
     which makes the clearance a property of the layout rather than
     something that happens to hold for today's copy.

     Right-aligned: it puts them under the thumb, opposite the CTA, and on
     the same edge as every other right-hand element. */
  .gsjc-hero__nav {
    width: 2.75rem;
    height: 2.75rem;
    top: auto;
    bottom: var(--gsjc-space-lg);
    transform: none;
  }

  .gsjc-hero__panel {
    padding-bottom: calc(
      var(--gsjc-space-lg) + 2.75rem + var(--gsjc-space-md)
    );
  }

  /* `left` must be cleared explicitly. Left, right and width together are
     over-constrained, and in LTR the browser resolves that by ignoring
     `right` — the arrow would silently stay where it was. */
  .gsjc-hero__nav--prev {
    left: auto;
    right: calc(
      var(--global-content-edge-padding, 1.5rem) + 2.75rem + var(--gsjc-space-2xs)
    );
  }

  .gsjc-hero__nav--next {
    right: var(--global-content-edge-padding, 1.5rem);
  }

  /* The pause disc sits in the same reserved strip, at the left of the
     arrows when there are arrows; with one slide it has the strip alone. */
  .gsjc-hero__pause {
    bottom: var(--gsjc-space-lg);
  }

  .gsjc-hero:has(.gsjc-hero__nav:not([hidden])) .gsjc-hero__pause {
    right: calc(
      var(--global-content-edge-padding, 1.5rem) + 2 * (2.75rem + var(--gsjc-space-2xs))
    );
  }
}