/*
 * Minicards: rejilla compacta para los listados (jugadores, equipos, agencias).
 * Cada minicard lleva dentro la card completa de siempre, oculta, y la muestra
 * flotando al dejar el ratón encima 1 s (o al mantener pulsado en móvil).
 * Un clic normal, en la minicard o en la card desplegada, va al perfil.
 *
 *   <div class="gf-mini-grid">
 *     <article class="gf-mini" data-gf-mini data-href="/perfil/">
 *       <a class="gf-mini-face" href="/perfil/">…foto, nombre, datos…</a>
 *       <div class="gf-mini-pop" hidden>…card completa…</div>
 *     </article>
 *   </div>
 *
 * El comportamiento está en js/gf-minicards.js. Usa los colores del sideboard.
 */
.gf-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
}
/* El estado vacío ({% empty %}) ocupa toda la fila */
.gf-mini-grid > :not(.gf-mini) { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .gf-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.gf-mini { position: relative; min-width: 0; }

/* --- Cara compacta ------------------------------------------------------------ */
.gf-mini-face {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 14px 10px 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gf-side-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    color: var(--gf-side-ink);
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    /* Mantener pulsado no debe abrir el menú del enlace ni seleccionar texto */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.gf-mini-face::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(135deg, #28a745, #17a2b8);
}
.gf-mini-face:hover, .gf-mini-face:focus-visible {
    color: var(--gf-side-ink);
    text-decoration: none;
    transform: translateY(-3px);
    border-color: #cde8d4;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
}
.gf-mini-face:focus-visible { outline: 3px solid rgba(31, 157, 58, .35); outline-offset: 2px; }
.gf-mini.is-open .gf-mini-face { border-color: var(--gf-side-accent); }

.gf-mini-media {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    margin: 4px 0 10px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--gf-side-bubble);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .15);
}
.gf-mini-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.gf-mini-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
}
.gf-mini-sub {
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--gf-side-accent);
}
.gf-mini-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    max-width: 100%;
}
.gf-mini-meta span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gf-side-hover);
    font-size: .72rem;
    font-weight: 600;
    color: var(--gf-side-muted);
}

/* Barra que se llena mientras se mantiene el ratón o el dedo encima */
.gf-mini-hold {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gf-side-accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.gf-mini.is-arming .gf-mini-hold { transform: scaleX(1); transition: transform var(--gf-hold, 1s) linear; }

/* --- Card completa desplegada ----------------------------------------------- */
.gf-mini-pop {
    position: fixed;
    z-index: 1045; /* sobre la barra superior; los modales cierran el pop al abrirse */
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(5, 19, 32, .28);
    cursor: pointer;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .16s ease, transform .16s ease;
}
.gf-mini-pop.is-in { opacity: 1; transform: none; }
.gf-mini-pop .card { margin: 0 !important; }
/* La card no se anima por su cuenta: ni AOS ni el salto al pasar el ratón */
.gf-mini-pop [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
.gf-mini-pop .card.card:hover { transform: none !important; }

/* Móvil: centrada sobre un fondo oscuro */
.gf-mini-pop.gf-mini-sheet {
    top: 50% !important;
    left: 50% !important;
    max-height: 85vh;
    transform: translate(-50%, -46%) scale(.96);
}
.gf-mini-pop.gf-mini-sheet.is-in { transform: translate(-50%, -50%); }
.gf-mini-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(5, 19, 32, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s;
}
.gf-mini-backdrop.is-in { opacity: 1; visibility: visible; }
body.gf-mini-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .gf-mini-face, .gf-mini-pop, .gf-mini-backdrop { transition: none; }
    .gf-mini-face:hover, .gf-mini-face:focus-visible { transform: none; }
}