/*
 * GB Packers · Roster Sync — Cuerpo técnico [gbrs_staff]
 * Archivo: assets/staff.css
 *
 * Rejilla de tarjetas del staff, con el mismo lenguaje visual que la mini
 * ficha de jugador y el roster: tarjeta blanca, franja dorada a la izquierda,
 * esquinas de 14 px, sombra suave, cargo en dorado y nombre en UltimatumBold
 * verde.
 *
 * Secciones:
 *   1. Rejilla
 *   2. Tarjeta
 *   3. Foto
 *   4. Cargo y nombre
 *   5. Variante verde
 *   6. Responsive
 */


/* 1. REJILLA ─────────────────────────────────────────────────────────────── */

.gbrs-staff {
    --st-green:  #10301f;
    --st-gold:   #f9b45b;
    --st-gold-d: #c98a2e;   /* dorado oscurecido: el claro no se lee en 11 px */
    --st-border: #e4e4e4;
    --st-bg:     #ffffff;
    --st-text:   #2b2b2b;
    --st-soft:   #6f6f6f;
    --st-shadow: 0 2px 10px rgba(16, 48, 31, 0.06);
    --st-hover:  0 10px 26px rgba(16, 48, 31, 0.16);
    --st-cols:   5;

    display: grid;
    grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--st-text);
}

.gbrs-staff--cols-1 { --st-cols: 1; }
.gbrs-staff--cols-2 { --st-cols: 2; }
.gbrs-staff--cols-3 { --st-cols: 3; }
.gbrs-staff--cols-4 { --st-cols: 4; }
.gbrs-staff--cols-5 { --st-cols: 5; }
.gbrs-staff--cols-6 { --st-cols: 6; }

.gbrs-staff-title {
    max-width: 1200px;
    margin: 0 auto 18px;
    color: #10301f;
    font-family: "UltimatumBold", sans-serif;
    font-weight: normal;
    font-size: 2.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* 2. TARJETA ─────────────────────────────────────────────────────────────── */

/* El selector repite .gbrs-staff porque el tema pinta color y subrayado a
   cualquier <a> del contenido; sin eso el nombre saldría azul y subrayado. */
.gbrs-staff .gbrs-staff__card,
.gbrs-staff a.gbrs-staff__card,
.gbrs-staff a.gbrs-staff__card:visited {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-left: 5px solid var(--st-gold);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--st-shadow);
    color: var(--st-text);
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-left-color 0.18s ease;
}

.gbrs-staff a.gbrs-staff__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--st-hover);
    border-left-color: var(--st-green);
}

.gbrs-staff a.gbrs-staff__card:focus-visible {
    outline: 3px solid var(--st-gold);
    outline-offset: 3px;
}


/* 3. FOTO ────────────────────────────────────────────────────────────────── */

/* Las fichas antiguas tienen miniatura 380x400 y las nuevas 380x495: el
   aspect-ratio fijo las iguala sin regenerar la biblioteca de medios.
   object-position: center top deja la cara arriba al recortar. */
.gbrs-staff .gbrs-staff__photo {
    position: relative;
    display: block;
    width: 100%;
    background: #eef0ee;
}

.gbrs-staff .gbrs-staff__photo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 19 / 20;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
}

.gbrs-staff .gbrs-staff__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 19 / 20;
    background: var(--st-green);
    color: var(--st-gold);
    font-family: "UltimatumBold", sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 1px;
}


/* 4. CARGO Y NOMBRE ──────────────────────────────────────────────────────── */

.gbrs-staff .gbrs-staff__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
}

.gbrs-staff .gbrs-staff__roles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gbrs-staff .gbrs-staff__role {
    color: var(--st-gold-d);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Cargos secundarios: atenuados para que no compitan con el principal */
.gbrs-staff .gbrs-staff__role--extra {
    color: var(--st-soft);
    font-weight: 600;
    letter-spacing: 0.6px;
}

.gbrs-staff .gbrs-staff__name {
    color: var(--st-green);
    font-family: "UltimatumBold", sans-serif;
    font-weight: normal;
    font-size: 1.12rem;
    line-height: 1.1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.gbrs-staff a.gbrs-staff__card:hover .gbrs-staff__name {
    color: var(--st-gold-d);
}

/* Sin fotos la tarjeta se queda en una pastilla de texto */
.gbrs-staff--nophotos .gbrs-staff__body {
    padding: 16px;
}


/* 5. VARIANTE VERDE ──────────────────────────────────────────────────────── */

.gbrs-staff--green {
    --st-bg:     #10301f;
    --st-border: #10301f;
    --st-text:   #ffffff;
    --st-soft:   rgba(255, 255, 255, 0.62);
    --st-gold-d: #f9b45b;   /* sobre verde sí se lee el dorado de marca */
    --st-shadow: 0 2px 10px rgba(16, 48, 31, 0.18);
    --st-hover:  0 10px 26px rgba(16, 48, 31, 0.3);
}

.gbrs-staff--green .gbrs-staff__name,
.gbrs-staff--green a.gbrs-staff__card,
.gbrs-staff--green a.gbrs-staff__card:visited {
    color: #ffffff;
}

.gbrs-staff--green a.gbrs-staff__card:hover {
    border-left-color: #ffffff;
}

.gbrs-staff--green a.gbrs-staff__card:hover .gbrs-staff__name {
    color: var(--st-gold);
}

.gbrs-staff--green .gbrs-staff__initials {
    background: #0b2416;
}


/* 6. RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .gbrs-staff {
        --st-cols: 3;
        gap: 16px;
    }

    /* Una sola tarjeta (el entrenador principal) no se estira a media
       pantalla: se queda en su ancho de columna. */
    .gbrs-staff--cols-1 { --st-cols: 1; }
    .gbrs-staff--cols-2 { --st-cols: 2; }
}

@media (max-width: 600px) {
    .gbrs-staff {
        --st-cols: 2;
        gap: 12px;
    }

    .gbrs-staff--cols-1 { --st-cols: 1; }

    .gbrs-staff .gbrs-staff__body {
        padding: 12px 12px 14px;
    }

    .gbrs-staff .gbrs-staff__name {
        font-size: 0.98rem;
    }

    .gbrs-staff .gbrs-staff__role {
        font-size: 0.62rem;
        letter-spacing: 0.6px;
    }

    .gbrs-staff-title {
        font-size: 1.4rem;
    }
}