/* panel-showcase — vertical slat expander. */
.psho { background: var(--color-navy); color: var(--color-white); padding: var(--space-section-y) 0; }
.psho__inner { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--margin); }

.psho__head { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: end; margin-bottom: 32px; }
.psho__eyebrow { color: var(--accent-decor); margin: 0 0 12px; }
.psho__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: .95;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .01em;
}
.psho__sub { color: #ffffffd1; margin: 16px 0 0; max-width: 56ch; }
.psho__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--color-white); border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 12px; align-self: end; justify-self: end; }
.psho__cta:hover { color: #ffffffb3; }

.psho__track { display: flex; width: 100%; height: 600px; overflow: hidden; border-radius: var(--radius-card); }

/* The slat is the flex item; the panel fills it. The wrapper exists so the
   panel's link has a positioned box of its own to sit in — see render.php. */
.psho__slat {
  position: relative;
  flex: 0 0 100px;
  height: 100%;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .2);
  transition: flex .6s cubic-bezier(.4, 0, .2, 1);
}
.psho__slat:last-child { border-right: 0; }
.psho__slat[data-active="true"] { flex: 1 1 auto; }

.psho__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.psho__panel:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }

.psho__panel-img     { position: absolute; inset: 0; background: #0a0e30 center / cover no-repeat; }
/* Covers the slat exactly as the photo does, so a panel looks the same whether
   it is showing its still or its motion.

   Hidden until its panel opens. A closed panel renders with preload="none" and
   no autoplay, so its <video> has painted no frame yet: left visible it is a
   black rectangle sitting on top of the photograph, which is exactly what the
   other five slats looked like until you clicked one. Fading in on open also
   means a broken or missing poster can never show through. */
.psho__panel-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.psho__panel[data-active="true"] .psho__panel-video { opacity: 1; }
/* Reduced motion: drop the video, leave the photo showing underneath. */
@media (prefers-reduced-motion: reduce) { .psho__panel-video { display: none; } }
.psho__panel-overlay { position: absolute; inset: 0; background: linear-gradient(#0000 2%, #000000c7 88%); transition: opacity .5s; opacity: 1; }
.psho__panel[data-active="true"] .psho__panel-overlay { opacity: .5; }

/* Pastel #14 (Las Vegas): the subcopy was hard to read, and the reason is that
   the overlay drops to half opacity exactly when a panel opens — the scrim
   weakens at the moment text appears on it. Rather than dulling the whole
   photo back down, an open panel gets a scrim under its text only. The top of
   the picture stays as bright as it just became; the bottom carries the words.

   z-index 1 puts it over the photo and its overlay, under the body copy and
   the label, which are both at 2.

   Resized once the full-bleed gradient above it became a toggle and defaulted
   off (#190/#191). While that gradient was carrying most of the darkening, this
   band's exact height did not show; alone, it did, and it was sized by eye
   rather than to the words. Measured on a 600px panel the text block starts
   168px from the foot and runs 96px, so 62% was covering more than twice the
   content it exists for and reading as a black box across the bottom third.

   38% was still too much. Measuring white text against the RAW video, with no
   band at all, it clears 4.5:1 at 13 of 14 sampled seconds; only one bright
   pass around t=6s fails, and badly (72% of the text area). So the band was
   paying for 1.5 seconds and charging for 14.

   Now sized to the text and little else: 30%, which is about 180px on a 600px
   panel against a 168px text block, and the base alpha drops to 0.75. Enough to
   hold that one bright pass, light enough that the other twelve seconds read as
   footage rather than as a black bar.

   Gated on the same "Darken the background" switch as the full-bleed gradient,
   so off means no scrim at all rather than one visible remnant. That costs the
   bright pass around t=6s, where white text on raw footage drops to 1.9:1 — the
   switch is how you get it back. */
.psho[data-scrim="true"] .psho__panel[data-active="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #000000bf 0%, #00000059 50%, #0000 100%);
}

/* The clips are graded dark. Measured full-frame across the Wrigley loop, the
   luminance sits at 70-102 where mid-grey is 128, for about twelve of its
   fourteen seconds. No amount of removing scrims fixes that, because nothing
   was being added: it is the footage.

   This is a stopgap, not the fix. The clips want re-exporting a stop or so
   brighter; a filter cannot recover what was never in the file, and pushing it
   harder clips the highlights, which already touch 255 on some frames. Applied
   to the still as well as the video so a closed slat and an open one match.

   Delete these two rules the day the regraded clips land. */
.psho__panel-img,
.psho__panel-video {
  filter: brightness(1.18) saturate(1.04);
}

/* The vertical label names a COLLAPSED panel. Once a panel opens its name is
   already in the body copy, horizontally, and the two sit on top of each other
   at the bottom left — Pastel #13. So the label fades out exactly when it stops
   being the only label and starts being an obstruction. It is already hidden
   outright on narrow screens, further down this file. */
.psho__panel-label { transition: opacity .35s ease; }
.psho__panel[data-active="true"] .psho__panel-label { opacity: 0; }

.psho__panel-label {
  position: absolute;
  bottom: 24px;
  left: 18px;
  color: var(--color-white);
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  z-index: 2;
}
.psho__panel-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .4s .1s, transform .4s .1s;
  max-width: 540px;
}
.psho__panel[data-active="true"] .psho__panel-body { opacity: 1; transform: translateY(0); }
.psho__panel-name {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: .95;
  color: var(--color-white);
  text-wrap: balance;
  letter-spacing: .01em;
}
.psho__panel-meta { color: #ffffffd9; }
.psho__panel-desc { color: #fff; line-height: 1.55; text-shadow: 0 1px 2px #00000059; }

/* The panel link is a sibling of its slat, positioned over it — a link nested
   inside a <button> is invalid and unreachable by keyboard. */
.psho__panel-link {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 6px;
  transition: gap .3s;
}
/* Driven by the panel's own state, so it stays right with JS disabled and the
   script's .is-visible becomes belt-and-braces rather than the only mechanism. */
.psho__slat[data-active="true"] .psho__panel-link,
.psho__panel-link.is-visible { display: inline-flex; }
.psho__panel-link:hover { gap: 14px; }

@media (max-width: 1023px) {
  .psho__head { grid-template-columns: 1fr; }
  .psho__cta { justify-self: start; }
}
@media (max-width: 767px) {
  /* Slats do not work below about 600px of width — the collapsed strips leave
     nothing to read. Stack them instead, all open. */
  .psho__track { flex-direction: column; height: auto; }
  .psho__slat { flex: 0 0 auto; height: auto; width: 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .psho__slat[data-active="true"] { flex: 0 0 auto; }
  .psho__panel { position: relative; inset: auto; height: 260px; }
  /* Stacked, every panel is open, so the copy sits on the picture with nothing
     darkening it. At 260px tall the 72px foot reserved for the link is wasted
     here, because on this breakpoint the link is static and renders BELOW the
     panel. That pushed the words into the middle band of the frame, which on
     these clips is the horizon.

     Measured on the six stills at 375px, over the width the text occupies:
     the band it sat in reads 63-108 mean luminance with only 59-83% of pixels
     below 110, so the name crosses the sky and disappears. Dropping to the
     foot puts it at 29-44 mean with 95-100% below 110, which is foreground
     grass and dirt on every one of the six.

     24px, the same inset the copy already has on its left and right. */
  .psho__panel .psho__panel-body { opacity: 1; transform: none; bottom: 24px; }
  .psho__panel-label { display: none; }
  .psho__panel-link { position: static; display: inline-flex; margin: 0 0 24px 24px; }
}

/* Field specification under the description: dimensions and a seat count.
   Wraps to its own lines on a narrow slat rather than truncating a number. */
.psho__panel-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
  color: var(--color-white);
  opacity: .78;
}
.psho__spec { white-space: nowrap; }
.psho__spec-k { opacity: .62; margin-right: 6px; }