/* ==========================================================================
   Manuel Sanguino — "Listen & watch" video gallery (media.html, es/media.html)
   Uses the site's own tokens, fonts and easing (css/site.css).

   An archive of performances set like a programme: each film is numbered,
   the composer sits above the work in spaced capitals, the movement below in
   italic. Six compositions follow one another, each answering the last:
     feature  — a wide film, its title on a panel cut into the lower corner
     right    — a deeper crop on the right, the title hung from the top left
     left     — a smaller film set low on the left, title resting on its base
     pano     — a panoramic plate across the page, a caption line beneath
     overlap  — a film on the right, its title panel laid over the left edge
     caption  — a closing film, set in, with a short caption under it
   ========================================================================== */

.vx { display: block; }
/* Two light grey columns, top to bottom, two grid columns in from each side
   (laptop and wider). They are the gallery's bottom layer: the films at the
   sides pass over them, and the title panels carry them on behind the text
   (see .vx-text below). */
@media (min-width: 901px) {
  .vx {
    position: relative;
    isolation: isolate;
    container-type: inline-size;         /* lets the title panels measure the gallery (cqw) */
    --vx-cw: clamp(20px, 2.2vw, 36px);   /* column width */
    --vx-g: clamp(16px, 2vw, 32px);      /* the films' column gap (.vx-item) */
    --vx-col: #f1f1f1;
    /* left edge of each column, from the gallery's left side */
    --vx-xl: calc(2 * (100cqw - 11 * var(--vx-g)) / 12 + var(--vx-g) - var(--vx-cw));
    --vx-xr: calc(100cqw - 2 * (100cqw - 11 * var(--vx-g)) / 12 - var(--vx-g));
  }
  .vx::before,
  .vx::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: var(--vx-cw);
    background: var(--vx-col);
    pointer-events: none;
  }
  .vx::before { left: calc(2 * (100% - 11 * var(--vx-g)) / 12 + var(--vx-g) - var(--vx-cw)); }
  .vx::after { right: calc(2 * (100% - 11 * var(--vx-g)) / 12 + var(--vx-g) - var(--vx-cw)); }
  :root[data-theme="dark"] .vx { --vx-col: #131313; }
}

/* ---------- One entry (the whole entry is the play button) --------------- */
.vx-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.vx-item + .vx-item { margin-top: clamp(88px, 11vw, 200px); }
.vx-item:focus-visible { outline: none; }
.vx-item:focus-visible .vx-frame { outline: 2px solid var(--tx-title); outline-offset: 4px; }

/* ---------- The picture -------------------------------------------------- */
.vx-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #121110;
  /* a soft gold line, set a little off the picture, only on the side that
     faces the text (--dx / --dy: -1, 0 or 1, set per composition) */
  box-shadow:
    calc(var(--dx) * var(--vx-o)) calc(var(--dy) * var(--vx-o)) 0 0 var(--bg),
    calc(var(--dx) * (var(--vx-o) + var(--vx-w))) calc(var(--dy) * (var(--vx-o) + var(--vx-w))) 0 0 var(--vx-line);
  transition: box-shadow 0.6s var(--ease);
}
.vx-item {
  --dx: 0; --dy: 0;
  --vx-o: clamp(8px, 0.9vw, 14px);
  --vx-w: clamp(5px, 0.55vw, 8px);
  --vx-line: color-mix(in srgb, var(--tx-accent) 16%, transparent);
}
/* where the title panel is cut into the picture, the line follows the cut */
.vx-text::before,
.vx-text::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--vx-line);
  transition: background-color 0.6s var(--ease);
  display: none;
}
.vx-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* one quiet, shared treatment so films from different rooms sit together */
  filter: saturate(0.78) contrast(1.04) brightness(0.9);
  transform: scale(1.001);
  transition: transform 1.8s var(--ease), filter 0.9s var(--ease);
}
/* stills with black bars at the sides: widened so the bars fall outside */
.vx-frame--boxed .vx-poster { left: -5.56%; width: 111.12%; }

/* a soft shade only in the corner that carries the play mark */
.vx-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(110% 85% at var(--shade, 0% 100%), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 52%);
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
/* hover: a hairline passe-partout draws in from the edge of the picture */
.vx-frame::after {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.4vw, 22px);
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s var(--ease), transform 1.1s var(--ease);
  pointer-events: none;
}

/* ---------- Play mark: a square, like every other box on the site -------- */
.vx-play {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.6vw, 40px);
  bottom: clamp(20px, 2.6vw, 40px);
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
}
.vx-play__mark {
  display: grid;
  place-items: center;
  width: clamp(50px, 4.4vw, 66px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), color 0.6s var(--ease);
}
.vx-play__mark svg { width: 30%; height: auto; margin-left: 9%; overflow: visible; }
.vx-play__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
/* entries whose text sits at the lower left carry the mark at the lower right */
.vx-item--right .vx-play,
.vx-item--pano .vx-play,
.vx-item--caption .vx-play { left: auto; right: clamp(20px, 2.6vw, 40px); flex-direction: row-reverse; }
.vx-item--right .vx-play__label,
.vx-item--pano .vx-play__label,
.vx-item--caption .vx-play__label { transform: translateX(10px); }
.vx-item--right .vx-frame,
.vx-item--pano .vx-frame,
.vx-item--caption .vx-frame { --shade: 100% 100%; }

