/* INICI BLOC PLAYER GLOBAL — estils del reproductor multimèdia persistent
 *
 * El node `.global-player` és germà de `.page` i ocupa la franja inferior
 * absoluta del viewport en QUALSEVOL breakpoint (z-index 270, per sobre del subnav-modal 265 i
 * de la bottom-bar mòbil base 260, i damunt la majoria del contingut; amb subnav obert la
 * bottom-bar puja temporalment (bottom-bar.css) per davant del player i del full.
 *
 * REGLA D'OR (única i universal):
 *   Tot element `position: fixed/sticky` ancorat al peu del viewport ha de sumar
 *   `var(--global-player-h, 0px)` al seu `bottom`. La variable CSS la manté el JS
 *   (global-player.js) sincronitzada amb l'alçada real del player; 0px quan tancat.
 *
 * Consumidors (totes les mides):
 *   · .page                — padding-bottom (reserva espai d'scroll per al contingut)
 *   · .scroll-fabs         — FABs flotants dret (navegació ràpida + info)
 *   · .scroll-fabs--sidebar — FABs columna de filtres
 * Consumidors mòbil (≤980px):
 *   · .subnav-panel        — bottom + transform de tancament
 *   · .subnav-backdrop     — bottom
 * Consumidors molt estret (≤520px):
 *   · .bottom-bar          — bottom (s'ancora per sobre del player en alçada; z inferior)
 *   · .sidebar             — bottom (suma bottom-bar + player + safe-area)
 *
 * En mode 'closed': display:none + --global-player-h = 0px (tot torna a la posició original).
 */

.global-player {
  /* Preset «Gran»: compartida amb el límit superior del resize per drag (vegeu global-player.js). */
  --global-player-video-height-lg: 50vh;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 270;
  background: var(--card);
  color: var(--text-strong);
  font-family: var(--font-ui);
  border-top: 3px solid var(--line);
  border-radius: 0;
  /* Cap amunt: el player es llegeix com a capa damunt del web (incl. ombra sobre la bottom-bar). */
  box-shadow: var(--shadow-viewport-foot-up);
  display: flex;
  flex-direction: column;
  /* Compatibilitat iOS: el contingut no es fica sota la safe-area inferior. */
  padding-bottom: env(safe-area-inset-bottom);
  /* Animació d'entrada/sortida: el player llisca des del peu cap amunt.
   * 400ms és prou visible perquè es noti com un element que s'incorpora/retira
   * al layout sense ser molest ni causar rebuig. */
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estat tancat real (init / després del slide-out): translateY(100%) el treu
 * del viewport. El JS aplica `display:none` un cop la transició ha acabat.
 *
 * Estat «en procés de tancar-se» (classe `is-closing`, aplicada via JS): el
 * MATEIX translateY(100%), però SENSE canviar `data-mode`. D'aquesta manera
 * els selectors `[data-mode="audio|video|embed"]` continuen vigents durant
 * tot el slide i els fills (__controls/__media/__size-bar/header) NO
 * col·lapsen via `display:none` en el primer frame: el `translateY` recorre
 * l'alçada completa real del player, simètric amb l'animació d'obertura. */
.global-player[data-mode="closed"],
.global-player.is-closing {
  transform: translateY(100%);
  pointer-events: none;
}

/* ── Capçalera ────────────────────────────────────────────────────────── */
.global-player__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.global-player__cover {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-submenu);
  flex: 0 0 auto;
}

