/* ==========================================================================
   BENEFICIOS
   Ficha (.beneficio-layout / .beneficio-ficha) y tarjeta de listado
   (.beneficio-teaser). Lo que es propio del organismo vive en
   components/03-organisms/section_benefit/section_benefit.css; aqui solo
   queda lo que depende del contexto de pagina o vence a card.css.
   ========================================================================== */

.beneficio-layout {
    padding-bottom: 4rem;
}

/* El logo del aliado es un SVG de marca, pensado sobre fondo blanco: en modo
   oscuro las tintas oscuras se pierden contra el fondo de la pagina. Se le
   pone una placa blanca, que en modo claro no se veria. */

:where(html[data-theme="dark"]) .beneficio-ficha .card-testimony_card-image {
    padding: 0.5rem 0.75rem;
    background-color: var(--white);
    border-radius: 4px;
}

/* El organismo fuerza el circulo a negro con !important -- lo necesita el
   SVG blanco de facebook del atomo -- y sobre el fondo oscuro se pierde el
   borde: queda el glifo flotando. El aro lo devuelve sin cambiar el
   relleno. */
:where(html[data-theme="dark"]) .beneficio-ficha .button-icon {
    outline: 1px solid var(--light-opacity-20);
}

/* El marcador de enlace externo que Drupal anade a los target=_blank sobra
   dentro de un icono que ya dice a donde va, y ahi se monta encima del glifo.
   Mismo caso que .footer__social. */
.beneficio-ficha .button-icon .ext {
    display: none;
}

/* ---------------------------------------------------------------- Hub ---
   Listado filtrable "Filtra por categoria, por ciudad, y descubre tu
   beneficio". Vale igual para /beneficios y para el bloque que un editor
   coloca en un Landing: es la misma vista y el mismo organismo
   `section_card_search`, que ya resuelve la pastilla del buscador, la lupa y
   el paginador. Aqui solo esta lo que Beneficios pide distinto. */

/* El bloque de Layout Builder ya llega con .section-align-usfq y el organismo
   trae el suyo dentro, asi que embebido la gotera salia doble. El !important
   responde al del propio .section-align-usfq, que lo lleva en el acolchado y
   no se puede acotar desde aqui. */
