/* =====================================================================
   courses.css — Secció "Cursos oberts" de les pàgines de línia
   BRIEF-014 T6 (30/5/2026)

   Reprodueix la maqueta `_maqueta/Passarella_web_corporatiu.html` línies
   135-150 + 290-294 (filter chips).
   ===================================================================== */

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

/* ---- Filter chips (botons per categoria) ---- */
.passa-courses-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.passa-courses-filters .chip {
  font-family: var(--passa-font-body);
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--passa-line);
  color: var(--passa-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .04em;
  border-radius: var(--passa-radius);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.passa-courses-filters .chip:hover {
  border-color: var(--passa-purple);
  color: var(--passa-purple);
}
.passa-courses-filters .chip.is-active {
  background: var(--passa-purple-soft);
  color: #fff;
  border-color: var(--passa-purple);
}

/* ---- Grid de cards ---- */
.passa-courses-grid {
  /* Pista del carrusel: scroll horitzontal amb snap natiu (sense llibreries).
     El padding vertical evita que el hover (translateY) i l'ombra es tallin,
     perquè overflow-x:auto força overflow-y:auto i retallaria. */
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* "proximity" i no "mandatory": mandatory lluita contra el gest tàctil i,
     si l'última targeta no arriba a alinear-se a l'inici, el navegador la
     torna enrere — és el salt que es veu a tauleta i mòbil. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  padding: 8px 2px 12px;
  margin: -8px -2px -12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.passa-courses-grid::-webkit-scrollbar { display: none; }
.passa-courses-grid:focus-visible { outline: 2px solid var(--passa-accent, #e6a528); outline-offset: 4px; }

/* 3 targetes visibles a escriptori; amplada fixa perquè cap quedi tallada */
.passa-courses-grid > .course {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

/* ---- Contenidor + fletxes ---- */
.passa-carousel { position: relative; }
.passa-courses > .wp-block-group__inner-container { overflow-x: clip; }
.passa-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(76, 27, 105, .12);
  background: #fff;
  color: #4c1b69;
  box-shadow: 0 6px 20px rgba(23, 12, 34, .16);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.passa-carousel__nav svg { width: 20px; height: 20px; }
.passa-carousel__nav.is-prev { left: -18px; }
.passa-carousel__nav.is-next { right: -18px; }
.passa-carousel__nav:hover { background: #4c1b69; color: #fff; }
.passa-carousel__nav:focus-visible { outline: 2px solid #e6a528; outline-offset: 3px; }
.passa-carousel__nav[hidden] { display: none; }
.passa-carousel__nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
.passa-carousel__nav:disabled:hover { background: #fff; color: #4c1b69; }

@media (prefers-reduced-motion: reduce) {
  .passa-courses-grid { scroll-behavior: auto; }
}

.course.is-hidden { display: none; }

/* ---- Card ---- */
.course {
  /* Fons lila ultra suau (--passa-bg-card). Es fa servir la variable perquè
     tornar a blanc sigui canviar UN valor a variables.css. */
  background: var(--passa-bg-card);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  overflow: hidden;
  transition: transform .25s ease, border-color .15s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.course:hover {
  transform: translateY(-4px);
  border-color: var(--passa-purple);
  box-shadow: 0 16px 36px rgba(76, 27, 105, .10);
  /* El fons no canviava, però amb l'ombra al voltant l'ull llegeix la targeta
     més clara del que és (contrast simultani). Es tenyeix un pas per compensar
     i que la targeta elevada es vegi del mateix to que les del costat. */
  background: var(--passa-bg-card-hover);
}
.course__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ---- Imatge tile (SVG amb gradient) ---- */
.course__image {
  aspect-ratio: 5/3;
  background: var(--passa-purple-bg);
  position: relative;
  overflow: hidden;
}
.course__image svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .6s ease;
}
/* 1/10 (Andrea): sense zoom a la foto en passar-hi el ratolí. */
/* Imatge real del producte (mateix comportament que el tile SVG) */
.course__image img,
.course__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
/* 1/10 (Andrea): sense zoom a la foto en passar-hi el ratolí. */

/* ---- Badge groc/accent ---- */
.course__tag {
  background: var(--passa-accent);
  color: var(--passa-purple-dark);
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 11px;
  border-radius: var(--passa-radius);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Body de la card ---- */
.course__body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Un únic separador per a tots els elements. Es neutralitzen els marges de
     cada fill perquè el <p> i el <h3> hereten marges del tema i del navegador
     que no controlem des d'aquí: així l'espaiat és exactament aquest i prou. */
}
/* Kadence dona als <p> un margin-bottom de --global-sm-spacing (24px) i als
   títols un margin-top de --global-md-spacing (32px). Sumats deixaven 56px
   entre les etiquetes i el títol. Aquí s'anul·len tots, també en la forma
   lògica (margin-block), i l'espaiat el governa només el `gap` del contenidor. */
/* ---- Espaiat jeràrquic (24/8) ----
   No tot separat igual: l'espai també comunica. El que forma grup va junt
   (proximitat) i el salt gran marca on comença un grup nou.
     · classificació (oposició + etiquetes) ..... 10px entre elles
     · salt cap al títol ........................ 26px  ← el més gran
     · títol + seu/durada ....................... 10px (la meta pertany al títol)
     · salt cap a les burbujes .................. 18px
   Suma = 64px, el mateix aire total que tenia el separador uniforme de 16px,
   però repartit segons què agrupa amb què.
     · preu ..................................... a baix, amb vora + 16px
   Els !important calen: Kadence posa marges a <p> i <h3> amb selectors que
   guanyen per especificitat a qualsevol reset normal. */
.course__body > * { margin: 0 !important; }
.course__body > .course__badges { margin-top: 10px !important; }
.course__body > .course__head   { margin-top: 26px !important; }
.course__body > .course__chips  { margin-top: 18px !important; }
/* El preu, sempre a baix: així totes les targetes l'alineen a la mateixa
   alçada encara que tinguin diferent nombre de burbujes.
   ⚠️ `margin-top:auto` val 0 quan NO sobra espai (la targeta més alta), i
   llavors la vora del preu quedava enganxada a les burbujes. El marge inferior
   de les burbujes garanteix la separació mínima passi el que passi. */
.course__body > .course__price  { margin-top: auto !important; }
.course__body > .course__chips  { margin-bottom: 22px !important; }
/* El preu ha de continuar enganxat a baix perquè totes les targetes tinguin
   el preu a la mateixa alçada. Va després del reset per tornar-li l'auto. */
.course__body > .course__price { margin-top: auto !important; }
/* Títol + seu com un sol bloc. L'alçada mínima cobreix el pitjor cas (títol de
   dues línies + seu de dues línies) i, com que el sobrant queda a sota del
   parell, la seu sempre va enganxada al títol i les burbujes de totes les
   targetes arrenquen igual. */
.course__head {
  /* 86px = el bloc més alt del catàleg (81px: títol d'una línia + seu de dues)
     amb un marge de 5px per si algun títol creix. Abans hi havia 109px, que
     deixava 28px morts i empenyia les burbujes massa avall. */
  min-height: 86px;
}
.course__head .course__title { margin: 0 0 8px !important; }
.course__head .course__meta  { margin: 0 !important; }

.course__title {
  font-family: var(--passa-font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--passa-ink);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.course__meta {
  font-size: 13px;
  color: var(--passa-text-2);
}
.course__meta span {
  margin-right: 14px;
}

/* ---- Preu + fletxa ---- */
.course__price {
  padding-top: 16px;
  border-top: 1px solid var(--passa-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.course__price small {
  color: var(--passa-text-2);
  font-weight: 400;
  font-size: 12px;
  margin-right: 4px;
}
/* ---- Preu ----
   El preu ACTUAL és el que ha de manar. Abans el barrat sortia a 17px (heretats
   del contenidor) i l'actual a 15px: la jerarquia estava invertida. */
.course__price b {
  font-weight: 700;
  color: var(--passa-ink);
  /* 18px: per sobre del barrat (13px) i de la meta, però per SOTA del títol
     (22px). El preu ha de pesar, no competir amb el nom del curs. */
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* Grup preu actual + barrat + estalvi */
.course__price-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
/* Preu anterior: referència, no protagonista. */
.course__price-group s {
  font-size: 13px;
  font-weight: 400;
  color: var(--passa-text-2);
  text-decoration-thickness: 1px;
}
/* Estalvi en euros. Verd de "guany", l'únic color no corporatiu de la targeta:
   és deliberat, ha de destacar sobre el morat i el groc de marca. */
.course__save {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #1B5E20;
  background: #E3F4E5;
  border-radius: var(--passa-radius);
  padding: 4px 8px;
  white-space: nowrap;
}
.course__save .woocommerce-Price-amount { font-weight: 700; }
.course__arrow {
  color: var(--passa-purple);
  font-size: 18px;
  font-weight: 600;
  padding-left: 14px;
  border-left: 1px solid var(--passa-line);
  transition: transform .15s ease, color .15s ease;
}
.course:hover .course__arrow {
  color: var(--passa-accent);
  transform: translateX(2px);
}

/* ---- Empty state (línia sense cursos) ---- */
.passa-courses-empty {
  font-family: var(--passa-font-body);
  color: var(--passa-text-2);
  font-size: 16px;
  padding: 60px 0;
  text-align: center;
}

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

@media (max-width: 1023px) {
  .passa-courses > .wp-block-group__inner-container { padding: 70px 30px; }
  /* Carrusel: 2 targetes visibles */
  .passa-courses-grid { gap: 20px; }
  .passa-courses-grid > .course { flex-basis: calc((100% - 20px) / 2); }
  /* Tauleta: fora fletxes (tàctil). A -8px quedaven damunt de les targetes. */
  .passa-carousel__nav { display: none; }
  /* Filtres: una mica més compactes */
  .passa-courses-filters { gap: 6px; margin-bottom: 28px; }
  .passa-courses-filters .chip { padding: 8px 14px; font-size: 12.5px; }
}

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

@media (max-width: 768px) {
  .passa-courses > .wp-block-group__inner-container { padding: 50px 20px; }
  /* Carrusel: 1 targeta + peek de la següent */
  .passa-courses-grid { gap: 16px; }
  .passa-courses-grid > .course { flex-basis: 86%; }
  .passa-carousel__nav { display: none; }
  /* Filtres: scroll horitzontal si no caben */
  .passa-courses-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 24px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .passa-courses-filters .chip {
    flex-shrink: 0;
    padding: 8px 13px;
    font-size: 12px;
  }
  /* Cards més petites */
  .course__body { padding: 20px; }
  /* Títol + seu com un sol bloc. L'alçada mínima cobreix el pitjor cas (títol de
   dues línies + seu de dues línies) i, com que el sobrant queda a sota del
   parell, la seu sempre va enganxada al títol i les burbujes de totes les
   targetes arrenquen igual. */
.course__head {
  /* 86px = el bloc més alt del catàleg (81px: títol d'una línia + seu de dues)
     amb un marge de 5px per si algun títol creix. Abans hi havia 109px, que
     deixava 28px morts i empenyia les burbujes massa avall. */
  min-height: 86px;
}
.course__head .course__title { margin: 0 0 8px !important; }
.course__head .course__meta  { margin: 0 !important; }

.course__title { font-size: 19px; }
  .course__price b { font-size: 17px; }
}

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

@media (max-width: 480px) {
  /* Al mòbil les burbujes s'apilaven fins a 4 files (116px): la de la
     instal·lació és llarga i s'emporta una fila sencera. Es mostren només les
     3 primeres —van ordenades de més a menys distintiva— i s'ajusten una mica.
     La informació completa continua a la fitxa del curs. */
  .course__chips span:nth-child(n+4) { display: none; }
  .course__chips span { font-size: 10.5px; padding: 4px 8px; }
  .course__chips { gap: 7px 5px; }

  .passa-courses > .wp-block-group__inner-container { padding: 40px 16px; }
  .course__body { padding: 18px; }
  /* Títol + seu com un sol bloc. L'alçada mínima cobreix el pitjor cas (títol de
   dues línies + seu de dues línies) i, com que el sobrant queda a sota del
   parell, la seu sempre va enganxada al títol i les burbujes de totes les
   targetes arrenquen igual. */
.course__head {
  /* 86px = el bloc més alt del catàleg (81px: títol d'una línia + seu de dues)
     amb un marge de 5px per si algun títol creix. Abans hi havia 109px, que
     deixava 28px morts i empenyia les burbujes massa avall. */
  min-height: 86px;
}
.course__head .course__title { margin: 0 0 8px !important; }
.course__head .course__meta  { margin: 0 !important; }

.course__title { font-size: 18px; }
  .course__meta { font-size: 12px; }
  .course__tag { font-size: 10px; padding: 5px 9px; }
}

/* ---- Distintius recuperats de les imatges (21/8/2026) ----
   L'Andrea posava aquestes dades dins del disseny de la imatge: el segell
   "BEST SELLER", la convocatòria de la capçalera i el cos al qual pertany el
   curs. En passar a imatges netes s'haurien perdut, així que ara són text. ---- */

/* Segell de més venut, sota l'etiqueta de tipus. */
/* Pròximament (30/9): mostassa sobre blanc no es llegeix, així que fons
   mostassa i text morat fosc. Al costat de «Més venut». */
.course__soon {
  background: var(--passa-mustard);
  color: var(--passa-purple-dark);
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--passa-radius);
  white-space: nowrap;
}
.course__soon-avis {
  background: var(--passa-purple-bg);
  color: var(--passa-text);
  padding: 14px 16px;
  border-radius: var(--passa-radius);
  margin: 0 0 20px;
}

.course__best {
  background: var(--passa-purple);
  color: #fff;
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--passa-radius);
  white-space: nowrap;
}

/* Convocatòria, a l'altre extrem per no competir amb l'etiqueta. */
.course__conv {
  background: var(--passa-line);
  color: var(--passa-text);
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: var(--passa-radius);
  white-space: nowrap;
}

/* Cos/oposició: antetítol discret sobre el nom del curs. */
.course__opo {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--passa-text-2);
}

/* Distintius curts: el més característic del curs, en píndoles discretes.
   Van sota la meta i per sobre del preu. Deliberadament sense color fort:
   qui mana visualment a la targeta és el títol i el preu. */
.course__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.course__chips {
  display: flex;
  flex-wrap: wrap;
  /* row-gap més gran que column-gap: quan les burbujes envolten a dues files,
     6px les deixava trepitjant-se. */
  gap: 9px 6px;
}
.course__chips span {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--passa-purple);
  background: var(--passa-purple-bg);
  border-radius: var(--passa-radius);
  padding: 4px 9px;
}

/* ---- Meta de la targeta: seu · modalitat · durada (19/8/2026) ---- */
.course__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.course__meta span { margin-right: 0; }
.course__meta .course__seu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--passa-purple);
}
.course__meta .course__seu svg { width: 13px; height: 13px; flex-shrink: 0; }


/* 1/10 (Eric): «Més venut» i «Pròximament» a sobre de la foto, a dalt a la dreta, en una sola
   fila (Eric). Més petits que la resta de distintius: no han de tapar la foto. */
.course__image { position: relative; }
.course__distintius {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; max-width: calc(100% - 20px); pointer-events: none;
}
.course__distintius .course__best,
.course__distintius .course__soon { font-size: 9.5px; padding: 4px 8px; margin: 0; letter-spacing: .05em; }

/* Places esgotades (6/10): morat fosc i blanc, perquè no es confongui amb «Més venut» ni amb «Pròximament». */
.course__soon.course__full { background: var(--passa-purple-dark); color: #fff; }

/* 7/10 (Andrea): «Quota mensual» al costat del preu. Gris fosc: el gris clar de «des de» no arriba al contrast per a text. */
/* Pes (0,4,1): el snippet «Fitxa Prèmium unificada» (Code Snippets, 7/10) amaga amb font-size:0 tot el
   <small> del preu d'alguns cursos per treure el «des de» (0,3,2). La quota s'ha de veure igualment. */
.course .course__price small.course__quota.course__quota { color: var(--passa-text); margin: 0 0 0 4px; font-size: 12px; }