/* ================================================================
   filters-docked.css — Tauler de filtres acoblat (dropdown) en mòbil
   ----------------------------------------------------------------
   Paradigma genèric per a TOTES les seccions de filtres (agenda,
   catàleg, estadístiques, debat, formació, recursos): substitueix el
   botó flotant «Filtres» + calaix lateral per un panell acoblat dins
   la capçalera de resultats. Escriptori (≥981px) intacte.

   El mecanisme s'enganxa via data-attributes estàndard anotats als
   elements reals de cada secció (veure js/ui/docked-filters.js):
     [data-filters-section]  arrel de la secció
     [data-filter-controls]  bloc de controls (l'<aside class="sidebar">)
     [data-filters-home]      placeholder de la posició d'escriptori
     [data-results-card]      card de resultats
     [data-results-count]     comptador (opcional)
     [data-docked-filters]    panell acoblat (injectat per JS)
     [data-docked-body]       cos del panell (mount mòbil dels controls)
   ================================================================ */

/* El botó flotant antic "Filtres" s'amaga mentre no se suprimeixi del marcat */
.filters-toggle { display: none !important; }

/* ════════ PANELL ACOBLAT (dropdown body) — base ════════ */
.docked-filters {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--card);
  transition: max-height .50s cubic-bezier(.22,.61,.36,1), opacity .50s ease;
}
.docked-filters.is-open {
  max-height: min(76vh, 720px);
  overflow-y: auto;
  opacity: 1;
  border-top: 1px solid var(--actionable-line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Evita que l’aparició del scrollbar redueixi l’amplada dels camps en teclejar. */
  scrollbar-gutter: stable;
}
.docked-filters__body {
  padding: 10px 10px 14px;
  max-width: 100%;
  overflow-x: clip;
}
.docked-filters__body .card.filters,
.docked-filters__body .simple-filters-card { box-shadow: none; }

/* Afordança del subheader: en escriptori la fila és transparent i el botó s'amaga */
.subheader-row { display: contents; }
.subheader-toggle { display: none; }

/* ════════ MÒBIL / TAULETA (≤980px) ════════ */
@media (max-width: 980px) {

  /* Llista a tota l'amplada: fora caixa/marges/ombra de la card de resultats.
     padding-bottom de .main es conserva (reserva de la bottom-bar a ≤520px). */
  .main { padding-top: 0; padding-left: 0; padding-right: 0; }
  .content { padding: 0; }
  [data-results-card] {
    border: 1px solid var(--card-border-color);
    border-radius: 0;
    box-shadow: none;
    background: var(--card);
  }

  /* El bloc de controls (l'<aside>) viu, en mòbil, dins el panell acoblat:
     el node original a .main-layout queda amagat (el JS el relocalitza). */
  .main-layout > .sidebar { display: none !important; }

  /* L'<aside class="sidebar"> reubicat dins el panell: estàtic, sense chrome de calaix.
     pointer-events només quan el panell està obert (si no, el sidebar invisible intercepta clics). */
  [data-docked-body] > .sidebar {
    position: static; inset: auto; width: 100%; min-width: 0; height: auto;
    z-index: auto; pointer-events: none; display: block;
  }
  .docked-filters.is-open [data-docked-body] > .sidebar {
    pointer-events: auto;
  }
  [data-docked-body] > .sidebar > .sidebar-panel {
    position: static; left: auto; top: auto; right: auto; bottom: auto;
    width: 100%; min-width: 0; height: auto; max-height: none;
    background: transparent; transition: none;
    padding: 0; padding-bottom: 0; overflow: visible;
  }
  [data-docked-body] .sidebar-backdrop,
  [data-docked-body] .sidebar-close-sticky,
  [data-docked-body] .sidebar-top { display: none !important; }

  /* Frontera subtil entre pis de navegació i pis de filtres */
  .topbar { box-shadow: none; border-bottom: 1px solid var(--border-subtle); }

  /* Subheader sticky sota el topbar; línia de plec + botó a cavall.
     `--docked-fold-pad-above` és l'ÚNIC mecanisme del marge inferior del header
     (entre els chips i la línia de plec) en compact/mòbil; els chips no hi
     afegeixen padding-bottom per evitar doble compte. */
  [data-results-card] {
    --docked-fold-pad-above: 2px;        /* header: marge per sobre del separador / botó */
    --docked-fold-gutter-closed: 14px;   /* sota separador amb filtres tancats (llista) */
    --docked-fold-panel-pad-top: 4px;    /* cap del desplegable (sota el botó de plec) */
    --docked-fold-toggle-overhang: 15px; /* meitat inferior del botó sota el plec */
    --docked-fold-panel-content-pad-top: 8px; /* padding superior del card de filtres dins el panell */
    --docked-filters-bg: var(--results-header-bg);
  }
  [data-results-card] > .results-header {
    position: sticky;
    top: var(--topbar-height, 64px);
    z-index: 20;
    display: grid;
    align-items: stretch;
    background: var(--results-header-bg);
    border: 0;
    border-radius: 0;
    /* El botó de plec penja meitat sota la línia (translateY(50%)): no retallar. */
    overflow: visible;
    /* padding inferior = marge sobre la línia + meitat del botó dins el header */
    padding: 0;
    padding-bottom: calc(var(--docked-fold-pad-above) + var(--docked-fold-toggle-overhang));
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 14px -9px rgba(var(--shadow-rgb), .55);
  }
  /* Separador de la zona plegada: marca on acaba el resum i comença el plec */
  [data-results-card] > .results-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
    pointer-events: none;
    z-index: 1;
  }

  /* Fila 1: fil d'Ariadna (esquerra) + comptador (dreta).
     El botó de plec viu al final del header, posicionat absolut. */
  .results-breadcrumb {
    display: flex;
    min-width: 0;
    font-size: var(--font-2xl);
  }
  .subheader-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
  }
  .results-count {
    display: block; margin: 0;
    font-family: var(--font-ui); font-weight: 900; font-size: var(--font-md);
    color: var(--ink); white-space: nowrap;
  }

  /* Botó de plec: meitat per sobre i meitat per sota de la línia de separació */
  .subheader-toggle {
    position: absolute;
    right: 14px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 22;
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-ui); font-weight: 800; font-size: var(--font-sm); line-height: 1;
    color: var(--card);
    background: var(--color-primary-strong);
    border: 1px solid var(--color-primary-strong);
    border-radius: 999px; padding: 8px 13px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .14);
    appearance: none;
    -webkit-appearance: none;
  }
  /* Filtres tancats: ombra cap avall a la meitat inferior del botó (sota el plec) */
  [data-results-card]:not(.is-editing) > .results-header .subheader-toggle {
    box-shadow:
      0 1px 3px rgba(var(--shadow-rgb), .12),
      0 5px 14px rgba(var(--shadow-rgb), .26);
  }
  .subheader-toggle .ico { width: 15px; height: 15px; flex-shrink: 0; }
  .subheader-toggle .chev {
    width: 9px; height: 9px; flex-shrink: 0;
    border-right: 2.3px solid currentColor; border-bottom: 2.3px solid currentColor;
    transform: rotate(45deg); transition: transform .50s ease; margin-left: 1px;
  }
  .results.is-editing .subheader-toggle .chev { transform: rotate(-135deg); margin-top: 3px; }

  /* Fila 2: resum de l'estat (chips interactius: ×, tipus agenda, etc.).
     Ample complet sota el fil d'Ariadna + comptador. Separació per dalt amb
     `--space-2`; el marge inferior cap a la línia de plec el dona la reserva
     del header (`--docked-fold-pad-above`), no un padding-bottom propi. */
  .results-chips-row,
  .agenda-type-chips-bar:not(.results-chips-row *),
  .active-filters-chips:not(.results-chips-row *),
  [data-filter-summary] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: var(--space-2) 14px 0;
    border: 0;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header > .results-breadcrumb {
    padding: 10px 12px 10px 14px;
    background: var(--results-header-bg);
  }

  /* A mòbil .subheader-row deixa de ser display:contents: caixa real amb el comptador. */
  [data-results-card] > .results-header > .subheader-row {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 14px 10px 12px;
    background: var(--results-header-bg);
  }

  [data-results-card] > .results-header .results-count {
    background: transparent;
    padding: 0;
    grid-column: auto;
    grid-row: auto;
  }

  /* Panell desplegat: mateix fons que el header (--results-header-bg). */
  .docked-filters {
    display: block;
    position: relative;
    z-index: 19; /* per sota del botó de plec (z-index 22 dins el header) */
    background: var(--docked-filters-bg, var(--results-header-bg));
  }
  /* Tancat: gutter sota la línia (llista normal; no és el panell de filtres) */
  .docked-filters:not(.is-open) {
    max-height: var(--docked-fold-gutter-closed);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .docked-filters:not(.is-open) [data-docked-body] {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.5s;
  }
  .docked-filters.is-open [data-docked-body] {
    visibility: visible;
    transition: visibility 0s;
  }
  .results.is-editing > .results-header { box-shadow: none; }   /* l'ombra passa a sota del panell */
  .docked-filters.is-open { box-shadow: 0 8px 16px -9px rgba(var(--shadow-rgb), .5); }
  /* Cap superior del desplegable de filtres (no afecta la llista quan està tancat) */
  .docked-filters.is-open .docked-filters__body {
    padding-top: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top));
  }

  /* Panell acoblat: sense el marge superior del drawer lateral (botó «Tancar»)
     ni el padding superior complet del card — el cos del panell ja reserva el plec. */
  [data-docked-body] > .sidebar > .sidebar-panel > section:first-of-type:is(.card.filters, .simple-filters-card) {
    margin-top: 0;
  }
  [data-docked-body] .card.filters,
  [data-docked-body] .simple-filters-card {
    padding-top: var(--docked-fold-panel-content-pad-top, 8px);
  }
}

