/* ==========================================================================
   css/performance-subpage.css
   UNIFIED ARCHITECTURE FOR LIVE PERFORMANCE LOG FEEDS (CLEAN & ISOLATED)
   ========================================================================== */

/* Page Padding: Centers your text content and videos comfortably under the header */
/* Ensure the description text under the main subpage title wraps beautifully */
.perf-page-header .section-description {
    max-width: 680px;
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444444;
}


.perf-page-header {
    margin-bottom: 60px;
    width: 100%;
}

/* Vertical Timeline Feed Wrapper Stack */
.performance-logs-feed {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Generous breathing airspace separating distinct archive logs */
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   DESKTOP CHASSIS ENGINE (THE SIDE-SCROLLING OVERFLOW FIX)
   ========================================================================== */
.performance-log-row {
    display: flex !important; /* Swapped grid for flex to perfectly control row dimensions */
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0!important;
    border-bottom: 1px solid #f5f5f5 !important;
    border-top: 1px solid #f5f5f5 !important;
    /* SAFETY RAILS: Forces padding to stay inside layout widths instead of expanding past them */
    box-sizing: border-box !important;
}

/* Left Column Sizing (Text Metadata - Scaled to a fluid percentage width) */
.perf-log-text-column {
    width: 32% !important; /* Claims exactly your 32% editorial proportion share */
    flex-shrink: 0 !important; /* Blocks the video frame from squeezing your text column */
    padding-right: 40px !important; /* This padding cushion stays safely INSIDE your 32% track box */
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.perf-log-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 4px;
}

.perf-log-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.perf-log-description {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #333333;
}

.perf-venue-tag {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-style: italic;
    color: #666666;
}

.perf-external-link {
    font-size: 0.85rem;
    color: #cc0000;
    width: fit-content;
    border-bottom: 1px solid transparent;
}

.perf-external-link:hover {
    border-bottom-color: #cc0000;
}

/* Right Column Sizing (YouTube Container Player - Claims ALL remaining safe space) */
.perf-log-media-column {
    flex-grow: 1 !important; 
    width: 68% !important; /* Dynamically claims the rest without spillover */
    box-sizing: border-box !important;
}

/* THE FLUID VIDEO RATIO BOX: 
   Guarantees the video player maintains a crisp 16:9 widescreen box proportion,
   scaling dynamically across different screens without clipping or showing black bars! */
.youtube-fluid-ratio-box {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* Mathematical calculation mapping the precise 16:9 video aspect */
    background-color: #000000;
    border: 1px solid #e0e0e0;
    box-sizing: border-box !important;
}

.youtube-fluid-ratio-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   UNIFIED MASTER MOBILEenvironment BREAKPOINTS (COLLAPSIBLE FLAT FEEDS)
   ========================================================================== */
@media (max-width: 1150px) {
    .perf-page-wrapper {
        padding: 40px 0 !important;
    }
    
    .perf-page-header {
        margin-bottom: 35px !important;
    }
    
    .performance-logs-feed {
        gap: 50px !important;
    }

    /* Collapses the flex rows on small screens, sliding text above video player frames automatically */
    .performance-log-row {
        flex-direction: column !important;
        gap: 25px !important;
        padding-bottom: 40px !important;
    }

    .perf-log-text-column {
        width: 100% !important;
        padding-right: 0 !important;
        gap: 12px !important;
    }

    .perf-log-media-column {
        width: 100% !important;
    }

    .perf-log-title {
        font-size: 1.15rem !important;
    }
}