/* =====================================================================
   botiga-targeta.css — La targeta de curs fora de la portada
   P1.1 (17/9/2026) · demanat per l'Andrea a la reunió del 4/9 (00:13:19)

   La targeta és la MATEIXA que a la portada: tot el disseny viu a
   courses.css i aquí només hi ha el que canvia quan surt de la pista del
   carrusel i entra a la graella de la botiga.

   Dues coses que calia arreglar i que no eren evidents:

   1. El groc de l'etiqueta és `--passa-accent`, i l'accent el posa la
      classe de línia del <body> (body.passa-line-seguretat). A la botiga
      el <body> no porta cap línia, així que queia al morat de reserva i
      totes les etiquetes sortien morades. Ara cada targeta es porta el seu
      accent a sobre, perquè una categoria pot barrejar línies.

   2. Els blocs de Kadence porten els seus propis estils de titular i
      guanyaven per especificitat: el títol es quedava en 17px quan a la
      portada en fa 22. Aquí es torna a imposar el nostre.
   ===================================================================== */

/* ---- La graella ---- */
.woocommerce ul.products li.product.course--botiga {
  display: flex;
  flex-direction: column;
  background: var(--passa-bg-card);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  overflow: hidden;
  margin-bottom: 0;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product.course--botiga:hover {
  border-color: var(--passa-accent);
  box-shadow: 0 10px 28px rgba(26, 21, 53, .10);
  transform: translateY(-2px);
}

.course--botiga .course__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

/* ---- La imatge, sempre la mateixa proporció ----
   Les portades dels cursos vénen de mides molt diferents; sense això la
   fila queda escalonada i el títol de cada targeta comença a una alçada. */
.course--botiga .course__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--passa-purple-bg);
}
.course--botiga .course__image img,
.course--botiga .course__image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
/* 1/10 (Andrea): sense zoom a la foto en passar-hi el ratolí. */

.course--botiga .course__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 0;
}

/* ---- 1 · L'accent de la línia, targeta a targeta ---- */
.course--botiga[data-linia="seguretat"] { --passa-accent: var(--passa-mustard); }
.course--botiga[data-linia="educacio"]  { --passa-accent: var(--passa-lila); }
.course--botiga[data-linia="sanitat"]   { --passa-accent: var(--passa-verde); }

/* ---- 2 · Recuperar els nostres estils per sobre dels de Kadence ----
   Els blocs surten amb .wp-block-kadence-advancedheading; s'hi encadena la
   nostra classe per pujar d'especificitat sense fer servir !important.

   I el prefix llarg tampoc és caprici: el WooCommerce porta
   `.woocommerce ul.products li.product h3 { font-size: 1em }`, tres classes
   i dos elements, que guanyava el nostre. Aquí en tenim cinc i dos. */
.woocommerce ul.products li.product.course--botiga .wp-block-kadence-advancedheading.course__title {
  font-family: var(--passa-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--passa-ink);
  margin: 0 0 8px;
}
.woocommerce ul.products li.product.course--botiga .wp-block-kadence-advancedheading.course__opo {
  margin: 0 0 10px;
}
.woocommerce ul.products li.product.course--botiga .wp-block-kadence-advancedheading.course__badges {
  margin: 0 0 12px;
}
.woocommerce ul.products li.product.course--botiga .wp-block-kadence-advancedheading.course__meta {
  margin: 0 0 14px;
}
/* Kadence encapsula el text dinàmic en un span propi; ha de ser transparent. */
.course--botiga .kb-inline-dynamic {
  display: contents;
  font: inherit;
  color: inherit;
}

/* ---- El distintiu de més venut, a sobre de la imatge ---- */


/* ---- Preu i botó, sempre a baix i alineats entre targetes ---- */
.course--botiga .course__chips { margin-bottom: 18px; }
.course--botiga .course__buy {
  margin-top: auto;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--passa-line);
}
.course--botiga .course__price { margin: 0 0 10px; }

.woocommerce ul.products li.product.course--botiga a.button,
.woocommerce ul.products li.product.course--botiga .button {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
}

@media (max-width: 767px) {
  .course--botiga .course__body { padding: 15px 15px 0; }
  .course--botiga .course__buy  { padding: 12px 15px 15px; }
  .woocommerce ul.products li.product.course--botiga .wp-block-kadence-advancedheading.course__title { font-size: 18px; }
}

