/**
 * Styles communs pour les cartes de jeux vidéo
 * Ce fichier contient tous les styles de base réutilisables pour l'affichage d'une carte de jeu
 * Utilisé par tous les shortcodes (Vue.js et PHP classique)
 */

/* Variables CSS communes */
:root {
    --vg-primary-color: #0073e6;
    --vg-secondary-color: #f5f5f5;
    --vg-text-color: #333;
    --vg-border-radius: 10px;
    --vg-transition-duration: 0.3s;
}

/* ========================================
   CARTE DE JEU - Structure de base
   ======================================== */

.video-game {
    position: relative;
    background: var(--vg-secondary-color);
    border: 1px solid #ddd;
    border-radius: var(--vg-border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform var(--vg-transition-duration), box-shadow var(--vg-transition-duration);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-game:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

/* ========================================
   WRAPPER D'INFORMATIONS
   ======================================== */

.video-game-info-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100px;
}

/* ========================================
   LIEN DE LA CARTE
   ======================================== */

.video-game-link {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.video-game-link:hover,
.video-game-link:focus {
    color: #f70d28;
}

/* Lien autour de l'image - pas de changement de couleur au hover */
.video-game-image-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.video-game-image-link:hover,
.video-game-image-link:focus {
    color: inherit;
}

/* ========================================
   IMAGE ET WRAPPER
   ======================================== */

.video-game-image-wrapper {
    flex-shrink: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-game img,
.video-game-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Effet zoom sur l'image au hover */
.video-game:hover img {
    transform: scale(1.05);
}

/* Placeholder pour image manquante */
.video-game-no-image {
    background-color: #ddd;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
}

/* ========================================
   TITRE DU JEU
   ======================================== */

.video-game-title {
    font-size: 1.3rem;
    text-align: center;
    font-weight: bold;
    margin: 0 0 10px;
    color: var(--vg-text-color);
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

/* ========================================
   DATE DE SORTIE
   ======================================== */

.video-game-release-date {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
    margin-top: auto;
    font-weight: bold;
    color: var(--vg-primary-color);
}

/* Date dans les listes de jeux (archive, collection) */
.video-game-date {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
    padding: 5px 0;
    color: #666;
    border-top: 1px solid #eee;
    margin-top: auto;
}

/* ========================================
   ICÔNES - Base commune
   ======================================== */

.video-game-icon {
    position: absolute;
    border-radius: 5px;
    border: 1px solid lightgrey;
    opacity: 0.8;
}

/* Icône de score - En haut à gauche */
.video-game-score-icon {
    top: 5px;
    left: 5px;
    background: black;
    color: #fff;
    font-size: 20px;
    line-height: 38px;
    min-width: 40px;
    min-height: 40px;
    text-align: center;
    opacity: 0.75;
    z-index: 4;
}

/* Icônes de console - En bas à gauche */
.video-game-console-icons {
    bottom: 5px;
    left: 5px;
    background: #fff;
    padding: 3px;
    display: flex;
    gap: 3px;
    position: absolute;
    z-index: 4;
}

.video-game-console-icons .console-icon-item {
    display: inline-block;
}

.video-game-console-icons img {
    width: 30px;
    height: auto;
    display: block;
}

/* Support pour l'ancienne classe unique (rétrocompatibilité) */
.video-game-console-icon {
    bottom: 5px;
    left: 5px;
    background: #fff;
    padding: 3px;
    position: absolute;
    border-radius: 5px;
    border: 1px solid lightgrey;
    opacity: 0.8;
    z-index: 4;
}

.video-game-console-icon img {
    width: 30px;
    height: auto;
}

/* ========================================
   BOUTON GOOGLE CALENDAR
   ======================================== */

.google-calendar-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #FFFFFF;
    border-radius: 5px;
    max-width: 25px;
    opacity: 0.5;
    border: 1px solid #ddd !important;
    z-index: 1;
}

.google-calendar-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    opacity: 1;
    max-width: 30px;
}

.google-calendar-button img {
    max-width: 32px;
    max-height: 32px;
    padding: 3px;
}

/* ========================================
   BOUTONS D'ACHAT
   ======================================== */

.video-game-link-zone {
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.video-game-button {
    display: inline-block;
    text-align: center;
    padding: 5px 15px;
    min-width: 70px;
    background-color: #0056b3;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
    font-size: 14px;
}

.video-game-button:hover {
    background-color: #004099;
    color: #fff;
}