/*
 * jg-grid.css
 * JG Audio Player — Grille discographie, cartes, hover affordance
 * Note : les variables --jg-hover-* sont injectées via wp_add_inline_style()
 * @package JG Audio Player
 */


/* ── CARTES DISCOGRAPHIE — carte plate (S16) ───────────────────────────
 * Suppression du mécanisme flip card. Remplacement par .jg-card :
 * un simple conteneur carré — clic = ouverture directe du volet.
 * ─────────────────────────────────────────────────────────────────────── */
.jg-card {
    cursor: pointer;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: .2rem solid #e5e5e5;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
}
.jg-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* HOVER AFFORDANCE — icône ▶ + voile configurable (desktop uniquement) */
/* ─── Variables de personnalisation (injectées par wp_add_inline_style) ──
   --jg-hover-r, --jg-hover-g, --jg-hover-b  : composantes RGB du voile
   --jg-hover-intensity                        : opacité du voile, 0–1
   --jg-hover-border-opacity                   : opacité du liseré interne
   ──────────────────────────────────────────────────────────────────────── */
@media (hover: hover) {
    .jg-card::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0.7);
        width: 52px; height: 52px;
        background: rgba(255,255,255,0.92);
        border-radius: 50%;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 5; pointer-events: none;
    }
    .jg-card:hover::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .jg-card::before {
        content: '';
        position: absolute; inset: 0;
        background: rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), 0);
        box-shadow: inset 0 0 0 0px rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), 0);
        transition: background 0.4s ease, box-shadow 0.4s ease;
        z-index: 4; pointer-events: none;
    }
    .jg-card:hover::before {
        background: rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), var(--jg-hover-intensity));
        box-shadow: inset 0 0 0 1.5px rgba(var(--jg-hover-r), var(--jg-hover-g), var(--jg-hover-b), var(--jg-hover-border-opacity));
    }
}

/* ── Badge ▶ permanent — tactile (hover: none) ── */
/* Badge indique l'interactivité sur les appareils sans survol */
@media (hover: none) {
    .jg-card::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0.6);
        width: 36px; height: 36px;
        background: rgba(255,255,255,0.85);
        border-radius: 50%;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
        opacity: 0.5;
        z-index: 5; pointer-events: none;
    }
}

/* ── S4c : breakpoints grille générés en CSS scopé par instance ────────
   Les colonnes et typographies sont désormais générés par
   jg_grid_build_scoped_css() dans class-jg-grid-helpers.php.            */

/* ── Mode tap-to-play (≤320px) — .jg-tap-card ── */
/* Tap = joue l'album directement, long-press = ouvre le volet projet */
.jg-tap-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    border: .2rem solid #e5e5e5;
    box-sizing: border-box;
}
.jg-tap-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jg-tap-card::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6 3 20 12 6 21' fill='black'/%3E%3C/svg%3E") center/60% no-repeat;
    opacity: 0.6;
    animation: jg-tap-pulse 2s ease-in-out infinite;
    z-index: 5; pointer-events: none;
}
@keyframes jg-tap-pulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.6); }
    50%       { opacity: 0.9; transform: translate(-50%, -50%) scale(0.75); }
}

/* ── Bloc jg/discography-grid ────────────────────────────────────────────── */
/* Wrapper du bloc — remplace les 3 blocs Spectra en une instance unique */
.jg-discography-grid-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Grille interne — l'inline style du render.php fixe les colonnes desktop.
   Les overrides responsive (@media 1024px, 768px, 480px, 767px) s'appliquent
   automatiquement via les classes wp-block-post-template-is-layout-grid. */
.jg-discography-grid-wrap .wp-block-post-template {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}
.jg-discography-grid-wrap .wp-block-post-template > li {
    list-style: none;
    list-style-type: none;
}

/* Image de la carte — ratio carré, pas de débordement */
.jg-discography-grid-wrap .wp-block-post-featured-image {
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
}
.jg-discography-grid-wrap .wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.jg-discography-grid-wrap .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}