/* =====================================================================
   stats.css — Secció Stats (4 cards) de les pàgines de línia
   BRIEF-014 T5 (30/5/2026)

   Reprodueix la maqueta `_maqueta/Passarel·la_web_corporatiu.html` línies
   116-124 + HTML 400-407.

   Estructura HTML esperada (bloc Gutenberg):
     <div class="passa-stats">
       <div class="wp-block-columns">
         <div class="wp-block-column">
           <div class="stat-card">
             <p class="lab">Anys d'experiència</p>
             <h3 class="num">23</h3>
             <p class="delta">Des del 2003</p>
           </div>
         </div>
         ... 3 columnes més
       </div>
     </div>
   ===================================================================== */

.passa-stats {
  width: 100%;
  background: var(--passa-bg-soft);    /* lila molt suau #F7F5FA */
  padding: 0;
  margin: 0 !important;                /* neutralitza --global-md-spacing de Kadence */
}

.passa-stats > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 60px 30px;
}

/* Neutralizar margins de grupos anidados dins dels stat-card (Kadence) */
.passa-stats .stat-card,
.passa-stats .wp-block-column .wp-block-group {
  margin: 0 !important;
}

.passa-stats .wp-block-columns {
  gap: 14px;
  margin-bottom: 0;
}
.passa-stats .wp-block-columns .wp-block-column {
  flex-basis: 25% !important;
}

/* ---- Card individual ---- */
.passa-stats .stat-card {
  background: #fff;
  padding: 24px;
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  /* Hover de la maqueta: aixecat subtil + vora morada + ombra suau. */
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.passa-stats .stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--passa-purple);
  box-shadow: 0 6px 16px rgba(76, 27, 105, .06);
}
/* Qui tingui les animacions desactivades per accessibilitat manté el canvi
   de vora però no el moviment. */
@media (prefers-reduced-motion: reduce) {
  .passa-stats .stat-card { transition: border-color .2s ease; }
  .passa-stats .stat-card:hover { transform: none; }
}
/* Reset del inner-container que Gutenberg afegeix dins de wp:group */
.passa-stats .stat-card > .wp-block-group__inner-container {
  padding: 0;
  margin: 0;
}

/* ---- Etiqueta superior ---- */
.passa-stats .stat-card .lab {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--passa-text-2);
  margin: 0 0 14px;
}

/* ---- Número gran ---- */
.passa-stats .stat-card .num {
  font-family: var(--passa-font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--passa-purple);
  margin: 0 0 8px;
  transition: color .2s ease;
}
.passa-stats .stat-card:hover .num { color: var(--passa-purple-dark); }

/* ---- Delta amb bullet accent ---- */
.passa-stats .stat-card .delta {
  font-size: 12px;
  font-weight: 500;
  color: var(--passa-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.passa-stats .stat-card .delta::before {
  /* Bullet rodó dibuixat amb CSS pur (no glifo Unicode) per a renderitzar
     igual a tots els navegadors. Abans `content: "●"` mostrava un tofu
     amb Inter perquè la font no inclou aquest glifo. */
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--passa-accent);     /* mostassa Seguretat, lila Educació, verd Sanitat */
  flex: 0 0 auto;
}

/* ====================================================================== */
/*  Responsive · Tablet (≤ 1023px)                                        */
/* ====================================================================== */

@media (max-width: 1023px) {
  .passa-stats > .wp-block-group__inner-container { padding: 50px 24px; }
  .passa-stats .wp-block-columns { gap: 12px; }
  .passa-stats .wp-block-columns .wp-block-column { flex-basis: 50% !important; }
  .passa-stats .stat-card { padding: 22px; }
  .passa-stats .stat-card .num { font-size: 42px; }
}

/* ====================================================================== */
/*  Responsive · Mòbil (≤ 768px)                                          */
/* ====================================================================== */

@media (max-width: 768px) {
  .passa-stats > .wp-block-group__inner-container { padding: 40px 20px; }
  .passa-stats .wp-block-columns { gap: 10px; }
  /* Mantenim 2-col en mòbil per estètica (números encara visibles) */
  .passa-stats .wp-block-columns .wp-block-column { flex-basis: calc(50% - 5px) !important; }
  .passa-stats .stat-card { padding: 18px; }
  .passa-stats .stat-card .num { font-size: 36px; }
  .passa-stats .stat-card .lab { font-size: 10.5px; margin-bottom: 10px; }
  .passa-stats .stat-card .delta { font-size: 11.5px; }
}

/* ====================================================================== */
/*  Responsive · Mòbil petit (≤ 480px)                                    */
/* ====================================================================== */

@media (max-width: 480px) {
  /* Sota 480px sí passem a 1 columna — números amb tota l'amplada */
  .passa-stats .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
  .passa-stats .stat-card .num { font-size: 40px; }
}

/* ======================================================================
   Aparició progressiva (19/8/2026)

   IMPORTANT: la classe .passa-reveal la posa stats.js, no ve al HTML.
   Així, si el JS falla o està desactivat, la secció es veu sempre. Mai
   s'amaga contingut per CSS "a l'espera" que arribi un script.
   ====================================================================== */
.passa-stats.passa-reveal .stat-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.passa-stats.passa-reveal.is-in .stat-card { opacity: 1; transform: translateY(0); }
/* Escalonat: cada targeta entra una mica després que l'anterior */
.passa-stats.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(2) .stat-card { transition-delay: .10s; }
.passa-stats.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(3) .stat-card { transition-delay: .20s; }
.passa-stats.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(4) .stat-card { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .passa-stats.passa-reveal .stat-card { opacity: 1; transform: none; transition: none; }
}

/* Mateix cas que a method.css: el reveal (4 classes) anul·lava el hover (3). */
.passa-stats.passa-reveal.is-in .stat-card {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.passa-stats.passa-reveal.is-in .stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--passa-purple);
  box-shadow: 0 6px 16px rgba(76, 27, 105, .06);
}
.passa-stats.passa-reveal.is-in .stat-card:hover .num { color: var(--passa-purple-dark); }
@media (prefers-reduced-motion: reduce) {
  .passa-stats.passa-reveal.is-in .stat-card:hover { transform: none; }
}

/* L'escalonat d'entrada deixa de comptar quan l'aparició ha acabat: si no,
   la 4a targeta arrossega .3s de retard i el hover sembla que vagi lent.
   La classe .reveal-done la posa stats.js en acabar. */
.passa-stats.reveal-done .stat-card { transition-delay: 0s; }