/* ==========================================================================
   "Watch and Listen".

   Proportions from the mockup at its 1920 canvas: the section is 884px tall,
   the text panel 469px wide and the video 1127px, both 575px tall and flush
   against each other — a 29.4 / 70.6 split. The panel's own ground is a darker
   Aubergine, sampled at rgb(86, 26, 73).
   ========================================================================== */

.gsjc-watch {
  --gsjc-watch-panel: #561a49;
  background: var(--gsjc-surface-feature);
  color: var(--gsjc-on-dark);

  /* Asymmetric, from the mockup. It puts 82px between the top of the Aubergine
     and the heading's cap, and 104px below the carousel — 58px and 74px once
     scaled to a 1290px container. The cap sits about 18px below the heading
     element's own top (half the leading, plus the gap above the cap), so the
     top padding is 58 - 18. A symmetric 96px put the cap at 114px, which is
     what made the section look top-heavy. */
  padding-block: 2.5rem 4.5rem;

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

/* Aligns with ordinary page content rather than inventing its own inset.
   Kadence's own container formula: its full content width, plus its edge
   padding. That is the pair that behaves at BOTH ends. Using
   --global-calc-content-width (the width already minus padding) with no padding
   is right on desktop and wrong on mobile, where 1242px cannot constrain a
   375px viewport and the content ends up flush against the screen edge while
   every paragraph sits 24px in. This way the inner lands on the same left edge
   as a paragraph, the header logo and the footer wordmark at every width. */
.gsjc-watch__inner {
  max-width: var(--global-content-width, var(--gsjc-container));
  margin-inline: auto;
  padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/* Two classes, not one. Kadence sets heading margins inside post content with
   a two-part selector, so a single class loses and the value here is simply
   ignored — which is why an earlier `margin: 0 0 4rem` silently rendered as
   Kadence's own 25.92px. 3rem puts 52px between the cap and the carousel,
   matching the mockup's 73px at its 1920 canvas. */
.gsjc-watch .gsjc-watch__title {
  margin: 0 0 3rem;
  font-size: var(--gsjc-fs-h1);
  color: var(--gsjc-on-dark);
}

/* Arrows sit either side of the slide rather than on top of it, so they never
   cover the video and need no absolute positioning to stay clear. */
.gsjc-watch__carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gsjc-space-md);
}

.gsjc-watch__nav {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--gsjc-accent);
  border-radius: var(--gsjc-radius-pill);
  background: transparent;
  color: var(--gsjc-accent);          /* 5.59:1 on Aubergine */
  cursor: pointer;
  transition: background-color 0.18s var(--gsjc-ease), color 0.18s var(--gsjc-ease);
}

.gsjc-watch__nav svg { width: 1.25rem; height: 1.25rem; }

.gsjc-watch__nav:hover,
.gsjc-watch__nav:focus-visible {
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);           /* 9.91:1 — never white on Ochre */
}

.gsjc-watch__slide {
  display: grid;
  grid-template-columns: 29.4% 70.6%;
  align-items: stretch;
}

/* [hidden] is set by the script; the theme reset makes it stick against the
   grid display above. */
.gsjc-watch__slide[hidden] { display: none; }

.gsjc-watch__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gsjc-space-2xs);
  padding: var(--gsjc-space-lg);
  background: var(--gsjc-watch-panel);
}

.gsjc-watch .gsjc-watch__slide-title {
  margin: 0;
  font-size: var(--gsjc-fs-h3);
  color: var(--gsjc-accent);          /* Ochre on the dark panel: 6.7:1 */
}

.gsjc-watch .gsjc-watch__desc {
  margin: 0;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-on-dark);
  line-height: var(--gsjc-lh-body);
}

.gsjc-watch .gsjc-watch__count {
  margin: var(--gsjc-space-xs) 0 0;
  font-size: var(--gsjc-fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gsjc-coral);           /* 5.09:1 on Aubergine */
}

/* --- The video, and its click-to-load facade ------------------------------ */
.gsjc-watch__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gsjc-umber);
}

.gsjc-watch__play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gsjc-watch__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gsjc-watch__play-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--gsjc-radius-pill);
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);
  transition: transform 0.18s var(--gsjc-ease);
}

.gsjc-watch__play-icon svg { width: 2rem; height: 2rem; margin-left: 0.15rem; }

.gsjc-watch__play:hover .gsjc-watch__play-icon,
.gsjc-watch__play:focus-visible .gsjc-watch__play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.gsjc-watch__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Narrow screens -------------------------------------------------------
   The arrows drop BELOW the slide rather than flanking it. Beside it they are
   in the grid's flow and take a fixed 40px each out of the row: at 375px that
   is 96px of a 327px track spent on two buttons, leaving a 231px-wide video —
   29% of the row given to navigation. Below, the slide gets the full width and
   the thumbnail goes from 231px to 327px.

   Placed by data-dir rather than a modifier class, which is the contract the
   markup and carousel.js already share; the buttons carry no --prev/--next. */
@media (max-width: 900px) {
  .gsjc-watch__slide { grid-template-columns: 1fr; }

  .gsjc-watch__carousel {
    grid-template-columns: auto auto;
    grid-template-areas:
      "slide slide"
      "prev  next";
    justify-content: end;
    gap: var(--gsjc-space-md) var(--gsjc-space-2xs);
  }

  .gsjc-watch__viewport            { grid-area: slide; }
  .gsjc-watch__nav[data-dir="-1"]  { grid-area: prev; }
  .gsjc-watch__nav[data-dir="1"]   { grid-area: next; }

  .gsjc-watch__nav { width: 2.75rem; height: 2.75rem; }
  .gsjc-watch__panel { padding: var(--gsjc-space-md); }
}