/**
 * Preview Header — [gbrs_preview_header]
 *
 * Dos modos sobre la misma estructura:
 *
 *   .gbrs-preview--live  Cabecera del post. Fondo transparente (lo aplica
 *                        Elementor), tamaños en px, responsive.
 *
 *   .gbrs-preview--card  Tarjeta para capturar como imagen destacada.
 *                        Tamaños en rem: la página de captura fija
 *                        html{font-size:calc(100vw/93.75)} de modo que a
 *                        1500px de ancho 1rem = 16px. Así la MISMA hoja
 *                        sirve para 750×420, 1500×840 o cualquier múltiplo,
 *                        sin media queries.
 *
 * Layout (ambos modos):
 *   ┌──────────────────────────────────────────┐
 *   │              SEMANA 6                    │
 *   │  [logo away]   [escudo]   [logo home]    │
 *   │   Cincinnati            Green Bay        │
 *   │    BENGALS              PACKERS          │  ← Packers en dorado
 *   │        [cuenta atrás — solo live]        │
 *   │      12 de Octubre · Green Bay, WI       │
 *   │              Lambeau Field               │
 *   └──────────────────────────────────────────┘
 *
 * Orden SIEMPRE visitante-local: eso y el estadio son los que dicen la
 * localía. El escudo central es más pequeño que los de equipo y va centrado
 * verticalmente con ellos. El glifo vs / @ sigue existiendo pero oculto por
 * defecto; connector="1" lo recupera.
 *
 * Paleta: verde #10301f · dorado #f9b45b · blanco #ffffff
 */

/* ══ Común a los dos modos ═══════════════════════════════════════════════ */

.gbrs-preview {
    color: #ffffff;
    text-align: center;
}

/* Garantizar que [hidden] oculta de verdad, aunque el tema o Elementor
   apliquen reglas de display sobre nuestros descendientes. Sin esto, la
   cuenta atrás y el "EN JUEGO" se muestran a la vez: nuestra propia regla
   .gbrs-preview__live { display:flex } gana por especificidad al
   [hidden]{display:none} del navegador. Misma protección que ya lleva
   next-game.css. */
.gbrs-preview [hidden] {
    display: none !important;
}

.gbrs-preview .gbrs-preview__logos,
.gbrs-preview .gbrs-preview__names {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Logo y nombre comparten columna del grid y ambos van centrados en ella:
 * es lo que mantiene "BENGALS" exactamente debajo de su escudo. En
 * [gbrs_last_game] los logos tienden al centro porque debajo llevan el
 * marcador; aquí no hay marcador y esa asimetría desalineaba las dos filas. */
.gbrs-preview .gbrs-preview__team-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gbrs-preview .gbrs-preview__team-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.gbrs-preview .gbrs-preview__logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: #f9b45b;
}

.gbrs-preview .gbrs-preview__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gbrs-preview .gbrs-preview__connector {
    color: #f9b45b;
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
}

.gbrs-preview .gbrs-preview__badge {
    width: auto;
    display: block;
}

.gbrs-preview .gbrs-preview__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.gbrs-preview .gbrs-preview__team-city {
    font-family: "Poppins", sans-serif;
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.2;
}

.gbrs-preview .gbrs-preview__team-name {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.05;
}

/* Packers siempre en dorado, esté a la izquierda o a la derecha */
.gbrs-preview .gbrs-preview__team-name--gb {
    color: #f9b45b;
}

.gbrs-preview .gbrs-preview__week {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    color: #f9b45b;
    text-transform: uppercase;
    letter-spacing: .18em;
    line-height: 1;
    margin: 0;
}

.gbrs-preview .gbrs-preview__meta {
    margin: 0;
}