/* ---------- Text: composer / work / movement ----------------------------- */
.vx-text { position: relative; z-index: 3; display: block; }
.vx-head, .vx-foot { display: block; }
.vx-index {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 30px);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tx-meta);
}
.vx-index::after {
  content: '';
  width: clamp(28px, 3vw, 48px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.vx-composer {
  display: block;
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-accent);
}
.vx-work {
  display: block;
  max-width: 20ch;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--tx-bronze);
  text-wrap: balance;
}
.vx-sub {
  display: block;
  margin-top: 14px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.4;
  color: var(--tx-subtitle);
}
.vx-sub:empty { display: none; }
.vx-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(22px, 2.4vw, 34px);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-title);
  transition: color 0.5s var(--ease);
}
.vx-cta::after {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}

/* ---------- Hover and keyboard focus ------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .vx-item:hover .vx-poster { transform: scale(1.035); filter: saturate(1) contrast(1) brightness(0.97); }
  .vx-item:hover { --vx-line: color-mix(in srgb, var(--tx-accent) 30%, transparent); }
  .vx-item:hover .vx-frame::before { opacity: 0.75; }
  .vx-item:hover .vx-play__mark { background: #fff; border-color: #fff; color: #000; }
  .vx-item:hover .vx-play__label { opacity: 1; transform: none; }
  .vx-item:hover .vx-index::after { transform: scaleX(1.6); }
  .vx-item:hover .vx-cta { color: var(--tx-accent); }
  .vx-item:hover .vx-cta::after { transform: scaleX(1.9); }
}
.vx-item:focus-visible .vx-poster { filter: saturate(1) contrast(1) brightness(0.97); }
.vx-item:focus-visible .vx-play__mark { background: #fff; border-color: #fff; color: #000; }
.vx-item:focus-visible .vx-play__label { opacity: 1; transform: none; }
.vx-item:focus-visible .vx-cta { color: var(--tx-accent); }

/* ---------- Desktop and tablet landscape: six compositions --------------- */
/* Every title sits on a panel cut into a lower corner of its film, as in the
   first entry, so each description stays with its own film and well clear of
   the next. The corner swaps sides (right, left, right, ...) while the film's
   width and place on the page change each time. A soft gold line runs along
   the cut, only where the panel meets the picture. */
@media (min-width: 901px) {
  .vx-item {
    --P: clamp(28px, 3.2vw, 56px);   /* panel padding on the sides that meet the picture */
    --H: clamp(56px, 7vw, 120px);    /* how far the panel hangs below the picture */
    --lw: 50%;                       /* how much of the panel's width lies over the picture */
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));   /* two make one of a 12-column grid */
    column-gap: var(--vx-g);
    align-items: end;
  }
  .vx-item + .vx-item { margin-top: clamp(170px, 18vw, 300px); }
  .vx-frame, .vx-text { grid-row: 1; }
  .vx-text { margin-bottom: calc(-1 * var(--H)); }
  /* a title panel carries the strip of a grey column it crosses, so the column
     runs on behind the text (--pl: the panel's first grid line, set below) */
  .vx-text {
    --x0: calc((var(--pl, 1) - 1) * ((100cqw - 23 * var(--vx-g)) / 24 + var(--vx-g)));
    background:
      linear-gradient(var(--vx-col), var(--vx-col)) calc(var(--vx-xl) - var(--x0)) 0 / var(--vx-cw) 100% no-repeat,
      linear-gradient(var(--vx-col), var(--vx-col)) calc(var(--vx-xr) - var(--x0)) 0 / var(--vx-cw) 100% no-repeat,
      var(--bg);
  }
  .vx-text::before, .vx-text::after { display: block; top: var(--vx-o); }
  .vx-text::before { height: var(--vx-w); width: var(--lw); }
  .vx-text::after { width: var(--vx-w); height: calc(100% - var(--H) - var(--vx-o)); }

  /* lower right corner: Schumann, Liszt, Prinses Christina */
  .vx-item--feature .vx-text, .vx-item--left .vx-text, .vx-item--overlap .vx-text { padding: var(--P) 0 0 var(--P); }
  .vx-item--feature .vx-text::before, .vx-item--left .vx-text::before, .vx-item--overlap .vx-text::before,
  .vx-item--feature .vx-text::after,  .vx-item--left .vx-text::after,  .vx-item--overlap .vx-text::after { left: var(--vx-o); }

  /* lower left corner: Rachmaninoff, Beethoven, the closing film.
     The text is set flush right, against the picture. */
  .vx-item--right .vx-text, .vx-item--pano .vx-text, .vx-item--caption .vx-text { padding: var(--P) var(--P) 0 0; text-align: right; }
  .vx-item--right .vx-text::before, .vx-item--pano .vx-text::before, .vx-item--caption .vx-text::before,
  .vx-item--right .vx-text::after,  .vx-item--pano .vx-text::after,  .vx-item--caption .vx-text::after { right: var(--vx-o); }
  .vx-item--right .vx-work, .vx-item--pano .vx-work, .vx-item--caption .vx-work,
  .vx-item--right .vx-sub,  .vx-item--pano .vx-sub,  .vx-item--caption .vx-sub { margin-left: auto; }
  .vx-item--right .vx-cta, .vx-item--pano .vx-cta, .vx-item--caption .vx-cta { flex-direction: row-reverse; }
  .vx-item--right .vx-cta::after, .vx-item--pano .vx-cta::after, .vx-item--caption .vx-cta::after { transform-origin: right; }

  /* All six films share one size: 13 of 24 columns (about half the window, like
     the videos in Daniil Trifonov's Discover section, a little smaller) and
     their 800:490 shape. The rhythm comes from where each one sits and which
     corner carries its title; each panel overlaps its film by four columns. */
  .vx-item .vx-frame { aspect-ratio: 800 / 490; }
  .vx-item { --lw: 38%; }

  /* 1 Schumann: from the left edge, panel lower right */
  .vx-item--feature .vx-frame { grid-column: 1 / 14; }
  .vx-item--feature .vx-text { grid-column: 10 / 20; --pl: 10; }
  .vx-item--feature .vx-work { font-weight: 300; font-size: clamp(36px, 3.8vw, 62px); line-height: 1.03; max-width: 14ch; }

  /* 2 Rachmaninoff: to the right edge, panel lower left */
  .vx-item--right .vx-frame { grid-column: 12 / 25; }
  .vx-item--right .vx-text { grid-column: 6 / 16; --pl: 6; }

  /* 3 Liszt: set in one column from the left, panel lower right */
  .vx-item--left .vx-frame { grid-column: 3 / 16; }
  .vx-item--left .vx-text { grid-column: 12 / 22; --pl: 12; }

  /* 4 Beethoven: set in one column from the right, panel lower left */
  .vx-item--pano .vx-frame { grid-column: 10 / 23; }
  .vx-item--pano .vx-text { grid-column: 4 / 14; --pl: 4; }

  /* 5 Prinses Christina: from the left edge, panel lower right */
  .vx-item--overlap .vx-frame { grid-column: 1 / 14; }
  .vx-item--overlap .vx-text { grid-column: 10 / 20; --pl: 10; }

  /* 6 closing film: to the right edge, panel lower left */
  .vx-item--caption .vx-frame { grid-column: 12 / 25; }
  .vx-item--caption .vx-text { grid-column: 6 / 16; --pl: 6; }
}

