/* ==========================================================================
   SPARTA HOME - INDEX STYLES (css/index.css)
   Moderní prémiový design pro 4 statistické boxy (bez ikon)
   ========================================================================== */

/* Kontejner 4 statistických boxů */
.sparta-dashboard {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 45px auto 35px !important;
    width: 100% !important;
    max-width: 1140px !important;
    box-sizing: border-box !important;
}

/* Samotná karta metriky */
.sparta-stat-box {
    position: relative !important;
    background: linear-gradient(180deg, rgba(22, 22, 38, 0.88) 0%, rgba(12, 12, 22, 0.96) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 26px 20px 24px !important;
    text-align: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 160px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease,
                background 0.28s ease !important;
}

/* Horní linka trikolóry */
.sparta-stat-box .stat-box-accent {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #0033a0 0%, #0033a0 33.33%, #ffc72c 33.33%, #ffc72c 66.66%, #ac1f2d 66.66%, #ac1f2d 100%) !important;
    opacity: 0.85 !important;
    transition: height 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease !important;
    z-index: 5 !important;
    display: block !important;
}

/* Pozadí - jemný světelný odlesk */
.sparta-stat-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 120px;
    background: radial-gradient(ellipse at top, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
    pointer-events: none;
    transition: background 0.3s ease;
    z-index: 1;
}

.sparta-stat-box:hover::after {
    background: radial-gradient(ellipse at top, rgba(172, 31, 45, 0.25) 0%, transparent 70%);
}

/* Hover efekt karty */
.sparta-stat-box:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(197, 160, 89, 0.55) !important;
    background: linear-gradient(180deg, rgba(28, 28, 48, 0.95) 0%, rgba(14, 14, 26, 0.98) 100%) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.68), 0 0 25px rgba(172, 31, 45, 0.28) !important;
}

.sparta-stat-box:hover .stat-box-accent {
    height: 3px !important;
    opacity: 1 !important;
    box-shadow: 0 1px 8px rgba(255, 199, 44, 0.6) !important;
}

/* Vnitřní obsah */
.sparta-stat-box .stat-box-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 1. Hlavní štítek nahoře (Montserrat) */
.sparta-stat-box .sparta-stat-label {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--color-secondary, #C5A059) !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    display: block !important;
    transition: color 0.25s ease !important;
}

.sparta-stat-box:hover .sparta-stat-label {
    color: #ffffff !important;
}

/* 2. Velké číslo metriky uprostřed (Oswald) */
.sparta-stat-box .sparta-stat-value {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(2.8rem, 4.2vw, 3.8rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7) !important;
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease !important;
    text-align: center !important;
    display: block !important;
}

.sparta-stat-box:hover .sparta-stat-value {
    color: #ffc72c !important;
    text-shadow: 0 0 20px rgba(255, 199, 44, 0.45) !important;
}

/* 3. Kontextový podtitulek dole */
.hero-content .sparta-stat-box .stat-box-desc,
.sparta-stat-box .stat-box-desc {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #8e8ea6 !important;
    letter-spacing: 0.4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-image: none !important;
    text-shadow: none !important;
    line-height: 1.3 !important;
    transition: color 0.25s ease !important;
    text-align: center !important;
    display: block !important;
    text-transform: none !important;
}

.sparta-stat-box:hover .stat-box-desc {
    color: #d1d5db !important;
}

/* Responzivita */
@media (max-width: 992px) {
    .sparta-dashboard {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        max-width: 650px !important;
    }
}

@media (max-width: 540px) {
    .sparta-dashboard {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 28px auto 20px !important;
    }

    .sparta-stat-box {
        padding: 20px 14px 18px !important;
        min-height: 142px !important;
        border-radius: 13px !important;
    }

    .sparta-stat-box .sparta-stat-label {
        font-size: 0.78rem !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 6px !important;
    }

    .sparta-stat-box .sparta-stat-value {
        font-size: 2.4rem !important;
        margin-bottom: 6px !important;
    }

    .hero-content .sparta-stat-box .stat-box-desc,
    .sparta-stat-box .stat-box-desc {
        font-size: 0.68rem !important;
    }
}