/* ---------------------------------------------------------------------
   Vista de llista
   El Kadence deixa canviar entre graella i llista amb els dos botons de
   dalt a la dreta (afegeix `products-list-view` a la <ul>). Sense això la
   targeta s'estirava a tota l'amplada i la imatge passava a fer 1.200 px:
   una targeta per pantalla i mitja.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .woocommerce ul.products.products-list-view li.product.course--botiga {
    flex-direction: row;
    align-items: stretch;
  }
  .woocommerce ul.products.products-list-view li.product.course--botiga .course__link {
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;                /* sense això el text no deixa encongir la imatge */
  }
  .products-list-view .course--botiga .course__image {
    flex: 0 0 34%;
    max-width: 320px;
    aspect-ratio: auto;
  }
  .products-list-view .course--botiga .course__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 22px;
  }
  /* El preu i el botó passen a la dreta del tot, en columna pròpia. */
  .products-list-view .course--botiga .course__buy {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--passa-line);
    padding: 20px;
  }
  /* A la llista hi cap tot: no cal amagar el quart distintiu. */
  .products-list-view .course--botiga .course__chips span:nth-child(n+4) { display: inline-flex; }
}

/* 1/10 (Andrea): els distintius de la foto, a la dreta. Si n'hi ha dos, un sota l'altre. */
/* 1/10 (Eric): més petits, com a la portada. */
.course--botiga .course__best,
.course--botiga .course__soon { font-size: 9.5px; padding: 4px 8px; letter-spacing: .05em; }

/* ---- Botiga per seccions (2/10) ---------------------------------------- */
.passa-botiga-seccio { margin: 0 0 44px; }
.passa-botiga-seccio__titol { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid #e6a528; font-size: 26px; color: #2a0e3a; }

/* 22/10 · La foto no s'ajustava a la caixa: `.woocommerce ul.products li.product a img {height:auto}` de WooCommerce
   (0,2,3) guanyava a la nostra (0,2,1) i la foto quedava amb la seva alçada; la caixa la tallava per baix (les altes
   només ensenyaven la part de dalt). Amb més pes: ocupa la caixa i es centra. L'enquadrament per producte
   (inc/imatge-enquadrament.php) va en línia i mana. */
.woocommerce ul.products li.product.course--botiga .course__image img {
  width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; object-position: 50% 50%;
}

/* 25/10 · filtre per idioma del curs a la botiga (Andrea 22/10 + Eric). Sense etiqueta a les targetes (Eric: «ya
   se ven abarrotados»). Interruptor segmentat de marca; els botons els crea el JS (inc/botiga-targeta.php): sense JS
   no surten i es veu tot. Recepta: /opt/pasarela-dev/eines/botiga/idioma-curs/ */
.passa-filtre-idioma { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 36px; }
.passa-filtre-idioma__lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--passa-text-2);
}
.passa-filtre-idioma__seg {
  display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(76, 27, 105, .14); box-shadow: 0 4px 14px rgba(42, 14, 58, .07);
}
.passa-filtre-idioma .passa-filtre-idioma__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; letter-spacing: 0;
  min-height: 42px; padding: 0 18px; margin: 0; cursor: pointer;
  border: 0; border-radius: 999px; background: transparent; color: var(--passa-purple-dark); box-shadow: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.passa-filtre-idioma .passa-filtre-idioma__btn:hover,
.passa-filtre-idioma .passa-filtre-idioma__btn:focus { background: var(--passa-purple-bg); color: var(--passa-purple-dark); }
.passa-filtre-idioma .passa-filtre-idioma__btn[aria-pressed="true"],
.passa-filtre-idioma .passa-filtre-idioma__btn[aria-pressed="true"]:hover,
.passa-filtre-idioma .passa-filtre-idioma__btn[aria-pressed="true"]:focus {
  background: var(--passa-purple); color: #fff; box-shadow: 0 3px 10px rgba(76, 27, 105, .28);
}
.passa-filtre-idioma .passa-filtre-idioma__btn:focus-visible { outline: 2px solid var(--passa-mustard); outline-offset: 2px; }
.passa-filtre-idioma__n {
  min-width: 22px; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center;
  background: var(--passa-purple-bg); color: var(--passa-purple-dark);
}
.passa-filtre-idioma__btn[aria-pressed="true"] .passa-filtre-idioma__n { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 599px) {
  .passa-filtre-idioma__seg { display: flex; width: 100%; }
  .passa-filtre-idioma .passa-filtre-idioma__btn { flex: 1 1 0; justify-content: center; padding: 0 8px; }
}
.passa-botiga-seccio.is-buida, li.product.is-amagat-idioma { display: none !important; }