.actividad-taxonomy__hero {
    padding: 6rem 1.5rem;
    text-align: center;
}

.actividad-taxonomy__hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.2rem;
}

.actividad-taxonomy__hero .wp-block-term-description {
    max-width: 620px;
    margin: 0 auto 2rem auto;
    opacity: 0.8;
}

.wp-block-post-template {
    gap: 3rem;
    margin-top: 3rem;
}

@media (max-width: 1024px) {
    .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

/* Activities archive grid (Step 10.48): four columns on desktop,
   stepping down but never below two. Scoped to `.actividad-archive` and
   `!important` so it wins over the shared `.wp-block-post-template`
   rules above (which drop to two and then one) and over core's own
   grid-layout stylesheet for `columnCount:4`. */
.actividad-archive .wp-block-post-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1200px) {
    .actividad-archive .wp-block-post-template {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 782px) {
    .actividad-archive .wp-block-post-template {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/***** ACTIVIDAD-CARD *****/

/* Card base */
.actividad-card {
    background: var(--wp--preset--color--background-2);
    border-radius: 16px;
    overflow: hidden; /* CLAVE */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Imagen contenedor */
.actividad-card__image {
    overflow: hidden;
}

/* Imagen interna */
.actividad-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE */
    display: block;
    transition: transform 0.4s ease;
}

/* Hover suave */
.actividad-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.actividad-card:hover .actividad-card__image img {
    transform: scale(1.04);
}

/* Body */
.actividad-card__body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}

.actividad-card__title {
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--wp--preset--color--primary-1);
}

.actividad-card__excerpt {
    font-size: 0.95rem;
    opacity: 0.75;
    line-height: 1.6;
    margin: 0; /* elimina márgenes raros */
}

.actividad-card__excerpt p {
    margin: 0;
    padding: 0 0.5rem; /* micro respiración lateral */

    /* Fase 10, paso 10.37: el extracto escrito a mano se muestra entero
       (ya no se recorta a 20 palabras en el patrón). Este límite sólo
       acota lo que se *ve* en la rejilla, para que un extracto largo
       —los alemanes lo son— no estire su fila; el texto completo sigue
       en el DOM. Afecta únicamente a la tarjeta: el subtítulo de la
       página de Actividad usa `.actividad-single__subtitle`. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.actividad-card__cta {
    margin-top: auto !important;
    margin-bottom: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.actividad-card__cta::after {
    content: ' →';
}

/***** EVENT-LIST *****/

/* GRID */

.atma-events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
}

@media (max-width: 900px) {
    .atma-events {
        grid-template-columns: 1fr;
    }
}

/* SEPARADOR DE MES */

.atma-events-month {
    grid-column: 1/-1;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wp--preset--color--secondary-1); /* Petroleo */
    margin-top: 2rem;
    margin-bottom: -1rem;
    font-weight: 700;
}

/* CARD */

.atma-event-card {
    display: flex;
    background: var(--wp--preset--color--primary-3); /* Bordó */
    color: #ffffff;
    border-radius: 0;
    overflow: hidden;
    min-height: 110px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.atma-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* IMAGEN */

.atma-event-card__image {
    width: 110px;
    /* Square in every view -- Phase 9 Step 9.17, at the project owner's
       request. The width still varies per view (the block's own
       stylesheet widens it in list and grid); the ratio no longer does,
       so a flyer is cropped the same way wherever the card appears. */
    aspect-ratio: 1 / 1;
    position: relative;
    flex-shrink: 0;
    background: var(--wp--preset--color--background-2); /* Crema aireado */
    display: flex;
    align-items: center;
    justify-content: center;
}

.atma-event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logo fallback. Half the frame's width (Step 9.17, was 70%): it is a
   wordmark sitting in a square, and filling that square crowds it
   against every edge. `height: auto` + `contain` keep it from being
   stretched to the frame's aspect ratio. */
.atma-event-card__image img.event-logo {
    width: 50%;
    height: auto;
    object-fit: contain;
}

/* BADGE FECHA */

.event-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.event-date-badge {
    background: var(--wp--preset--color--secondary-2); /* maiz */
    color: #000;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 3px 7px;
    line-height: 1;
    flex-shrink: 0;
}

/* CONTENIDO */

.atma-event-card__content {
    padding: 1rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}

/* TITULO */

.atma-event-card__title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
}

