/* =====================================================================
   producte.css — Fitxa de curs

   ⚠️ Això NO és el disseny de la fitxa (tasca #17). De moment només repara
   una regressió de la migració del catàleg.

   A la seva web les sis icones (TEMARI, PSICOTÈCNICS, PREPARACIÓ FÍSICA,
   FLEXIBILITAT, DOCENTS EXCEPCIONALS, BIODATA) anaven en una fila de sis
   columnes: al WPBakery original són sis `image_with_animation` dins de sis
   `vc_column width="1/6"`. En netejar els shortcodes es va perdre l'estructura
   i els <img> van quedar solts, i un <img> sol s'estén a tota l'amplada: sis
   quadrats de 1024×1024 apilats, un per pantalla.
   ===================================================================== */

.passa-icones-curs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: start;
  margin: 30px 0;
}

/* La doble classe és necessària: WooCommerce declara
   `.woocommerce img { height: auto; max-width: 100% }` i cal guanyar-li,
   igual que va passar amb el logo del header. */
.passa-icones-curs img.size-large,
.passa-icones-curs img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 10px;
}

@media (max-width: 900px) { .passa-icones-curs { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 480px) { .passa-icones-curs { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* =====================================================================
   Botons de WooCommerce amb el color de marca

   Kadence els pinta amb `--global-palette1`, que és el seu blau per defecte
   (#2B6CB0): botó d'afegir al carret, botons normals i l'etiqueta «Oferta!».
   Desentonava amb tota la resta del lloc.

   Es fa dins de l'àmbit de WooCommerce i no canviant la paleta global perquè
   aquesta variable la fan servir també enllaços i altres elements del tema:
   tocar-la afectaria pàgines que ja estan bé.
   ===================================================================== */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-page .button,
/* WooCommerce declara `.woocommerce button.button.alt` (0,3,1), que guanya a
   un selector de dues classes. El botó principal d'afegir al carret porta
   `.alt`, i per això es quedava blau. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--passa-purple);
  color: #fff;
  border-radius: var(--passa-radius);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--passa-purple-dark);
  color: #fff;
}

/* L'etiqueta d'oferta anava del mateix blau.
   ⚠️ Es fa servir `--passa-mustard` i NO `--passa-accent`: l'accent només val
   quan el <body> porta una classe de línia, i les pàgines de botiga no en
   porten cap. Allà l'accent cau a morat, i morat amb text fosc no es llegeix. */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background-color: var(--passa-mustard);
  color: var(--passa-ink);
  font-weight: 700;
}

/* 2/10: en productes amb opcions (variables) el botó heretava padding:16px amb line-height 40 i el text quedava tallat per baix. Mateix farciment que la resta. */
.woocommerce div.product form.variations_form .single_add_to_cart_button.button { padding: 0 18px !important; } /* un plugin hi posa form.cart button.single_add_to_cart_button{padding:16px!important} */