/* ===== Mobile tabs panoramica ===== */
.panoramica-grid-mobile { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; }
.panoramica-tabs-buttons { display: flex; gap: 8px; margin-bottom: 16px; justify-content: center; }
.panoramica-tab { flex: 1; max-width: 100px; padding: 10px 0; border: 2px solid transparent; border-radius: 10px; background: #fff; color: #5B2C6F; font-weight: 800; font-size: 1.1rem; letter-spacing: 2px; cursor: pointer; box-shadow: 0 2px 8px rgba(91,44,111,0.08); transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; }
.panoramica-tab.tab-a.active { background: #D4AF37; color: #fff; border-color: #b8932d; }
.panoramica-tab.tab-b.active { background: #FF8C00; color: #fff; border-color: #d97500; }
.panoramica-tab.tab-c.active { background: #00CED1; color: #fff; border-color: #009b9d; }
.panoramica-tab-mount { min-height: 200px; width: 100%; box-sizing: border-box; }
.panoramica-tab-mount .girone-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex: none !important; box-sizing: border-box; }

/* Background sezione panoramica - gradient definito inline sulla section */
.panoramica-section-bg {
    margin-top: -40px;
}

/* Spacer rimosso - header ora si sovrappone direttamente al video */

/* Panoramica Grid */
.panoramica-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.girone-card {
    flex: 1;
    min-width: 400px;
    max-width: 420px;
}

.panoramica-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.panoramica-grid-1 {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Girone Card */
.girone-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    position: relative;
}

/* ============ GIRONE A ============ */
.girone-card.girone-a {
    background: white;
}

.girone-a .girone-header {
    background: url('/storage/app/media/girone-a-bg.png') center center / cover no-repeat;
    padding: 1rem 1rem;
}

.girone-a .girone-header h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    color: #ffd200 !important;
}

.girone-a .section-title {
    color: #5B2C6F;
    font-weight: 700;
}

.girone-a .btn-link {
    color: #5B2C6F;
}

.girone-a .btn-link:hover {
    color: #7A4A8E;
    text-decoration: none;
}

/* ============ GIRONE B ============ */
.girone-card.girone-b {
    background: white;
}

.girone-b .girone-header {
    background: url('/storage/app/media/girone-b-bg.png') center center / cover no-repeat;
    padding: 1rem 1rem;
}

.girone-b .girone-header h2 {
    color: #ff7e00 !important;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.girone-b .section-title {
    color: #5B2C6F;
    font-weight: 700;
}

.girone-b .btn-link {
    color: #5B2C6F;
}

.girone-b .btn-link:hover {
    color: #7A4A8E;
    text-decoration: none;
}

/* ============ GIRONE C ============ */
.girone-card.girone-c {
    background: white;
}

.girone-c .girone-header {
    background: url('/storage/app/media/girone-c-bg.png') center center / cover no-repeat;
    padding: 1rem 1rem;
}

.girone-c .girone-header h2 {
    color: #ff002a !important;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.girone-c .section-title {
    color: #5B2C6F;
    font-weight: 700;
}

.girone-c .btn-link {
    color: #5B2C6F;
}

.girone-c .btn-link:hover {
    color: #7A4A8E;
    text-decoration: none;
}

/* ============ FOOTER DECORATIVI ============ */
.girone-footer {
    height: 20px;
    transform: rotate(180deg);
}

.girone-a .girone-footer {
    background: url('/storage/app/media/girone-a-bg.png') center center / cover no-repeat;
}

.girone-b .girone-footer {
    background: url('/storage/app/media/girone-b-bg.png') center center / cover no-repeat;
}

.girone-c .girone-footer {
    background: url('/storage/app/media/girone-c-bg.png') center center / cover no-repeat;
}

/* Sezioni - Compatte */
.girone-section {
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid #eee;
}

.girone-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.3rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tabella Classifica Compatta */
.classifica-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.classifica-compact th {
    background: #f8f9fa;
    padding: 0.3rem 0.2rem;
    font-weight: 600;
    color: #666;
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.classifica-compact th:nth-child(2) {
    text-align: left;
}

.classifica-compact td {
    padding: 0.25rem 0.2rem;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.classifica-compact .rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.classifica-compact .rank-num {
    font-weight: 600;
    min-width: 18px;
}

.classifica-compact .outcome-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.classifica-compact .team {
    text-align: left;
    max-width: 180px;
}

.classifica-compact .team-info {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.classifica-compact .team-logo-mini {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.classifica-compact .team-name {
    font-weight: 500;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.classifica-compact .pts {
    background: #f8f9fa;
}

.classifica-compact .pts strong {
    color: #000;
}

/* Lista Partite - Compatta */
.matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.match-row-full {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.match-date {
    font-size: 0.65rem;
    color: #5B2C6F;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.4rem;
}

.match-tv-logos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 60px;
}

.tv-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.tv-logo-sky-sport {
    height: 60px;
    width: auto;
}

.tv-logo-now {
    height: 12px;
    width: auto;
}

.vs-text {
    color: #5B2C6F;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Punteggio Live */
.live-score {
    color: #fff;
    background: linear-gradient(135deg, #dc3545, #c82333);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    animation: pulse-live 1.5s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

/* Punteggio Playoff (partite chiuse) */
.playoff-score {
    color: #fff;
    background: linear-gradient(135deg, #B8860B, #8B6914);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.match-teams-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 60px;
}

.team-side {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.team-side span {
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    text-transform: uppercase;
}

/* Abbreviazioni squadre - nascoste su desktop */
.team-side .team-name-abbr {
    display: none;
}

.team-side.home {
    justify-content: flex-start;
}

.team-side.away {
    justify-content: flex-end;
    text-align: right;
}

.team-logo-xs {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}


/* Link Button - Brand Serie C */
.btn-link {
    display: inline-block;
    font-size: 0.75rem;
    color: #7A4A8E;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-link:hover {
    color: #5B2C6F;
    text-decoration: underline;
}

.girone-b .btn-link { color: #5B2C6F; }
.girone-b .btn-link:hover { color: #7A4A8E; }
.girone-c .btn-link { color: #5B2C6F; }
.girone-c .btn-link:hover { color: #7A4A8E; }

/* No Data */
.no-data {
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem 0;
    margin: 0;
}

/* Legenda */
.panoramica-legend {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.panoramica-legend h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #333;
}

.panoramica-legend .legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.panoramica-legend .legend-items span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

.panoramica-legend .legend-items i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* Responsive */
@media (max-width: 1200px) {
    .panoramica-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .panoramica-grid .girone-card:last-child:nth-child(3) {
        grid-column: span 2;
        max-width: 340px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .panoramica-section-bg {
        padding: 12rem 0 4rem !important;
        margin-top: 0 !important;
    }

    .panoramica-section-bg > .container {
        padding: 0 40px !important;
        max-width: 100% !important;
    }

    .panoramica-grid,
    .panoramica-grid-2,
    .panoramica-grid-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Tutte le card stessa larghezza su mobile */
    .panoramica-grid .girone-card,
    .girone-card.girone-a,
    .girone-card.girone-b,
    .girone-card.girone-c {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .panoramica-grid .girone-card:last-child:nth-child(3) {
        grid-column: span 1;
        max-width: 340px;
        width: 100%;
    }

    .panoramica-header h2 {
        font-size: 1.8rem !important;
    }

    .panoramica-legend .legend-items {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Fix tabelle overflow su mobile */
    .girone-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .classifica-compact {
        min-width: 100%;
    }

    .classifica-compact .team-name {
        max-width: 100px;
    }

    /* Fix match teams overflow */
    .match-teams-full {
        flex-wrap: nowrap;
    }

    .team-side span {
        font-size: 0.7rem;
        max-width: 80px;
    }

    .team-logo-xs {
        width: 28px;
        height: 28px;
    }

    /* Su mobile mostra abbreviazioni, nascondi nomi completi */
    .team-side .team-name-full {
        display: none !important;
    }
    .team-side .team-name-abbr {
        display: inline !important;
        font-size: 0.75rem;
    }
}

/* Matches Carousel */
.matches-carousel {
    width: 100%;
}

/* Footer con link e frecce sulla stessa riga */
.matches-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.matches-nav-btns {
    display: flex;
    gap: 4px;
}

/* Frecce piccole e eleganti - stile awards */
.matches-nav-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #5B2C6F;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(91,44,111,0.3);
}

.matches-nav-btn::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid white;
    border-right: 2px solid white;
}

.matches-nav-btn.prev::before {
    transform: rotate(-135deg);
    margin-left: 2px;
}

.matches-nav-btn.next::before {
    transform: rotate(45deg);
    margin-right: 2px;
}

.matches-nav-btn:hover:not(:disabled) {
    background: #7A4A8E;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(91,44,111,0.35);
}

.matches-nav-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: none;
}

/* Hide entire carousel until JS initializes - prevents FOUC */
.matches-carousel:not(.carousel-ready) {
    min-height: 280px;
}
.matches-carousel:not(.carousel-ready) .match-row-full {
    display: none !important;
}

/* After JS init: hide all, show only .visible */
.matches-carousel.carousel-ready .match-row-full {
    display: none;
}

.matches-carousel.carousel-ready .match-row-full.visible {
    display: flex;
}

/* Mobile tap targets - min 44px for touch accessibility */
@media (max-width: 768px) {
    .girone-card .btn-link,
    .girone-a .btn-link,
    .girone-b .btn-link,
    .girone-c .btn-link {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    .matches-nav-btns {
        gap: 8px !important;
    }

    .matches-nav-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .matches-nav-btn::before {
        width: 8px !important;
        height: 8px !important;
        border-top-width: 2.5px !important;
        border-right-width: 2.5px !important;
    }

    .matches-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}