/* Travel · SOCCER iD Travel Club
   Sólo lo PROPIO de esta sección. Lo compartido —fichas de color, menú,
   portada, cifras, hitos, pilares, mosaico, aliados, prensa, eventos,
   contacto, carrusel, video, pie— vive en v2.css, que se carga antes.
   La carga el layout a partir de `hojaSeccion` (ver views/layouts/v2.hbs). */

/* ─── Travel: partidos y experiencias ─────────────────────────────── */
.partidos { display: flex; flex-direction: column; gap: 10px; }
.partido {
  display: grid; grid-template-columns: 84px 1fr auto auto; align-items: center; gap: 24px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px 18px 16px 16px;
}
.partido__fecha { background: rgba(255,255,255,.08); border: 1px solid var(--vidrio-borde); color: var(--tinta); border-radius: var(--radio-sm); text-align: center; padding: 10px 0; }
.partido__dia { font-size: 28px; font-weight: 900; line-height: 1; }
.partido__mes { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--acento-chico); margin-top: 4px; }
.partido__equipos { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; }
.partido__escudo { width: 34px; height: 34px; object-fit: contain; }
.partido__vs { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.partido__meta { font-size: 14px; color: var(--tinta-2); margin-top: 4px; }
.partido__torneo { text-align: right; font-size: 13px; color: var(--tinta-2); }
.partido__torneo b { display: block; color: var(--tinta); font-size: 14px; }

.travel__todos { margin-top: 18px; }
/* El nombre del viaje lleva a su ficha, igual que el botón. */
a.evento__nombre:hover { color: var(--acento-chico); }

.experiencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.experiencia { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.experiencia__foto { aspect-ratio: 16 / 8; background: var(--linea) center / cover no-repeat; }
.experiencia__cuerpo { padding: 22px 24px 26px; }
.experiencia__cuerpo h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 8px; }
.experiencia__cuerpo p { font-size: 15px; color: var(--tinta-2); }

@media (max-width: 900px) {
  .partido { grid-template-columns: 64px 1fr; gap: 14px; }
  .partido__torneo, .partido .boton { grid-column: 2; text-align: left; justify-self: start; }
  .partido__equipos { font-size: 16px; flex-wrap: wrap; }
  .experiencias { grid-template-columns: 1fr; }
}

/* Los textos que vienen de los JSON traen text-align: justify en línea. En
   columnas angostas abre huecos entre palabras; aquí se alinean a la izquierda. */
.experiencia__cuerpo p { text-align: left !important; }

/* ─── Ficha de partido ────────────────────────────────────────────── */
.duelo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: clamp(30px, 4.6vw, 60px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.duelo__equipo { display: inline-flex; align-items: center; gap: 14px; }
.duelo__equipo img { width: clamp(40px, 5vw, 68px); height: clamp(40px, 5vw, 68px); object-fit: contain; }
.duelo__vs { font-size: .42em; font-weight: 700; color: var(--tinta-2); }
a.partido__equipos:hover { color: var(--acento-chico); }

/* Tabletas y plegables: las tres experiencias en una fila desde 700 px;
   antes quedaban 2 + 1. */
@media (min-width: 700px) and (max-width: 1100px) {
  .experiencias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}