.global-player__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.global-player__title {
  font-size: var(--font-md);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-player__sub {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-player__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__close:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__close svg { width: 18px; height: 18px; }

/* ── Barra de botons de mida (visible només en video/embed) ──────────── */
.global-player__size-bar {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.global-player[data-mode="video"] .global-player__size-bar,
.global-player[data-mode="embed"] .global-player__size-bar {
  display: flex;
}
.global-player__size-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__size-btn:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__size-btn.is-active {
  background: var(--color-primary-strong);
  color: var(--card);
}
.global-player__size-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__size-btn svg { width: 18px; height: 14px; }

/* Botó fullscreen: mateix espai que la resta (sense separador vertical) */
.global-player__size-btn--fs {
  border-radius: var(--radius-sm);
}
.global-player__size-btn--fs svg { width: 16px; height: 16px; }

/* Enllaç extern a YouTube (visible només quan hi ha vídeo YouTube actiu) */
.global-player__youtube-link {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: var(--ctrl-transition);
}
.global-player__youtube-link.is-available {
  display: inline-flex;
}
.global-player__youtube-link:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__youtube-link:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__youtube-link svg { width: 18px; height: 18px; }

/* ── Tooltips del capçalera (fixed al viewport; fora del player per overflow) ── */
.global-player__header-tooltip-wrap {
  position: fixed;
  z-index: 290;
  pointer-events: none;
  /* Contorn blanc 1px (filtre SVG) + ombra marcada; url() primer perquè afecti cos+pic junts */
  filter:
    url(#gp-header-tooltip-outline)
    drop-shadow(0 1px 3px rgba(var(--shadow-rgb), var(--opacity-60)))
    drop-shadow(0 5px 16px rgba(var(--shadow-rgb), var(--opacity-60)))
    drop-shadow(0 14px 36px rgba(var(--shadow-rgb), var(--opacity-50)));
}
.global-player__header-tooltip {
  position: relative;
  --gp-tooltip-arrow-size: 10px;
  background: var(--text-strong);
  color: var(--card);
  font-size: var(--font-md);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  max-width: min(400px, calc(100vw - 16px));
  white-space: normal;
  animation: gp-tooltip-in 200ms ease forwards;
}
/* Pic triangular que connecta el tooltip amb el botó ancorat (sense junta visible) */
.global-player__header-tooltip::after {
  content: '';
  position: absolute;
  top: var(--gp-tooltip-arrow-y, 50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: var(--gp-tooltip-arrow-size, 10px);
  transform: translateY(-50%);
}
.global-player__header-tooltip[data-tip-side="left"]::after {
  left: 100%;
  margin-left: -1px;
  border-left-color: var(--text-strong);
}
.global-player__header-tooltip[data-tip-side="right"]::after {
  right: 100%;
  margin-right: -1px;
  border-right-color: var(--text-strong);
}
.global-player__header-tooltip__body {
  display: block;
}
.global-player__header-tooltip__l1 {
  display: block;
}
.global-player__header-tooltip__l2 {
  display: block;
  font-weight: 600;
}
.global-player__header-tooltip .global-player__fs-svg {
  display: inline-block;
  vertical-align: -0.1em;
  width: 0.9em;
  height: 0.9em;
  margin-inline: 0.08em;
}
@keyframes gp-tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Drag handle (redimensionament per arrossegament) ─────────────────── */
/* Posicionat al SOSTRE del player (primer fill) per evitar que el cursor
 * entri dins l'iframe cross-origin on es perdria el pointermove.
 * Visible en TOTS els breakpoints (video/embed). En mòbil s'activa amb
 * pulsació llarga; en desktop amb pointerdown immediat. */
.global-player__drag-handle {
  display: none;
  height: 14px;
  margin-top: -3px;
  cursor: ns-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  touch-action: none;
}
.global-player[data-mode="video"] .global-player__drag-handle,
.global-player[data-mode="embed"] .global-player__drag-handle {
  display: block;
}
.global-player__drag-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-divider-soft);
  transition: background 0.2s ease, width 0.2s ease;
}
/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  .global-player__drag-handle:hover::after {
    background: var(--color-primary-strong);
  }
}
/* Long-press pendent (mòbil): canvi de color per indicar que s'activarà */
.global-player.is-longpress-pending .global-player__drag-handle::after {
  background: #CB5C77;
  width: 60px;
}
/* Resizing actiu (desktop i mòbil) */
.global-player.is-resizing .global-player__drag-handle::after {
  background: #CB5C77;
  width: 80px;
}
.global-player.is-resizing {
  user-select: none;
}
/* Durant el drag, bloquejem pointer-events a l'iframe per evitar que
 * el cursor quedi "atrapat" dins l'iframe cross-origin. */
.global-player.is-resizing .global-player__iframe {
  pointer-events: none;
}

/* ── Àrea de mitjans (vídeo / embed) ─────────────────────────────────── */
/*
 * L'alçada es controla via data-video-size (sm/md/lg) amb CSS. El mode
 * "custom" (drag) usa un height inline fixat per JS. La regla base
 * (display:none) s'aplica quan data-mode no és video/embed.
 */
.global-player__media {
  background: #000;
  width: 100%;
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}
.global-player[data-mode="video"] .global-player__media,
.global-player[data-mode="embed"] .global-player__media {
  display: block;
  overflow: hidden;
}

/* Mides del vídeo — controlades per data-video-size al root.
 * Totes en vh: proporcionals al viewport, mai grotesques en redimensionar.
 * max-height: 80vh com a cap absolut (inclou header+controls del player). */
.global-player[data-mode="video"],
.global-player[data-mode="embed"] {
  max-height: 80vh;
}
.global-player[data-video-size="sm"] .global-player__media { height: 25vh; }
.global-player[data-video-size="md"] .global-player__media { height: 40vh; }
.global-player[data-video-size="lg"] .global-player__media { height: var(--global-player-video-height-lg); }

.global-player__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Embed CCMA / 3Cat (vídeo ~16:9): l'àrea .global-player__media té alçada en vh;
 * amb iframe 100%×100% el rectangle és massa «alt» respecte l'amplada i el player
 * intern escala com a coberta → retalls als costats. Centrat + ratio amb max
 * manté el vídeo sencer (bandes laterals si cal).
 */
.global-player[data-mode="embed"][data-embed-aspect="16x9"] .global-player__media {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.global-player[data-mode="embed"][data-embed-aspect="16x9"] .global-player__iframe {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

/* ── Controls (visibles només en mode àudio) ─────────────────────────── */
.global-player__controls {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 8px;
  min-height: 44px;
}
.global-player[data-mode="audio"] .global-player__controls {
  display: flex;
}

.global-player__play {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-strong);
  color: var(--card);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__play:hover {
  background: var(--color-primary);
}
.global-player__play:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__play svg { width: 18px; height: 18px; }

.global-player__times {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 0;
}
.global-player__time-cur,
.global-player__time-dur { white-space: nowrap; }

.global-player__progress {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: var(--border-divider-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
  overflow: hidden;
  /* Tabindex per poder fer seek amb fletxes (gestionat al JS) */
}
.global-player__progress:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__buffer,
.global-player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.global-player__buffer { background: var(--actionable-line); }
.global-player__fill   { background: var(--color-primary-strong); }

.global-player__volume {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.global-player__vol-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted);
  cursor: pointer;
  transition: var(--ctrl-transition);
}
.global-player__vol-btn:hover {
  background: var(--ui-overlay-hover);
  color: var(--text-strong);
}
.global-player__vol-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.global-player__vol-btn svg { width: 18px; height: 18px; }

.global-player__vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 4px;
  background: var(--border-divider-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.global-player__vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  border: 2px solid var(--card);
  cursor: pointer;
}
.global-player__vol-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  border: 2px solid var(--card);
  cursor: pointer;
}

/* ── Adaptacions estretes (≤520px) ───────────────────────────────────── */
@media (max-width: 520px) {
  .global-player__times { font-size: var(--font-xs); }
  .global-player__vol-range { width: 60px; }
  .global-player__controls { padding: 4px 8px 6px; gap: 6px; }
  .global-player__header { padding: 6px 10px; }
  .global-player__title { font-size: var(--font-md-sm); }
  .global-player__size-btn { width: 24px; height: 24px; }
  .global-player__size-btn svg { width: 15px; height: 12px; }
  .global-player__youtube-link { width: 24px; height: 24px; }
  .global-player__youtube-link svg { width: 16px; height: 16px; }
}

/* En pantalles molt estretes amaguem el slider de volum (deixant el botó mute) */
@media (max-width: 380px) {
  .global-player__vol-range { display: none; }
}

/* ── Reserva d'espai per al contingut (tots els breakpoints) ─────────── */
/*
 * .page és el contenidor principal del contingut SPA (flex column, min-height:100%).
 * Afegint padding-bottom = var(--global-player-h) al peu fem que el scroll-max
 * del document creixi exactament l'alçada del player; així cap contingut en
 * flux normal queda tapat (l'usuari sempre pot fer scroll per veure'l).
 *
 * Es manté independent del padding-bottom intern de .main i .mobile-section
 * (definit a layout.css per reservar espai a la bottom-bar en mòbil): aquestes
 * són dues reserves ortogonals que se sumen sense duplicar-se.
 *
 * Transició: en obrir/tancar el player, --global-player-h canvia en un sol
 * frame (de 0 a Xpx o viceversa). El `padding-bottom` interpola en 400ms,
 * la MATEIXA durada i corba que el `translateY` del player i el `bottom`
 * de bottom-bar/FABs. Així tota la coreografia de peu de viewport es mou
 * en lockstep, sense salts visibles quan la pàgina té scroll proper al peu.
 */
.page {
  padding-bottom: var(--global-player-h, 0px);
  transition: padding-bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── FABs (totes les mides) ──────────────────────────────────────────── */
/*
 * Sobreescriu la regla base de css/scroll-fabs.css per afegir --global-player-h
 * a la fórmula. global-player.css es carrega DESPRÉS de scroll-fabs.css, per
 * tant aquesta declaració guanya la cascada amb la mateixa especificitat.
 */
.scroll-fabs,
.scroll-fabs--sidebar {
  bottom: calc(
    var(--space-3) +
    var(--bottom-bar-h, 0px) +
    var(--global-player-h, 0px) +
    env(safe-area-inset-bottom)
  );
  transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Subnav-modal i el seu panell (≤980px) ───────────────────────────── */
/*
 * El modal (.subnav-modal) té z-index inferior al del player (.global-player): el full és sota la
 * franja del reproductor. La bottom-bar nominal segueix sota el player per l’ombre; mentre
 * `body.subnav-open`, la barra puja damunt tant del modal com del player (bottom-bar.css).
 * En tancat ha de quedar COMPLETAMENT fora del viewport — d'aquí ve l'overríide del `transform`:
 * el de base (bottom-bar.css) només considera --bottom-bar-h, però com que
 * el `bottom` puja --global-player-h, el `translateY` també ha d'augmentar
 * la mateixa magnitud per mantenir la invisibilitat del panell tancat
 * (si no, queda un sliver superior visible just sobre el player, on cau el
 *  botó "Tancar" sticky).
 */
@media (max-width: 980px) {
  .subnav-panel {
    bottom: calc(
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
    transform: translateY(calc(
      100% +
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px)
    ));
    max-height: min(
      62vh,
      calc(100vh - var(--bottom-bar-h, 0px) - var(--global-player-h, 0px) - 120px)
    );
  }
  .subnav-backdrop {
    bottom: calc(
      max(var(--bottom-bar-h, 0px), 72px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
  }
}

/* ── Bottom-bar i sidebar drawer (≤520px) ────────────────────────────── */
@media (max-width: 520px) {
  /* Alçada: la barra se situa sobre el player; z-index inferior → el player (i l’ombra) es veu damunt. */
  .bottom-bar {
    bottom: var(--global-player-h, 0px);
    transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* El sidebar drawer (filtres) ja compta amb --bottom-bar-h;
   * afegim el player perquè no l'amagui parcialment. */
  .sidebar {
    bottom: calc(
      var(--bottom-bar-h, 0px) +
      var(--global-player-h, 0px) +
      env(safe-area-inset-bottom)
    );
  }
}

/* FI BLOC PLAYER GLOBAL */