/* =====================================================================
   blog.css — Llistat i entrades del blog

   Kadence els pinta amb el seu estil per defecte (enllaços blaus, títols
   enormes) i no s'assemblaven gens a la resta del lloc. Aquí s'hi apliquen
   els mateixos tokens de marca que a les targetes de curs, perquè el blog
   sembli part de la casa i no una secció apegada.

   Els textos els edita l'Andrea com sempre (cada entrada és una entrada):
   això només és pintura, i tota viu en variables (regla 4 del projecte).
   ===================================================================== */

/* ---- Capçalera de la pàgina ----
   Kadence la pintava com una banda grisa de 200px amb «Blog» centrat a 32px,
   mentre que a tot el lloc els títols van a l'esquerra, a 46px i amb antetítol.
   A sobre, el títol quedava centrat i les targetes començaven a la vora: dos
   eixos diferents a la mateixa pàgina.

   Ara segueix el mateix patró que les seccions de la portada. El TEXT és el
   títol de la pàgina, o sigui que l'Andrea el canvia des de l'editor com
   qualsevol altre.
   ===================================================================== */
/* ⚠️ La classe és `entry-hero-container-INNER`; `.entry-hero-container` a
   seques no existeix i per això els primers selectors no enganxaven.
   I el centrat el posa el <header>, no el títol: el h1 és inline-block, així
   que alinear-lo a ell no serveix de res. */
.blog .entry-hero,
.archive .entry-hero {
  background: var(--passa-bg-soft);
  border-bottom: 1px solid var(--passa-line);
}
.blog .entry-hero .entry-header,
.archive .entry-hero .entry-header {
  padding: 54px 0 46px;
  text-align: left;
  /* ⚠️ El <header> és FLEX EN COLUMNA amb `align-items: center`. El
     `text-align` no hi fa res: el que centra el títol és l'alineació de
     l'element flex, no la del text. Va costar tres intents entendre-ho. */
  align-items: flex-start;
}
.blog .page-title,
.archive .page-title {
  font-family: var(--passa-font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--passa-ink);
  text-align: left;
  margin: 0;
}
/* El mateix filet d'accent que porten els antetítols de les seccions. */
.blog .page-title::after,
.archive .page-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 18px 0 0;
  background: var(--passa-accent);
  border-radius: 2px;
}
/* La descripció de la categoria, quan n'hi ha. */
.archive .archive-description {
  max-width: 640px;
  margin-top: 16px;
  font-family: var(--passa-font-body);
  color: var(--passa-text-2);
  line-height: 1.65;
}
@media (max-width: 900px) {
  .blog .entry-hero .entry-header,
  .archive .entry-hero .entry-header { padding: 44px 0 38px; }
}
@media (max-width: 600px) {
  .blog .entry-hero .entry-header,
  .archive .entry-hero .entry-header { padding: 36px 0 30px; }
}

/* ---- Targeta de cada entrada ---- */
.loop-entry.content-bg {
  background: var(--passa-bg-card);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.loop-entry.content-bg:hover {
  transform: translateY(-3px);
  border-color: var(--passa-purple);
  box-shadow: 0 12px 28px rgba(76, 27, 105, .08);
}

/* Categories: eren blaves per defecte. Van com l'antetítol de les seccions.
   Cal cobrir també la fitxa de l'entrada, no només el llistat: allà hi surten
   igualment i se'm van quedar blaves. */
.loop-entry .entry-taxonomies,
.loop-entry .entry-taxonomies a,
.single-post .entry-taxonomies,
.single-post .entry-taxonomies a {
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--passa-purple);
  text-decoration: none;
}
.loop-entry .entry-taxonomies a:hover,
.single-post .entry-taxonomies a:hover { color: var(--passa-purple-dark); }

/* La capçalera de l'entrada: mateixa família tipogràfica que la resta. */
.single-post .entry-title {
  font-family: var(--passa-font-heading);
  letter-spacing: -.02em;
  color: var(--passa-ink);
}
.single-post .entry-meta {
  font-family: var(--passa-font-body);
  font-size: 13px;
  color: var(--passa-text-2);
}