@media (max-width: 520px) {
  .results-breadcrumb {
    font-size: var(--font-xl);
  }

  /* Només es redueix l'inset horitzontal (18→12); el ritme vertical (top dels
     chips i reserva inferior del header) s'hereta de ≤980px. */
  [data-results-card] > .results-header > .results-breadcrumb {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-results-card] > .results-header > .subheader-row {
    padding-left: 12px;
    padding-right: 12px;
  }

  [data-results-card] > .results-header > .active-filters-chips,
  [data-results-card] > .results-header > .results-chips-row {
    padding-left: 12px;
    padding-right: 12px;
  }
  [data-results-card] > .results-header::after { left: 0; right: 0; }
  .subheader-toggle { right: 12px; }
  .docked-filters.is-open .docked-filters__body {
    padding: calc(var(--docked-fold-toggle-overhang, 15px) + var(--docked-fold-panel-pad-top, 4px)) 6px 12px;
  }
  .docked-filters.is-open { max-height: 80vh; }
}

/* ════════ Estadístiques: ajustos específics (selectors amb #id, especificitat alta) ════════ */
@media (max-width: 980px) {
  /* El subheader genèric mana: anul·la l'alineació antiga del toggle */
  #section-estadistiques [data-results-card] > .results-header > .results-breadcrumb {
    grid-column: 1;
  }
  /* El selector d'any de la capçalera és redundant en mòbil (el filtre «Anys»
     viu al panell acoblat); evita un control tàctil dins la zona disparadora. */
  #section-estadistiques .estadistiques-year-select-wrap { display: none; }
}