.section-align-usfq .beneficios-hub .section-align-usfq {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* El Figma de esta seccion es solo claro: titular y bajada en negro. En oscuro
   manda la paleta del sitio, como en Boletines. */

:where(html:not([data-theme="dark"])) .beneficios-hub {
    --bs-heading-color: var(--dark);
    --bs-body-color: var(--dark);
    color: var(--dark);
}

:where(html:not([data-theme="dark"])) .beneficios-hub p {
    color: var(--dark);
}

/* El titular del organismo se queda con el margen de .h1 de app.css, que se
   carga despues que el CSS del componente. */
.beneficios-hub .section-card-search__title {
    margin-bottom: 1.5rem;
}

.beneficios-hub__intro {
    margin-bottom: 2rem;
}

.beneficios-hub__intro p {
    margin-bottom: 1rem;
}

.beneficios-hub__intro p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------- Fila de filtros --- */
/* Las pastillas de categoria y la de ubicacion van en una linea y el buscador
   en la siguiente; el separador de linea lo pone el elemento vacio que anade
   el tema. */
.beneficios-hub .section-card-search__filters form {
    flex-wrap: wrap;
    justify-content: center;
}

/* Un grupo de radios llega envuelto en <fieldset><legend> y dos divs mas, y el
   #attributes del elemento cae en el fieldset, no en el contenedor de los
   radios. Con esos cuatro niveles en `display: contents` cada pastilla pasa a
   ser hija directa del formulario: asi fluyen todas en la misma linea centrada
   y la pastilla de ubicacion cae detras de la ultima, como en el Figma. */
.beneficios-hub .section-card-search__filters .beneficios-hub__pills,
.beneficios-hub .section-card-search__filters .beneficios-hub__pills .fieldset-wrapper,
.beneficios-hub .section-card-search__filters .beneficios-hub__pills .fieldset-wrapper > div {
    display: contents;
}

/* Con el fieldset fuera del flujo, la leyenda seria una celda vacia de la fila:
   se saca del flujo sin quitarla del arbol de accesibilidad, que es lo que
   nombra al grupo. */
.beneficios-hub .section-card-search__filters .beneficios-hub__pills legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.beneficios-hub__filters-break {
    display: none;
}

/* La pastilla ocupa la celda entera, que es lo que la estira a ancho completo
   cuando el formulario se apila en movil. */
.beneficios-hub .section-card-search__filters .beneficios-hub__pills .form-item {
    display: flex;
}

.beneficios-hub .section-card-search__filters .beneficios-hub__pills .form-item > label {
    flex: 1 1 auto;
}

/* El radio se queda en el DOM -- es lo que hace del grupo un control de
   verdad, navegable con las flechas -- pero el dibujo es la etiqueta. */
.beneficios-hub .section-card-search__filters input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* El organismo esconde todas las etiquetas del formulario, porque en Boletines
   el rotulo lo lleva el placeholder de cada campo. Aqui la etiqueta del radio
   ES la pastilla, asi que se devuelve al flujo. */
.beneficios-hub .section-card-search__filters .beneficios-hub__pills label {
    position: static;
    width: auto;
    height: 52px;
    overflow: visible;
    clip: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    border: 1px solid var(--secondary);
    border-radius: 61px;
    color: var(--secondary);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    /* Medido sobre el PNG: caja de 52px, altura de mayuscula de 7px (unos 10px
       de cuerpo) y un espaciado muy abierto. El 0.8125rem/0.08em del organismo
       da un rotulo un 15% mas ancho que el del mockup. */
    letter-spacing: 0.2em;
    font-size: 0.625rem;
    font-weight: var(--fw-subtitle);
    font-family: var(--headings-font-family);
}

.beneficios-hub .section-card-search__filters .beneficios-hub__pills label:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.beneficios-hub .section-card-search__filters input[type="radio"]:checked + label {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

/* El radio esta oculto: el anillo de foco tiene que pintarlo la pastilla o el
   teclado se queda sin rastro. */
.beneficios-hub .section-card-search__filters input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* La ubicacion cierra la fila de pastillas. El organismo manda el desplegable
   al principio con `order: -1` y le pone divisoria, porque en Boletines el
   filtro de ano abre la fila. */
.beneficios-hub .section-card-search__filters .form-item:has(select) {
    order: 0;
    padding-right: 0;
    border-right: 0;
}

/* La pastilla de ubicacion es una mas de la fila: mismo rotulo pequeno y
   espaciado que las de categoria, no el del buscador. */
.beneficios-hub .section-card-search__filters select {
    letter-spacing: 0.2em;
    font-size: 0.625rem;
}


/* BUSCAR y la X comparten linea con el buscador. */
.beneficios-hub .section-card-search__filters .form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* El PNG mide 193px de boton; el acolchado del organismo se queda en 147. */
.beneficios-hub .section-card-search__filters .form-actions input[type="submit"]:not([id^="edit-reset"]) {
    min-width: 12rem;
}

/* El :not() excluye al boton de limpiar, que es otro input[type=submit] y con
   la misma cadena de clases se llevaria el `flex: 1` aunque su bloque vaya
   despues. */
.beneficios-hub .section-card-search__filters .form-actions input[type="submit"]:not([id^="edit-reset"]) {
    width: auto;
    flex: 1 1 auto;
}

/* El boton de limpiar es otro input[type=submit], asi que llega pintado como
   la pastilla negra de BUSCAR: se le quita el rotulo y se dibuja la X, que no
   puede ir en un pseudoelemento porque un <input> es un elemento reemplazado.
   Views solo lo pinta con algun filtro puesto. */
.beneficios-hub .section-card-search__filters .form-actions [id^="edit-reset"] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    font-size: 0;
}

.beneficios-hub .section-card-search__filters .form-actions [id^="edit-reset"]:hover {
    border-color: var(--primary);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%23E11B22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- Paginador --- */
/* El Figma cierra la fila con una divisoria a la derecha de NEXT. El organismo
   solo las pone entre items. */
.beneficios-hub .section-card-search__footer .pager__item--next {
    border-right: 1px solid var(--secondary);
}

.beneficios-hub .view-empty {
    padding: 2rem 0;
    font-family: var(--headings-font-family);
    font-size: 0.875rem;
}

@media (min-width: 768px) {

    .beneficios-hub__filters-break {
        display: block;
        flex: 0 0 100%;
        height: 0;
    }

    /* La pastilla de ubicacion se mide por su rotulo; a ancho completo solo va
       cuando el formulario se apila. */
    .beneficios-hub .section-card-search__filters .form-item:has(select) select {
        width: auto;
        min-width: 9rem;
    }

    /* Divisoria vertical al arranque de la linea del buscador, como en el
       buscador de Clubes. Cuelga del propio campo, que el organismo ya deja en
       position: relative para colocar la lupa. */
    .beneficios-hub .section-card-search__filters .form-item-nombre {
        padding-left: 1.25rem;
    }

    .beneficios-hub .section-card-search__filters .form-item-nombre::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        /* El alto es el de la pastilla, no el de la celda: core le pone al
           input 4px de margen superior y la linea salia mas larga y desplazada
           hacia arriba. En el PNG mide exactamente lo que el campo. */
        height: 52px;
        transform: translateY(-50%);
        background-color: currentColor;
    }
}

/* En tablet caben tres tarjetas de 224px y el PNG baja ahi el titular a 16px;
   con los 20px de la molecula, un nombre de una sola palabra no entra en la
   caja y empujaba su columna. */
@media (min-width: 768px) and (max-width: 1024px) {

    .beneficio-teaser .colegios_card-title {
        font-size: 1rem;
        line-height: 1.2;
    }
}


:where(html[data-theme="dark"]) .beneficios-hub .section-card-search__filters .beneficios-hub__pills label {
    border-color: var(--white);
    color: var(--white);
}

:where(html[data-theme="dark"]) .beneficios-hub .section-card-search__filters input[type="radio"]:checked + label {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--secondary);
}

