/* EOM Navegación Post 1.1.6 · plantillas visuales heredables de Eventos */

.eomnp-wrapper {
    width: 100%;
    margin: 38px 0 0;
}

/*
 * En FINALES el listado entra dentro de una vista virtual antes de los filtros
 * habituales de contenido. Ajustamos solo esa variante para que la distancia
 * visual desde los círculos sea la misma que en VÍDEOS.
 */
.eomnp-wrapper--sport.eomnp-wrapper--finales {
    /* La vista virtual añade 44px estructurales (20px de padding + 24px de margen)
       que VÍDEOS no tiene en el mismo punto del flujo. Los neutralizamos aquí. */
    margin-top: -44px !important;
}

@media (max-width: 768px) {
    .eomnp-wrapper--sport.eomnp-wrapper--finales {
        /* En móvil la navegación usa 18px + 20px = 38px. */
        margin-top: -38px !important;
    }
}

.eomnp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.eomnp-item {
    min-width: 0;
}

.eomnp-thumb-link {
    display: block;
    text-decoration: none !important;
}

.eomnp-thumb {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 14px !important;
    border-radius: 14px;
}

.eomnp-thumb--empty {
    background: #f2f4f7;
}

.eomnp-title {
    margin: 0;
    font-size: clamp(20px, 1.65vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}

.eomnp-title a {
    color: #4769a8 !important;
    text-decoration: none !important;
}

.eomnp-title a:hover,
.eomnp-title a:focus-visible {
    color: #2f5f8f !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.eomnp-pagination {
    margin-top: 45px;
}

.eomnp-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eomnp-pagination .page-numbers li {
    margin: 0;
}

.eomnp-pagination a.page-numbers,
.eomnp-pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #111 !important;
    font-weight: 700;
    text-decoration: none !important;
}

.eomnp-pagination span.page-numbers.current {
    background: #4769a8;
    color: #fff !important;
}

.eomnp-pagination .dots {
    min-width: auto !important;
    padding-inline: 4px !important;
    background: transparent !important;
}

.eomnp-admin-warning {
    margin: 20px 0;
    padding: 12px 14px;
    border-left: 4px solid #dba617;
    background: #fff8e5;
}

@media (max-width: 1024px) {
    .eomnp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .eomnp-wrapper {
        margin-top: 30px;
    }

    .eomnp-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .eomnp-title {
        font-size: 21px;
    }

    .eomnp-pagination a.page-numbers,
    .eomnp-pagination span.page-numbers {
        min-width: 42px;
        height: 42px;
        padding: 0 10px;
    }
}


/* Títulos visuales de Eventos: el texto semántico permanece en aria-label y
 * Arquitectura aporta banderas/pictogramas como recursos puramente visuales. */
.eomnp-title__visual {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: .18em .26em;
    max-width: 100%;
}

.eomnp-title__part {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    gap: .18em;
    min-width: 0;
    max-width: 100%;
}

.eomnp-title__participant,
.eomnp-title__context {
    display: inline-flex;
    align-items: center;
    gap: .13em;
    white-space: nowrap;
}

.eomnp-title__participant-name,
.eomnp-title__context,
.eomnp-title__edition,
.eomnp-title__gender-text {
    font-weight: inherit;
}

.eomnp-title__flag {
    display: inline-block !important;
    width: auto !important;
    height: .72em !important;
    max-width: 1.24em !important;
    margin: 0 .02em !important;
    padding: 0 !important;
    object-fit: cover !important;
    border-radius: .07em;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
    vertical-align: middle !important;
}

.eomnp-title__sport-icon,
.eomnp-title__context-icon,
.eomnp-title__gender-icon {
    display: inline-block !important;
    width: auto !important;
    height: .94em !important;
    max-width: 1.08em !important;
    margin: -.02em .01em 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    filter: none !important;
}

.eomnp-title__context-icon {
    max-width: 1.14em !important;
}

.eomnp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Arquitectura 1.2: piezas genéricas en el mismo orden que el H1 del Evento. */
.eomnp-title__visual--template {
    align-items: center;
    gap: .18em .26em;
}

.eomnp-title__token-group {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    gap: .13em;
    min-width: 0;
    max-width: 100%;
}

.eomnp-title__token-group--participant_1,
.eomnp-title__token-group--participant_2,
.eomnp-title__token-group--context {
    white-space: nowrap;
}

