/* ===========================================================================
   Resultados de busqueda (vista search_content, display page_1).

   Todo cuelga de .section-search-results por dos motivos: acotar el organismo
   -- la fila .search-result la pinta una plantilla de Views, no un componente,
   y no tiene CSS propio -- y ganarle a dist/css/app.css, que se carga en el
   grupo `theme`, DESPUES de este fichero.

   Los cuerpos de texto van en px fijos y no en tokens: el mockup usa el mismo
   20px de titular y 16px de cuerpo en los tres anchos, mientras que
   --fs-body-regular baja a 12px por debajo de 992.
   =========================================================================== */

.section-search-results {
  /* 16 y no los 32 del tema: el PNG de 375 dibuja la pildora y las filas a 16
     del borde, y con 32 el titular del hero se parte en dos lineas. */
  --sr-gutter: 1rem;
  --sr-row-inset: 0.5rem;
  --sr-title-size: 1.25rem;
  --sr-text-size: 1rem;
  --sr-text-leading: 1.125rem;
  /* 13px y 0,15em: medido sobre el PNG letra a letra ("BUSCAR" 76 de tinta y
     13,4 de paso, "PREV" 48). No hay token del tema para ese cuerpo; el
     rotulo del boton solido si cae en --fs-eyebrow. */
  --sr-field-label-size: 0.8125rem;
  --sr-field-label-tracking: 0.15em;
  --sr-line: var(--dark);

  display: block;
  color: var(--secondary);
}

/* ------------------------------------------------------------------ Hero ---
   Banda de 300px a los tres anchos con el h1 abajo a la izquierda. El mockup
   la pinta con el damero de "imagen ausente" de Figma (116-126): sin foto
   configurada queda el gris plano. #757575 es el primer valor de esa horquilla
   que da 4,5:1 con el blanco del titular. */

.section-search-results__hero {
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  background-color: #757575;
}

/* La foto la pone el ajuste del tema (search_hero_image) como --sr-hero-image.
   El velo va del 30% al 68% porque el titular vive en el tercio de abajo: donde
   arranca su caja (el 71% de la banda, el caso mas alto de los tres anchos) el
   velo deja un pixel blanco -- el peor fondo posible -- en 110, o sea 5,1:1 con
   el blanco del titular. Asi cumple el 4,5:1 con cualquier foto, sin medirla. */
.section-search-results__hero--photo {
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 68%) 100%),
    var(--sr-hero-image);
  background-position: center;
  background-size: cover;
}

.section-search-results__hero .section-align-usfq {
  padding-bottom: 1.5rem;
}

/* La cadena lleva el bloque delante porque app.css declara `h1,.h1` con la
   misma especificidad y se carga despues (grupo `theme`): con un solo gancho
   el titular se queda con el --bs-heading-color del tema. */
.section-search-results .section-search-results__title {
  margin: 0;
  color: var(--white);
  font-weight: var(--fw-body-regular-bold);
}

/* ---------------------------------------------------------------- Columna ---
   El buscador, la lista y el paginador comparten una columna mas estrecha que
   la pagina: a 1440 mide 1090 y el hero sigue pegado a la gotera de 64. */

.section-search-results__column {
  width: 100%;
  margin-inline: auto;
  padding: 4rem var(--sr-gutter);
}

/* --------------------------------------------------------------- Buscador ---
   Pildora + boton. Por debajo de 768 el boton baja y ocupa el ancho entero. */

.section-search-results__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.section-search-results__field {
  position: relative;
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background-color: var(--white);
}

.section-search-results__input {
  width: 100%;
  height: 100%;
  padding: 0 4rem 0 2rem;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--secondary);
  font-family: var(--headings-font-family);
  font-size: var(--sr-field-label-size);
  font-weight: var(--fw-subtitle);
  letter-spacing: var(--sr-field-label-tracking);
  text-transform: uppercase;
}

.section-search-results__input::placeholder {
  color: var(--secondary);
  opacity: 1;
}

/* El aspa nativa de type="search" en Chrome se dibuja sobre la lupa. */
.section-search-results__input::-webkit-search-cancel-button {
  display: none;
}