:where(html[data-theme="dark"]) .beneficios-hub .section-card-search__filters .form-actions [id^="edit-reset"] {
    border-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

:where(html[data-theme="dark"]) .beneficios-hub .section-card-search__footer .pager__item--next {
    border-right-color: var(--white);
}

/* ------------------------------------------------- Tarjeta del listado --- */

/* La molecula trae 64px de margen inferior pensados para el carrusel de
   colegios; en una rejilla el hueco lo pone la propia rejilla. El 100% de alto
   encadenado es lo que iguala las tarjetas de una fila. */
.beneficio-teaser,
.beneficio-teaser > div {
    height: 100%;
}

.beneficio-teaser .card.card-colegios {
    height: 100%;
    margin-bottom: 0;
}

/* El cuerpo de la molecula viene a 8px, pensado para la tarjeta de colegios
   dentro de su seccion. El `gap` fija la separacion minima del CTA: el
   `margin-top: auto` que trae card.css lo coloca abajo, pero no separa nada
   cuando el texto llena la celda. */
.beneficio-teaser .colegios_card-body {
    padding: 0 1.5rem 1.5rem;
    gap: 0.75rem;
}

/* El CTA va pegado al pie de la tarjeta. La molecula solo lo baja a partir de
   1025, donde .container-button deja de ser `display: contents`. El ancho lo
   pone la celda: completo hasta desktop y ajustado a la derecha desde ahi,
   como en el Figma. */
.beneficio-teaser .container-button .btn {
    margin-top: auto;
}

/* Con las columnas de la rejilla clavadas al mismo ancho, un nombre largo
   ("Empanadas") tiene que partirse dentro de su tarjeta en vez de desbordarla. */
.beneficio-teaser .colegios_card-title {
    overflow-wrap: break-word;
}

/* El titular es un enlace: hereda el color de la molecula (rojo en reposo,
   blanco en hover) y pierde el subrayado del enlace generico del tema. */
.beneficio-teaser .colegios_card-title a {
    color: inherit;
    text-decoration: none;
}

/* Las fotos de los aliados llegan en tamanos y proporciones muy distintas: se
   recortan a 16:9 para que la fila no baile. */
.beneficio-teaser .card-colegios_card-image img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* El marcador no se recorta: es un logo, se centra sobre un fondo neutro. */
.beneficio-teaser .card-colegios_card-image .unit-card__placeholder {
    padding: 2rem;
    background-color: rgb(0 0 0 / 6%);
    object-fit: contain;
}

.beneficio-teaser .colegios_card-eyebrow {
    margin: 0;
    line-height: 1.6;
}

/* Sin descuento no hay linea de descuento: la molecula pinta el <p> siempre,
   y vacio deja un renglon de aire entre la ceja y el boton. */
.beneficio-teaser .colegios_card-text:empty {
    display: none;
}

/* En el Figma de este proyecto una tarjeta pintada de color es siempre el
   estado hover, nunca el de reposo: en reposo es caja blanca con titular rojo
   y texto oscuro, tambien en modo oscuro. Los selectores repiten clases para
   ganarle al bloque de oscuro de card.css, que pinta de negro toda
   `card--bg-light` con `!important`. Es la misma cadena que ya usan las cards
   de carrera en css/research_units.css. */
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios {
    background-color: var(--white) !important;
    color: var(--dark) !important;
}

/* Titular y ceja en rojo sobre la caja blanca, como en las cards de carrera. */
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-title,
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-eyebrow {
    color: var(--primary) !important;
}

.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-text,
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios .colegios_card-text * {
    color: var(--dark) !important;
}

.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-title,
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-eyebrow,
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-text,
.beneficio-teaser [data-component-id="usfq_theme:card"].card.card--colegios.card-colegios:hover .colegios_card-text * {
    color: var(--white) !important;
}