/* =====================================================================
   method.css — Secció "El nostre mètode, en quatre passos"
   Rèplica de la maqueta (.method / .steps / .step), amb els tokens del
   tema (--passa-*) en comptes de valors solts.
   ===================================================================== */

.passa-method {
  width: 100%;
  background: #fff;
  padding: 0;
  margin: 0 !important;          /* neutralitza --global-md-spacing Kadence */
}
.passa-method > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 90px 30px;
}

/* ---- Capçalera de secció ---- */
.passa-method .eyebrow {
  font-family: var(--passa-font-body);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--passa-purple);
  font-weight: 700;
  margin: 0 0 18px;
}
.passa-method .section-title {
  font-family: var(--passa-font-heading);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--passa-ink);
  margin: 0 0 14px;
}
/* Paraula destacada amb subratllat gruixut, com a la maqueta */
.passa-method .section-title em {
  font-style: normal;
  color: var(--passa-purple);
  border-bottom: 5px solid var(--passa-accent);
  padding-bottom: 2px;
}
.passa-method .section-lead {
  font-family: var(--passa-font-body);
  color: var(--passa-text-2);
  max-width: 62ch;
  margin: 0 0 30px;
}

/* ---- Graella de passos ---- */
.passa-method .wp-block-columns { gap: 24px; margin-bottom: 0; }

.passa-method .step {
  background: #fff;
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  padding: 30px;
  height: 100%;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.passa-method .step:hover {
  transform: translateY(-2px);
  border-color: var(--passa-purple);
  box-shadow: 0 6px 16px rgba(76, 27, 105, .06);
}
.passa-method .step > .wp-block-group__inner-container { padding: 0; margin: 0; }

.passa-method .step__num {
  font-family: var(--passa-font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--passa-purple);
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.passa-method .step__title {
  font-family: var(--passa-font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  color: var(--passa-ink);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.passa-method .step__text {
  font-family: var(--passa-font-body);
  font-size: 14.5px;
  color: var(--passa-text);
  line-height: 1.65;
  margin: 0;
}

/* ---- Aparició progressiva (la classe la posa method.js) ---- */
.passa-method.passa-reveal .step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.passa-method.passa-reveal.is-in .step { opacity: 1; transform: translateY(0); }
.passa-method.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(2) .step { transition-delay: .10s; }
.passa-method.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(3) .step { transition-delay: .20s; }
.passa-method.passa-reveal.is-in:not(.reveal-done) .wp-block-column:nth-child(4) .step { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .passa-method.passa-reveal .step { opacity: 1; transform: none; transition: none; }
  .passa-method .step:hover { transform: none; }
}

/* ====================================================================== */
/*  Responsive                                                            */
/* ====================================================================== */
@media (max-width: 1023px) {
  .passa-method > .wp-block-group__inner-container { padding: 70px 30px; }
  .passa-method .step { padding: 26px; }
}
/* ⚠️ WordPress apila els `wp-block-columns` a 781px: els quatre passos
   passaven de 4 columnes a 1 de cop, i la secció creixia de 635 a 932px just
   on hi ha més amplada per aprofitar. Amb dos per fila entre 480 i 781 queda
   equilibrat. */
@media (min-width: 481px) and (max-width: 781px) {
  .passa-method .wp-block-columns { flex-wrap: wrap !important; gap: 16px; }
  .passa-method .wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 8px) !important;
    flex-grow: 0;
  }
}
@media (max-width: 768px) {
  .passa-method > .wp-block-group__inner-container { padding: 50px 20px; }
  .passa-method .wp-block-columns { gap: 16px; }
  .passa-method .step { padding: 22px; }
  .passa-method .step__num { font-size: 30px; }
  .passa-method .step__title { font-size: 17px; }
}
@media (max-width: 480px) {
  .passa-method > .wp-block-group__inner-container { padding: 40px 16px; }
  .passa-method .step { padding: 20px; }
}

/* ----------------------------------------------------------------------
   Hover DESPRÉS de l'aparició (19/8/2026)

   La regla del reveal (.passa-method.passa-reveal.is-in .step) té 4 classes
   i guanya a .passa-method .step:hover (3): li imposava translateY(0) i
   matava l'aixecat. Es repeteix el hover amb la mateixa especificitat, i
   es torna a la transició curta perquè la del reveal (.6s) el feia lent.
   ---------------------------------------------------------------------- */
.passa-method.passa-reveal.is-in .step {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.passa-method.passa-reveal.is-in .step:hover {
  transform: translateY(-2px);
  border-color: var(--passa-purple);
  box-shadow: 0 6px 16px rgba(76, 27, 105, .06);
}
@media (prefers-reduced-motion: reduce) {
  .passa-method.passa-reveal.is-in .step: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-method.reveal-done .step { transition-delay: 0s; }