/* Split-media widget (voucher / case-study split): image / video / YouTube facade.
 * The section CSS owns the column sizing (flex 50%), radius and background;
 * these rules own the media fill, aspect ratio and playback controls. */

.smedia { position: relative; overflow: hidden; display: block; }
.smedia__video,
.smedia__iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* Cover: media fills the column height (legacy behaviour, no explicit ratio). */
.smedia--cover .smedia__video { position: absolute; inset: 0; }

/* Ratio: fixed aspect ratio; keep the 50% column width but don't stretch to row height. */
.smedia--ratio { aspect-ratio: var(--media-ratio); height: auto; align-self: center; }

/* A <video> box is painted black behind the frame, and the cover-scaled frame is
   rounded to whole pixels — on fractional container widths (grid tracks!) that
   leaves a 1px black slit down one edge. Bleed the video 1px past the box; the
   wrapper's overflow:hidden trims it. Images don't need this (hence `video.`). */
video.smedia__video {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
  max-width: none; /* base.css caps media at max-width:100%, which would eat the bleed */
}
.smedia--cover video.smedia__video { inset: -1px; margin: 0; }

/* Bottom gradient scrim (voucher). */
.smedia__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%);
}

/* --- Self-hosted video --- */
.smedia--video[data-smedia-play="click"] { cursor: pointer; }

.smedia__sound {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  /* Client: reveal on hover only — the badge sat permanently on every tile. */
  opacity: 0;
  transition: opacity .2s ease;
}
.smedia:hover .smedia__sound,
.smedia:focus-within .smedia__sound,
.smedia.is-playing:not(.is-muted) .smedia__sound { opacity: 1; }
/* Touch screens have no hover — keep it visible so sound stays reachable. */
@media (hover: none) {
  .smedia__sound { opacity: 1; }
}
.smedia__sound svg { width: 36px; height: 36px; }
/* Muted indicator: diagonal slash over the badge (video starts muted). */
.smedia__sound::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, .45);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  transition: opacity .15s ease;
}
.smedia.is-muted .smedia__sound::after { opacity: 1; }

.smedia__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 13, 13, .5);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
.smedia--video[data-smedia-play="click"]:hover .smedia__play,
.smedia--video[data-smedia-play="click"]:not(.is-playing) .smedia__play { opacity: 1; }
.smedia__play-ico { display: none; }
.smedia__play-ico svg { width: 28px; height: 28px; display: block; }
.smedia__play-ico--play { display: flex; }
.smedia.is-playing .smedia__play-ico--play { display: none; }
.smedia.is-playing .smedia__play-ico--pause { display: flex; }

/* --- YouTube facade ---
   Class name MUST match udi_split_media_html(), which builds it as
   `smedia--<kind>` → `smedia--youtube`. It used to read `.smedia--yt`, so none of
   these rules applied and the <button> kept the UA `padding: 1px 6px` — the
   thumbnail sat inset by 6px and the parent's grey showed as stripes down both
   sides, with square corners inside a rounded tile. */
.smedia--youtube {
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--color-grey-200);
  color: #fff;
  text-align: left;
  /* No border-radius here: the section wrap class owns the radius (see header).
     This file loads after section CSS, so a value here (even `inherit`) would
     override e.g. .article__media-frame's radius-s and square the corners. */
}
.smedia__play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .2s ease;
}
.smedia__play-badge svg { width: 100%; height: 100%; display: block; }
.smedia--youtube:hover .smedia__play-badge { transform: scale(1.06); }
.smedia--youtube.is-playing .smedia__play-badge { display: none; }
.smedia__iframe { position: absolute; inset: 0; }

/* Mobile: both play affordances drop well below the desktop size — at 64px they
   swallowed a mosaic tile. */
@media (max-width: 600px) {
  .smedia__play-badge { width: 44px; height: 44px; }
  .smedia__play { width: 44px; height: 44px; }
  .smedia__play-ico svg { width: 20px; height: 20px; }
  .smedia__sound { top: 8px; left: 8px; width: 32px; height: 32px; }
  .smedia__sound svg { width: 32px; height: 32px; }
}