.gbrs-preview .gbrs-preview__datetime {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.gbrs-preview .gbrs-preview__venue {
    font-family: "Poppins", sans-serif;
    letter-spacing: .05em;
    color: #f9b45b;
    margin: 0;
    line-height: 1.3;
}

/* Sin glifo vs/@ (por defecto desde la 1.8.3), el escudo se queda solo en la
   columna central y el align-items:center del grid lo alinea al medio de los
   escudos de equipo, que es justo lo que se busca. Este margen solo aplica
   cuando el glifo se reactiva con connector="1". */
.gbrs-preview--no-badge .gbrs-preview__connector {
    margin-bottom: 0;
}

/* ══ Modo LIVE — cabecera dentro del post ════════════════════════════════ */

.gbrs-preview--live {
    padding: 0;
    border-radius: 8px;
}

.gbrs-preview--live .gbrs-preview__week {
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.gbrs-preview--live .gbrs-preview__logos {
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.gbrs-preview--live .gbrs-preview__team-logo {
    height: 150px;
}

.gbrs-preview--live .gbrs-preview__logo-text {
    height: 150px;
    min-width: 110px;
    font-size: 2rem;
}

.gbrs-preview--live .gbrs-preview__center,
.gbrs-preview--live .gbrs-preview__names-gap {
    width: 90px;
}

.gbrs-preview--live .gbrs-preview__connector {
    font-size: 2.9rem;
    margin-bottom: .5rem;
}

.gbrs-preview--live .gbrs-preview__badge {
    height: 60px;
}

.gbrs-preview--live .gbrs-preview__names {
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.gbrs-preview--live .gbrs-preview__team-city {
    font-size: 1rem;
}

.gbrs-preview--live .gbrs-preview__team-name {
    font-size: 2.9rem;
}

/* Cuenta atrás — misma estética que [gbrs_next_game]: cuatro cajas con
 * fondo tenue y borde dorado. La diferencia es el ancho: allí el bloque vive
 * en una columna estrecha de la portada, aquí en una cabecera a ancho
 * completo, así que se limita para que las cajas no se estiren. */
.gbrs-preview--live .gbrs-preview__countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    max-width: 720px;
    margin: 0 auto 1.5rem;
}

.gbrs-preview--live .gbrs-preview__cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .75rem .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(249, 180, 91, .25);
    border-radius: 6px;
    min-width: 0;
}

.gbrs-preview--live .gbrs-preview__cd-num {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    font-size: 2.75rem;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.gbrs-preview--live .gbrs-preview__cd-label {
    font-family: "Poppins", sans-serif;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f9b45b;
}

.gbrs-preview--live .gbrs-preview__live {
    font-family: "UltimatumBold", "Poppins", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: 1.3rem;
    letter-spacing: .1em;
    color: #f9b45b;
    margin-bottom: 1.5rem;
}

.gbrs-preview--live .gbrs-preview__live-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: #e74c3c;
    animation: gbrs-preview-pulse 1.4s ease-in-out infinite;
}

@keyframes gbrs-preview-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Parity con next-game.css: respetar la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .gbrs-preview--live .gbrs-preview__live-dot { animation: none; }
}

.gbrs-preview--live .gbrs-preview__datetime {
    font-size: 1.2rem;
}

.gbrs-preview--live .gbrs-preview__venue {
    font-size: 1rem;
    margin-top: .25rem;
}

/* Contenedores muy anchos (cabecera a ancho completo): logos algo mayores
   para que la composición no quede pequeña y perdida en el centro. */
@media (min-width: 1400px) {
    .gbrs-preview--live .gbrs-preview__team-logo,
    .gbrs-preview--live .gbrs-preview__logo-text { height: 180px; }
    .gbrs-preview--live .gbrs-preview__badge     { height: 72px; }
    .gbrs-preview--live .gbrs-preview__center,
    .gbrs-preview--live .gbrs-preview__names-gap { width: 110px; }
    .gbrs-preview--live .gbrs-preview__team-name { font-size: 3.4rem; }
    .gbrs-preview--live .gbrs-preview__connector { font-size: 3.4rem; }
    .gbrs-preview--live .gbrs-preview__week      { font-size: 1.15rem; }
    .gbrs-preview--live .gbrs-preview__team-city { font-size: 1.1rem; }
    .gbrs-preview--live .gbrs-preview__cd-num    { font-size: 3rem; }
}

/* Responsive — mismos cortes que [gbrs_last_game] */
@media (max-width: 1199px) {
    .gbrs-preview--live .gbrs-preview__team-logo,
    .gbrs-preview--live .gbrs-preview__logo-text { height: 120px; }
    .gbrs-preview--live .gbrs-preview__badge     { height: 50px; }
    .gbrs-preview--live .gbrs-preview__team-name { font-size: 2.3rem; }
    .gbrs-preview--live .gbrs-preview__connector { font-size: 2.4rem; }
}

@media (max-width: 900px) {
    .gbrs-preview--live .gbrs-preview__team-logo,
    .gbrs-preview--live .gbrs-preview__logo-text { height: 95px; }
    .gbrs-preview--live .gbrs-preview__badge     { height: 42px; }
    .gbrs-preview--live .gbrs-preview__center,
    .gbrs-preview--live .gbrs-preview__names-gap { width: 64px; }
    .gbrs-preview--live .gbrs-preview__team-name { font-size: 1.7rem; }
    .gbrs-preview--live .gbrs-preview__team-city { font-size: .85rem; }
    .gbrs-preview--live .gbrs-preview__connector { font-size: 1.9rem; }
    .gbrs-preview--live .gbrs-preview__cd-num    { font-size: 2.1rem; }
}

@media (max-width: 600px) {
    .gbrs-preview--live .gbrs-preview__logos,
    .gbrs-preview--live .gbrs-preview__names     { gap: .75rem; }
    .gbrs-preview--live .gbrs-preview__team-logo,
    .gbrs-preview--live .gbrs-preview__logo-text { height: 78px; }
    .gbrs-preview--live .gbrs-preview__badge     { height: 34px; }
    .gbrs-preview--live .gbrs-preview__center,
    .gbrs-preview--live .gbrs-preview__names-gap { width: 52px; }
    .gbrs-preview--live .gbrs-preview__team-name { font-size: 1.35rem; }
    .gbrs-preview--live .gbrs-preview__connector { font-size: 1.5rem; }
    .gbrs-preview--live .gbrs-preview__cd-num    { font-size: 1.6rem; }
    .gbrs-preview--live .gbrs-preview__cd-label  { font-size: .65rem; letter-spacing: .06em; }
    .gbrs-preview--live .gbrs-preview__cd-unit   { padding: .5rem .25rem; }
    .gbrs-preview--live .gbrs-preview__datetime  { font-size: 1rem; }
}

/* ══ Modo CARD — tarjeta para capturar ═══════════════════════════════════ */

.gbrs-preview--card {
    width: 100%;
    max-width: 100%;
    padding: 3.5rem 4rem;
    box-sizing: border-box;
}

.gbrs-preview--card .gbrs-preview__week {
    font-size: 1.9rem;
    margin-bottom: 2.25rem;
}

.gbrs-preview--card .gbrs-preview__logos {
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.gbrs-preview--card .gbrs-preview__team-logo {
    height: 23rem;
}

.gbrs-preview--card .gbrs-preview__logo-text {
    height: 23rem;
    min-width: 16rem;
    font-size: 5rem;
}

.gbrs-preview--card .gbrs-preview__center,
.gbrs-preview--card .gbrs-preview__names-gap {
    width: 11rem;
}

.gbrs-preview--card .gbrs-preview__connector {
    font-size: 5.5rem;
    margin-bottom: 1.25rem;
}

.gbrs-preview--card .gbrs-preview__badge {
    height: 8.5rem;
}

.gbrs-preview--card .gbrs-preview__names {
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.gbrs-preview--card .gbrs-preview__team-city {
    font-size: 1.9rem;
    margin-bottom: .4rem;
}

.gbrs-preview--card .gbrs-preview__team-name {
    font-size: 5.25rem;
}

.gbrs-preview--card .gbrs-preview__datetime {
    font-size: 2.1rem;
    letter-spacing: .04em;
}

.gbrs-preview--card .gbrs-preview__venue {
    font-size: 1.7rem;
    margin-top: .5rem;
}

/* ══ Página de captura ═══════════════════════════════════════════════════
 * Marco de dimensiones exactas sobre el que se hace la captura.
 * El fondo verde va aquí (no en .gbrs-preview) para que el PNG exportado
 * no tenga bordes transparentes. Para añadir la textura de la web más
 * adelante basta con un background-image en .gbrs-preview-frame.
 */

.gbrs-preview-page {
    margin: 0;
    padding: 0;
    background: #10301f;
}

.gbrs-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10301f;
    overflow: hidden;
    position: relative;
}

.gbrs-preview-frame > .gbrs-preview {
    width: 100%;
    /* Por encima del velo de oscurecido del fondo. */
    position: relative;
    z-index: 1;
}

/* Con imagen de fondo: velo del verde corporativo por encima de la foto para
   garantizar la legibilidad del texto blanco. La intensidad la fija la página
   de captura en --gbrs-card-dim desde el ajuste del panel. El verde sólido
   sigue debajo, así que si la imagen no carga la tarjeta no se rompe. */
.gbrs-preview-frame--bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gbrs-card-dim, rgba(16, 48, 31, .25));
    z-index: 0;
}