.section-search-results__input:focus {
  outline: none;
}

.section-search-results__field:focus-within {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.section-search-results__magnifier {
  position: absolute;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: var(--secondary);
  cursor: pointer;
}

.section-search-results__magnifier:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 0;
  border-radius: 999px;
}

.section-search-results__magnifier svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.section-search-results__submit {
  flex: 1 1 100%;
  height: 52px;
  /* 22 y no 24: el boton del PNG mide 113 de ancho y con 24 la caja se va a
     115, que le come dos pixeles a la pildora. */
  padding: 0 1.375rem;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background-color: var(--secondary);
  color: var(--white);
  font-family: var(--headings-font-family);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-subtitle);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

.section-search-results__submit:hover,
.section-search-results__submit:focus-visible {
  background-color: var(--white);
  color: var(--secondary);
}

.section-search-results__submit:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- Sin resultados ---
   El mockup no dibuja este estado; va con el cuerpo de la lista y su misma
   sangria para que no baile respecto a las filas. */

.section-search-results__empty {
  margin: 4rem 0 0;
  padding-inline: var(--sr-row-inset);
  color: var(--secondary);
  font-size: var(--sr-text-size);
  line-height: var(--sr-text-leading);
}

/* ------------------------------------------------------------------ Lista ---
   La linea va arriba de cada fila, incluida la primera, y la lista cierra por
   abajo con la suya: el mockup dibuja una raya mas que filas. */

.section-search-results__list {
  margin-top: 4rem;
  border-bottom: 1px solid var(--sr-line);
}

.section-search-results .search-result {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem var(--sr-row-inset);
  border-top: 1px solid var(--sr-line);
}

.section-search-results .search-result__body {
  flex: 1 1 auto;
  min-width: 0;
}

.section-search-results .search-result__eyebrow {
  margin: 0;
  color: var(--secondary);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-subtitle);
  line-height: var(--lh-eyebrow);
}

.section-search-results .search-result__title {
  margin: 0;
  color: var(--primary);
  font-family: var(--headings-font-family);
  font-size: var(--sr-title-size);
  /* 700 y no 900: la tinta del PNG mide 493 y el render da 491 a 700, 494 a
     800 y 500 a 900. El h1 del hero si va en negra. */
  font-weight: var(--fw-heading);
  /* El mockup pone las lineas del titulo a 20 de paso: interlineado 1. */
  line-height: 1;
  /* Un titulo de una sola palabra larga desborda la fila a 375. */
  overflow-wrap: break-word;
}

.section-search-results .search-result__title a {
  color: inherit;
  text-decoration: none;
}

/* La fila entera es clicable, como sugiere el chevron. El enlace del titulo
   es el unico de la fila, asi que la capa no tapa nada mas. */
.section-search-results .search-result__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.section-search-results .search-result__title a:hover,
.section-search-results .search-result__title a:focus-visible {
  text-decoration: underline;
}

.section-search-results .search-result__title a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.section-search-results .search-result__subtitle,
.section-search-results .search-result__meta,
.section-search-results .search-result__description,
.section-search-results .search-result__excerpt {
  margin: 1.5rem 0 0;
  color: var(--secondary);
  font-family: var(--font-family-base);
  font-size: var(--sr-text-size);
  font-weight: var(--fw-body-regular);
  line-height: var(--sr-text-leading);
}

.section-search-results .search-result__subtitle + .search-result__description,
.section-search-results .search-result__description + .search-result__excerpt,
.section-search-results .search-result__meta + .search-result__excerpt {
  margin-top: 1.125rem;
}

.section-search-results .search-result__meta-row {
  margin: 0;
  color: inherit;
  font: inherit;
}

.section-search-results .search-result__meta-row strong {
  font-weight: var(--fw-body-regular-bold);
}

/* El cuerpo del nodo llega con el marcado que traia del D10: encabezados
   anidados a tres niveles, tarjetas y rejillas de Bootstrap, acordeones y
   fotos. En el mockup la descripcion es texto corrido, asi que aqui se aplana
   entera -- no solo los hijos directos, que era lo que dejaba un h2 gigante
   dentro de un .column_wrap -- y se va lo que no es texto. */
