/**
 * XoXo Cards - Bloc "Cartes obtenues" de la fiche profil membre
 * v8.11.0 [TACHE 231]
 *
 * Regle d'affichage SPECIFIQUE : cartes en clair + couleur (pas de grayscale/blur),
 * avec overlay logo XoXo (::after, asset embarque ../images/logo-overlay.png) +
 * icone cadenas Font Awesome. Etat vide : 3 slots pointilles + 4e slot (CTA ou neutre).
 *
 * Largeur de vignette pilotable via la variable --xoxo-mcb-w (defaut 120px,
 * ~50% de la taille des cartes de la page jeu). Ratio carte = 750/1050 (5:7).
 */

.xoxo-mcb {
    --xoxo-mcb-w: 120px;
    /* v8.12.1 [TACHE 233 #3] : air vertical pour que l'effet de survol "souleve"
       (-6px + ombre) ne soit pas rogne par l'overflow du strip. */
    --xoxo-mcb-pad-top: 14px;
    margin: 16px 0;
    width: 100%;
    /* v8.12.4 [TACHE 233] : titre + contenu a 20px du bord HAUT et 20px du bord
       GAUCHE du bloc (demande user). Retrait droite/bas plus modere. */
    padding: 20px 12px 12px 20px;
    box-sizing: border-box;
}

.xoxo-mcb__header {
    margin-bottom: 12px;
}

.xoxo-mcb__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1f2330;
}

.xoxo-mcb__title .fa {
    color: #FF00AA;
}

/* v8.12.0 [TACHE 232] : sous-titre ".xoxo-mcb__subtitle" retire (texte "De la plus
   rare a la plus commune..." supprime de la vue). */

/* ---- Strip horizontal + slot fixe (v8.12.1 [TACHE 233]) ---- */
.xoxo-mcb__strip {
    position: relative;
}

.xoxo-mcb__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    /* #3 : padding vertical -> le survol "souleve" n'est plus rogne (overflow-x:auto
       force overflow-y:auto, qui coupait le translateY vers le haut). */
    padding-top: var(--xoxo-mcb-pad-top);
    padding-bottom: 12px;
    scrollbar-width: thin;
    /* #1 : cartes alignees A GAUCHE (remplace justify-content:center de v8.12.0 ;
       le centrage genait visuellement au scroll). */
    justify-content: flex-start;
}

/* v8.12.2 [TACHE 233] BLOC BLANC OPAQUE fixe, ancre a droite, HORS du conteneur
   scrollable et PLEINE HAUTEUR : il masque integralement les cartes qui defilent
   derriere (fini la transparence) ET la zone de survol "souleve" des cartes
   voisines (fini le decalage visuel). Les cartes "sortent de derriere" ce bloc au
   scroll. La carte (hint ou CTA) est posee PAR-DESSUS, alignee sur la rangee via
   le padding-top. Le fond #fff se fond avec le panneau du theme. */
.xoxo-mcb__fixed {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: calc(var(--xoxo-mcb-w) + 12px);
    background: #fff;
    /* v8.12.3 : au-dessus du cadenas (z6) — combine a l'isolation des cartes,
       garantit qu'absolument rien ne transparait derriere le bloc blanc. */
    z-index: 7;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: var(--xoxo-mcb-pad-top);
    box-sizing: border-box;
    pointer-events: none; /* le scroll passe au travers ; le CTA se reactive plus bas */
}