/* ════════ GRID MULTI-COLUMNA al panell acoblat ════════
 *
 * Mòbil/tablet: 2 columnes fixes (50/50) per maximitzar l'ús de l'amplada.
 *
 *   · 4 camps → 2×2; 2 camps → 50/50; 1 camp → 100%
 *   · 3 camps → 2 a la primera fila + orfe a amplada completa
 *   · Elements complexos (calendari, chips, acordions…) → sempre 100% (opt-out)
 *
 * Orfes: el JS (`docked-filters-grid.js`) afegeix `.field--grid-orphan` al camp
 * compacte que queda sol a la darrera fila (simulant el placement del grid).
 *
 * L'àmbit és estrictament [data-docked-body]: escriptori i sidebar intactes.
 */
@media (max-width: 980px) {
  [data-docked-body] .simple-filters-card,
  [data-docked-body] .filters {
    container-type: inline-size;
    container-name: docked-card;
  }
}

@container docked-card (min-width: 0) {
  .search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
    /* row-gap hereta de .sidebar .search-grid (--sidebar-form-stack-gap) */
  }

  /* Tots els fills prenen alçada correcta i no desbordem */
  .search-grid > * {
    min-width: 0;
  }

  /* Orfe marcat per JS: camp compacte sol a la darrera fila */
  .search-grid > .field.field--grid-orphan {
    grid-column: 1 / -1;
  }

  /* ── Opt-outs: elements que sempre han d'ocupar l'amplada completa ── */

  /* Calendari i la seva fila de controls */
  .search-grid > .month,
  .search-grid > .filters-row {
    grid-column: 1 / -1;
  }

  /* Grups d'agrupació amb layout propi */
  .search-grid > .grid-2col,
  .search-grid > .search-grid-inline-row {
    grid-column: 1 / -1;
  }

  /* Barra de tipus (chips segmentats) */
  .search-grid > div:has(> .type-title + .chips) {
    grid-column: 1 / -1;
  }

  /* Rang de dates obert: dos inputs interns necessiten tota l'amplada de la fila.
   * Amb el rang tancat, el camp es comporta com un input compacte (p. ex. al costat
   * de «Població estrena» a Sardanes · Obres). */
  .search-grid > .field:has(> .date-search-field[data-range-open='true']) {
    grid-column: 1 / -1;
  }

  /* Grups multivalor: checkboxes i chips d'opció */
  .search-grid > .field:has(> .filter-radio-group),
  .search-grid > .field:has(> .filter-chips-group) {
    grid-column: 1 / -1;
  }

  /* Acordions de tags (videoteca / imatges) */
  .search-grid > .field:has(> .filter-accordion-block),
  .search-grid > .filter-accordion-block {
    grid-column: 1 / -1;
  }

  /* Chips de perfil (catàleg → persones) */
  .search-grid > .field-profile-chips {
    grid-column: 1 / -1;
  }
}

/* ════════ DESKTOP (≥981px) ════════ */
@media (min-width: 981px) {
  .docked-filters { display: none !important; }
  .subheader-toggle { display: none !important; }
}

/* Moviment reduït: anul·la transicions/animacions del mecanisme */
@media (prefers-reduced-motion: reduce) {
  .docked-filters,
  .subheader-toggle .chev { transition: none; }
}