.section-search-results .search-result__description * {
  margin: 0;
  padding: 0;
}

.section-search-results .search-result__description,
.section-search-results .search-result__description * {
  color: inherit;
  font-family: var(--font-family-base);
  font-size: var(--sr-text-size);
  line-height: var(--sr-text-leading);
  text-decoration: none;
  list-style: none;
  overflow-wrap: break-word;
}

.section-search-results .search-result__description :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--fw-body-regular);
}

.section-search-results .search-result__description :is(img, picture, figure, svg, iframe, video, audio, table, hr) {
  display: none;
}

.section-search-results .search-result__description > * + * {
  margin-top: 1.125rem;
}

.section-search-results .search-result__excerpt strong {
  font-weight: var(--fw-body-regular-bold);
}

/* ---------------------------------------------------------------- Chevron ---
   14 x 24 de tinta en el PNG: un cuadrado de 17px con dos bordes de 2px
   girado. Se dibuja con bordes y no con un SVG de fondo para que herede el
   color en oscuro. */

.section-search-results .search-result__chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 24px;
  /* El cuadrado girado se sale 4px de su caja por la derecha; con esta
     separacion la punta queda a 13 del borde de la columna, como el PNG. */
  margin-right: 0.5rem;
  color: var(--secondary);
  /* El glifo girado crea contexto de apilamiento y se pinta sobre la capa
     clicable del titulo, asi que se comia el clic en el centro de la fila. */
  pointer-events: none;
}

.section-search-results .search-result__chevron::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 0 solid currentColor;
  border-left-width: 2px;
  border-bottom-width: 2px;
  transform: rotate(-135deg);
  transition: transform 0.2s ease-in-out;
}

.section-search-results .search-result:hover .search-result__chevron::before {
  transform: rotate(-135deg) translate(-3px, 3px);
}

/* -------------------------------------------------------------- Paginador ---
   Es el paginador global (templates/navigation/pager.html.twig). El mockup
   solo pinta PREV, tres numeros y NEXT. */

.section-search-results__pager {
  margin-top: 4rem;
}

/* Con los chevrons la fila son cinco cajas de 48, 240 en total: entra centrada
   incluso en la columna de 343 de 375. */
.section-search-results__pager .pager {
  display: flex;
  justify-content: center;
}

.section-search-results__pager .pager__items {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-search-results__pager .pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  border-right: 1px solid var(--secondary);
  color: var(--secondary);
  font-family: var(--headings-font-family);
  font-size: var(--sr-field-label-size);
  font-weight: var(--fw-subtitle);
  letter-spacing: var(--sr-field-label-tracking);
  text-transform: uppercase;
}

/* PREV y NEXT se pintan con el mismo chevron que las filas -- cuadrado con dos
   bordes de 2px, girado -- y su caja se queda en 48x48 como la de los numeros.
   El rotulo decorativo de pager.html.twig es el unico que se esconde: el texto
   accesible ("Pagina anterior" / "Siguiente pagina") sigue en el DOM. */
.section-search-results__pager .pager__item--previous a [aria-hidden="true"],
.section-search-results__pager .pager__item--next a [aria-hidden="true"] {
  display: none;
}

.section-search-results__pager .pager__item--previous a::before,
.section-search-results__pager .pager__item--next a::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 0 solid currentColor;
  border-left-width: 2px;
  border-bottom-width: 2px;
}

/* El cuadrado girado se sale de su caja por el lado de la punta: el margen del
   lado contrario lo recentra dentro de los 48. */
.section-search-results__pager .pager__item--previous a::before {
  margin-left: 8px;
  transform: rotate(45deg);
}

.section-search-results__pager .pager__item--next a::before {
  margin-right: 8px;
  transform: rotate(-135deg);
}

/* La vista deja "first" y "last" con la etiqueta vacia, pero el |default() de
   la plantilla global la repone ("Primero <<"). El mockup no los lleva, ni la
   elipsis. Va despues de la regla que da display: empatan en especificidad. */
