/*
 * Retro Game Rating - retro-rating.css
 * Compatible avec le theme Astra WordPress
 * Responsive & SEO-friendly
 * Version 3.0.0
 *
 * POLICES : Ce fichier utilise des CSS Custom Properties
 * --rgr-heading-font : police des titres/scores (defaut: Press Start 2P)
 * --rgr-body-font    : police du texte courant (defaut: inherit = celle du theme)
 * Ces variables sont definies inline par le shortcode via les params font="" et body_font=""
 */

/* ===== RESET ===== */
.rgr-wrapper,
.rgr-wrapper * {
    box-sizing: border-box;
}

/* ===== CSS CUSTOM PROPERTIES (DEFAULTS) ===== */
.rgr-wrapper {
    --rgr-heading-font: 'Press Start 2P', monospace;
    --rgr-body-font: inherit;
    /* Text scale : defini inline par le shortcode via text_size="..." */
    --rgr-text-scale: 1;
    /* Responsive auto-reduction factor (surcharge par media queries) */
    --rgr-resp: 1;
    /* Taille effective (scale utilisateur x reduction responsive) */
    --rgr-ts: calc(var(--rgr-text-scale, 1) * var(--rgr-resp, 1));
}

/* ===== ASTRA OVERRIDES ===== */
/* Override Astra general styles for wrapper */
.entry-content .rgr-wrapper,
.ast-article-single .rgr-wrapper {
    margin: 2rem auto;
    max-width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    clear: both;
}
.entry-content .rgr-wrapper *,
.ast-article-single .rgr-wrapper * {
    line-height: 1.5;
}

/*
 * COVER IMAGE FIX (v3.0)
 * L'ancien code avait "height: auto !important" sur TOUTES les images,
 * ce qui cassait le cover (l'image ne remplissait que la moitie).
 * Maintenant on cible specifiquement les images du cover avec
 * height: 100% !important pour forcer le remplissage complet.
 */

/* Images generales dans le wrapper : pas de height: auto global */
.entry-content .rgr-wrapper img,
.ast-article-single .rgr-wrapper img {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Cover side : forcer le remplissage complet de la carte */
.entry-content .rgr-cover img,
.ast-article-single .rgr-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-height: none !important;
}

/* Cover banner : forcer le remplissage sur toute la largeur */
.entry-content .rgr-cover-banner img,
.ast-article-single .rgr-cover-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-height: 220px !important;
}

/* Override Astra heading styles */
.entry-content h4.rgr-title,
.ast-article-single h4.rgr-title {
    font-family: var(--rgr-heading-font) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: inherit !important;
}
/* Override Astra paragraph styles */
.entry-content .rgr-verdict p,
.ast-article-single .rgr-verdict p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== WRAPPER ===== */
.rgr-wrapper {
    max-width: 650px;
    border-radius: 12px;
    overflow: hidden;
    margin: 2rem auto;
}

/* ===== THEME SOMBRE (defaut) ===== */
.rgr-theme-dark {
    background: #0f1629;
    border: 1px solid #2a3158;
    color: #e2e8f0;
}
.rgr-theme-dark .rgr-header {
    background: #1a1f3a;
    border-bottom: 1px solid #2a3158;
}
.rgr-theme-dark .rgr-category {
    background: rgba(0, 0, 0, 0.2);
}
.rgr-theme-dark .rgr-footer {
    background: #1a1f3a;
    border-top: 1px solid #2a3158;
}
.rgr-theme-dark .rgr-tag {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #2a3158;
    color: #94a3b8;
}
.rgr-theme-dark .rgr-bar {
    background: rgba(0, 0, 0, 0.4);
}
.rgr-theme-dark .rgr-verdict {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #2a3158;
}

