/* ============================================================
   TST Elementor Blocks — Estilos del FRONTEND
   Solo para los widgets NUEVOS que no existen en el child theme.
   Las secciones de juego/curiosidades/feeds usan los estilos del child.

   Tokens disponibles desde el child theme:
     --tst-brand, --tst-brand-dark, --tst-lime, --tst-lime-dark,
     --tst-gold, --tst-live, --tst-wta, --tst-ink-100, --tst-ink-60,
     --tst-ink-10, --radius-md, --radius-lg, --font-headline,
     --font-body, --font-mono
   ============================================================ */


/* ════════════════════════════════════════
   BLOQUE DECLARACIONES — Pullquotes
   ════════════════════════════════════════ */

.tst-eb-declaraciones {
    margin: 32px 0;
}

.tst-eb-quotes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .tst-eb-quotes-grid {
        grid-template-columns: 1fr !important;
    }
}

.tst-eb-pullquote {
    background: var(--tst-brand-dark, #1E3A5F);
    border-radius: var(--radius-lg, 12px);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tst-eb-pullquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--tst-lime, #E1FA59);
}

.tst-eb-pullquote:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tst-eb-pullquote__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tst-eb-pullquote__text {
    font-family: var(--font-body, 'Lora', Georgia, serif);
    font-size: 1.05rem;
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    margin: 0 0 12px 0;
    border: 0;
    padding: 0;
    quotes: '"' '"';
}

.tst-eb-pullquote__text::before {
    content: open-quote;
    margin-right: 2px;
}

.tst-eb-pullquote__text::after {
    content: close-quote;
    margin-left: 2px;
}

.tst-eb-pullquote__source {
    display: block;
    font-family: var(--font-headline, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tst-lime, #E1FA59);
    font-style: normal;
}


/* ════════════════════════════════════════
   RANKING WIDGET
   ════════════════════════════════════════ */

.tst-eb-ranking {
    background: #fff;
    border: 1px solid var(--tst-ink-10, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    max-width: 480px;
    margin: 16px 0;
}

.tst-eb-ranking__head {
    background: var(--tst-brand-dark, #1E3A5F);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tst-eb-ranking__title {
    font-family: var(--font-headline, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tst-eb-ranking__badge {
    font-family: var(--font-headline, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tst-eb-ranking__badge--atp { background: var(--tst-brand, #305180); }
.tst-eb-ranking__badge--wta { background: var(--tst-wta,   #6A4C93); }

.tst-eb-rk-row {
    display: grid;
    grid-template-columns: 32px auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tst-ink-10, #e5e7eb);
    font-family: var(--font-headline, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--tst-ink-100, #1A1A1A);
}

.tst-eb-rk-row:last-child {
    border-bottom: 0;
}

.tst-eb-rk-row--arg {
    background: rgba(48, 81, 128, 0.04);
}

.tst-eb-rk-pos {
    font-weight: 800;
    color: var(--tst-ink-60, #6b7280);
    text-align: center;
}

.tst-eb-rk-pos--1 { color: var(--tst-gold,      #F5B021); }
.tst-eb-rk-pos--2 { color: var(--tst-ink-60,    #9ca3af); }
.tst-eb-rk-pos--3 { color: var(--tst-lime-dark, #B8CC30); }

.tst-eb-rk-flag {
    font-size: 16px;
    line-height: 1;
}

.tst-eb-rk-name {
    font-weight: 600;
}

.tst-eb-rk-row--arg .tst-eb-rk-name {
    color: var(--tst-brand, #305180);
    font-weight: 700;
}

.tst-eb-rk-up { color: #16a34a; font-weight: 700; font-size: 11px; }
.tst-eb-rk-dn { color: var(--tst-live, #E63946); font-weight: 700; font-size: 11px; }
.tst-eb-rk-eq { color: var(--tst-ink-60, #9ca3af); font-weight: 700; font-size: 11px; }

.tst-eb-rk-pts {
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 12px;
    color: var(--tst-ink-100, #1A1A1A);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 60px;
}


/* ════════════════════════════════════════
   AD WRAPPER
   ════════════════════════════════════════ */

.tst-eb-ad-wrapper {
    margin: 16px 0;
    text-align: center;
}


/* ════════════════════════════════════════
   FALLBACK CARD (cuando tst_j_card no existe)
   ════════════════════════════════════════ */

.tst-eb-fallback-card {
    background: #fff;
    border: 1px solid var(--tst-ink-10, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.tst-eb-fallback-card img {
    display: block;
    width: 100%;
    height: auto;
}

.tst-eb-fallback-card h3 {
    padding: 12px 16px;
    margin: 0;
    font-family: var(--font-headline, 'DM Sans', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.tst-eb-fallback-card a {
    color: var(--tst-ink-100, #1A1A1A);
    text-decoration: none;
}

.tst-eb-fallback-card a:hover {
    color: var(--tst-brand, #305180);
}