/**
 * Single Evento — Estilos
 * Figma: node 5857-31152
 *
 * Solo el layout de dos columnas (cartel 400px | contenido 740px) y el cartel.
 * El breadcrumb, el badge, la fila de metadatos y la fila de compartir se
 * reutilizan de assets/css/single-post.css (.single-general__*), y los botones
 * del sistema global de assets/css/buttons.css (.btn / .btn--sm / .btn--primary
 * / .btn--secondary). Aquí solo se ajusta lo que difiere en esta plantilla.
 */

/* ==========================================================================
   1. Sección (mobile-first)
   ========================================================================== */

.single-evento {
    width: 100%;
}

.single-evento__wrapper {
    width: 100%;
    background-color: var(--wp--preset--color--light-gray, #F4F4F4);
    padding: var(--wp--preset--spacing--medium, 2rem) var(--wp--preset--spacing--small, 1rem) var(--wp--preset--spacing--large, 3rem);
}

.single-evento__container {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--medium, 2rem);
    width: 100%;
    max-width: 1204px; /* 400 + 64 + 740 (Figma) */
    margin: 0 auto;
}

/* El breadcrumb compartido está limitado a 1000px; aquí debe ocupar
   todo el ancho del contenedor (Figma: el breadcrumb abarca el frame). */
.single-evento__breadcrumb {
    max-width: none;
}

/* ==========================================================================
   2. Layout de dos columnas
   ========================================================================== */

.single-evento__layout {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--medium, 2rem);
    width: 100%;
}

/* Cartel vertical — proporción 400x555 del Figma */
.single-evento__media {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--small, 1rem);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.single-evento__poster {
    width: 100%;
    aspect-ratio: 400 / 555;
    overflow: hidden;
    border-radius: var(--wp--custom--border-radius--md, 8px);
    box-shadow: var(--wp--custom--shadow--lg, 0px 14px 24px 0px rgba(0, 0, 0, 0.12));
}

.single-evento__poster-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-evento__content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--medium, 2rem);
    width: 100%;
    min-width: 0;
}

/* ==========================================================================
   3. Elementos del contenido
   ========================================================================== */

/* Badge: el compartido va centrado y con fondo #F4F4F4; aquí se alinea a la
   izquierda y va en blanco para contrastar sobre el fondo gris de la sección. */
.single-evento__badges {
    justify-content: flex-start;
}

.single-evento__badge {
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

/* Título: H3 Bold — 36px, alineado a la izquierda */
.single-evento__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--large, 36px); /* clamp 28→36px */
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
}

/* Metadatos: el compartido va centrado; aquí a la izquierda */
.single-evento__meta {
    justify-content: flex-start;
}

/* Botones de acción */
.single-evento__actions {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px;
}

.single-evento__btn {
    height: 40px; /* Figma: 40px; .btn--sm por defecto son 36px */
}

/* Cuerpo: lg body regular — 18px, #787878 */
.single-evento__body {
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--body-large, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-light, #787878);
}

.single-evento__body > *:first-child {
    margin-top: 0;
}

.single-evento__body > *:last-child {
    margin-bottom: 0;
}

.single-evento__body img,
.single-evento__body iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* La fila compartida usa border-top #F4F4F4, invisible sobre este fondo gris */
.single-evento__share-row {
    border-top-color: rgba(120, 120, 120, 0.25);
}

/* ==========================================================================
   4. Responsive (tablet 768px+, desktop 1024px+)
   ========================================================================== */

@media (min-width: 768px) {
    .single-evento__wrapper {
        padding: var(--wp--preset--spacing--medium, 2rem) var(--wp--preset--spacing--medium, 2rem) var(--wp--preset--spacing--extra-large, 4rem);
    }
}

@media (min-width: 1024px) {
    .single-evento__wrapper {
        padding: 24px 64px 56px;
    }

    /* Figma: row, justify center, gap 64px */
    .single-evento__layout {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 64px;
    }

    .single-evento__media {
        flex: 0 0 400px;
        width: 400px;
        max-width: 400px;
        margin: 0;
    }

    .single-evento__content {
        flex: 1 1 740px;
        max-width: 740px;
    }
}

/* ==========================================================================
   5. Accesibilidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .single-evento__btn,
    .single-evento__share-row .single-general__social-btn {
        transition: none;
    }

    .single-evento__btn:hover {
        transform: none;
    }
}