[data-component-id="usfq_theme:section_cards_events"] {

    a {
        text-decoration: none!important;
    }

    .container-event,
    .container-cards {
        display: grid;
        gap: 24px;
    }

    /* El aplanado de abajo deja al article sin caja, asi que su position: relative
       (de core) no vale: el div.contextual necesita aqui su ancestro posicionado. */
    .container-cards {
        position: relative;
    }

    /* Las vistas meten cuatro envoltorios entre la columna y la tarjeta; con
       display: contents la tarjeta destacada pasa a ser el item de la rejilla y
       puede estirarse hasta la altura de la columna de teasers. El div.contextual
       queda fuera: aplanarlo convertia el lapiz de enlaces contextuales en item de
       la rejilla y la tarjeta saltaba cada vez que el raton lo mostraba. */
    .new-section-card-event__main-card,
    .new-section-card-event__main-card .views-element-container,
    .new-section-card-event__main-card .view,
    .new-section-card-event__main-card .views-row,
    .new-section-card-event__main-card .container-usfq,
    .new-section-card-event__main-card .container-usfq > div:not(.contextual) {
        display: contents;
    }

    /* La destacada va en horizontal en movil. El DOM pinta imagen y luego
       cuerpo, asi que row-reverse deja el texto a la izquierda. */
    .card.card-main .container-main {
        flex-direction: row-reverse;
        align-items: center;
        gap: 1rem;
        padding: 24px 16px;
    }

    .card.card-main .card-img-top {
        flex: 0 0 45%;
        margin-top: 0;
    }

    .card.card-main .card-main-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .container-mini-cards .view-events-and-activities,
    .container-mini-cards .view-events-related {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    /* Una vista sin resultados no deja columna vacia */
    .container-cards:not(:has(.views-row)),
    .container-mini-cards:not(:has(.views-row)) {
        display: none;
    }

    /* La tarjeta ocupa toda la celda para que las de una misma fila midan igual */
    .container-mini-cards .views-row,
    .container-mini-cards .container-usfq,
    .container-mini-cards .container-usfq > div {
        display: flex;
        flex-direction: column;
    }

    .container-mini-cards .container-usfq,
    .container-mini-cards .container-usfq > div,
    .container-mini-cards .card-event {
        flex: 1 1 auto;
    }

    /* card.css deja la tarjeta en column-reverse por debajo de 768; el Figma
       quiere la imagen encima del cuerpo en los tres anchos. */
    .card.card-event {
        max-width: none !important;
        width: 100%;
        flex-direction: column;
    }

    .card-event_card-img-top {
        margin-top: 0;
    }

    /* Las imagenes vienen de fuentes distintas: sin proporcion fija cada fila
       de tarjetas arranca a una altura. */
    .card-event_card-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 17 / 10;
        object-fit: cover;
    }

    /* El sello abre el cuerpo por la esquina superior izquierda; el margen
       inferior negativo deja el titular a 8px, como el mockup. */
    .card-event__date {
        align-self: flex-start;
        margin: 12px 0 -4px 12px !important;
        z-index: 3;
        line-height: normal;
    }

    .event_card-body {
        padding: 12px;
    }

    .event_card-body .subtitle-s2 {
        width: 100%;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .event_card-body .subtitle-s2 p {
        margin: 0;
        display: inline;
    }

    /* En una rejilla de columnas iguales un titular largo no puede ensanchar su
       celda. Solo break-word: con hyphens los titulos salen partidos con guion. */
    .event_card-body .event_card-title {
        font-size: var(--fs-h4);
        line-height: var(--lh-h4);
        overflow-wrap: break-word;
    }

    /* Por debajo de 768 la celda mide unos 150px: con --fs-h4 (14px) palabras
       como "Bioestimulacion" se parten. --fs-h5 vale 12px en ese rango. */
    @media (max-width: 767px) {
        .event_card-body .event_card-title {
            font-size: var(--fs-h5);
            line-height: var(--lh-h5);
        }
    }

    /* Reposo: caja blanca y titular rojo. El color del Figma es el hover. */
    .card-event .event_card-title,
    .card-event .event_card-title a {
        color: inherit;
    }

    .card-event:not(:hover) .event_card-title {
        color: var(--primary);
    }

    /* card.css pinta el hover de card--bg-light en rojo con una cadena de
       :not() muy larga; hay que repetirla entera o gana el estado base. */
    .card--bg-light.card--event:not(.card--profesor):not(.card--alumni):not(.card--main):hover {
        background-color: var(--secondary);
        color: var(--white);
    }

    .section-card-event__link {
        grid-column: 1 / -1;
    }

    [data-component-id="usfq_theme:link"] {
        padding: 3rem 0 0 0;
        margin: 0;
        color: inherit;

        &.link .link--link-divider {
            border-color: currentColor;
        }
    }

    /* El atomo pinta la regla a 1px y empata en especificidad: hacen falta
       tres clases para subirla a los 2px del Figma. */
    .link.link-divider .link-divider__text {
        border-top-width: 2px;
    }

    [data-component-id="usfq_theme:icon"] {
        color: inherit !important;
    }

    &.section-cards-events--home {
        background: #f4f4f2;
    }

    &.section-cards-events--home .section-cards-events__header {
        display: grid;
        gap: 24px;
        margin-bottom: 24px;
    }

    &.section-cards-events--home .description {
        max-width: 44rem;
        color: var(--gray-600, #55585c);
    }

    &.section-cards-events--home .section-cards-events__filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 36px;
    }

    &.section-cards-events--home .section-cards-events__filter {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 22px;
        border: 1px solid rgba(23, 23, 23, 0.14);
        border-radius: 999px;
        color: #55585c;
        background: var(--white);
        font-family: var(--headings-font-family);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    &.section-cards-events--home .section-cards-events__filter.is-active {
        border-color: var(--secondary);
        background: var(--secondary);
        color: var(--white);
    }

    &.section-cards-events--home .section-cards-events__filter {
        cursor: pointer;
        appearance: none;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    &.section-cards-events--home .section-cards-events__filter:hover:not(.is-active) {
        border-color: var(--secondary);
        color: var(--secondary);
    }

    &.section-cards-events--home .section-cards-events__filter:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
    }

    /* La tira y los paneles son flex/grid: sin esto el atributo hidden no
       los esconderia. */
    &.section-cards-events--home [hidden] {
        display: none !important;
    }

    &.section-cards-events--home .container-event--home {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    &.section-cards-events--home .container-mini-cards .view-events-and-activities {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    &.section-cards-events--home .container-mini-cards .views-row,
    &.section-cards-events--home .container-mini-cards .container-usfq,
    &.section-cards-events--home .container-mini-cards .container-usfq > div {
        display: flex;
        flex-direction: column;
    }

    &.section-cards-events--home .section-card-event__link--home {
        grid-column: 1 / -1;
    }

    &.section-cards-events--home .section-card-event__link--home [data-component-id="usfq_theme:link"] {
        padding-top: 0;
    }

    &.section-cards-events--home .section-card-event__link--home .link-divider {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        /* Sin acolchado, el overflow: hidden de link.css recortaba la flecha
           al crecer con el hover (scale 1.2). */
        overflow: visible;
        text-align: right;
        font-size: 13px;
        letter-spacing: 0.18em;
    }

    &.section-cards-events--home .section-card-event__link--home .link-divider__icon {
        align-self: flex-end;
        padding: 0 32px 12px 0;
        line-height: 0;
        order: 0;
    }

    &.section-cards-events--home .section-card-event__link--home .link-divider__icon .icon svg {
        width: 66px !important;
        height: 66px !important;
    }

    &.section-cards-events--home .section-card-event__link--home .link-divider__text {
        border-top: 2px solid currentColor;
        padding: 8px 48px 0 16px;
        order: 1;
    }
}

/* TABLET Y DESKTOP */
@media (min-width: 768px) {
    [data-component-id="usfq_theme:section_cards_events"] {

        /* Destacada 37% / teasers 61%, la proporcion de los dos mockups */
        .container-event {
            grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
        }

        /* Con una sola de las dos vistas, la que queda ocupa el ancho entero */
        .container-event:not(:has(.container-cards .views-row)),
        .container-event:not(:has(.container-mini-cards .views-row)) {
            grid-template-columns: minmax(0, 1fr);
        }

        .card.card-main .container-main {
            flex-direction: column-reverse;
            align-items: stretch;
            justify-content: center;
            gap: 0;
            padding: 24px;
        }

        .card.card-main .card-img-top,
        .card.card-main .card-main-body {
            flex: 0 1 auto;
        }

        /* grid-auto-rows: 1fr iguala las dos filas, como el mockup */
        .container-mini-cards .view-events-and-activities,
        .container-mini-cards .view-events-related {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: 1fr;
            gap: 12px 24px;
        }

        .card-event__date {
            margin: 16px 0 -16px 24px !important;
        }

        .event_card-body {
            padding: 24px;
        }
    }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    [data-component-id="usfq_theme:section_cards_events"] {
        padding: 96px 16px;

        .card-main_card-image img {
            max-width: none !important;
        }

        /* El frame "tablet" del Figma mide 1194px, que aqui ya es desktop. A 768
           las dos columnas dejan la celda de los teasers en 129px y los titulos
           se parten a media palabra, asi que la destacada pasa arriba a todo el
           ancho (en horizontal, como en movil) y los seis teasers van debajo en
           3x2 con celdas de 224px. */
        .container-event {
            grid-template-columns: minmax(0, 1fr);
        }

        .card.card-main .container-main {
            flex-direction: row-reverse;
            align-items: center;
            gap: 1.5rem;
        }

        .card.card-main .card-img-top {
            flex: 0 0 45%;
        }

        .event_card-body {
            padding: 12px;
        }

        .event_card-body .event_card-title {
            font-size: var(--fs-h5);
            line-height: var(--lh-h5);
        }

        .card-event__date {
            margin: 12px 0 -4px 12px !important;
        }
    }
}

/* DESKTOP */
@media (min-width: 1025px) {
    [data-component-id="usfq_theme:section_cards_events"] {
        padding: 128px 0;

        &.section-cards-events--home {
            padding: 128px 64px;
        }

        /* La columna de la rejilla ya acota la destacada; el tope de 660px que
           card.css pone aqui dejaba el borde mas corto que el fondo del hover. */
        .card.card-main .container-main {
            max-width: none;
        }
    }
}

/* Base Link Theme Support */
[data-component-id="usfq_theme:link"] {

    &.link--color-secondary,
    .link--color-primary,
    .link--color-light {
        color: inherit !important;
    }
}

.section-cards-events .card-main__icon .icon {
    color: var(--primary) !important;
}

/* DARK MODE */
:where(html[data-theme="dark"]) [data-component-id="usfq_theme:section_cards_events"] {

    /* En oscuro card.css pinta las dos tarjetas de negro con !important;
       el Figma las quiere blancas en reposo, igual que en claro. */
    .card.card-main,
    .card.card--bg-light.card--event {
        background-color: var(--white) !important;
        color: var(--secondary) !important;
    }

    .card.card-main:hover,
    .card.card--bg-light.card--event:hover {
        background-color: var(--secondary) !important;
        color: var(--white) !important;
    }

    /* En oscuro --bs-heading-color es blanco: el titular de la destacada
       desaparecia sobre su propia caja blanca. */
    .card.card-main .card-main-title,
    .card.card-main .card-main-title * {
        color: inherit !important;
    }

    .card-event:not(:hover) .event_card-title {
        color: var(--primary) !important;
    }

    .card-event:hover .event_card-title {
        color: var(--white) !important;
    }

    .card.card-main .card-main__date.date {
        background-color: var(--secondary) !important;
    }

    .card.card-main:hover .card-main__date.date {
        background-color: var(--primary) !important;
    }

    .card.card--bg-light.card--event .card-event__date.date {
        background-color: var(--primary) !important;
    }
}

@media (min-width: 768px) {
    [data-component-id="usfq_theme:section_cards_events"].section-cards-events--home {
        .section-cards-events__header {
            grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
            align-items: end;
            gap: 48px;
        }

        .container-event--home {
            grid-template-columns: minmax(0, 1fr);
        }

        .container-mini-cards .view-events-and-activities {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 28px;
        }

    }
}

@media (min-width: 1025px) {
    [data-component-id="usfq_theme:section_cards_events"].section-cards-events--home {
        .container-mini-cards .view-events-and-activities {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
        }

        .section-card-event__link--home .link-divider__icon .icon svg {
            width: 72px !important;
            height: 72px !important;
        }

        .section-card-event__link--home .link-divider__text {
            font-size: 15px;
        }
    }
}

/* HOME: TARJETA DE EVENTO (modo de vista home_card)
   Foto 16:10, titular, fecha con el icono de calendario y, bajo una linea, la
   categoria y el boton "Ver evento". Esquinas rectas, como el resto del sitio.
   Los colores van fijos para que el modo oscuro no pinte la tarjeta de negro. */
[data-component-id="usfq_theme:section_cards_events"].section-cards-events--home {
    .container-mini-cards .views-row {
        display: flex;
    }

    .home-event-card {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
        background: var(--white);
        color: #171717;
        box-shadow: 0 2px 10px rgba(23, 23, 23, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .home-event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 32px rgba(23, 23, 23, 0.12);
    }

    .home-event-card__media {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #ddd;
    }

    /* El campo mete su envoltorio entre el contenedor y la imagen. */
    .home-event-card__media > *,
    .home-event-card__media img {
        width: 100%;
        height: 100%;
    }

    .home-event-card__media img {
        display: block;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .home-event-card:hover .home-event-card__media img {
        transform: scale(1.04);
    }

    .home-event-card__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: 22px 24px 24px;
    }

    .home-event-card__title {
        min-height: 52px;
        margin: 0 0 16px;
        font-family: var(--headings-font-family);
        font-size: 20px;
        font-weight: 900;
        line-height: 1.28;
        letter-spacing: -0.01em;
    }

    .home-event-card__title a {
        color: #171717;
        transition: color 0.15s ease;
    }

    .home-event-card:hover .home-event-card__title a {
        color: var(--primary);
    }

    .home-event-card__date {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 20px;
        color: #6b6f74;
        font-family: var(--font-family-base);
        font-size: 14px;
        line-height: 1.4;
    }

    .home-event-card__date-icon {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: #f4f4f2;
        color: #171717;
    }

    .home-event-card__date-icon svg {
        width: 15px;
        height: 15px;
    }

    /* margin-top: auto baja la franja al pie aunque el titular sea corto. */
    .home-event-card__footer {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(23, 23, 23, 0.1);
    }

    .home-event-card__category {
        min-width: 0;
        margin: 0;
    }

    .home-event-card__category-label {
        display: block;
        margin-bottom: 3px;
        color: #6b6f74;
        font-family: var(--font-family-base);
        font-size: 12px;
        line-height: 1.3;
    }

    .home-event-card__category-value {
        display: block;
        color: var(--primary);
        font-family: var(--headings-font-family);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
    }

    .home-event-card__cta {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 9px 20px;
        border: 1.5px solid #171717;
        border-radius: 999px;
        color: #171717;
        font-family: var(--headings-font-family);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .home-event-card__cta:hover,
    .home-event-card__cta:focus-visible {
        background: #171717;
        color: var(--white);
    }

    .home-event-card__cta:focus-visible,
    .home-event-card__title a:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
    }
}

/* DESKTOP: las tarjetas y la tira acotadas a 1176px y centradas, como el
   mockup; el titular y el enlace de "Ver todos" siguen de ancho a ancho. */
@media (min-width: 1025px) {
    [data-component-id="usfq_theme:section_cards_events"].section-cards-events--home {
        .section-cards-events__filters,
        .container-mini-cards {
            width: 100%;
            max-width: 1176px;
            margin-inline: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-component-id="usfq_theme:section_cards_events"].section-cards-events--home {
        .home-event-card,
        .home-event-card__media img {
            transition: none;
        }

        .home-event-card:hover {
            transform: none;
        }
    }
}