/**
 * Ranking Pages Mobile - Responsive styles for video game & board game rankings
 * Loaded on completevidgamerankings.php and completeboardgamerankings.php
 * via wp_enqueue_style with media="(max-width: 768px)"
 *
 * Standard breakpoints:
 *   768px - Primary mobile (tablet/phone)
 *   480px - Small phone (375px devices)
 *
 * NOTE: Many elements use inline styles (style="...") in the PHP templates,
 *       so !important is required to override them on mobile.
 *
 * @package WakasmTheme
 * @since 2.2
 */

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

    /* --- PAGE HEADER --- */
    .page-header {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
    }

    .page-title {
        font-size: 1.8rem !important;
    }

    .page-description {
        font-size: 0.9rem !important;
    }

    /* --- FILTER CONTROLS ---
       Desktop uses inline style="display: flex; gap: 15px" with everything on
       one row. On 375px, labels ("Search:", "Letter:", "Platform:") and toggle
       text ("Ranked Only", "Hide Sub Lists") get clipped. Stack everything. */

    .filter-controls-compact {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
        align-items: stretch !important;
    }

    /* Search section: inline width: 300px on input is too wide */
    .filter-controls-compact input[type="search"] {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .filter-controls-compact .flex-center {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .filter-controls-compact form.flex-center {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Toggle switches: stack vertically, full width */
    .toggle-switches {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .toggle-item {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .toggle-label {
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .dropdown-item {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .dropdown-item select {
        flex: 1 !important;
        max-width: none !important;
    }

    .dropdown-label {
        white-space: nowrap !important;
        min-width: fit-content !important;
    }

    /* --- VIEW OPTIONS / LAYOUT TOGGLE ---
       Layout toggle is unnecessary on mobile (always list view) */
    .view-options {
        padding: 10px !important;
    }

    .layout-toggle-container {
        display: none !important;
    }

    /* Smaller "Showing X games" text */
    .games-count {
        font-size: 0.75rem !important;
        margin: 10px 0 !important;
    }

    /* --- GAME ENTRIES ---
       Mobile layout (top to bottom):
         Row 1: [Rank] [BoxArt] [Game Title]  — rank & boxart same height
         Row 2: Solo badges side-by-side (tier + score)
         Row 3: Multi badges side-by-side (if applicable)
         Row 4: Players · Weight · REVIEWED meta
         Row 5: Video full-width

       Uses display:contents on .game-info so its children (h3, badges,
       meta) participate directly in the parent grid. */

    .game-entry {
        display: grid !important;
        grid-template-columns: auto auto minmax(0, 1fr) !important;
        gap: 4px 8px !important;
        padding: 12px !important;
        overflow: hidden !important;
        align-items: start !important;
        flex-direction: unset !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Row 1: Rank + BoxArt aligned, both centered vertically */
    .game-rank {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 18px !important;
        min-width: 42px !important;
        padding: 8px 6px !important;
        border-radius: 8px !important;
        align-self: center !important;
    }

    .rank-play-count {
        font-size: 9px !important;
    }

    .game-thumbnail {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        margin: 0 !important;
    }

    .boardgame-rankings .box-art-thumb {
        width: 80px !important;
        max-height: 110px !important;
    }

    .box-art-thumb {
        width: 65px !important;
        height: auto !important;
        max-height: 90px !important;
    }

    .box-art-placeholder {
        width: 65px !important;
        height: 85px !important;
    }

    /* display:contents makes .game-info's children (h3, badges, meta)
       become direct grid children of .game-entry */
    .game-info {
        display: contents !important;
    }

    /* Constrain the game list container — default grid-template-columns is
       'auto' which sizes to content, allowing children to overflow.
       minmax(0, 1fr) forces the single column to fit the container width. */
    .video-games-list,
    .board-games-list {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Row 1, col 3: Game title next to rank + boxart */
    .game-info h3 {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 0.9rem !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }

    /* Row 2: Badges span full width — use flex-wrap so:
       - Badge groups (Solo/Multi) wrap to own lines when needed
       - Loose badges (no group) stay side-by-side */
    .inline-badges-row {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 3px !important;
        margin-top: 2px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Badge groups: tier + score SIDE BY SIDE, full width forces
       each group to its own line while loose badges stay inline */
    .badge-group {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 1px 3px 1px 0 !important;
        gap: 0 !important;
        transform: scale(0.85) !important;
        transform-origin: left center !important;
    }

    /* Loose badges (games without Solo/Multi groups) */
    .inline-badges-row > span:not(.badge-group) {
        transform: scale(0.85) !important;
        transform-origin: left center !important;
    }

    .badge-group .badge-group-label {
        font-size: 7px !important;
        padding: 1px 8px 1px 4px !important;
    }

    /* Row 3: Meta text spans full width */
    .boardgame-meta-line,
    .game-meta-line {
        grid-column: 1 / -1 !important;
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
        margin-top: 2px !important;
    }

    /* Prevent mid-phrase wrapping on links like "View on BoardGameGeek" */
    .bgg-meta-link,
    .reviewed-meta-link {
        white-space: nowrap !important;
    }

    /* Row 4: Video spans full container width */
    .game-video-right {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
    }

    .game-video-right video,
    .game-video-right img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
    }

    /* --- SUB-RANKINGS ---
       Desktop: 2-column grid with rank + boxart + info + showcase in a column.
       Mobile: single column, horizontal row layout.
       Hide showcase on mobile. Video-in-boxart displays full-width. */

    .sub-rankings-container {
        margin: 10px 0 15px 0 !important;
        padding: 12px !important;
    }

    .sub-rankings-container h4 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    .sub-rankings-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .sub-game-entry {
        padding: 10px !important;
        min-height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* Hide showcase image/video on mobile — too wide for 375px */
    .sub-game-showcase {
        display: none !important;
    }

    /* Rank: override both width AND min-width (desktop has min-width: 45px) */
    .sub-game-rank {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
        position: static !important;
        flex-shrink: 0 !important;
    }

    .sub-game-boxart {
        width: 55px !important;
        height: 55px !important;
        flex-shrink: 0 !important;
    }

    .sub-game-boxart img {
        max-height: 55px !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Videos in boxart: show full width below rank/title */
    .sub-game-boxart:has(video) {
        width: 100% !important;
        height: auto !important;
        order: 10 !important;
    }

    .sub-game-boxart video {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: contain !important;
    }

    /* Info area: takes remaining space */
    .sub-game-info {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    .sub-game-title {
        font-size: 13px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Badges: row layout, left-aligned, wrap if needed */
    .sub-game-ratings,
    .sub-badges-row,
    .sub-game-badges {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* --- ACTIVE FILTERS --- */
    .active-filters {
        flex-direction: column !important;
        text-align: center !important;
        gap: 5px !important;
        font-size: 0.85rem !important;
    }

    .filter-badge {
        font-size: 10px !important;
    }

    /* --- LOADING INDICATOR --- */
    .loading-indicator {
        padding: 15px !important;
    }

    /* --- HIDE VIDEOS BY DEFAULT ON MOBILE ---
       Videos are bandwidth-heavy on mobile. Hide unless user explicitly opted in
       via ?hide_videos=0 (which adds .show-videos class to container). */
    .video-games-list:not(.show-videos) .game-video-right,
    .video-games-list:not(.show-videos) .game-video-wrapper {
        display: none !important;
    }
}

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

    .page-title {
        font-size: 1.5rem !important;
    }

    .page-description {
        font-size: 0.85rem !important;
    }

    .game-entry {
        padding: 10px 8px !important;
        gap: 3px 6px !important;
    }

    .game-rank {
        font-size: 16px !important;
        padding: 6px 5px !important;
        min-width: 38px !important;
    }

    .game-info h3 {
        font-size: 0.85rem !important;
    }

    /* Slightly smaller thumbnails on tiny screens */
    .boardgame-rankings .box-art-thumb {
        width: 70px !important;
        max-height: 95px !important;
    }

    .box-art-thumb {
        width: 55px !important;
        max-height: 75px !important;
    }

    /* Even smaller badges on tiny screens */
    .badge-group {
        transform: scale(0.75) !important;
    }

    .inline-badges-row > span:not(.badge-group) {
        transform: scale(0.75) !important;
    }

    .sub-game-entry {
        padding: 8px !important;
        gap: 6px !important;
    }

    .sub-game-boxart {
        width: 45px !important;
        height: 45px !important;
    }

    .sub-game-boxart img {
        max-height: 45px !important;
    }

    .sub-game-rank {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    .sub-game-title {
        font-size: 12px !important;
    }
}