/* =====================================================================
   campus.css — Pàgina «Campus Virtual» (8/9/2026)

   Fitxer curt A POSTA. Tot el disseny (fons, vores, coixí, colors, mides
   de lletra, columnes) viu als ATRIBUTS dels blocs de Kadence, així
   l'Andrea ho canvia des de la barra lateral sense tocar codi.
   Aquí només hi ha les dues coses que els atributs no ofereixen.

   CONTRAST — la regla de la casa, aplicada:
   la mostassa (#e6a528) NOMÉS va sobre morat; sobre blanc dona 2,1:1.
   Per això el distintiu és fons mostassa amb text morat fosc (8:1), i les
   xifres del hero són mostassa sobre #2a0e3a (9,7:1), posades per atribut.
   ===================================================================== */

/* ---- Distintiu «Pròximament» ----------------------------------------
   Kadence no té fons per a un encapçalament, així que aquesta va aquí.
   Mostassa INVERTIDA: fons mostassa + text morat fosc. Escrit al revés
   (text mostassa sobre blanc) no arribaria ni al 3:1 del text gran. */
.campus-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--passa-radius);
  background: var(--passa-mustard);
  color: var(--passa-purple-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ---- Elevació de les targetes de curs al ratolí ---------------------
   Kadence té estils de hover per a fons i vora, però no per a moure la
   targeta. Només això. */
.campus-curs {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.campus-curs:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(42, 14, 58, 0.13);
}

/* ⚠️ Per això `.campus-cursos` entra a SECCIONS de reveal.js però NO a
   FILLS: la regla del reveal ja mostrat (`transform:none`) es menjaria
   aquest hover. Ja va passar a method.css, blog.css i als productes. */

@media (max-width: 767px) {
  .campus-curs:hover { transform: none; }   /* al mòbil no hi ha ratolí */
}

/* ---- Fletxa de desplegar del perfil de LearnDash (2/10) ---------------
   La fletxa és un glif de la font «ld-icons» dins d'una caixa de 10px, i
   cada navegador la posa a una alçada diferent: a Windows sortia enganxada
   a dalt del cercle. Dibuixada amb vores queda centrada a tot arreu. */
.ld-expand-button.ld-compact .ld-icon-arrow-down {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.ld-expand-button.ld-compact .ld-icon-arrow-down::before {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* ---- Tests de LearnDash (2/10, Eric) -----------------------------------
   1) El títol del test sortia dos cops: el de la pàgina (h1) i el que pinta
      el qüestionari (h2). Es queda el de la pàgina. */
.learndash-wrapper .wpProQuiz_content > h2 { display: none; }

/* 2) El número de cada resposta («1.») anava solt damunt de la caixa
      (LearnDash posa l'element en columna). Es posa dins de la caixa, davant
      del botó de ràdio. La vora segueix a la <label>, on LearnDash hi pinta
      el verd/vermell de correcte/incorrecte. 22px = 3 (marge de l'element)
      + 2 (vora) + 17 (farciment) de la caixa. */
.wpProQuiz_questionListItem { position: relative; }
.wpProQuiz_questionListItem > span:first-child {
  position: absolute;
  left: 22px;
  top: 22px;
  font-weight: 700;
  color: #4c1b69;
  pointer-events: none;
}
/* Mateix pes que la regla de LearnDash que posa el farciment (1em) + l'span: guanya sense !important. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) > span:first-child + label { padding-left: 48px; }

/* 3) La pregunta on ets, a la rejilla de números: gris de LearnDash → morat. */
/* !important a posta: LearnDash té el gris en selectors de fins a 7 classes
   (combinacions «revisa/omet + actual») i perseguir-los un a un és fràgil. */
.learndash-wrapper .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionTarget {
  background-color: #4c1b69 !important;
  border-color: #4c1b69 !important;
  color: #fff !important;
}

/* ---- Fitxa del curs (2/10, Eric) ---------------------------------------
   1) Caixa «0% COMPLETAT»: LearnDash li dona 8,5px de farciment i el text
      queda enganxat a dalt. */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled { padding: 16px 20px; }
.learndash-wrapper .ld-course-status .ld-progress-heading { margin-bottom: 8px; }

/* 2) Taules de la descripció en mòbil (la del «Curs complet»: Àmbit /
      contingut / temes). Les columnes dels extrems només porten una lletra o
      un número i es menjaven l'amplada: ara s'ajusten al contingut i la del
      mig s'estén. No es toca el contingut del curs. */
@media (max-width: 600px) {
  .single-sfwd-courses .entry-content table :is(td, th) {
    padding: 8px 6px !important; /* el farciment de 11px va en línia a cada cel·la */
    font-size: 15px;
    line-height: 1.45;
  }
  .single-sfwd-courses .entry-content table :is(td, th):is(:first-child, :last-child) {
    width: 1%;
    white-space: nowrap;
    text-align: center;
  }
}

/* ---- Mode focus de LearnDash (2/10, Eric: «pixel perfect») ------------
   1) Logo de la web a la capçalera del mode focus (inc/campus-alumne.php). */
.ld-focus .ld-focus-header .ld-brand-logo {
  display: flex;
  align-items: center;
  padding-left: 24px;
}
.ld-focus .ld-focus-header .ld-brand-logo .site-header-item { display: flex; align-items: center; }

/* 2) Botó de plegar l'índex: el cercle queda mig fora de la columna morada i
      la seva vora blanca desapareixia sobre el blanc. Una anella fina el tanca. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon.ld-icon { transform: translateY(-50%) translateX(50%); } /* Eric: centrat sobre la vora (LearnDash: translateX(25%)) */

/* 3) «Marca com a completat»: LearnDash pinta el ✓ a 8,5px de la dreta del
      formulari però el botó només té 12,75px de farciment: el text hi xocava. */
.learndash-wrapper .sfwd-mark-complete input.learndash_mark_complete_button { padding-right: 36px !important; } /* !important: LearnDash el fixa en un selector llarg amb :not() i #id */

/* 4) Avatar de la capçalera: la lletra venia a mida de 96px dins un cercle de 40. */
.ld-focus .ld-focus-header .ld-profile-avatar { --passa-av-fs-ctx: 17px; }

/* Logo del mode focus: les regles de header.css hi són, però LearnDash té
   `.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img` amb més pes i
   el deixava a mida real. Mateixes mides que a la capçalera de la web. */
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo .passa-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img.passa-logo__img { height: 40px; width: auto; max-width: none; max-height: none; flex: 0 0 auto; }
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo .passa-logo__name { white-space: nowrap; }
.learndash-wrapper .sfwd-mark-complete input.learndash_mark_complete_button { white-space: nowrap !important; max-width: none !important; width: auto !important; }
.learndash-wrapper .ld-content-actions .ld-content-action:has(.sfwd-mark-complete) { flex-basis: auto; } /* el de baix tenia amplada limitada i, amb el farciment, el text saltava de línia */
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon.ld-icon { transform: translateY(-50%) translateX(50%) rotate(180deg); } /* plegat: igual, conservant el gir de la fletxa */
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img.passa-logo__img { height: 30px; } .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo .passa-logo { gap: 10px; } /* Eric: a la barra de 51px el logo de 40 la omplia i el text semblava petit */
.learndash-wrapper .wpProQuiz_content .ld-quiz-actions input:is([name=reShowQuestion],[name=restartQuiz]) { background: #4c1b69; } /* 2/10 Eric: botons de resultats en morat (LearnDash: #495255) */

/* ---- Cursos Online · «Cursos disponibles» [passa_cursos_online] (2/10, UI final) ----
   Les targetes van DINS de la franja lila de la secció (#f7f5fa): la graella estén el fons
   a tota l'amplada amb box-shadow + clip-path, sense sortir del contenidor. 3/2/1 columnes.
   Targetes blanques amb vora i ombra suau; la que ja tens, vora morada i etiqueta. */
.passa-co {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  margin: 0; padding: 16px 6px 80px;
  background: #f7f5fa; box-shadow: 0 0 0 100vmax #f7f5fa; clip-path: inset(0 -100vmax);
}
@media (max-width: 1023px) { .passa-co { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 640px)  { .passa-co { grid-template-columns: 1fr; gap: 18px; padding: 12px 0 56px; } }
.passa-co__targeta {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6def2; border-radius: 16px; padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(42, 14, 58, .04), 0 10px 28px rgba(42, 14, 58, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.passa-co__targeta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(42, 14, 58, .05), 0 16px 36px rgba(42, 14, 58, .12); }
.passa-co__targeta.es-meu { border: 2px solid #4c1b69; padding-top: 52px; }
.passa-co__targeta h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; color: #2a0e3a; }
.passa-co__meta { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #4c1b69; }
.passa-co__targeta > p:not(.passa-co__meta) { margin: 0 0 20px; color: #4a4566; line-height: 1.6; }
.passa-co__peu { margin-top: auto; padding-top: 18px; border-top: 1px solid #eee7f6; }
.passa-co__preu { margin: 0 0 14px; font-size: 15px; color: #4a4566; }
.passa-co__preu strong { color: #2a0e3a; }
.passa-co__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.passa-co__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #4c1b69; color: #fff !important; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.passa-co__btn:hover { background: #2a0e3a; }
.passa-co__etiqueta { position: absolute; top: 16px; left: 28px; background: #e6a528; color: #2a0e3a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; }

/* ---- Cursos Online · botó «Els meus cursos» del hero (2/10, UI final) ----
   Els colors (mostassa + morat fosc) van als ATRIBUTS del botó: aquí només la mida, l'aire i la fletxa. */
.passa-co-meus { margin-top: 32px !important; }
:is(.entry-content, .block-editor-block-list__layout) .wp-block-buttons.passa-co-meus .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 34px; font-size: 18px; font-weight: 700; line-height: 1; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
:is(.entry-content, .block-editor-block-list__layout) .wp-block-buttons.passa-co-meus .wp-block-button .wp-block-button__link::after { content: "→"; font-size: 20px; }
:is(.entry-content, .block-editor-block-list__layout) .wp-block-buttons.passa-co-meus .wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
@media (max-width: 640px) { .passa-co-meus .wp-block-button, .passa-co-meus .wp-block-button__link { width: 100%; justify-content: center; } }

/* ---- Gràcies per la teva comanda · accés al curs (2/10) ---------------- */
.passa-gracies-curs { background: #f5f0ff; border-left: 4px solid #4c1b69; border-radius: 10px; padding: 20px 22px; margin: 0 0 28px; }
.passa-gracies-curs h2 { margin: 0 0 6px; font-size: 20px; color: #2a0e3a; }
.passa-gracies-curs p { margin: 0 0 14px; }

/* 21/10 · Andrea: imatge destacada del curs a dalt de la fitxa, de vora a vora. L'etiqueta «Ja el tens» queda a sobre. */
.passa-co__img { margin: -28px -28px 20px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px 15px 0 0; background: #eee7f6; }
.passa-co__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.passa-co__targeta.es-meu.te-img { padding-top: 28px; }
.passa-co__targeta.es-meu .passa-co__img { border-radius: 14px 14px 0 0; }
.passa-co__targeta.te-img .passa-co__etiqueta { z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }