/** * ---------------------------------------------------------------------------------------- * Component: Mega Page Core Styles (Consolidated & Polished) * ---------------------------------------------------------------------------------------- * @appname Podcasts * @author Google Gemini * @version 2025-06-13 02:50:00 PM EDT * @location /podcasts/css/podcasts_mega_page.css * * @description This is the single, authoritative stylesheet for the entire podcast * mega page. * * @change CRITICAL LAYOUT FIX: The top panel layout model has been switched * from Flexbox to CSS Grid. This provides a more robust and precise * "automated control" for the column widths, solving the overflow * issue where the right column would wrap underneath the left. * The new `grid-template-columns: 350px 1fr;` rule explicitly sets * the left column to a fixed width and the right column to fill all * remaining space, which is exactly the desired behavior. * ---------------------------------------------------------------------------------------- */ /* --- Main Page Layout --- */ .mega-page-main-container { display: flex; flex-direction: row; gap: 30px; padding: 20px; max-width: 99%; margin: auto; font-family: arial, sans-serif; font-size: 90%; text-align:left; padding:10px; zoom:.8 } .mega-page-sidebar { width: 0px; flex-shrink: 0; } .mega-page-content { flex-grow: 1; width: auto; min-width: 0; padding: 3px; background: rgba(0,0,0,.1); border-radius: 10px; } /* --- --- REVISED TOP PANEL STYLES (USING CSS GRID) --- */ /* Main container for the top panel. * - `display: grid` activates the CSS Grid layout model. * - `grid-template-columns: 350px 1fr` is the key. It defines two columns: * 1. The first column is explicitly set to a fixed 350px width. * 2. The second column is set to `1fr` (one fractional unit), which means * it automatically takes up all the remaining horizontal space. * This is the robust, automated control that was needed. */ #episode-display-container .mega-page-top-panel { display: grid; grid-template-columns: 350px 1fr; gap: 30px; border-radius: 8px; padding: 25px; margin-bottom: 30px; background: rgba(28,25,23,.9); border: 1px solid #44403c; } /* With CSS Grid, the column elements themselves need no special flex/width properties. */ /* The grid container (`.mega-page-top-panel`) handles everything. */ #episode-display-container .top-panel-left-col { display: flex; flex-direction: column; gap: 15px; } #episode-display-container .top-panel-right-col { min-width: 0; /* Still good practice to prevent overflow from long text */ } #episode-display-container .top-panel-left-col .mega-page-top-panel-image img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid #57534e; } #episode-display-container .top-panel-left-col .audio_player { width: 100%; } /* Button Styles */ #episode-display-container .mega-page-button-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #episode-display-container .mega-page-button { background-color: #44403c; color: #e7e5e4; padding: 10px 15px; border-radius: 5px; text-align: center; text-decoration: none; font-weight: bold; border: 1px solid #57534e; transition: background-color 0.2s ease, color 0.2s ease; } #episode-display-container .mega-page-button:hover { background-color: #57534e; color: #ffffff; } /* Metadata Styles */ #episode-display-container .top-panel-left-col .episode-meta-details { font-size: 0.95em; color: #d6d3d1; border-top: 1px solid #44403c; padding-top: 15px; } #episode-display-container .top-panel-left-col .episode-meta-details .meta-item { margin-bottom: 8px; } #episode-display-container .top-panel-left-col .episode-meta-details .meta-item strong { color: #a8a29e; margin-right: 8px; } /* Right Column Content Styles */ #episode-display-container .top-panel-right-col h2 { margin: 0 0 10px 0; font-size: 2.2em; font-weight: bold; line-height: 1.2; color: #fcd34d; } #episode-display-container .top-panel-right-col .episode-header-meta { display: flex; justify-content: space-between; align-items: center; font-style: italic; color: #a8a29e; margin-bottom: 20px; font-size: 0.9em; padding-bottom: 10px; border-bottom: 1px solid #44403c; } #episode-display-container .top-panel-right-col .episode-description { min-height: 35vh; max-height: 35vh; overflow-y: auto; line-height: 1.6; font-size: 1.1rem; padding-right: 15px; color: #e7e5e4; } #episode-display-container .top-panel-right-col .episode-description p { margin-bottom: 1em; } /* --- Section Header ("All Episodes") --- */ .latest-episodes-header h2 { font-size: 2em; font-weight: bold; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #57534e; color: #e7e5e4; } /* --- Episode Card Grid (Unchanged) --- */ .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .card { background-color: #292524; border: 1px solid #44403c; border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.4); } .card a { text-decoration: none; color: inherit; display: block; } .card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-bottom: 1px solid #44403c; } .card-body { padding: 15px; } .card-body h3 { margin: 0 0 5px 0; font-size: 1em; font-weight: bold; color: #e7e5e4; line-height: 1.3; } .card-body p { margin: 0; font-size: 0.85em; color: #a8a29e; } /* --- Mobile Responsive Adjustments --- */ @media (max-width: 768px) { /* When the screen is narrow, collapse to a single column layout */ #episode-display-container .mega-page-top-panel { grid-template-columns: 1fr; /* The grid now only has one column */ } } @media (max-width: 600px) { .card-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } #episode-display-container .top-panel-right-col .episode-header-meta { flex-direction: column; align-items: flex-start; gap: 5px; } }