.atma-event-card__title a {
    color: #ffffff;
    text-decoration: none;
}

.atma-event-card__title a:hover {
    background: var(--wp--preset--color--secondary-2); /* Maiz */
}

/* META */

.atma-event-card__meta {
    font-size: 0.82rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* SEPARADORES META */

.atma-event-card__meta span + span::before {
    content: '•';
    margin: 0 0.5rem;
    opacity: 0.6;
}

/* IDIOMAS */

.event-lang {
    color: var(--wp--preset--color--secondary-2);
    font-weight: 600;
}

/* Configuración para Desktop (3 columnas) */
.grid-home-actividades,
.grid-home-testimonios {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
}

/* Configuración para Móvil (1 columna) */
@media (max-width: 600px) {
    .grid-home-actividades {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-home-testimonios {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .grid-home-espacio .wp-block-image,
    .grid-home-espacio .blocks-gallery-item {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/***** DIMENSIONES EN LA TARJETA DE ACTIVIDAD *****/
/* Fase 5, paso 5.2 — pages-public.md pide mostrar las dimensiones de
   clasificación y etiquetas seleccionadas en cada tarjeta. Los bloques
   `core/post-terms` que las generan viven en el patrón
   `atma-nada/actividad-card`. */

.actividad-card__dimensions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.actividad-card__dimensions:empty {
    display: none;
}

.actividad-card__dimension {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--secondary-1);
}

.actividad-card__dimension a {
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.actividad-card__dimension a:hover,
.actividad-card__dimension a:focus {
    background: var(--wp--preset--color--secondary-1);
    color: #fff;
}

/***** STAFF BIO – SINGLE *****/
/* Fase 5, paso 5.3. */

.staff-bio-single__header {
    text-align: center;
    margin-bottom: 2rem;
}

.staff-bio-single__photo img {
    border-radius: 50%;
}

.staff-bio-single__back {
    margin-top: 3rem;
}

/***** BLOG *****/
/* Fase 5, paso 5.5 — la entrada "Blog" del menú por fin tiene algo
   detrás. Estilos mínimos: lo que pide pages-public.md es que las
   plantillas estándar de WordPress se vean bien con el diseño del
   sitio, no una maquetación nueva. */

.atma-blog__header,
.atma-archive__header,
.atma-page__header,
.atma-post__header {
    margin-bottom: 2rem;
}

.atma-blog__list,
.atma-archive__list {
    display: grid;
    gap: 2.5rem;
}

.post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2fr;
    gap: 1.5rem;
    align-items: start;
}

.post-card__date {
    font-size: 0.85rem;
    color: var(--wp--preset--color--secondary-1);
}

.post-card__title {
    margin: 0.25rem 0 0.5rem;
}

.post-card__title a {
    text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .post-card {
        grid-template-columns: 1fr;
    }
}

.atma-post__meta {
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--wp--preset--color--secondary-1);
}

.atma-post__image {
    margin: 2rem 0;
}

.atma-post__footer {
    margin-top: 3rem;
    font-size: 0.9rem;
}

/***** IMPRESSUM – DATOS DEL RESPONSABLE *****/
/* Fase 5, paso 5.5 — mismos datos que la factura, misma fuente. */

.atma-issuer {
    font-style: normal;
    display: grid;
    gap: 0.25rem;
    margin: 1rem 0 2rem;
}

.atma-issuer__name {
    font-weight: 700;
}

/***** INSTAGRAM – PATRÓN DE ACTIVIDAD *****/
/* Fase 5, paso 5.6. El patrón usa `core/columns`, que en móvil apila;
   aquí se convierte en cuadrícula real para que siga siendo una
   cuadrícula de fotos y no una columna larguísima. */

.instagram-feed {
    margin: 3rem 0;
}

.instagram-feed__grid {
    gap: 0.75rem;
}

.instagram-feed__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 781px) {
    .instagram-feed__grid.wp-block-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .instagram-feed__grid.wp-block-columns > .wp-block-column {
        flex-basis: auto !important;
    }
}

.instagram-feed__cta {
    margin-top: 1rem;
    text-align: right;
}