/**
 * MENU CARDS
 *
 * Estilos reutilizables para bloques que actúan como "opciones de menú"
 * en distintas webs del proyecto (landing de Búsquedas, futura landing
 * de otra sección, etc.). Se aplica cuando el usuario tiene delante un
 * grupo de tarjetas grandes, cada una un enlace a una web hija — con
 * icono, título y descripción centrados.
 *
 * Iconografía: los iconos son SVG de Lucide Icons (no Bootstrap Icons),
 * porque Lucide permite controlar `stroke-width` desde CSS. Cada web
 * que use estas tarjetas debe:
 *   1. Cargar el CDN de Lucide en el `<head>`:
 *      `<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>`
 *   2. Al final del `<body>`, disparar el render:
 *      `<script>if (typeof lucide !== 'undefined') lucide.createIcons();</script>`
 *   3. Marcar cada icono con `<i data-lucide="nombre-del-icono">`.
 *
 * Estructura HTML esperada:
 *
 *   <div class="player-sections">
 *       <a href="destino.php" class="player-section-card">
 *           <div class="player-section-icon">
 *               <i data-lucide="nombre-del-icono"></i>
 *           </div>
 *           <h3 class="player-section-title">Título</h3>
 *           <p class="player-section-description">Descripción</p>
 *       </a>
 *       ...
 *   </div>
 *
 * Nota: los nombres de clase mantienen el prefijo `player-` por
 * compatibilidad con el markup ya existente en `search_list.php`,
 * aunque el bloque no está atado a jugadores — sirve para cualquier
 * tipo de menú de secciones.
 */

/* ─── Grid responsive de ANCHO FIJO ──────────────────────────────
   La rejilla siempre tiene el mismo número de columnas según la
   resolución, independientemente del número de tarjetas:
     · Pantalla grande     → 4 columnas.
     · Tablet (≤ 992px)    → 2 columnas.
     · Móvil (≤ 576px)     → 1 columna.
   Las tarjetas se colocan por orden en las casillas disponibles;
   si sobran casillas quedan vacías (no se estiran las tarjetas
   existentes). Con esto el ancho de una tarjeta es el mismo en
   todas las webs "lanzadera", tanto si la web tiene 1 sección
   como si tiene 5. */
.player-sections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .player-sections {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .player-sections {
        grid-template-columns: 1fr;
    }
}

/* ─── Tarjeta individual ──────────────────────────────────────────
   Fondo gris claro (mismo `#f8f9fa` que los resultados de las
   webs de búsqueda), borde suave gris `#e9ecef` (mismo que las
   rayas de la toolbar) y sombra permanente muy sutil para dar
   sensación de relieve. Al pasar el ratón por encima la tarjeta
   se eleva 5px y la sombra se refuerza. */
.player-section-card {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.player-section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ─── Icono (SVG de Lucide) ───────────────────────────────────────
   Se pinta en azul corporativo oscuro (`--primary-blue-hover` =
   `#164281`) — un pelín más oscuro que la "Z" del logo `sportinZer`.
   Los SVG de Lucide usan `stroke` (no `fill`); heredan el color de
   `currentColor` desde el contenedor. */
.player-section-icon {
    margin-bottom: 20px;
    color: var(--primary-blue-hover);
    line-height: 1;
}

.player-section-icon svg {
    width: 48px;
    height: 48px;
    /* Trazo más fino que el valor por defecto (2). Ajustable en
       cada web con un override local si se quiere más grueso o
       más fino. */
    stroke-width: 1.25;
}

/* Soporte alternativo para iconos de Bootstrap Icons (`<i class="bi bi-*">`),
   que se usan en las webs cuyos iconos vienen dados desde base de datos
   (ej. `chat_rooms.php`). Se pinta al mismo tamaño que un SVG de Lucide
   para que la altura de la tarjeta no baile entre webs. */
.player-section-icon i {
    font-size: 48px;
    line-height: 1;
    display: inline-block;
}

/* ─── Título ──────────────────────────────────────────────────────
   Mismo azul oscuro que el icono, tamaño 1.5rem para que destaque
   sobre la descripción. */
.player-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-blue-hover);
    margin-bottom: 15px;
}

/* ─── Descripción ─────────────────────────────────────────────────
   Texto secundario, gris estándar, tamaño reducido. */
.player-section-description {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}