/* ==========================================================================
   Polis — Secció Clients
   Graella estàtica de logos (4 x 4 = 16 caixes) amb el mateix llenguatge
   visual i de hover que les targetes de "Què fem?" (.o-card-sm). Reutilitza
   .o-card-sm de style.css i hi afegeix només el dibuix del logo i la capa de
   text revelable. Tot està limitat a #clients per no afectar la resta.
   ========================================================================== */

/* Graella de 4 columnes (→ 2 a tauleta, → 1 a mòbil) */
#clients .container-clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-200);
  margin-top: var(--size-600);
}

/* Nom del client: overlay always visible a la part inferior de la caixa */
#clients .client-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--size-200) var(--size-300);
  font-family: var(--ff-secondary);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--clr-primary-400);
  transition: opacity 0.4s ease-in-out;
}

/* Amaga el nom quan apareix el client-reveal */
#clients .has-client-effect:hover .client-name {
  opacity: 0;
}

@media (max-width: 60em) {
  #clients .container-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 35em) {
  #clients .container-clients-grid {
    grid-template-columns: 1fr;
  }
}

/* Títol de categoria dins la graella: ocupa tota l'amplada i comença una fila
   nova. Així pots posar tants <h3> com vulguis entre les caixes, dins de la
   mateixa graella, sense haver d'obrir ni tancar cap <div>. */
#clients .container-clients-grid h3 {
  grid-column: 1 / -1;
  margin-top: var(--size-700);
}
#clients .container-clients-grid h3:first-child {
  margin-top: 0;
}

/* La caixa blanca dins la graella: mida pròpia i centratge del contingut.
   (style.css fixa width:300px i align-items:start a partir de 1375px; aquí
   ho retornem a 100% perquè ompli la cel·la de la graella.) */
#clients .container-clients-grid .o-card-sm {
  width: 100%;
  height: clamp(190px, 16vw, 230px);
  align-items: center;
  justify-content: center;
  padding: var(--size-500);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto clamp(190px, 16vw, 230px);
}

/* ==========================================================================
   Dibuix del logo amb el seu color original
   --------------------------------------------------------------------------
   Es pinta amb background-image perquè el logo (svg/png/webp amb fons
   transparent) es mostri tal com és, amb els seus colors originals.
   El camí del logo arriba per la variable --logo definida a l'HTML.
   ========================================================================== */
#clients .client-drawing {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 55%;
  background: var(--logo) center / contain no-repeat;
  transition: top 0.8s ease, opacity 0.5s ease;
  opacity: 1;
  pointer-events: none;
}

/* Logo de cada client real. El --logo es defineix aquí (i no a l'HTML) perquè
   el camí relatiu de la màscara es resol respecte d'aquest full d'estil
   (carpeta css/ → "../client-logos/..."), de manera fiable a tots els motors. */
#clients .is-acm .client-drawing     { --logo: url("../client-logos/acm.svg"); }
#clients .is-pimec .client-drawing   { --logo: url("../client-logos/pimec.png"); }
#clients .is-bbva-research .client-drawing    { --logo: url("../client-logos/bbva-research.svg"); }
#clients .is-observatori-social-lacaixa .client-drawing { --logo: url("../client-logos/observatori-social-lacaixa.webp"); }
#clients .is-universitat-de-lleida .client-drawing { --logo: url("../client-logos/universitat-de-lleida.png"); }
#clients .is-generalitat-de-catalunya .client-drawing { --logo: url("../client-logos/generalitat-de-catalunya.png"); }
#clients .is-icipp .client-drawing { --logo: url("../client-logos/icipp.webp"); }
#clients .is-olesa-de-montserrat .client-drawing { --logo: url("../client-logos/olesa-de-montserrat.png"); }
#clients .is-vilassar-de-dalt .client-drawing { --logo: url("../client-logos/vilassar-de-dalt.png"); }
#clients .is-santa-coloma-de-cervello .client-drawing { --logo: url("../client-logos/santa-coloma-de-cervello.svg"); }
#clients .is-el-masnou .client-drawing { --logo: url("../client-logos/el-masnou.png"); }
#clients .is-cerdanyola-del-valles .client-drawing { --logo: url("../client-logos/cerdanyola-del-valles.png"); }
#clients .is-tiana .client-drawing { --logo: url("../client-logos/tiana.png"); }
#clients .is-manresa .client-drawing { --logo: url("../client-logos/manresa.png"); }
#clients .is-solsona .client-drawing { --logo: url("../client-logos/solsona.png"); }
#clients .is-deltebre .client-drawing { --logo: url("../client-logos/deltebre.png"); }
#clients .is-roda-de-ter .client-drawing { --logo: url("../client-logos/roda-de-ter.png"); }



/* Dibuix per defecte de les caixes placeholder: un icona genèrica d'imatge */
#clients .is-placeholder .client-drawing {
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H3V5h18v14zM8.5 11l2.5 3 3.5-4.5L19 17H5l3.5-4.5z'/%3E%3C/svg%3E");
  width: 34%;
  height: 34%;
  opacity: 0.45;
}

/* ==========================================================================
   Caixa morada amb el símbol "+" a la cantonada superior dreta
   --------------------------------------------------------------------------
   Idèntica a la de "Què fem?" (.o-card-heading span): fons morat amb el "+"
   blanc. En hover inverteix els colors i el "+" gira 45° (es torna una ×).
   ========================================================================== */
#clients .has-client-effect .client-plus {
  position: absolute;
  top: var(--size-400);
  right: var(--size-400);
  z-index: 3;
  line-height: 1;
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-400);
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
  transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
  pointer-events: none;
}

#clients .has-client-effect .client-plus .fa-plus {
  font-size: var(--size-500);
  vertical-align: -4px;
  transition: transform 0.3s ease-in-out;
}

#clients .has-client-effect:hover .client-plus {
  color: var(--clr-primary-400);
  background-color: var(--clr-neutral-100);
}

#clients .has-client-effect:hover .client-plus .fa-plus {
  transform: rotate(45deg);
}

/* ==========================================================================
   Capa de text revelable (nom + descripció) — amagada per defecte
   ========================================================================== */
#clients .client-reveal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#clients .client-reveal h4 {
  font-family: var(--ff-secondary);
  font-size: var(--size-500);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--clr-neutral-100);
}

#clients .client-reveal p {
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: var(--fw-regular);
  color: var(--clr-neutral-100);
}

#clients .client-reveal a {
  color: var(--clr-neutral-100);
  text-decoration: underline;
  text-decoration-color: var(--clr-neutral-100);
  text-underline-offset: 2px;
}

/* ==========================================================================
   Hover — mateix comportament que .has-hover-card-effect de "Què fem?":
   la caixa es torna morada, el dibuix llisca avall i s'esvaeix, i apareix
   el text.
   ========================================================================== */
#clients .has-client-effect {
  position: relative;
  transition: background-color 0.5s ease-in-out;
  overflow: hidden;
  cursor: default;
}

#clients .has-client-effect:hover {
  background-color: var(--clr-primary-400);
}

#clients .has-client-effect:hover .client-drawing {
  top: 120%;
  opacity: 0;
}

#clients .has-client-effect:hover .client-reveal {
  opacity: 1;
  visibility: visible;
}

/* Les caixes placeholder no tenen text: en hover només canvien de color */
#clients .is-placeholder:hover .client-drawing {
  top: 50%;
  opacity: 0.45;
}

/* ==========================================================================
   Animació d'entrada en scroll (la gestiona js/clients-reveal.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}