/* 28px al costat d'un extracte de 15px era massa desequilibrat. */
/* Mida, pes i interlineat del títol: Personalitzador → Blog Posts → Post Archive.
   Aquí només queda l'espaiat, que allà no hi és. */
.loop-entry .entry-title { letter-spacing: -.01em; }
.loop-entry .entry-title,
.loop-entry .entry-title a { color: var(--passa-ink); text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--passa-purple); }

/* El títol es limita a 3 línies: amb titulars de 100 caràcters, les targetes
   quedaven de mides molt diferents i la graella es desmuntava. */
.loop-entry .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Kadence pinta 55 paraules d'extracte i les targetes se n'anaven a 810px
   d'alçada. Amb 4 línies n'hi ha prou per decidir si t'interessa l'entrada. */
.loop-entry .entry-summary p {
  font-family: var(--passa-font-body);
  font-size: 15px;
  color: var(--passa-text-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ritme intern de la targeta: mateixa lògica que a les targetes de curs
   (antetítol → aire → títol → data → text → enllaç). */
.loop-entry .entry-content-wrap > * { margin-top: 0; margin-bottom: 0; }
.loop-entry .entry-taxonomies      { margin-bottom: 10px; }
.loop-entry .entry-title           { margin-bottom: 10px; }
.loop-entry .entry-meta            { margin-bottom: 14px; }
.loop-entry .entry-summary         { margin-bottom: 18px; }

/* «Més informació»: en majúscules i amb la fletxa que es desplaça, com al CTA. */
.loop-entry .post-more-link,
.loop-entry .entry-actions a {
  font-family: var(--passa-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--passa-purple);
  text-decoration: none;
}
.loop-entry .post-more-link:hover { color: var(--passa-purple-dark); }

/* Data en petit i sense autor: tot al Personalitzador → Blog Posts → Post Archive
   (mida i color a «Meta Font», l'autor a «Meta» → Author). Abans l'autor
   s'amagava amb display:none i seguia al HTML. */

/* Imatge: mateix gest que a les targetes de curs. */
.loop-entry .post-thumbnail img { transition: transform .35s ease; }
.loop-entry.content-bg:hover .post-thumbnail img { transform: scale(1.04); }

/* ---- Entrada individual ---- */
.single-post .entry-content {
  font-family: var(--passa-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--passa-text);
}
.single-post .entry-content h2,
.single-post .entry-content h3 {
  font-family: var(--passa-font-heading);
  letter-spacing: -.01em;
  color: var(--passa-ink);
}
.single-post .entry-content h2 { margin-top: 1.6em; }
.single-post .entry-content a { color: var(--passa-purple); text-underline-offset: 2px; }
.single-post .entry-content a:hover { color: var(--passa-purple-dark); }
/* 25/10: los botones del texto (a.button) heredaban el morado de los enlaces y quedaban morado sobre morado */
.single-post .entry-content a.button { color: var(--global-palette-btn, #fff); text-decoration: none; }
.single-post .entry-content a.button:hover { color: var(--global-palette-btn-hover, #fff); }
.single-post .entry-content img { border-radius: var(--passa-radius); }
/* Cites: filet d'accent, com el dato dels +15 anys de l'equip. */
.single-post .entry-content blockquote {
  border-left: 3px solid var(--passa-accent);
  padding-left: 20px;
  margin-left: 0;
  font-style: normal;
  color: var(--passa-text);
}

/* ---- Paginació ---- */
.wp-block-query-pagination a,
.navigation .page-numbers {
  font-family: var(--passa-font-body);
  border-radius: var(--passa-radius);
}
.navigation .page-numbers.current { background: var(--passa-purple); color: #fff; }

/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .loop-entry.content-bg:hover { transform: none; }
  .loop-entry.content-bg:hover .post-thumbnail img { transform: none; }
}

/* ---- Introducció editable de la pàgina del blog ----
   WordPress no mostra mai el contingut de la «Pàgina d'entrades»; el pintem
   nosaltres (v. passa_blog_intro() a functions.php) perquè l'Andrea hi pugui
   escriure una entradeta. Si la deixa buida, això no existeix. */
.passa-blog-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  font-family: var(--passa-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--passa-text-2);
  text-align: center;
}
.passa-blog-intro > :last-child { margin-bottom: 0; }

/* =====================================================================
   Secció «El nostre blog» de la portada (bloc passa/blog)

   Les targetes són germanes de les de curs: mateix radi, mateix filet,
   mateix gest en passar-hi per sobre. Aquí no hi va extracte —a la portada
   la feina és cridar l'atenció, no explicar l'article.
   ===================================================================== */
/* La secció de la portada. Ha de dir-se diferent del div que pinta el bloc
   (.passa-blog-home) o les dues classes es trepitgen. */
.passa-blog-seccio {
  width: 100%;
  background: var(--passa-bg-card);
  padding: 0;
  margin: 0 !important;
}
.passa-blog-seccio > .wp-block-group__inner-container {
  max-width: var(--passa-container);
  margin: 0 auto;
  padding: 80px 30px;
}
.passa-blog-seccio .eyebrow { margin-bottom: 10px !important; }
.passa-blog-seccio .section-title { margin-bottom: 30px !important; }
@media (max-width: 900px) { .passa-blog-seccio > .wp-block-group__inner-container { padding: 64px 30px; } }
@media (max-width: 600px) { .passa-blog-seccio > .wp-block-group__inner-container { padding: 52px 20px; } }

.passa-blog-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .passa-blog-home__grid { grid-template-columns: repeat(2, 1fr); } }
/* ⚠️ El pas a UNA columna baixa a 520px. A 600px, tres targetes apilades
   feien 1.851px de secció; amb dues per fila en fa 1.100. Les targetes de
   ~270px encara es llegeixen bé. */
@media (max-width: 520px) { .passa-blog-home__grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--passa-bg-card);
  border: 1px solid var(--passa-line);
  border-radius: var(--passa-radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--passa-purple);
  box-shadow: 0 12px 28px rgba(76, 27, 105, .08);
}

/* Relació fixa: si no, cada imatge porta la seva i la fila queda irregular. */
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media-buit { display: block; width: 100%; height: 100%; background: var(--passa-bg-soft); }

.blog-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card__body > * { margin: 0 !important; }

.blog-card__cat {
  /* Interlineat i alçada fixats: amb min-height en em i el line-height
     heretat, la targeta sense categoria quedava 5px amunt. */
  line-height: 1.6;
  min-height: 1.6em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--passa-purple);
}
.blog-card__title {
  font-family: var(--passa-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-top: 10px !important;
  /* 3 línies: amb titulars de 100 caràcters la fila es desmuntava. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__title a { color: var(--passa-ink); text-decoration: none; }
.blog-card__title a:hover { color: var(--passa-purple); }

/* La data va a baix del tot, així queda alineada entre targetes. */
.blog-card__date {
  margin-top: auto !important;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--passa-text-2);
}

.passa-blog-home__tot { margin: 28px 0 0; text-align: center; }
.passa-blog-home__tot a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--passa-purple);
  text-decoration: none;
}
.passa-blog-home__tot a:hover { color: var(--passa-purple-dark); }
.passa-blog-home__tot a span { transition: transform .2s ease; display: inline-block; }
.passa-blog-home__tot a:hover span { transform: translateX(3px); }

.passa-blog-home__empty {
  padding: 18px;
  border: 1px dashed var(--passa-line);
  border-radius: var(--passa-radius);
  color: var(--passa-text-2);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card:hover { transform: none; }
  .blog-card:hover .blog-card__media img { transform: none; }
  .passa-blog-home__tot a:hover span { transform: none; }
}