/* ============================================
   GAME PREVIEW STYLES
   Preview page for upcoming games
   ============================================ */

.preview-container {
    width: 100%;
    padding: 0;
}

/* Preview sections */
.preview-section {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 150ms ease;
}

.preview-section:hover {
    box-shadow: var(--shadow-md);
}

/* Stats section - no background */
.preview-stats-section {
    background-color: transparent;
    box-shadow: none;
    padding: 10px 0;
}

.preview-stats-section:hover {
    box-shadow: none;
}

/* Time changes cards */
.preview-time-changes-section a > div:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(3px);
}

/* Form result boxes */
.preview-form-section a > div:hover {
    transform: scale(1.05);
}

/* H2H game rows */
.preview-h2h-section a > div:hover {
    box-shadow: var(--shadow-md);
    background-color: var(--color-bg-surface-alt) !important;
}

/* Stats table hover */
.preview-stats-section table tr:hover {
    background-color: var(--color-bg-surface-alt);
}

/* Team lineup sections */
.preview-team-lineup {
    min-height: 300px;
}

/* Responsive preview layout */
@media (max-width: 992px) {
    .preview-container {
        padding: 0;
    }
    
    .preview-section {
        padding: 20px 15px;
    }
    
    /* Stack team columns on mobile */
    .preview-lineup-section > div:last-child,
    .preview-time-changes-section > div:last-child,
    .preview-form-section > div:last-child {
        flex-direction: column !important;
    }
    
    .preview-lineup-section > div:last-child > div,
    .preview-time-changes-section > div:last-child > div,
    .preview-form-section > div:last-child > div {
        margin: 10px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Smaller form boxes on mobile */
    .preview-form-section a > div > div {
        min-width: 40px !important;
        padding: 6px 4px !important;
    }
}

/* H2H responsive */
@media (max-width: 600px) {
    .preview-h2h-section a > div {
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .preview-h2h-section a > div > div {
        min-width: auto !important;
    }
}

/* ============================================
   H2H TOGGLE IN PREVIEW HEADER
   ============================================ */

/* Hide the default arrow/marker on details summary */
.h2h-toggle summary {
    list-style: none;
}

.h2h-toggle summary::-webkit-details-marker {
    display: none;
}

.h2h-toggle summary::marker {
    display: none;
    content: '';
}

/* Hover effect on toggle text */
.h2h-toggle summary:hover {
    text-decoration: underline;
}

/* Hover effect on game rows */
.h2h-toggle a > div:hover {
    background-color: var(--overlay-active) !important;
}