/* ClipBoost Spain — before / after slider ("Así cambia un clip").
   Plain CSS on the site tokens (falls back to its own values if a token is missing).
   The divider is the timeline's red playhead: a red line with a flag on top and a grip in the middle.
   Without the script (html:not(.js)) the two frames simply sit side by side, each with its label. */

/* ---------- The block inside the screening room ---------- */
.ba { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line, rgba(236, 235, 231, .14)); }
.ba__head { display: grid; gap: 10px 48px; margin-bottom: 26px; }
.ba__kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font-family: var(--f-mono, ui-monospace, monospace); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink, #FF6A52);
}
.ba__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #FF4B2F); }
.ba__title {
  font-family: var(--f-display, "Arial Narrow", sans-serif); font-stretch: 68%; font-weight: 820; text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 3.4rem); line-height: .92; letter-spacing: -.003em; margin: 0; max-width: 14ch; text-wrap: balance;
}
.ba__title em { font-style: normal; color: var(--accent, #FF4B2F); }
.ba__lead { color: var(--ink-2, #A6A8AD); max-width: 50ch; margin: 0; }
.ba__lead strong { color: var(--ink, #ECEBE7); font-weight: 650; }
@media (min-width: 1000px) {
  .ba { margin-top: 80px; padding-top: 36px; }
  .ba__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; margin-bottom: 32px; }
}

.ba__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
@media (min-width: 900px) {
  .ba__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 24px; }
  .ba__item--lead { grid-column: 1 / -1; }
}
.ba__item { margin: 0; min-width: 0; }
.ba__item figure { margin: 0; }
.ba__cap { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: .95rem; line-height: 1.45; color: var(--ink-2, #A6A8AD); }
.ba__tc {
  flex: none; padding: 2px 6px; border: 1px solid var(--line-strong, rgba(236, 235, 231, .4));
  font-family: var(--f-mono, ui-monospace, monospace); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ink, #ECEBE7); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ba__name { color: var(--ink, #ECEBE7); font-weight: 650; }
@media (min-width: 900px) { .ba__item--lead .ba__cap { font-size: 1.0625rem; } }

/* ---------- The slider ---------- */
.ba-slider {
  --ba-pos: 50%;
  --ba-red: #FF4B2F;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; isolation: isolate;
  touch-action: pan-y;               /* vertical swipes still scroll the page; horizontal ones drag */
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(236, 235, 231, .1);
}
.ba-slider__before, .ba-slider__after { position: absolute; inset: 0; }
.ba-slider__after { clip-path: inset(0 0 0 var(--ba-pos)); }
.ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; -webkit-user-drag: none;
}

/* Labels in the corners, like the HUD on the sample viewer. Each one lives in its own layer, so it is
   covered (left) or clipped (right) as soon as the divider moves over it. */
.ba-slider__tag {
  position: absolute; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px;
  font-family: var(--f-mono, ui-monospace, monospace); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: rgba(0, 0, 0, .62);
}
.ba-slider__tag--before { left: 10px; }
.ba-slider__tag--after { right: 10px; }
.ba-slider__tag--before::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ba-slider__tag--after::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ba-red); }

/* The playhead (made by ba-slider.js): 44 px wide hit area, a 2 px red line, a flag on top, a grip */
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos); z-index: 2;
  width: 44px; margin-left: -22px; outline: none; cursor: ew-resize; touch-action: pan-y;
}
.ba-slider__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--ba-red); box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
}
.ba-slider__handle::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 13px; margin-left: -8px;
  background: var(--ba-red); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.ba-slider__knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 2px;
  background: var(--ba-red); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.ba-slider__knob svg { width: 26px; height: 14px; display: block; }
.ba-slider__handle:focus-visible .ba-slider__knob { outline: 3px solid #fff; outline-offset: 3px; }
.ba-slider__hint {
  position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%);
  padding: 3px 6px; white-space: nowrap; pointer-events: none;
  font-family: var(--f-mono, ui-monospace, monospace); font-stretch: 87.5%; font-size: .75rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .62);
}
.ba-slider[data-ba-touched] .ba-slider__hint { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .ba-slider__knob { transition: transform .15s ease-out; }
  .ba-slider.is-dragging .ba-slider__knob { transform: translate(-50%, -50%) scale(1.1); }
  .ba-slider__hint { transition: opacity .25s, visibility .25s; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ba-slider:hover .ba-slider__knob { transform: translate(-50%, -50%) scale(1.06); }
}
/* Phones: the grip a touch smaller so it hides less of the frame (hit area stays 44 px) */
@media (max-width: 599px) {
  .ba-slider__knob { width: 40px; height: 40px; }
  .ba-slider__tag { top: 8px; padding: 4px 6px; }
  .ba-slider__tag--before { left: 8px; }
  .ba-slider__tag--after { right: 8px; }
}
/* Windows high contrast: keep the line, the grip and the focus ring visible */
@media (forced-colors: active) {
  .ba-slider__handle::before, .ba-slider__handle::after { background: Highlight; }
  .ba-slider__knob { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .ba-slider__handle:focus-visible .ba-slider__knob { outline-color: Highlight; }
}

/* ---------- No script: the two frames side by side, both labelled ---------- */
html:not(.js) .ba-slider {
  aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  cursor: auto; touch-action: auto; box-shadow: none;
}
html:not(.js) .ba-slider__before, html:not(.js) .ba-slider__after { position: relative; inset: auto; aspect-ratio: 16 / 9; clip-path: none; }