/* ==========================================================================
   UPUTÁVKA NA NÁSLEDUJÍCÍ ZÁPAS (VARIANTA A) - HERO BROADCAST BANNER
   ========================================================================== */

.next-match-section {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 32px auto 10px !important;
    box-sizing: border-box !important;
    animation: fadeIn 0.4s ease-out forwards !important;
}

.next-match-card {
    position: relative !important;
    background: linear-gradient(180deg, rgba(22, 22, 38, 0.94) 0%, rgba(12, 12, 22, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(172, 31, 45, 0.2) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
    text-align: left !important;
}

.next-match-card:hover {
    border-color: rgba(197, 160, 89, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(172, 31, 45, 0.3) !important;
}

/* Horní trikolóra linka (stejná tloušťka 2px jako na 4 statistických boxech) */
.next-match-accent-line {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #0033a0 0%, #0033a0 33.33%, #ffc72c 33.33%, #ffc72c 66.66%, #ac1f2d 66.66%, #ac1f2d 100%) !important;
    opacity: 0.85 !important;
    transition: height 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease !important;
    z-index: 5 !important;
}

.next-match-card:hover .next-match-accent-line {
    height: 3px !important;
    opacity: 1 !important;
    box-shadow: 0 1px 8px rgba(255, 199, 44, 0.6) !important;
}

/* 1. HORNÍ LIŠTA (Top Bar) */
.nm-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.nm-meta-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.nm-tag-label {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #0f172a !important;
    background: linear-gradient(135deg, #ffc72c 0%, #f59e0b 100%) !important;
    padding: 3px 12px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 10px rgba(255, 199, 44, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.nm-comp-badge {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Specifické soutěžní barvy */
.nm-comp-badge.comp-lm {
    background: rgba(255, 184, 0, 0.15) !important;
    border-color: rgba(255, 184, 0, 0.5) !important;
    color: #ffb800 !important;
}
.nm-comp-badge.comp-el {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    color: #f97316 !important;
}
.nm-comp-badge.comp-kl {
    background: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    color: #06b6d4 !important;
}
.nm-comp-badge.comp-pmez {
    background: rgba(229, 169, 60, 0.15) !important;
    border-color: rgba(229, 169, 60, 0.5) !important;
    color: #e5a93c !important;
}

.nm-stage-text {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.nm-meta-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nm-location-pill {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.nm-location-pill.is-home {
    background: rgba(0, 51, 160, 0.35) !important;
    border: 1px solid rgba(0, 51, 160, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 51, 160, 0.3) !important;
}

.nm-location-pill.is-away {
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: #cbd5e1 !important;
}

.nm-countdown-badge {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(172, 31, 45, 0.85), rgba(138, 23, 35, 0.95)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 199, 44, 0.4) !important;
    box-shadow: 0 2px 8px rgba(172, 31, 45, 0.4) !important;
    text-transform: uppercase !important;
}

/* Zelená buňka pro DNES a PROBÍHÁ */
.nm-countdown-badge.is-green {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.45) !important;
}

.nm-countdown-badge.is-live {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border: 1px solid #86efac !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    animation: livePulse 2s infinite ease-in-out !important;
}

@keyframes livePulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.95);
        transform: scale(1.04);
    }
}

/* 2. HLAVNÍ DUEL ZÓNA (Duel Zone) */
.nm-duel-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 26px 30px !important;
    gap: 20px !important;
    background: radial-gradient(ellipse at center, rgba(172, 31, 45, 0.08) 0%, transparent 70%) !important;
}

.nm-team-col {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
}

.nm-team-home {
    justify-content: flex-end !important;
    text-align: right !important;
}

.nm-team-away {
    justify-content: flex-start !important;
    text-align: left !important;
}

.nm-crest-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.nm-flag-img {
    width: 38px !important;
    height: 27px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: block !important;
}

.nm-team-name {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(1.2rem, 2.4vw, 1.85rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    white-space: normal !important;
}

.nm-team-col.is-sparta .nm-team-name {
    color: #ffffff !important;
}

/* Středový sloupec s časem a stadionem */
.nm-center-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

.nm-time-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border: 1px solid rgba(255, 199, 44, 0.35) !important;
    padding: 6px 18px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nm-time-val {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: var(--color-hover, #FF9900) !important;
    letter-spacing: 1.5px !important;
    line-height: 1 !important;
    text-shadow: 0 0 14px rgba(255, 153, 0, 0.4) !important;
}

.nm-vs-text {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-secondary, #C5A059) !important;
    letter-spacing: 2px !important;
}

.nm-date-text {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    letter-spacing: 0.4px !important;
}

.nm-day-name {
    color: var(--color-secondary, #C5A059) !important;
}

.nm-stadium-line {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: 240px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nm-stadium-line svg {
    color: var(--color-hover, #FF9900) !important;
    flex-shrink: 0 !important;
}

/* 3. SPODNÍ INTERAKTIVNÍ LIŠTA (Seamless Full-Width Action Footer) */
.nm-bottom-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, rgba(18, 18, 30, 0.85) 0%, rgba(10, 10, 18, 0.96) 100%) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border-radius: 0 0 19px 19px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.nm-bottom-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 199, 44, 0.4), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.nm-bottom-bar:hover {
    background: linear-gradient(90deg, rgba(172, 31, 45, 0.35) 0%, rgba(197, 160, 89, 0.18) 50%, rgba(172, 31, 45, 0.35) 100%) !important;
    border-top-color: rgba(255, 199, 44, 0.35) !important;
}

.nm-bottom-bar:hover::before {
    opacity: 1 !important;
}

.nm-fa-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.nm-fa-icon {
    color: var(--color-secondary, #C5A059) !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.nm-bottom-bar:hover .nm-fa-icon {
    color: #ffc72c !important;
    transform: scale(1.1) !important;
}

.nm-fa-title {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #f1f5f9 !important;
    transition: color 0.25s ease !important;
    white-space: nowrap !important;
}

.nm-bottom-bar:hover .nm-fa-title {
    color: #ffffff !important;
}

.nm-fa-opponent {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: var(--color-secondary, #C5A059) !important;
    background: rgba(197, 160, 89, 0.12) !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.25s ease !important;
}

.nm-bottom-bar:hover .nm-fa-opponent {
    background: rgba(255, 199, 44, 0.25) !important;
    border-color: rgba(255, 199, 44, 0.6) !important;
    color: #ffffff !important;
}

.nm-fa-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--color-hover, #FF9900) !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}

.nm-cta-full {
    display: inline !important;
}

.nm-cta-short {
    display: none !important;
}

.nm-fa-arrow {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nm-bottom-bar:hover .nm-fa-right {
    color: #ffffff !important;
}

.nm-bottom-bar:hover .nm-fa-arrow {
    transform: translateX(4px) !important;
}

/* RESPONZIVITA PRO MOBILNÍ TELEFONY A TABLETY */
@media (max-width: 768px) {
    .next-match-section {
        margin: 20px auto 10px !important;
    }

    .nm-top-bar {
        padding: 12px 16px !important;
    }

    .nm-meta-left {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .nm-meta-right {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .nm-duel-zone {
        flex-direction: column !important;
        padding: 20px 16px !important;
        gap: 14px !important;
    }

    .nm-team-col {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .nm-team-home {
        flex-direction: row-reverse !important;
    }

    .nm-center-col {
        min-width: 100% !important;
        order: 0 !important;
        padding: 6px 0 !important;
    }

    .nm-team-home {
        order: -1 !important;
    }

    .nm-team-away {
        order: 1 !important;
    }

    .nm-team-name {
        font-size: 1.35rem !important;
    }

    .nm-bottom-bar {
        padding: 12px 16px !important;
        justify-content: space-between !important;
        border-radius: 0 0 19px 19px !important;
        gap: 12px !important;
    }

    .nm-fa-left {
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .nm-fa-title {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nm-fa-opponent {
        display: none !important;
    }

    .nm-fa-right {
        gap: 4px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .nm-cta-full {
        display: none !important;
    }

    .nm-cta-short {
        display: inline !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: var(--color-hover, #FF9900) !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
    }
}

/* ==========================================================================
   WIDGET: TENTO DEN V HISTORII SPARTY (OTD - ON THIS DAY)
   Luxusní moderní design ladící se zbytkem úvodní stránky a archivem zápasů
   ========================================================================== */

.otd-section {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 45px auto 35px !important;
    padding-top: 32px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    animation: fadeIn 0.4s ease-out forwards !important;
    position: relative !important;
}

/* Hlavička sekce */
.otd-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 26px !important;
    gap: 6px !important;
    text-align: center !important;
}

.otd-subtitle-date {
    color: var(--color-secondary-light, #ffc72c) !important;
    font-weight: 700 !important;
}

.otd-section-title {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 4px 0 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.hero-content .otd-section-subtitle,
.otd-section-subtitle {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-image: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Kontejner s mřížkou karet */
.otd-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

@media (min-width: 1024px) {
    .otd-grid.otd-count-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .otd-grid.otd-count-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 780px !important;
        margin: 0 auto !important;
    }
    .otd-grid.otd-count-1 {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 700px) and (max-width: 1023px) {
    .otd-grid.otd-count-3,
    .otd-grid.otd-count-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .otd-grid.otd-count-1 {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}

/* Samotná karta zápasu */
.otd-card {
    position: relative !important;
    background: linear-gradient(180deg, rgba(22, 22, 38, 0.92) 0%, rgba(12, 12, 22, 0.98) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease,
                background 0.28s ease !important;
    box-sizing: border-box !important;
}

/* Horní trikolóra linka */
.otd-card .otd-card-accent {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #0033a0 0%, #0033a0 33.33%, #ffc72c 33.33%, #ffc72c 66.66%, #ac1f2d 66.66%, #ac1f2d 100%) !important;
    opacity: 0.85 !important;
    transition: height 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease !important;
    z-index: 5 !important;
}

/* Hover efekty karet */
.otd-card:hover {
    transform: translateY(-6px) !important;
}

.otd-card:hover .otd-card-accent {
    height: 3px !important;
    opacity: 1 !important;
    box-shadow: 0 1px 8px rgba(255, 199, 44, 0.6) !important;
}

.otd-card.res-win:hover {
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(16, 185, 129, 0.22) !important;
}

.otd-card.res-draw:hover {
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 158, 11, 0.22) !important;
}

.otd-card.res-loss:hover {
    border-color: rgba(239, 68, 68, 0.55) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(172, 31, 45, 0.28) !important;
}

/* 1. Horní řádek karty (Rok, výročí, status výsledku) */
.otd-card-top {
    padding: 13px 18px 11px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    gap: 10px !important;
}

.otd-year-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.otd-card-year {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    transition: color 0.25s ease !important;
}

.otd-card:hover .otd-card-year {
    color: var(--color-secondary-light, #ffc72c) !important;
}

.otd-card-ago {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
}

/* Štítek výsledku (Výhra, Remíza, Prohra) */
.otd-res-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    letter-spacing: 0.6px !important;
    white-space: nowrap !important;
}

.otd-res-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.otd-res-badge.badge-win {
    background: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #34d399 !important;
}
.otd-res-badge.badge-win .otd-res-dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8) !important;
}

.otd-res-badge.badge-draw {
    background: rgba(245, 158, 11, 0.16) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: #fbbf24 !important;
}
.otd-res-badge.badge-draw .otd-res-dot {
    background: #f59e0b !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8) !important;
}

.otd-res-badge.badge-loss {
    background: rgba(239, 68, 68, 0.16) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #f87171 !important;
}
.otd-res-badge.badge-loss .otd-res-dot {
    background: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8) !important;
}

/* 2. Středové tělo karty (Duel týmů a skóre) */
.otd-card-body {
    padding: 18px 16px 16px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    background: radial-gradient(ellipse at center, rgba(197, 160, 89, 0.04) 0%, transparent 70%) !important;
}

.otd-team-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.otd-team-col.home {
    align-items: flex-end !important;
    text-align: right !important;
}

.otd-team-col.away {
    align-items: flex-start !important;
    text-align: left !important;
}

.otd-crest-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.otd-flag-img {
    width: 22px !important;
    height: 16px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.otd-team-name {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    transition: color 0.25s ease !important;
}

.otd-team-col.is-sparta .otd-team-name {
    color: var(--color-secondary-light, #ffc72c) !important;
    font-weight: 800 !important;
}

/* Středový box se skóre */
.otd-score-zone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.otd-score-pill {
    padding: 6px 14px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.otd-card:hover .otd-score-pill {
    transform: scale(1.06) !important;
}

.otd-score-digits {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.otd-score-pill.score-win {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.otd-score-pill.score-draw {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #111827 !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.otd-score-pill.score-loss {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.otd-et-pill {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #cbd5e1 !important;
    letter-spacing: 0.4px !important;
    margin-top: 1px !important;
}

.otd-venue-pill {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    margin-top: 2px !important;
}

.otd-venue-pill.is-home {
    background: rgba(0, 51, 160, 0.35) !important;
    border: 1px solid rgba(0, 51, 160, 0.8) !important;
    color: #ffffff !important;
}

.otd-venue-pill.is-away {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

/* 3. Spodní řádek karty (Soutěž, fáze, odkaz do archivu) */
.otd-card-bottom {
    padding: 10px 16px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}

.otd-bottom-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.otd-comp-badge {
    font-family: var(--font-heading, 'Oswald', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Styly soutěží pro otd-comp-badge */
.otd-comp-badge.comp-1,
.otd-comp-badge.comp-el {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    color: #f97316 !important;
}

.otd-comp-badge.comp-2,
.otd-comp-badge.comp-kl {
    background: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    color: #06b6d4 !important;
}

.otd-comp-badge.comp-3,
.otd-comp-badge.comp-lm {
    background: rgba(255, 184, 0, 0.15) !important;
    border-color: rgba(255, 184, 0, 0.5) !important;
    color: #ffb800 !important;
}

.otd-comp-badge.comp-4,
.otd-comp-badge.comp-pmez {
    background: rgba(229, 169, 60, 0.15) !important;
    border-color: rgba(229, 169, 60, 0.5) !important;
    color: #e5a93c !important;
}

.otd-comp-badge.comp-5,
.otd-comp-badge.comp-uefa {
    background: rgba(251, 146, 60, 0.15) !important;
    border-color: rgba(251, 146, 60, 0.5) !important;
    color: #fb923c !important;
}

.otd-comp-badge.comp-6,
.otd-comp-badge.comp-pvp {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    color: #a855f7 !important;
}

.otd-comp-badge.comp-7,
.otd-comp-badge.comp-vp {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: #cbd5e1 !important;
}

.otd-round-name {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.otd-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--color-hover, #FF9900) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    transition: color 0.25s ease !important;
}

.otd-cta-arrow {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.otd-card:hover .otd-cta {
    color: #ffffff !important;
}

.otd-card:hover .otd-cta-arrow {
    transform: translateX(4px) !important;
}

/* Responzivita widgetu */
@media (max-width: 768px) {
    .otd-section {
        margin: 28px auto 24px !important;
        padding-top: 24px !important;
    }

    .otd-section-header {
        margin-bottom: 20px !important;
    }

    .otd-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .otd-card-body {
        padding: 14px 12px !important;
    }

    .otd-team-name {
        font-size: 0.78rem !important;
    }

    .otd-score-digits {
        font-size: 1.35rem !important;
    }
}