/* With a mouse: at rest each title panel sits just below its film, leaving the
   picture whole. Pointing at the film or at its title slides the panel up into
   the film's corner and the gold line draws in along the cut. Only the film
   and the title respond to the pointer, not the empty space around them. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .vx-item { pointer-events: none; }
  .vx-frame, .vx-text { pointer-events: auto; }
  .vx-item + .vx-item { margin-top: clamp(240px, 24vw, 400px); }
  .vx-text {
    transform: translateY(calc(100% - var(--H)));
    transition: transform 0.8s var(--ease);
  }
  .vx-text::before, .vx-text::after { opacity: 0; transition: opacity 0.5s var(--ease), background-color 0.6s var(--ease); }
  .vx-item:hover .vx-text,
  .vx-item:focus-visible .vx-text { transform: none; }
  .vx-item:hover .vx-text::before, .vx-item:hover .vx-text::after,
  .vx-item:focus-visible .vx-text::before, .vx-item:focus-visible .vx-text::after { opacity: 1; transition-delay: 0.25s; }
}

/* ---------- Phones and tablets upright: one column ------------------------ */
/* the same cut corner, the panel set in from alternate sides */
@media (max-width: 900px) {
  .vx-item + .vx-item { margin-top: clamp(72px, 14vw, 120px); }
  .vx-item--right .vx-frame,
  .vx-item--overlap .vx-frame { aspect-ratio: 4 / 3; }
  .vx-text { margin: -56px 0 0 14%; padding: 24px 0 0 24px; background: var(--bg); }
  .vx-item:nth-child(even) .vx-text { margin: -56px 14% 0 0; padding: 24px 24px 0 0; }
  .vx-text::before { display: block; top: 10px; left: 10px; right: 0; height: 5px; }
  .vx-text::after { display: block; top: 10px; left: 10px; width: 5px; height: 46px; }
  .vx-item:nth-child(even) .vx-text::before { left: 0; right: 10px; }
  .vx-item:nth-child(even) .vx-text::after { left: auto; right: 10px; }
  .vx-item--feature .vx-work { font-weight: 300; font-size: clamp(32px, 7.5vw, 46px); line-height: 1.05; }
  .vx-work { font-size: clamp(25px, 5.6vw, 34px); }
  .vx-play__mark { width: 48px; }
  .vx-play { bottom: 76px !important; }
  .vx-play__label { display: none; }
  .vx-foot .vx-sub { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-poster, .vx-frame, .vx-frame::after, .vx-play__label, .vx-text { transition: none !important; }
  .vx-item:hover .vx-poster { transform: none; }
}