/* =====================================================================
   logos.css — secció "Entitats col·laboradores"
   (20/8/2026 · carrusel automàtic)

   ⚠️ EL TÍTOL NO ES TOCA AQUÍ.
   Fa servir .eyebrow — el mateix antetítol que "Metodologia" i la resta
   de seccions, definit a base.css. Aquí només se n'ajusta l'espai de sota.
   Si algun dia cal canviar-ne l'estil, es canvia a base.css i canvia a
   totes les seccions alhora, que és justament el que volem.

   CARRUSEL: s'activa o es desactiva des de l'editor, a la barra lateral
   → Estils → "Carrusel automàtic" / "Fila estàtica". Això posa (o treu) la
   classe .is-style-passa-carrusel, que és el que mira aquest full i logos.js.
   Ningú ha de tocar codi per aturar-lo.

   El bucle sense salt necessita la tira duplicada; ho fa logos.js clonant les
   figures al navegador, així el CONTINGUT que edita l'Andrea segueix tenint
   només els 5 logos de veritat.
   Sense JS o amb "reduir moviment": graella centrada i quieta. Es veu igual de bé.
   ===================================================================== */

.passa-logos {
  width: 100%;
  /* Tint lila suau: alterna amb "Cursos oberts" (blanc) i "Metodologia" (blanc). */
  background: var(--passa-bg-soft);
  padding: 0;
  margin: 0 !important;
}
.passa-logos > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 80px 30px;
}
.passa-logos .eyebrow { margin-bottom: 34px; }

/* ---- Repòs (sense JS): graella centrada ---- */
.passa-logos .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: 0;
}

/* ---- Cada logo ---- */
.passa-logos figure.wp-block-image {
  margin: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
}
.passa-logos figure.wp-block-image img {
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 92px !important;
  display: block;
}

/* =====================================================================
   Mode carrusel — cal les DUES coses:
     · .is-style-passa-carrusel → l'ha triat una persona des de l'editor
     · .is-marquee              → logos.js ja ha clonat la tira
   Si logos.js no s'executa, mai s'arriba a moure i queda la fila estàtica.
   ===================================================================== */

/* La finestra per on es veu passar la cinta. La crea el JS. */
.passa-logos-viewport {
  overflow: hidden;
  /* Esvaïts als extrems: els logos apareixen i desapareixen suaument
     en comptes de tallar-se en sec contra la vora. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  animation: passaMarquee var(--passa-marquee-time, 30s) linear infinite;
}
/* La tira està duplicada: recórrer la meitat i tornar a 0 és invisible. */
@keyframes passaMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* En passar-hi el ratolí s'atura, per poder mirar-los bé. */
.passa-logos-viewport:hover .wp-block-gallery.is-style-passa-carrusel.is-marquee { animation-play-state: paused; }

.passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
  flex: 0 0 auto !important;
  width: clamp(190px, 21vw, 260px) !important;
  height: 116px;
  padding: 0 30px;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee { animation: none; }
}

/* ====================================================================== */
@media (max-width: 1023px) {
  .passa-logos > .wp-block-group__inner-container { padding: 64px 30px; }
  .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
    width: clamp(160px, 27vw, 210px) !important; height: 100px; padding: 0 22px;
  }
  .passa-logos figure.wp-block-image img { max-height: 78px !important; }
}
@media (max-width: 768px) {
  .passa-logos > .wp-block-group__inner-container { padding: 48px 20px; }
  .passa-logos .wp-block-gallery { gap: 32px; }
  .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
    width: clamp(140px, 44vw, 180px) !important; height: 88px; padding: 0 16px;
  }
  .passa-logos figure.wp-block-image img { max-height: 66px !important; }
}

/* ======================================================================
   1/10 (Andrea/Eric): logos un 50 % més grans a tots els amples.
   Alçada fixa i `contain`: els quadrats creixen sencers i els apaïsats
   creixen fins a omplir l'ample de la seva cel·la.
   ====================================================================== */
.passa-logos figure.wp-block-image img { height: 138px !important; max-height: 138px !important; }
.passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
  width: clamp(285px, 31vw, 390px) !important; height: 174px; padding: 0 40px;
}
@media (max-width: 1023px) {
  .passa-logos figure.wp-block-image img { height: 117px !important; max-height: 117px !important; }
  .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
    width: clamp(240px, 40vw, 315px) !important; height: 150px; padding: 0 30px;
  }
}
@media (max-width: 768px) {
  .passa-logos figure.wp-block-image img { height: 99px !important; max-height: 99px !important; }
  .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image {
    width: clamp(210px, 62vw, 270px) !important; height: 132px; padding: 0 22px;
  }
}
/* Cada cel·la fa l'ample del seu logo: separació igual entre tots (amb cel·la fixa, els quadrats quedaven molt lluny). */
.passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image { width: auto !important; padding: 0 36px; }
.passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image img { max-width: 320px !important; }
@media (max-width: 1023px) { .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image { width: auto !important; padding: 0 28px; } .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image img { max-width: 270px !important; } }
@media (max-width: 768px) { .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image { width: auto !important; padding: 0 20px; } .passa-logos .wp-block-gallery.is-style-passa-carrusel.is-marquee figure.wp-block-image img { max-width: 230px !important; } }