/* assets/css/blog-portada.css — el bloque «Del blog» de la portada del sitio.
 *
 * Hoja aparte, y pequeña, por lo mismo que la del módulo de e-books: este
 * bloque puede no llegar a pintarse nunca (si no hay artículos publicados, el
 * módulo no monta), y meter su estilo dentro de la hoja de la portada haría
 * que todo el mundo se descargara reglas para algo que quizá no existe.
 *
 * No reutiliza las clases `bl-*` de /blog a propósito: allí las tarjetas viven
 * sobre crema y aquí sobre el fondo de la portada, con otra tipografía de
 * titular y otro ritmo. Compartir clases obligaría a una a ceder.
 */

.blog-portada {
  padding: var(--sp-12, 96px) var(--sp-3, 24px);
}
.blog-portada[hidden] { display: none; }

.bp-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2, 16px) var(--sp-4, 32px);
  margin-bottom: var(--sp-5, 40px);
}
.bp-kicker {
  width: 100%;
  margin: 0;
  font-size: var(--texto-etiqueta, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-coral, #FF3B2F);
}
.bp-cabecera h2 {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--texto-h2, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-brand-blue, #002D55);
}

.bp-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3, 24px);
}

.bp-carta a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.bp-carta__foto {
  width: 100%;
  /* EL `height: auto` NO ES DECORATIVO. El `height` del atributo HTML es una
     pista de presentación y la hoja del navegador lo traduce a `height: 336px`,
     que MANDA sobre `aspect-ratio`. Sin esta línea el marco sale de 366x336 en
     vez de 366x192, y `object-fit: cover` recorta la portada por los lados
     comiéndose justo el titular. Es el mismo fallo que ya se pagó una vez en
     la ficha de los e-books. */
  height: auto;
  /* La proporción de la imagen de verdad (1200x630): con otra, `cover`
     recortaría el titular que llevan escrito las portadas del blog. */
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-medium, 16px);
  display: block;
  margin-bottom: var(--sp-2, 16px);
  background: var(--color-brand-mist, #E8ECEF);
  transition: transform var(--dur-media, 220ms);
}
.bp-carta a:hover .bp-carta__foto { transform: translateY(-3px); }
.bp-carta h3 {
  margin: 0 0 6px;
  font-size: var(--texto-h3, 1.5rem);
  line-height: 1.2;
  color: var(--color-brand-blue, #002D55);
}
.bp-carta p {
  margin: 0 0 6px;
  color: var(--color-mudo, #4E617A);
  line-height: 1.55;
}
.bp-carta__pie {
  font-size: var(--texto-etiqueta, 0.8125rem);
  color: var(--color-mudo, #4E617A);
  opacity: 0.85;
}

@media (max-width: 1000px) {
  .bp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-rejilla .bp-carta:last-child { display: none; }
}
@media (max-width: 640px) {
  .blog-portada { padding: var(--sp-8, 64px) var(--sp-2, 16px); }
  .bp-rejilla { grid-template-columns: minmax(0, 1fr); }
  .bp-rejilla .bp-carta:last-child { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-carta__foto, .bp-carta a:hover .bp-carta__foto { transition: none; transform: none; }
}