/**
 * Reviews Listing Mobile - Responsive styles for video game & board game reviews pages
 * Loaded on page-video-game-reviews.php and page-board-game-reviews.php
 * via wp_enqueue_style with media="(max-width: 768px)"
 *
 * Standard breakpoints:
 *   768px - Primary mobile (tablet/phone)
 *   480px - Small phone (375px devices)
 *
 * NOTE: The reviews-listing-page.css already has some responsive rules at 768px
 *       and 480px. This file handles what's missing: the top-section review cards
 *       (torn-paper grid from home-redesign-v2.css) and header layout fixes.
 *
 * @package WakasmTheme
 * @since 2.2
 */

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

    /* --- TOP SECTION HEADER ---
       Desktop: flex row with title left, count right. On mobile, stack. */
    .reviews-top-section .section-header-row {
        flex-direction: column !important;
        gap: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .reviews-top-section .section-title {
        font-size: 1.8rem !important;
    }

    /* Pull the green underline closer so it doesn't overlap "Browse X reviews" */
    .reviews-top-section .section-title::after {
        bottom: -8px !important;
        height: 3px !important;
    }

    .reviews-top-section .reviews-count {
        font-size: 0.85rem !important;
    }

    /* --- TOP SECTION REVIEW CARDS GRID ---
       Desktop: 3-col grid with featured card spanning 2 cols.
       Mobile: single column stack (same fix as home-mobile.css).
       home-mobile.css only loads on homepage, so we duplicate here. */

    .reviews-top-section {
        padding: 20px 10px 30px 10px !important;
    }

    .reviews-grid-v3 {
        padding: 0 10px 10px 10px !important;
        gap: 20px !important;
    }

    .reviews-chunk {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Reset featured card spanning to single column */
    .reviews-chunk .review-card-container.featured,
    .reviews-chunk.featured-left > .review-card-container.featured,
    .reviews-chunk.featured-right > .review-card-container.featured {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .reviews-chunk.featured-right > .review-card-container:not(.featured):nth-child(2),
    .reviews-chunk.featured-right > .review-card-container:not(.featured):nth-child(3) {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .review-card-v3 {
        min-height: 180px !important;
    }

    .review-card-v3.featured {
        min-height: 220px !important;
    }

    .review-card-v3 .review-card-title-v3 {
        font-size: 1rem !important;
    }

    /* Box art sizing + positioning (matches home-mobile.css) */
    .review-card-boxart,
    .review-card-boxart.featured {
        width: 45px !important;
    }

    .review-card-boxart-link,
    .review-card-container.featured .review-card-boxart-link {
        bottom: 0 !important;
        right: 0 !important;
    }

    /* Content padding - less right padding, title closer to bottom */
    .review-card-v3 .review-card-content-v3,
    .review-card-v3.featured .review-card-content-v3 {
        padding: 10px 60px 10px 10px !important;
    }

    /* Badge positions - badges now in .review-card-container (outside clip-path) */
    .review-card-container > .review-tier-badge {
        right: 40px !important;
        bottom: -5px !important;
        font-size: 0.75rem !important;
        padding: 2px 6px !important;
    }

    .review-card-container > .review-score-badge {
        right: 40px !important;
        bottom: 15px !important;
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    .review-card-container.featured > .review-tier-badge {
        right: 40px !important;
        bottom: -5px !important;
        font-size: 0.75rem !important;
    }

    .review-card-container.featured > .review-score-badge {
        right: 40px !important;
        bottom: 15px !important;
        font-size: 0.7rem !important;
    }

    /* --- A-Z SECTION ---
       Disable wavy clip-path (eats ~3% each side = ~22px on 375px).
       Keep green torn-edge pseudo-elements. */
    .reviews-listing-page.reviews-listing-az-section {
        clip-path: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- A-Z SECTION DIVIDER --- */
    .reviews-az-divider {
        margin: 25px 0 20px 0 !important;
        gap: 12px !important;
    }

    .reviews-az-divider .divider-text {
        font-size: 0.9rem !important;
    }

    /* --- LETTER GROUPS --- */
    .reviews-letter-group {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .letter-header {
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .letter-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }

    /* --- A-Z ENTRIES: single column on mobile --- */
    .letter-reviews {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Card grid adjustments for mobile */
    .review-list-entry {
        grid-template-columns: 50px 1fr !important;
        gap: 2px 8px !important;
        padding: 10px !important;
    }

    .review-entry-boxart {
        width: 50px !important;
    }

    .review-entry-boxart img {
        max-height: 70px !important;
    }

    .review-entry-title {
        font-size: 0.9rem !important;
    }

    .review-entry-date {
        font-size: 0.7rem !important;
    }

    /* Badges container: full width, stacked rows */
    .review-entry-badges {
        justify-self: stretch !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    /* Badge groups (board games Solo/Multi): label left, badges right */
    .review-entry-badges .badge-group {
        transform: none !important;
        display: flex !important;
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }

    /* Prevent badge text from wrapping to two lines */
    .review-entry-badges .tier-badge-image,
    .review-entry-badges .score-badge-image {
        white-space: nowrap !important;
    }

    /* Fixed-width label so badges align across Solo/Multi rows */
    .review-entry-badges .badge-group-label {
        min-width: 28px !important;
        margin-right: auto !important;
    }

    /* Video game loose badges: row, right-aligned */
    .review-entry-badges > span:not(.badge-group) {
        transform: none !important;
    }

    .review-list-entry-video .review-entry-badges {
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 4px !important;
    }
}

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

    .reviews-top-section .section-title {
        font-size: 1.5rem !important;
    }

    .review-card-v3 {
        min-height: 160px !important;
    }

    .review-card-v3.featured {
        min-height: 200px !important;
    }

    .review-card-v3 .review-card-title-v3 {
        font-size: 0.9rem !important;
    }

    /* --- A-Z ENTRIES: tighter on small phones --- */
    .reviews-listing-page.reviews-listing-az-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .reviews-letter-group {
        padding: 10px !important;
    }

    .review-list-entry {
        grid-template-columns: 45px 1fr !important;
        padding: 8px !important;
    }

    .review-entry-boxart {
        width: 45px !important;
    }

    .review-entry-boxart img {
        max-height: 60px !important;
    }

    .review-entry-title {
        font-size: 0.85rem !important;
    }

    /* Badges: no scale on small phones either */
    .review-entry-badges .badge-group {
        transform: none !important;
    }

    .review-entry-badges > span:not(.badge-group) {
        transform: none !important;
    }
}