/* =====================================================================
   app.css · Secció «App de tests» de la portada (tasca n8, 2/10/2026)

   Va just després de «Tipus de modalitats». Andrea la va demanar «que
   destaqui»: per això és l'única secció de fons morat entre dues de clares.

   Mostassa NOMÉS sobre morat (sobre blanc dona 2,1:1). El botó ple és
   mostassa amb text morat fosc (8:1); el de contorn, blanc.

   L'Andrea canvia textos, botons i la imatge des del mateix bloc. Quan
   arribi una captura de l'app per dins, només cal substituir la imatge.
   ===================================================================== */

.passa-app {
  width: 100%;
  background: var(--passa-purple);
  color: #fff;
  padding: 0;
  margin: 0 !important;
}
.passa-app > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 72px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  column-gap: 60px;
  align-items: center;
}

.passa-app .app__copy,
.passa-app .app__copy > .wp-block-group__inner-container { margin: 0 !important; }

.passa-app .eyebrow       { color: var(--passa-mustard); margin-bottom: 10px !important; }
.passa-app .section-title { color: #fff; margin-top: 0 !important; margin-bottom: 14px !important; }
.passa-app .section-title em { color: var(--passa-mustard); }
.passa-app .section-lead {
  color: #EDE6F2;
  max-width: 560px;
  line-height: 1.65;
  margin: 0 0 28px !important;
}

/* Botons: (0,5,0) per guanyar el CSS en línia de Kadence sense dependre de l'ordre. */
:is(.entry-content, .block-editor-block-list__layout) .passa-app .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--passa-mustard);
  color: var(--passa-purple-dark);
}
:is(.entry-content, .block-editor-block-list__layout) .passa-app .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: #f0b843;
  color: var(--passa-purple-dark);
}
:is(.entry-content, .block-editor-block-list__layout) .passa-app .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
:is(.entry-content, .block-editor-block-list__layout) .passa-app .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--passa-purple);
}

.passa-app .app__mockup { margin: 0 !important; justify-self: center; }
.passa-app .app__mockup img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* Tauleta: es queden les dues columnes, amb el mòbil més estret.
   Mòbil: una columna, només el text. */
@media (max-width: 900px) {
  .passa-app > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr) 200px;
    column-gap: 32px;
    padding: 56px 24px;
  }
  .passa-app .app__mockup img { max-width: 200px; }
}
@media (max-width: 640px) {
  .passa-app > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  /* El mòbil dibuixat és decoratiu: en pantalla petita s'amaga perquè la secció
     no sigui més alta que a tauleta (regla de la casa, 25/8). */
  .passa-app .app__mockup { display: none; }
}

/* 5/10 · Fora de la portada (p. ex. Cursos Online) la secció quedava desplaçada amb un buit blanc a l esquerra en pantalles
   amples: allà el contenidor no és d ample complet. Aquí ocupa tota l amplada de la finestra. */
body:not(.home) .passa-app {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---- 13/10 · Carrusel de pantalles de l'app (Eric) ------------------------------------
   La imatge és una galeria de WordPress (l'Andrea canvia fotos i peus des del bloc).
   Sense JS: les pantalles es veuen una sota l'altra. Amb JS (app-carrusel.js) s'apilen
   a la mateixa cel·la i van passant; les classes que amaguen les posa el JS. */
.passa-app .wp-block-gallery.app__carrusel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto !important;
}
.passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image {
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image img {
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}
/* El peu, a sota i en text normal (WordPress el posa damunt de la foto amb degradat). */
.passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image figcaption {
  position: static;
  background: none;
  max-height: none;
  overflow: visible;
  padding: 14px 0 0;
  margin: 0;
  color: #EDE6F2;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  text-shadow: none;
}
.passa-app .app__carrusel.is-carrusel { gap: 0; }
.passa-app .app__carrusel.is-carrusel > figure.wp-block-image {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.passa-app .app__carrusel.is-carrusel > figure.wp-block-image.is-actiu {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}
.passa-app .app__punts {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}
.passa-app .app__punts button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.passa-app .app__punts button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background .2s, transform .2s;
}
.passa-app .app__punts button[aria-current="true"]::before {
  background: var(--passa-mustard);
  transform: scale(1.25);
}
.passa-app .app__punts button:focus-visible { outline: 2px solid var(--passa-mustard); outline-offset: 2px; border-radius: 50%; }
.passa-app .app__mockup-wrap { justify-self: center; width: 100%; max-width: 260px; }
@media (max-width: 900px) {
  .passa-app .wp-block-gallery.app__carrusel,
  .passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image img,
  .passa-app .app__mockup-wrap { max-width: 200px; }
  .passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image figcaption { font-size: 14px; }
}
/* Mòbil (Eric, 13/10): el mòbil dibuixat, més gran i «treient el cap» per la vora de baix de la
   secció. A dalt els punts i la frase; a sota, la meitat de dalt de la pantalla. Substitueix l amagat de 2/10. */
@media (max-width: 640px) {
  .passa-app > .wp-block-group__inner-container { padding-bottom: 0; row-gap: 28px; }
  .passa-app .app__mockup-wrap { display: flex; flex-direction: column; max-width: 240px; margin: 0 auto; }
  .passa-app .app__punts { order: -1; margin: 0 0 2px; }
  .passa-app .wp-block-gallery.app__carrusel { max-width: 240px; max-height: 360px; overflow: hidden; }
  .passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image { flex-direction: column-reverse; justify-content: flex-end; }
  .passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image img { max-width: 240px; filter: none; }
  .passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image figcaption { padding: 0 0 14px; min-height: 2.8em; }
}

/* 23/10 · Pàgina intermèdia de l'App (eines/app-pagina/): bloc «Què hi trobaràs» sota la secció de la portada. */
.app-pagina__mes { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.app-pagina__mes h2 { margin: 0 0 18px; }
.app-pagina__mes h3 { margin: 32px 0 8px; }
.app-pagina__llista.wp-block-list { padding-left: 0; list-style: none; display: grid; gap: 14px; }
.app-pagina__llista.wp-block-list li { padding: 14px 18px; background: var(--passa-purple-bg, #EFE8F3); border-radius: var(--passa-radius, 2px); line-height: 1.5; }

/* 23/10 · Andrea: «cada imatge té una mida diferent, per això es mou tot quan només hauria de canviar l'interior».
   Les 3 pantalles fan 600×1171/1190/1202: la mateixa caixa per a totes (la de la més alta) i la foto a dins
   sense deformar. El mòbil i el peu ja no salten en canviar de pantalla. */
.passa-app .wp-block-gallery.app__carrusel > figure.wp-block-image img {
  aspect-ratio: 600 / 1202;
  object-fit: contain;
  object-position: 50% 50%;
}