/**
 * Atletas 2026 — tarjetas de atletas compartidas por «Nuestros atletas» (inicio) y «Atletas MPS» (Nosotros).
 * 2.1 (Francisco, 24-10-26): antes vivían en home-2026.css y Nosotros no las cargaba; ahora hay una sola
 * copia y la pinta Home2026\tarjetas_atletas() (includes/home-2026.php). El inicio carga este archivo
 * DESPUÉS de home-2026.css; Nosotros, antes de nosotros-2026.css.
 *
 * Contenedores: .mpsh-atletas .mpsh-grid3 (inicio) y .mpsn-atletas-grid (Nosotros). Misma rejilla de 3
 * columnas en escritorio, una columna entre 901 y 980px y carrusel con snap en celular (<= 900px).
 */

/* ---- Atletas ---- */

.mpsh-atletas { padding: 112px max(56px, calc(50% - 664px)); display: flex; flex-direction: column; gap: 44px; }
.mpsh-atleta { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: #0B0B0B; height: 460px; }
.mpsh-atleta-foto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: top; opacity: 0.92; transition: transform .45s ease; filter: grayscale(1) contrast(1.18); } /* 2.1 (Francisco, 23-10-26): todos los atletas en escala de grises con contraste, parejos */
.mpsh-atleta:hover .mpsh-atleta-foto { transform: scale(1.05); }
.mpsh-atleta-sombra { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 42%, rgba(11,11,11,0.92) 100%); }
.mpsh-atleta figcaption { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #FFFFFF; display: flex; flex-direction: column; gap: 8px; }
.mpsh-atleta blockquote { margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.55; color: #FFFFFF; font-style: normal; }
.mpsh-atleta figcaption b { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: -0.01em; margin-top: 4px; }
.mpsh-atleta figcaption i { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #C73D2C; }

/* Rejilla de Nosotros (la del inicio es .mpsh-grid3 de home-2026.css). gap explícito: el tema viejo
   (Automatic.css) le pone gap a todo <div> hijo directo de <section>. */
.mpsn-atletas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 980px) { .mpsn-atletas-grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
	.mpsh-atleta-foto { transition: none; }
	.mpsh-atleta:hover .mpsh-atleta-foto { transform: none; }
}

/* ---- Móvil (<= 900px): carrusel con snap, igual que el inicio ---- */
@media (max-width: 900px) {
	.mpsh-atletas .mpsh-grid3, .mpsn-atletas-grid {
		display: flex; flex-direction: row; align-items: stretch; gap: 12px;
		/* 18px = gutter del título: la primera tarjeta arranca alineada con él. */
		overflow-x: auto; padding: 0 18px 6px; scroll-padding-left: 18px; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; box-sizing: border-box;
		/* position: un absoluto dentro de un carrusel solo se recorta si su bloque contenedor está adentro. */
		position: relative;
	}
	.mpsh-atletas .mpsh-grid3::-webkit-scrollbar, .mpsn-atletas-grid::-webkit-scrollbar { display: none; }
	.mpsh-atletas { padding: 72px 0; gap: 24px; }
	.mpsh-atletas > .mpsh-sec-head { padding: 0 18px; box-sizing: border-box; }
	.mpsh-atleta { flex: none; width: 280px; height: 380px; scroll-snap-align: start; }
	.mpsh-atleta figcaption { left: 16px; right: 16px; bottom: 16px; gap: 6px; }
	.mpsh-atleta blockquote { font-size: 13.5px; line-height: 1.5; }
	.mpsh-atleta figcaption b { font-size: 14px; }
}

/* 2.1 (Francisco, 24-10-26): con 10 atletas, en computadora van 5 por fila (2 filas completas) para que
   ninguna tarjeta quede sola al final; entre 901 y 1100 px, 2 por fila. En celular sigue el carrusel. */
@media (min-width: 1101px) {
	.mpsh-atletas .mpsh-grid3, .mpsn-atletas-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	.mpsh-atletas .mpsh-grid3, .mpsn-atletas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}