/* La carte visuelle (pointille) posee sur le bloc blanc, meme gabarit que les cartes. */
.xoxo-mcb__fixed-card {
    width: var(--xoxo-mcb-w);
    aspect-ratio: 750 / 1050;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* #2 hint de scroll (cercle + fleche) : tout le bloc fixe n'apparait que si le
   strip deborde (.is-scrollable pose par member-cards-block.js).
   v8.12.5 : le hint CAPTE les clics (pointer-events:auto, override du none de
   .xoxo-mcb__fixed) -> un clic sur la fleche ne traverse plus jusqu'a la carte
   cachee derriere (plus d'ouverture parasite de la modale). Les cartes VISIBLES
   (a gauche du bloc) ne sont pas couvertes -> elles restent cliquables, et le
   redeviennent des qu'elles sortent de derriere le bloc au scroll. */
.xoxo-mcb__fixed--hint {
    display: none;
    pointer-events: auto;
}

.xoxo-mcb__strip.is-scrollable .xoxo-mcb__fixed--hint {
    display: flex;
}

.xoxo-mcb__fixed--hint .xoxo-mcb__fixed-card {
    border: 2px dashed #d7d7de;
}

/* #7/#8 CTA etat vide : toujours visible, cliquable (le lien redevient interactif). */
.xoxo-mcb__fixed--cta {
    display: flex;
}

.xoxo-mcb__fixed--cta .xoxo-mcb__fixed-card {
    border: 2px dashed rgba(255, 0, 170, 0.45);
    background: #fff5fb;
    text-decoration: none;
    pointer-events: auto;
    transition: background .2s ease, border-color .2s ease;
}

.xoxo-mcb__fixed--cta .xoxo-mcb__fixed-card:hover {
    background: #ffe9f6;
    border-color: #FF00AA;
}

/* Reserve a droite = largeur du bloc blanc : la derniere carte peut defiler
   entierement A GAUCHE du bloc au lieu de rester cachee dessous. */
.xoxo-mcb__strip.is-scrollable .xoxo-mcb__grid,
.xoxo-mcb__strip--empty .xoxo-mcb__grid {
    padding-right: calc(var(--xoxo-mcb-w) + 12px);
}

/* Cercle (commun hint + CTA) contenant l'icone FA. */
.xoxo-mcb__hint-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FF00AA;
    color: #FF00AA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.xoxo-profile-card {
    flex: 0 0 auto;
    width: var(--xoxo-mcb-w);
    /* v8.12.0 [TACHE 232] #2+#3 : carte cliquable + effet de survol dynamique */
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.xoxo-profile-card:hover {
    transform: translateY(-6px);
}

.xoxo-profile-card:focus-visible {
    outline: 2px solid #FF00AA;
    outline-offset: 2px;
    border-radius: 10px;
}

.xoxo-profile-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 1050;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow .2s ease;
    /* v8.12.3 [TACHE 233] CORRECTIF CLE : isole le contexte d'empilement de CHAQUE
       carte -> le voile (z3), le logo (z5) et SURTOUT le cadenas (z6) restent
       CONFINES a l'interieur de la carte et ne "fuient" plus au-dessus du bloc
       blanc fixe. Resultat : plus aucune carte (ni cadenas) visible derriere/
       sous la carte pointillee fixe, quel que soit le profil. */
    isolation: isolate;
}

/* v8.12.0 [TACHE 232] #2 : ombre renforcee au survol (effet "carte soulevee") */
.xoxo-profile-card:hover .xoxo-profile-card__img {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.xoxo-profile-card__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* v8.11.1 [TACHE 231.1] Voile blanc semi-transparent (66%) appose SUR l'image,
   DERRIERE le logo et le cadenas. Marque visuellement que la carte appartient au
   membre consulte (effet "possedee par un autre / consultable"). z-index 3 =
   au-dessus de l'image (auto) mais sous le logo (5) et le cadenas (6). */
.xoxo-profile-card--locked .xoxo-profile-card__img::before {
    content: '';
    position: absolute;
    inset: 0;
    /* v8.12.1 [TACHE 233 #4] : opacite progressive par carte (0.66 a gauche ->
       0.90 a droite), valeur injectee inline via --xoxo-mcb-mask par la vue. */
    background: rgba(255, 255, 255, var(--xoxo-mcb-mask, 0.66));
    z-index: 3;
    pointer-events: none;
}

/* v8.12.1 [TACHE 233 #9] : compte "vitrine" -> DOS BLANC plein (l'image n'est
   JAMAIS emise par la vue), logo + cadenas par-dessus. La carte est un lien
   vers le jeu (#10) ; pas de modale. */
.xoxo-profile-card--masked {
    text-decoration: none;
}

.xoxo-profile-card--masked .xoxo-profile-card__img {
    background: #fff;
}

/* v8.12.4 [TACHE 233] : carte finale "..." (dos blanc, cercle + ellipsis centre),
   SANS logo ni cadenas, decorative et non interactive (pas de survol "souleve"). */
.xoxo-profile-card--more {
    cursor: default;
}

.xoxo-profile-card--more:hover {
    transform: none;
}

.xoxo-profile-card--more .xoxo-profile-card__img {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xoxo-profile-card--more:hover .xoxo-profile-card__img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Overlay logo XoXo Cards - CLAIR (pas de grayscale/blur sur l'image, regle
   specifique TACHE 231). Reutilise le meme asset que les autres ecrans.
   v8.11.1 : legerement remonte (top 42%) pour laisser la place au cadenas
   centre juste en dessous. */
.xoxo-profile-card--locked .xoxo-profile-card__img::after,
.xoxo-profile-card--masked .xoxo-profile-card__img::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    height: 46%;
    background-image: url('../images/logo-overlay.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
    opacity: 0.92;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* v8.12.2/8.12.4 [TACHE 233] : compte vitrine (#9) -> logo XoXo Cards en NOIR sur
   carte blanche (asset transparent logo-overlay-dark.png). v8.12.4 : on N'OVERRIDE
   QUE l'image et l'ombre -> la GEOMETRIE (top/width/height du logo) reste celle des
   cartes "locked" du profil membre (memes 512x227 ~ 2.25:1 que le logo dark) pour un
   dimensionnement IDENTIQUE (coherence visuelle demandee). Le cadenas n'est pas
   surcharge non plus -> meme position/taille que sur le profil membre. */
.xoxo-profile-card--masked .xoxo-profile-card__img::after {
    background-image: url('../images/logo-overlay-dark.png');
    opacity: 1;
    filter: none;
    -webkit-filter: none;
}

/* Cadenas Font Awesome : v8.11.1 [TACHE 231.1] place CENTRE, JUSTE SOUS le logo
   XoXo (ne gene plus la lecture du type de carte en haut). Rendu en filigrane
   GRIS semi-transparent (pas de pastille sombre), taille legerement agrandie. */
.xoxo-profile-card__lock {
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(70, 70, 70, 0.5);
    font-size: 26px;
    line-height: 1;
    z-index: 6;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* v8.11.2 [TACHE 231.2] : styles .xoxo-mcb__more retires (lien "voir toute la
   collection" supprime a la demande user). */

/* ---- Etat vide (v8.12.1 [TACHE 233 #6/#7/#8]) ---- */
/* Le strip vide reutilise .xoxo-mcb__strip + .xoxo-mcb__grid. Les N-1 slots vides
   defilent ; le CTA est un slot FIXE (.xoxo-mcb__fixed--cta) toujours visible. La
   reserve de droite est mutualisee avec l'etat scrollable (cf .xoxo-mcb__fixed). */

.xoxo-mcb__slot {
    flex: 0 0 auto;
    width: var(--xoxo-mcb-w);
    aspect-ratio: 750 / 1050;
    border-radius: 8px;
    box-sizing: border-box;
}

.xoxo-mcb__slot--empty {
    border: 2px dashed #d7d7de;
    background: #fafafb;
}

/* v8.12.2 [TACHE 233] : styles .xoxo-mcb__slot--cta / __cta-plus / __cta-label
   RETIRES. Le CTA de l'etat vide reutilise desormais .xoxo-mcb__fixed--cta +
   .xoxo-mcb__fixed-card + .xoxo-mcb__hint-circle (icone fa-clone, sans texte).
   v8.12.1 : styles .xoxo-mcb__slot--neutral / __neutral-label deja retires
   (etat vide unifie, plus de libelle neutre). */

/* ---- Responsive (v8.12.1 [TACHE 233 #2]) ----
   Le slot fixe (hint / CTA) suit --xoxo-mcb-w : il s'adapte automatiquement. On
   reduit la largeur de vignette sur tablette / smartphone pour un rendu equilibre. */
@media (max-width: 600px) {
    .xoxo-mcb { --xoxo-mcb-w: 104px; }
}

@media (max-width: 400px) {
    .xoxo-mcb { --xoxo-mcb-w: 90px; }
}