/**
 * Tommy Shutter Podcasts Web Interface - Mega Page Mobile Styles
 * File: SITE-ROOT/podcasts/css/podcasts_mega_page_mobile.css
 * Version: 06132025.0935 EST
 * Date: 06/13/2025
 * Change: Correctly targets the .mega-page-top-panel classes for responsive styling.
 */

/* Apply these styles on tablets and phones (screens 768px wide or less) */
@media (max-width: 768px) {

    /* Make the top panel stack vertically */
    .mega-page-top-panel {
        flex-direction: column;
        height: auto; /* Allow height to grow with content */
        align-items: center; /* Center items when stacked */
        padding: 15px;
    }

    /* Adjust image for mobile */
    .mega-page-top-panel-image {
        width: 90%;
        max-width: 350px; /* Limit max size */
        height: auto;     /* Maintain aspect ratio */
        margin-bottom: 20px;
    }

    .mega-page-top-panel-image img {
        margin: 0; /* Reset margins from desktop */
    }

    /* Adjust content panel for mobile */
    .mega-page-top-panel-content {
        margin-top: 0;
        text-align: center;
    }

    .mega-page-top-panel-content h2 {
        font-size: 1.8em;
    }

    /* Keep description readable */
    .mega-page-top-panel-content .episode-description {
        text-align: left;
        padding: 10px;
        max-height: 40vh; /* Adjust scrollable height for mobile */
    }

    /* --- Stack main page layout --- */
    .mega-page-main-container {
        flex-direction: column;
    }
}