/* ===== THEME CRT (scanlines) ===== */
.rgr-theme-crt {
    position: relative;
    background: #0a0e0a;
    border: 1px solid #1a2e1a;
    color: #c0ffc0;
}
.rgr-theme-crt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
    );
    pointer-events: none;
    z-index: 1;
}
.rgr-theme-crt .rgr-header {
    background: #0d120d;
    border-bottom: 1px solid #1a2e1a;
}
.rgr-theme-crt .rgr-category {
    background: rgba(0, 0, 0, 0.3);
}
.rgr-theme-crt .rgr-footer {
    background: #0d120d;
    border-top: 1px solid #1a2e1a;
}
.rgr-theme-crt .rgr-tag {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #1a2e1a;
    color: #7cb87c;
}
.rgr-theme-crt .rgr-bar {
    background: rgba(0, 0, 0, 0.5);
}
.rgr-theme-crt .rgr-verdict {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #1a2e1a;
}

/* ===== THEME NEON ===== */
.rgr-theme-neon {
    background: #0d0221;
    border: 1px solid #2d1b69;
    color: #e2d5f7;
}
.rgr-theme-neon .rgr-header {
    background: #150536;
    border-bottom: 1px solid #2d1b69;
}
.rgr-theme-neon .rgr-category {
    background: rgba(0, 0, 0, 0.2);
}
.rgr-theme-neon .rgr-footer {
    background: #150536;
    border-top: 1px solid #2d1b69;
}
.rgr-theme-neon .rgr-tag {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #2d1b69;
    color: #a78bfa;
}
.rgr-theme-neon .rgr-bar {
    background: rgba(0, 0, 0, 0.4);
}
.rgr-theme-neon .rgr-verdict {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #2d1b69;
}

/* ===== THEME CLAIR / MINIMAL ===== */
.rgr-theme-minimal {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
}
.rgr-theme-minimal .rgr-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.rgr-theme-minimal .rgr-category {
    background: #f9fafb;
}
.rgr-theme-minimal .rgr-footer {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}
.rgr-theme-minimal .rgr-tag {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}
.rgr-theme-minimal .rgr-bar {
    background: #e5e7eb;
}
.rgr-theme-minimal .rgr-verdict {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
.rgr-theme-minimal .rgr-label,
.rgr-theme-minimal .rgr-overall-max,
.rgr-theme-minimal .rgr-footer-label,
.rgr-theme-minimal .rgr-verdict-label {
    color: #6b7280;
}

/* ===== HEADER ===== */
.rgr-header {
    padding: 1rem 1.5rem;
}
.rgr-header-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* ===== COVER IMAGE - MODE SIDE (par defaut) ===== */
.rgr-cover {
    flex-shrink: 0;
    width: 96px;
    height: 128px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}
.rgr-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
}
.rgr-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}
.rgr-cover-emoji {
    font-size: 2rem;
}

/* ===== COVER IMAGE - MODE BANNER (pleine largeur) ===== */
.rgr-cover-banner {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    line-height: 0;
}
.rgr-cover-banner img {
    width: 100% !important;
    height: auto !important;
    min-height: 150px;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 220px !important;
}

/* ===== INFO ===== */
.rgr-info {
    flex: 1;
    min-width: 0;
}

/* ===== TYPOGRAPHIE - HEADING FONT ===== */
.rgr-label {
    font-family: var(--rgr-heading-font);
    font-size: calc(8px * var(--rgr-ts, 1));
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    display: block;
    margin-bottom: 6px;
}
.rgr-title {
    font-family: var(--rgr-heading-font) !important;
    font-size: calc(13px * var(--rgr-ts, 1)) !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

/* ===== TYPOGRAPHIE - BODY FONT ===== */
.rgr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--rgr-body-font);
}
.rgr-tag {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: calc(11px * var(--rgr-ts, 1));
    font-family: var(--rgr-body-font);
}

