/* ============================================================
   PATROCINADORES — sección propia del tema hijo.
   Se encola detrás de ph-styles, así que hereda los tokens de :root
   (--bg, --bd, --orange, --disp…) definidos en el CSS del padre.
   ============================================================ */

.sponsors {
  background: var(--bg, #000);
  padding-block: 88px;
}

/* El título es opcional: por defecto la sección va solo con el antetítulo. El
   aire de debajo lo pone .sponsors__cols, así que la separación es la misma
   haya título o no. */
.sponsors__title {
  font-family: var(--disp, 'Bebas Neue', sans-serif);
  font-weight: 400;
  margin: 8px 0 0;
  font-size: 38px;
  letter-spacing: .5px;
  color: var(--white, #fff);
}

/* Tres columnas separadas por filete vertical. El separador es un elemento
   propio (como .stat-divider del padre) en vez de un border, para que en
   móvil baste con girarlo a horizontal sin tocar el orden del DOM. */
.sponsors__cols {
  display: flex;
  align-items: stretch;
  gap: 56px;
  margin-top: 44px;
}

/* --n = subcolumnas del grupo, lo calcula PHP a partir de cuántos logos tiene
   (1 hasta cuatro logos, 2 a partir de ahí). Es a la vez el reparto de ancho
   entre grupos y el número de columnas de la rejilla de dentro, así que un
   grupo con el doble de logos ocupa el doble de ancho, no el doble de alto. */
.sponsors__col {
  flex: var(--n, 1) 1 0;
  min-width: 0;
}

.sponsors__divider {
  flex: 0 0 1px;
  width: 1px;
  background: var(--bd, #2e2e2e);
}

.sponsors__group {
  margin: 0 0 28px;
  font-family: var(--sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2, #b3b3b3);
}

.sponsors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: 20px 32px;
  align-items: center;
  justify-items: start;
}

/* Cada logo ocupa una caja de alto fijo. Así el ritmo vertical es el mismo
   aunque una columna tenga dos logos y otra tres, y da igual que un logo sea
   cuadrado y el siguiente una tira horizontal. */
.sponsors__item {
  margin: 0;
  min-height: 84px;
  display: flex;
  align-items: center;
}

.sponsors__link {
  display: inline-block;
  transition: opacity .25s var(--ease, ease), transform .25s var(--ease, ease);
}

a.sponsors__link:hover,
a.sponsors__link:focus-visible {
  opacity: .72;
  transform: translateY(-2px);
}

a.sponsors__link:focus-visible {
  outline: 2px solid var(--orange, #f37801);
  outline-offset: 6px;
}

/* Silueta blanca pase lo que pase: los logos que ya vienen en blanco no
   cambian, y cualquier logo en color que se suba después sale igual.
   Requiere PNG/SVG con fondo transparente. */
/* El ancho de cada logo lo calcula PHP (`phc_logo()`) para que todos ocupen la
   misma cantidad de tinta, y llega en la variable --w. Aquí solo se escala por
   breakpoint con --sc. Los topes son el plan B para un logo sin dimensiones
   conocidas (p. ej. un SVG subido sin metadatos), que llega sin --w. */
.sponsors__link img {
  --sc: 1;
  display: block;
  width: calc(var(--w, 160px) * var(--sc));
  height: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (max-width: 1100px) {
  .sponsors__cols { gap: 36px; }
  .sponsors__item { min-height: 74px; }
  .sponsors__link img { --sc: .88; max-height: 64px; }
}

/* Mismo corte que el resto del tema: por debajo de 992px se apila y el
   filete vertical pasa a ser una línea horizontal de separación. */
@media (max-width: 992px) {
  .sponsors { padding-block: 64px; }
  .sponsors__cols { flex-direction: column; gap: 36px; }
  .sponsors__divider { flex: 0 0 1px; width: 100%; height: 1px; }
  /* En horizontal se pasa a rejilla, no a flex con wrap: `auto-fit` reparte las
     columnas que quepan y ningún logo puede sobresalir de su celda, sea cual
     sea el ancho del contenedor. */
  .sponsors__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 32px;
    align-items: center;
    justify-items: start;
  }
  .sponsors__item { min-height: 70px; }
  .sponsors__link { max-width: 100%; }
  .sponsors__link img { --sc: .82; max-height: 60px; }
}

@media (max-width: 640px) {
  .sponsors { padding-block: 48px; }
  .sponsors__title { font-size: 30px; }
  .sponsors__cols { margin-top: 32px; }
  /* Dos columnas fijas, no `auto-fit`: en pantalla de móvil una tercera columna
     deja los logos demasiado pequeños para leerlos. */
  .sponsors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .sponsors__item { min-height: 58px; }
  .sponsors__link img { --sc: .66; max-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sponsors__link { transition: none; }
  a.sponsors__link:hover, a.sponsors__link:focus-visible { transform: none; }
}