/* =====================================================================
   CARRUSEL DE LOGOS IFEP · Estils
   Ubicació: /wp-content/themes/TemaIFEP/styles-home-logos.css
   Es carrega des de functions.php del tema (wp_enqueue_style).
   Ajustos ràpids (variables de .ifep-logos):
   --ifep-logo-w / --ifep-logo-h   caixa de cada logo
   --ifep-canvas-scale             mida dels logos amb llenç 2:1 (is-canvas)
   --ifep-logo-gap                 separació entre logos
   ===================================================================== */

.ifep-logos{
  --ifep-logo-w: 175px;
  --ifep-logo-h: 70px;
  --ifep-canvas-scale: 1.3;
  --ifep-logo-gap: 48px;
  --ifep-row-gap: 28px;
  --ifep-fade: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--ifep-row-gap);
  width: 100%;
  padding: 8px 0;
  line-height: 1;
}
.ifep-logos .ifep-logos__row{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ifep-fade), #000 calc(100% - var(--ifep-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--ifep-fade), #000 calc(100% - var(--ifep-fade)), transparent 100%);
}
.ifep-logos ul.ifep-logos__track{
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  will-change: transform;
  animation: ifep-logos-left var(--ifep-duration, 120s) linear infinite;
}
.ifep-logos .ifep-logos__row[data-direction="right"] ul.ifep-logos__track{
  animation-name: ifep-logos-right;
}
.ifep-logos ul.ifep-logos__track > li{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ifep-logo-w);
  height: var(--ifep-logo-h);
  margin: 0 calc(var(--ifep-logo-gap) / 2) !important;
  padding: 0 !important;
  list-style: none !important;
  line-height: 1 !important;
}
.ifep-logos ul.ifep-logos__track > li::before{ display: none !important; }
.ifep-logos ul.ifep-logos__track > li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0 !important;
  border-radius: 6px;
  box-shadow: none !important;
}
.ifep-logos ul.ifep-logos__track > li > a:focus-visible{
  outline: 2px solid #1a3d8f;
  outline-offset: 4px;
}
.ifep-logos ul.ifep-logos__track img{
  display: block;
  width: auto !important;
  height: auto;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
}
/* Logos dins d'un llenç 2:1: caixa més gran perquè el logo
   es vegi sencer (sense retallar) i amb una mida equilibrada */
.ifep-logos ul.ifep-logos__track > li.is-canvas{
  width: calc(var(--ifep-logo-h) * var(--ifep-canvas-scale) * 2);
  height: calc(var(--ifep-logo-h) * var(--ifep-canvas-scale));
}
/* Pausa en passar-hi el ratolí o amb el focus del teclat */
.ifep-logos:hover ul.ifep-logos__track,
.ifep-logos:focus-within ul.ifep-logos__track{
  animation-play-state: paused;
}
@keyframes ifep-logos-left{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@keyframes ifep-logos-right{
  from{ transform: translate3d(-50%,0,0); }
  to  { transform: translate3d(0,0,0); }
}
/* Tauleta */
@media (max-width: 980px){
  .ifep-logos{ --ifep-logo-w: 120px; --ifep-logo-h: 48px; --ifep-logo-gap: 36px; --ifep-row-gap: 22px; --ifep-fade: 56px; }
}
/* Mòbil */
@media (max-width: 600px){
  .ifep-logos{ --ifep-logo-w: 96px; --ifep-logo-h: 40px; --ifep-logo-gap: 24px; --ifep-row-gap: 16px; --ifep-fade: 32px; }
}
/* Moviment reduït: logos estàtics i centrats */
@media (prefers-reduced-motion: reduce){
  .ifep-logos .ifep-logos__row{ -webkit-mask-image: none; mask-image: none; }
  .ifep-logos ul.ifep-logos__track{
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
  }
  .ifep-logos ul.ifep-logos__track > li[aria-hidden="true"]{ display: none; }
}