.eomnp-title__token-text {
    font: inherit;
    color: inherit;
}

.eomnp-title__token-icon,
.eomnp-title__crest {
    display: inline-block !important;
    width: auto !important;
    height: .94em !important;
    max-width: 1.12em !important;
    margin: -.02em .01em 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    filter: none !important;
}

.eomnp-title__crest {
    height: 1.02em !important;
    max-width: 1.16em !important;
}


/* 1.1.6 · contrato visual genérico: mismas proporciones que el H1 del Evento. */
.eomnp-title__visual--template img.eomnp-title__token-icon,
.eomnp-title__visual--template img.eomnp-title__crest {
    width:auto !important;
    height:.94em !important;
    max-width:1.12em !important;
    max-height:1em !important;
    margin:-.02em .01em 0 !important;
    padding:0 !important;
    object-fit:contain !important;
    vertical-align:middle !important;
}
.eomnp-title__visual--template img.eomnp-title__flag {
    width:auto !important;
    height:.72em !important;
    max-width:1.24em !important;
    max-height:.78em !important;
    object-fit:contain !important;
}


/* ======================================================================
 * 1.1.7 · Escala visual reforzada de los tokens en listados de Eventos.
 * Los títulos siguen usando em para escalar con su propia tipografía, pero
 * pictogramas/rama/escudos destacan claramente más que el texto. Las variables
 * dejan un único punto de ajuste para futuras afinaciones visuales.
 * ====================================================================== */
.eomnp-title {
    --eomnp-event-icon-height: 1.45em;
    --eomnp-event-icon-max-width: 1.72em;
    --eomnp-event-crest-height: 1.50em;
    --eomnp-event-crest-max-width: 1.72em;
    --eomnp-event-flag-height: 1.04em;
    --eomnp-event-flag-max-width: 1.72em;
}

.eomnp-title__sport-icon,
.eomnp-title__context-icon,
.eomnp-title__gender-icon,
.eomnp-title__token-icon,
.eomnp-title__visual--template img.eomnp-title__token-icon {
    width: auto !important;
    height: var(--eomnp-event-icon-height) !important;
    max-width: var(--eomnp-event-icon-max-width) !important;
    max-height: var(--eomnp-event-icon-height) !important;
    margin: -.10em .03em -.08em !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

.eomnp-title__crest,
.eomnp-title__visual--template img.eomnp-title__crest {
    width: auto !important;
    height: var(--eomnp-event-crest-height) !important;
    max-width: var(--eomnp-event-crest-max-width) !important;
    max-height: var(--eomnp-event-crest-height) !important;
    margin: -.10em .03em -.08em !important;
    object-fit: contain !important;
}

.eomnp-title__flag,
.eomnp-title__visual--template img.eomnp-title__flag {
    width: auto !important;
    height: var(--eomnp-event-flag-height) !important;
    max-width: var(--eomnp-event-flag-max-width) !important;
    max-height: var(--eomnp-event-flag-height) !important;
    margin: -.06em .03em -.04em !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .eomnp-title {
        --eomnp-event-icon-height: 1.38em;
        --eomnp-event-icon-max-width: 1.64em;
        --eomnp-event-crest-height: 1.43em;
        --eomnp-event-crest-max-width: 1.66em;
        --eomnp-event-flag-height: 1em;
        --eomnp-event-flag-max-width: 1.64em;
    }
}

/* ======================================================================
 * 1.1.8 · Tamaño independiente de la proporción del recurso.
 *
 * Un pictograma nuevo puede tener un lienzo más ancho que los anteriores.
 * El max-width histórico hacía que el navegador redujera también su altura
 * para conservar la proporción, por lo que visualmente volvía al tamaño
 * pequeño. Desde aquí la ALTURA es la medida canónica de pictogramas/emojis;
 * su anchura se calcula libremente a partir de la proporción real del PNG.
 * Banderas y escudos conservan sus límites específicos.
 * ====================================================================== */
.eomnp-title__sport-icon,
.eomnp-title__context-icon,
.eomnp-title__gender-icon,
.eomnp-title__token-icon,
.eomnp-title__visual--template img.eomnp-title__token-icon {
    width: auto !important;
    height: var(--eomnp-event-icon-height) !important;
    min-height: var(--eomnp-event-icon-height) !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}