/* Sydak Living — zonas .c-view y barra de filtros .c-filters (DOCS/02 §6.15, §9.2).
   El layout del grid de listados (.c-grid) vive en css/layout/grid.css. */

/* ——— Cabecera de la vista: eyebrow (utilities.css) + h2 ——— */

.c-view__header {
  margin-block-end: var(--space-7);
  text-align: center;
}

.c-view__header .u-eyebrow {
  display: block;
  margin-block-end: var(--space-3);
}

.c-view__header h2 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--div-ink);
}

/* ——— Zonas ——— */

.c-view__filters {
  margin-block-end: var(--space-7);
}

.c-view__pager {
  margin-block-start: var(--space-8);
}

/* Los wrappers se imprimen sin espacios: si el render interior queda
   vacío (p. ej. pager de una sola página), la zona desaparece. */
.c-view__filters:empty,
.c-view__content:empty,
.c-view__pager:empty {
  display: none;
}

.c-view__footer {
  margin-block-start: var(--space-7);
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--div-ink-soft);
  text-align: center;
}

/* ——— Sin resultados: nota editorial en itálica, centrada.
       Las itálicas nunca llevan tracking (§3.3). ——— */

.c-view__empty {
  max-inline-size: var(--container-text);
  margin-inline: auto;
  padding-block: var(--space-9);
  font-family: var(--ff-text);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--div-ink-soft);
  text-align: center;
}

.c-view__empty p {
  margin: 0 0 var(--space-4);
}

.c-view__empty p:last-child {
  margin-block-end: 0;
}

/* ——— Filas "sin formato": hairline entre filas ——— */

.c-view__row + .c-view__row {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--div-line);
}

/* ——— Barra de filtros expuestos (§6.15): banda sobre surface con hairlines ——— */

.c-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) var(--space-5);
  background: var(--div-surface);
  border-block: 1px solid var(--div-line);
}

/* Los items del form apilan margen por defecto; dentro de la barra no. */
.c-filters .form-item,
.c-filters .js-form-item,
.c-filters .c-form-item,
.c-filters .c-filters__item {
  margin: 0;
}

.c-filters__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Los botones cierran el bloque: ocupan su propio renglón y terminan en la
   misma vertical que la segunda columna. Antes iban con `margin-inline-start:
   auto`, o sea pegados al borde derecho de la barra, y con los campos ocupando
   sólo la mitad izquierda quedaban descolgados a 400 px de todo lo demás. */
.c-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex: 0 0 100%;
  max-width: calc(var(--filtros-col) * 2 + var(--space-5));
}

/* ——— Filas propias: «operación + tipo» y «comunidad + provincia» ———
   Los contenedores los pone sydak_localizacion (§4 de su .module); aquí sólo se
   les da forma.

   `flex: 0 0 100%` es lo que fuerza el salto de línea: la barra es un flex con
   wrap y sus hijos son hermanos directos, así que sin un elemento que ocupe el
   renglón entero no hay forma de reservárselo — los pseudoelementos de un flex
   item no son flex items y no sirven.

   `align-items: flex-start` es lo que deja los campos A LA MISMA ALTURA. La
   barra alinea por abajo (`flex-end`), y con eso el que lleva descripción
   —provincia, cuando la comunidad acota la lista— se hace más alto y sube su
   desplegable respecto al de al lado. Alineando por arriba, etiquetas y
   desplegables quedan en la misma línea, lleve descripción o no. */
.c-filters__fila {
  flex: 0 0 100%;
  display: grid;
  /* `auto-fit` con suelo Y techo: dos columnas mientras quepan dos de 24rem
     (792 px de barra), una sola por debajo. Así el paso a columna única no lo
     decide un breakpoint escrito a ojo sino el ancho al que los campos dejan de
     ser usables, y funciona igual en el sidebar, en el móvil o donde se ponga.
     El `min(100%, …)` es el cinturón: sin él, en una ventana más estrecha que
     el suelo la pista no encoge y la barra desborda. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), var(--filtros-col)));
  align-items: start;
  gap: var(--space-4) var(--space-5);
}

/* El ancho de columna NO es un número redondo elegido a ojo: lo fijan las
   cuatro pastillas de «Operación», que miden 397 px juntas y no deben partirse
   en dos líneas. 26rem = 416 px les deja 19 px de holgura por si alguna
   etiqueta crece. Todo lo demás —desplegables, sliders, numéricos— cabe de
   sobra en esa medida, así que sirve de módulo para las cuatro filas.
   Va en `.c-filters` y no en `:root` porque de aquí lo lee también el bloque de
   botones, que cierra el rectángulo justo donde acaba la segunda columna. */
.c-filters {
  --filtros-col: 26rem;
}

@media (max-width: 639px) {
  .c-filters {
    align-items: stretch;
    flex-direction: column;
  }

  /* Las filas ya se apilan solas por el `auto-fit` de arriba; aquí sólo se
     suelta el bloque de botones, que a una columna no tiene segunda vertical
     con la que cuadrar. */
  .c-filters__actions {
    max-width: none;
    justify-content: flex-start;
  }
}