.section-search-results__pager .pager__item--first,
.section-search-results__pager .pager__item--last,
.section-search-results__pager .pager__item--ellipsis {
  display: none;
}

.section-search-results__pager .pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.section-search-results__pager .pager__item a:hover {
  text-decoration: underline;
}

.section-search-results__pager .pager__item a:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: -4px;
}

/* El recuadro de la pagina actual es un borde de 4px gris. Va como sombra
   interior para no pelear con el border-right que hace de divisoria. */
.section-search-results__pager .pager__item.is-active {
  box-shadow: inset 0 0 0 4px #7f7f7f;
}

/* ------------------------------------------------------------------ Oscuro ---
   El esquema lo manda data-theme en <html>. El titular sigue rojo, como en
   las tarjetas: 20px en negra pasa de sobra el 3:1 de texto grande. */

:where(html[data-theme="dark"]) .section-search-results {
  --sr-line: var(--white);

  color: var(--white);
}

:where(html[data-theme="dark"]) .section-search-results__field {
  border-color: var(--white);
  background-color: transparent;
}

:where(html[data-theme="dark"]) .section-search-results__input,
:where(html[data-theme="dark"]) .section-search-results__input::placeholder,
:where(html[data-theme="dark"]) .section-search-results__magnifier {
  color: var(--white);
}

:where(html[data-theme="dark"]) .section-search-results__field:focus-within,
:where(html[data-theme="dark"]) .section-search-results__magnifier:focus-visible,
:where(html[data-theme="dark"]) .section-search-results__submit:focus-visible {
  outline-color: var(--white);
}

/* El boton solido es negro sobre negro: se invierte. */
:where(html[data-theme="dark"]) .section-search-results__submit {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--secondary);
}

:where(html[data-theme="dark"]) .section-search-results__submit:hover,
:where(html[data-theme="dark"]) .section-search-results__submit:focus-visible {
  background-color: transparent;
  color: var(--white);
}

:where(html[data-theme="dark"]) .section-search-results__empty,
:where(html[data-theme="dark"]) .section-search-results .search-result__eyebrow,
:where(html[data-theme="dark"]) .section-search-results .search-result__subtitle,
:where(html[data-theme="dark"]) .section-search-results .search-result__meta,
:where(html[data-theme="dark"]) .section-search-results .search-result__description,
:where(html[data-theme="dark"]) .section-search-results .search-result__excerpt,
:where(html[data-theme="dark"]) .section-search-results .search-result__chevron {
  color: var(--white);
}

:where(html[data-theme="dark"]) .section-search-results__pager .pager__item {
  border-right-color: var(--white);
  color: var(--white);
}

:where(html[data-theme="dark"]) .section-search-results__pager .pager__item a:focus-visible {
  outline-color: var(--white);
}

/* ------------------------------------------------------------------ Movil ---
   La gotera de 16 del hero necesita un max-width: la del tema es la regla base
   de .section-align-usfq y ademas va con !important, asi que no hay forma de
   bajarla solo aqui desde el bloque base sin arrastrarla a tablet y desktop. */

@media (max-width: 767px) {
  .section-search-results__hero .section-align-usfq {
    padding-left: var(--sr-gutter) !important;
    padding-right: var(--sr-gutter) !important;
  }
}

/* ----------------------------------------------------------------- Tablet ---
   A partir de 768 el boton vuelve al lado de la pildora. */

@media (min-width: 768px) {
  .section-search-results {
    --sr-gutter: 1.5rem;
  }

  .section-search-results__field {
    flex: 1 1 auto;
  }

  .section-search-results__submit {
    flex: 0 0 auto;
    min-width: 113px;
  }
}

/* ---------------------------------------------------------------- Desktop ---
   La columna se queda en 1090 y deja el hero pegado a la gotera de 64. */

@media (min-width: 1025px) {
  .section-search-results {
    --sr-gutter: 4rem;
  }

  .section-search-results__hero .section-align-usfq {
    padding-bottom: 2.5rem;
  }

  .section-search-results__column {
    max-width: calc(1090px + 2 * var(--sr-gutter));
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}