/* ===== NOTE GLOBALE ===== */
.rgr-overall-badge {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rgr-overall-score {
    font-family: var(--rgr-heading-font);
    font-size: calc(20px * var(--rgr-ts, 1));
    font-weight: bold;
}
.rgr-overall-max {
    font-family: var(--rgr-heading-font);
    font-size: calc(8px * var(--rgr-ts, 1));
    color: #94a3b8;
    margin-top: 2px;
}

/* ===== CATEGORIES ===== */
.rgr-categories {
    padding: 1rem 1.5rem;
}
.rgr-category {
    padding: 10px 12px;
    border-radius: 8px;
    /* La bordure gauche est geree inline par le shortcode :
       - cat_border="yes|no" pour l'activer/desactiver
       - cat_border_width="4" pour l'epaisseur (0-8px)
       - cat_border_color="auto|#hex" pour la couleur */
    margin-bottom: 8px;
}
.rgr-cat-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rgr-cat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(13px * var(--rgr-ts, 1));
    font-weight: 600;
    font-family: var(--rgr-body-font);
}
.rgr-cat-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rgr-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.rgr-bar-wrap {
    flex: 1;
    min-width: 80px;
}
.rgr-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.rgr-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.rgr-cat-score {
    font-family: var(--rgr-heading-font);
    font-size: calc(10px * var(--rgr-ts, 1));
    font-weight: bold;
    margin-left: auto;
    white-space: nowrap;
}

/* ===== VERDICT ===== */
.rgr-verdict {
    margin: 0 1.5rem 1rem;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.rgr-verdict-icon {
    font-size: calc(24px * var(--rgr-ts, 1));
    flex-shrink: 0;
}
.rgr-verdict-label {
    font-family: var(--rgr-heading-font);
    font-size: calc(8px * var(--rgr-ts, 1));
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    display: block;
    margin-bottom: 6px;
}
.rgr-verdict p {
    font-size: calc(14px * var(--rgr-ts, 1));
    line-height: 1.6;
    margin: 0 !important;
    font-family: var(--rgr-body-font);
}

/* ===== FOOTER ===== */
.rgr-footer {
    padding: 10px 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rgr-footer-label {
    font-family: var(--rgr-heading-font);
    font-size: calc(8px * var(--rgr-ts, 1));
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
}

/* ===== RESPONSIVE ===== */

/* Tablette : reduction automatique a 92% */
@media (max-width: 1024px) {
    .rgr-wrapper {
        --rgr-resp: 0.92;
    }
}

/* Mobile : reduction a 82% + layout vertical */
@media (max-width: 768px) {
    .rgr-wrapper {
        --rgr-resp: 0.82;
    }
    .rgr-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .rgr-meta {
        justify-content: center;
    }
    .rgr-overall-badge {
        width: 70px;
        height: 70px;
    }
    .rgr-cat-inner {
        flex-direction: column;
    }
    .rgr-header {
        padding: 1rem;
    }
    .rgr-categories {
        padding: 0.75rem 1rem;
    }
    .rgr-verdict {
        margin: 0 1rem 0.75rem;
    }
    .rgr-footer {
        padding: 10px 1rem;
    }
    .rgr-cover-banner {
        max-height: 160px;
    }
    .rgr-cover-banner img {
        max-height: 160px !important;
    }
}

/* Petit mobile : reduction a 72% */
@media (max-width: 480px) {
    .rgr-wrapper {
        --rgr-resp: 0.72;
    }
}

@media (min-width: 769px) {
    .rgr-cat-inner {
        flex-direction: row;
        align-items: center;
    }
    .rgr-cat-label {
        width: 160px;
        flex-shrink: 0;
    }
    .rgr-cat-rating {
        flex: 1;
    }
}

/* ===== COMPATIBILITE ASTRA ===== */
/* Full-width & page builder layouts */
.ast-plain-container .rgr-wrapper,
.ast-page-builder-template .rgr-wrapper {
    max-width: 650px;
}
/* Boxed layout */
.ast-separate-container .rgr-wrapper {
    margin-left: auto;
    margin-right: auto;
}
/* Sidebar layouts */
.ast-right-sidebar .rgr-wrapper,
.ast-left-sidebar .rgr-wrapper {
    max-width: 100%;
}
/* Astra dark mode */
.ast-theme-transparent-header .rgr-theme-minimal {
    background: #f9fafb;
}

/* ===== PRINT ===== */
@media print {
    .rgr-wrapper {
        border: 2px solid #333 !important;
        break-inside: avoid;
    }
    .rgr-bar-fill {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}