/**
 * Game Single Mobile - Responsive styles for video game & board game pages
 * Loaded on single-games.php and single-boardgames.php via wp_enqueue_style
 * with media="(max-width: 768px)"
 *
 * Standard breakpoints:
 *   768px - Primary mobile (tablet/phone)
 *   480px - Small phone (375px devices)
 *
 * @package WakasmTheme
 * @since 2.2
 */

/* ==========================================================================
   768px — PRIMARY MOBILE
   ========================================================================== */
@media (max-width: 768px) {

    /* --- BANNER AREA ---
       Desktop uses a 2-column grid (1fr 280px) at fixed 500px height. On mobile,
       the inline styles already switch to single column at 959px, but the sidebar
       content (box art, affiliate links, "More Games") stacks vertically making
       the banner 2600px+ tall. Constrain the sidebar and compact the banner. */

    .game-banner-full-width {
        margin-top: 83px !important; /* Clear fixed mobile header (banner is outside .site-inner) */
    }

    .game-banner-section {
        padding: 0 15px !important;
        gap: 15px !important;
    }

    .game-banner-content {
        padding: 15px !important;
        min-height: auto !important;
    }

    .game-title {
        font-size: 1.6rem !important;
        padding: 8px 14px !important;
    }

    .game-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 12px 15px 18px 15px !important;
        margin-bottom: 15px !important;
    }

    .game-meta {
        gap: 4px !important;
        margin-bottom: 15px !important;
    }

    /* --- POOTER BADGES SMALLER ON MOBILE ---
       Desktop: 50px pooter, 20px font, 40px label height.
       Mobile: shrink to 35px pooter, 14px font, 28px label. */
    .game-meta > span {
        margin-left: 20px !important;
    }

    .game-meta > span > img {
        width: 35px !important;
        height: 35px !important;
        left: -18px !important;
    }

    .game-meta > span > span {
        font-size: 14px !important;
        height: 28px !important;
        padding: 4px 12px 4px 20px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* --- BOARD GAME POOTER BADGES SMALLER ON MOBILE ---
       Same treatment as video game .game-meta badges above.
       Board game badges live in .badges-section with sub-groups. */
    .badges-section .multiplayer-ratings > span,
    .badges-section .solo-ratings > span,
    .badges-section .play-count-display > span {
        margin-left: 20px !important;
    }

    .badges-section .multiplayer-ratings > span > img,
    .badges-section .solo-ratings > span > img,
    .badges-section .play-count-display > span > img {
        width: 35px !important;
        height: 35px !important;
        left: -18px !important;
    }

    .badges-section .multiplayer-ratings > span > span,
    .badges-section .solo-ratings > span > span,
    .badges-section .play-count-display > span > span {
        font-size: 14px !important;
        height: 28px !important;
        padding: 4px 12px 4px 20px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* --- BOX ART ABOVE TEXT ON MOBILE ---
       Override the inline grid-template-areas ("content" / "sidebar") to put
       the sidebar (box art) ABOVE the banner content. Affiliate content inside
       the sidebar is hidden on mobile, so only the box art is visible.
       order:-1 alone doesn't work because items are placed by named grid areas. */
    .game-banner-section {
        grid-template-areas:
            "sidebar"
            "content" !important;
    }

    .game-sidebar {
        margin: 0 auto !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* --- MOVE AFFILIATE BELOW REVIEW ON MOBILE ---
       Affiliate content (1064px) in banner pushes review down 2.6 screens.
       Hide in banner, show after review via .mobile-affiliate-section. */
    .game-sidebar .wakasm-support-container {
        display: none !important;
    }

    .game-sidebar .sidebar-status-box {
        display: none !important;
    }

    /* Show the mobile-only affiliate section (after review) */
    .mobile-affiliate-section {
        display: block !important;
        margin: 30px 0 !important;
    }

    /* Reduce main content padding for mobile */
    .game-single {
        padding: 20px 15px !important;
    }

    .game-box-art-banner {
        width: 120px !important;
        margin: 0 auto 10px auto !important;
    }

    .game-box-art-image {
        border-width: 3px !important;
        border-radius: 10px !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    .game-box-art-image:hover {
        transform: none !important;
    }

    .info-box {
        width: auto !important;
        max-width: 100% !important;
        padding: 15px !important;
    }

    .wakasm-support-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .game-status-badges {
        width: auto !important;
    }

    /* --- MORE GAMES TO CHECK OUT ---
       affiliate-widget.css at 480px forces a 2-up row layout (flex-direction: row,
       flex: 0 1 calc(50% - 6px)) which crams entries side-by-side and orphans
       the 3rd entry alone. Override to full-width stacked layout on mobile. */
    .affiliate-sidebar-items {
        flex-direction: column !important;
    }

    .affiliate-sidebar-item {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .support-other-games .other-game-entry {
        gap: 8px !important;
    }

    .support-other-games .other-game-thumb img {
        width: 50px !important;
        height: auto !important;
    }

    /* --- BANNER LINES --- */
    .game-banner-top-line {
        height: 5px !important;
    }

    .game-banner-bottom-line {
        height: 12px !important;
    }

    /* --- REVIEW TITLE (H1 accent-plate) ---
       Desktop: 3em (~54px). On 375px this wraps absurdly. Scale down. */
    .game-single .game-review-content .review-title {
        font-size: 1.5em !important;
        padding: 14px 18px !important;
        border-left-width: 4px !important;
    }

    .review-attribution {
        font-size: 0.9em !important;
        margin-bottom: 20px !important;
    }

    /* --- H2 BRACKET CORNERS ---
       Desktop: 2.2em (39.6px) inline-block with 24px padding.
       On mobile this creates huge wrapped headings. Scale down.
       Must be visually larger than H3 sub-headings (1.2rem). */
    .game-single .game-review-content h2,
    .game-single .game-review-content h2.wp-block-heading {
        font-size: 1.5em !important;
        padding: 8px 14px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
        /* Smaller bracket corners */
        background-size:
            10px 2px, 2px 10px,
            10px 2px, 2px 10px,
            10px 2px, 2px 10px,
            10px 2px, 2px 10px,
            auto !important;
    }

    /* --- H3 SUB-HEADINGS ---
       Colorful sub-section headings ("A Master Class In Deep Asymmetry:", etc.)
       Default 1.5rem (24px) is too large on mobile — scale down. */
    .game-single .game-review-content h3,
    .game-single .game-review-content h3.wp-block-heading {
        font-size: 1.2rem !important;
    }

    /* --- SECTION HEADINGS (non-review H2s) ---
       Tier/Rankings, Game Details, Achievements, Videos, Screenshots headings */
    .game-rankings-detailed h2,
    .game-metadata h2,
    .game-screenshots h2 {
        font-size: 1.2rem !important;
    }

    /* --- TIER & RANKINGS DISPLAY --- */
    .game-rankings-detailed {
        padding: 15px !important;
        margin: 15px 0 !important;
    }

    .rankings-display {
        gap: 15px !important;
    }

    .ranking-row,
    .tier-ranking,
    .score-ranking,
    .master-ranking {
        gap: 10px !important;
    }

    .tier-badge,
    .score-badge,
    .master-badge {
        width: 45px !important;
        height: 45px !important;
    }

    /* --- RANKINGS SECTION POOTER BADGES ---
       Desktop: 50px pooter, 20px font, 40px height — too large for 375px.
       Shrink to match banner badge sizing. */
    .game-rankings-detailed .ranking-row > span {
        margin-left: 20px !important;
    }

    .game-rankings-detailed .ranking-row > span > img {
        width: 35px !important;
        height: 35px !important;
        left: -18px !important;
    }

    .game-rankings-detailed .ranking-row > span > span {
        font-size: 14px !important;
        height: 28px !important;
        padding: 4px 12px 4px 20px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    .ranking-description strong,
    .tier-description strong,
    .score-description strong {
        font-size: 0.95rem !important;
    }

    .ranking-desc,
    .tier-desc,
    .score-desc,
    .master-desc {
        font-size: 0.8rem !important;
    }

    /* --- METADATA GRID --- */
    .metadata-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .metadata-item {
        padding: 8px !important;
        font-size: 0.9rem !important;
    }

    /* --- RETROACHIEVEMENTS ---
       Header title at 2.4rem is huge on mobile.
       Badges at 68px only fit 2 per row. Scale to 48px for ~5 per row. */
    .retroachievements-main-section {
        padding: 20px 12px !important;
        margin: 25px 0 !important;
    }

    .ra-header-title {
        font-size: 1.3rem !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .ra-header-emoji {
        font-size: 22px !important;
    }

    .ra-stats-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .ra-game-details {
        text-align: center !important;
    }

    .ra-badges-container {
        padding: 12px 8px !important;
    }

    .ra-badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
        gap: 5px !important;
    }

    .achievement-badge {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* --- STEAM ACHIEVEMENTS --- */
    .steam-achievements-section {
        padding: 20px 12px !important;
        margin: 25px 0 !important;
    }

    .steam-header-title {
        font-size: 1.3rem !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .steam-stats-header {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 12px !important;
    }

    .steam-stats-section {
        text-align: center !important;
    }

    .steam-achievement-count {
        font-size: 24px !important;
    }

    .steam-badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
        gap: 5px !important;
    }

    .steam-badge {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* --- GAME NAVIGATION (Prev/Next) ---
       Desktop uses flex row. Stack on mobile for full-width cards. */
    .game-navigation {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 25px 0 !important;
    }

    .nav-box-art {
        max-width: 100% !important;
    }

    .nav-rank-number {
        font-size: 80px !important;
        letter-spacing: -4px !important;
    }

    /* --- VIDEOS SECTION ---
       Desktop: 2.4rem heading + 35px padding on video game pages.
       On mobile, heading is too large and padding eats into iframe width.
       Board game pages have no padding, so only video games are affected. */
    .related-videos-section {
        padding: 15px !important;
    }

    .related-videos-section h2 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }

    .game-video-wrapper iframe {
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    /* --- SCROLL MARGIN ---
       Desktop uses 150px for sticky header. Mobile fixed header is ~83px. */
    .game-single h2,
    .game-single [id] {
        scroll-margin-top: 90px;
    }

    /* --- TOC WRAPPER (inline floated version) ---
       Already hidden by mobile-base.css but ensure the inline one is too */
    .game-toc-wrapper {
        display: none !important;
    }

    /* --- MOBILE TOC (collapsible, collapsed by default) ---
       Shows a "Contents" toggle that expands to reveal section links.
       Placed after review title/attribution, before review body. */
    .mobile-toc-container {
        display: block !important;
        margin: 0 0 20px 0 !important;
        background: rgba(26, 26, 26, 0.95);
        border: 1px solid rgba(77, 164, 75, 0.4);
        border-radius: 8px;
        overflow: hidden;
    }

    .mobile-toc-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 15px;
        background: none;
        border: none;
        color: #4da44b;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-toc-arrow {
        font-size: 0.7rem;
        transition: transform 0.2s ease;
    }

    .mobile-toc-container.expanded .mobile-toc-arrow {
        transform: rotate(180deg);
    }

    .mobile-toc-content {
        display: none;
        padding: 0 15px 12px 15px;
        border-top: 1px solid rgba(77, 164, 75, 0.2);
    }

    .mobile-toc-container.expanded .mobile-toc-content {
        display: block;
    }

    .mobile-toc-list {
        list-style: none;
        padding: 8px 0 0 0;
        margin: 0;
    }

    .mobile-toc-list li {
        margin: 0;
    }

    .mobile-toc-list li a {
        display: block;
        padding: 6px 0;
        text-decoration: none;
        color: #ddd;
        font-size: 0.9rem;
        line-height: 1.3;
        transition: color 0.2s;
    }

    .mobile-toc-list li a:hover,
    .mobile-toc-list li a:active {
        color: #4da44b !important;
    }

    .mobile-toc-list .mobile-toc-h2 > a {
        font-weight: 600;
        color: #fff;
    }

    .mobile-toc-list .mobile-toc-h3 {
        padding-left: 14px;
    }

    .mobile-toc-list .mobile-toc-h3 > a {
        color: #aaa;
        font-size: 0.82rem;
    }

    /* --- BANNER CONTENT WIDTH CONSTRAINT ---
       Prevent board game banners from overflowing viewport.
       The badges-section (Multiplayer/Solo/Plays) tries to fit 3 groups
       side-by-side (~320px min), pushing .game-banner-content beyond 375px. */
    .game-banner-section {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .game-banner-content {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Board game badges: wrap on mobile instead of forcing side-by-side */
    .badges-section {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    /* Let badge groups shrink and wrap */
    .badges-section .multiplayer-ratings,
    .badges-section .solo-ratings,
    .badges-section .play-count-display {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

}

/* ==========================================================================
   480px — SMALL PHONE
   ========================================================================== */
@media (max-width: 480px) {

    .game-title {
        font-size: 1.3rem !important;
    }

    /* Only clamp the text paragraph, not the whole container.
       Board game badges are children of .game-description and were
       being clipped by overflow:hidden + line-clamp on the parent. */
    .game-description {
        font-size: 0.85rem !important;
    }

    .game-description p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Even smaller review title */
    .game-single .game-review-content .review-title {
        font-size: 1.3em !important;
        padding: 10px 14px !important;
    }

    /* Smaller H2 bracket headings */
    .game-single .game-review-content h2,
    .game-single .game-review-content h2.wp-block-heading {
        font-size: 1.3em !important;
        padding: 6px 10px !important;
    }

    /* Smaller H3 sub-headings */
    .game-single .game-review-content h3,
    .game-single .game-review-content h3.wp-block-heading {
        font-size: 1.1rem !important;
    }

    /* Achievement badges even smaller for 375px - 6+ per row */
    .ra-badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
    }

    .achievement-badge {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .steam-badges-grid {
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
    }

    .steam-badge {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    /* RA/Steam section titles */
    .ra-header-title,
    .steam-header-title {
        font-size: 1.1rem !important;
    }

    /* Navigation rank numbers */
    .nav-rank-number {
        font-size: 60px !important;
    }

    /* Box art in banner */
    .game-box-art-banner {
        width: 100px !important;
    }
}