/* ── Piel de TEIMAS para lo que pintan los módulos ─────────────
   head.php carga este fichero DESPUÉS del CSSHook, así que gana por orden a
   los estilos que traen las plantillas de los módulos (portada de homepage
   con sus posts y banners) sin tener que copiarlas en el theme. La forma
   del grid (columnas, alturas, variantes foto-izq/overlay…) sigue siendo la
   del editor de la portada; aquí solo cambia el aspecto. */

/* Contenedor de la portada: mismo ancho y márgenes que <inner-wrap>. */
.container.main-inner {
  display: block;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter) 0;
}

/* ── Bloques de post (grid y listado inferior) ── */
.hp-block {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: none;
  transition:
    transform  var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.hp-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px oklch(from var(--color-ink) l c h / 0.18);
}
.hp-block:hover::before { background: transparent; }
.hp-block-body { margin: var(--space-md) var(--space-lg) var(--space-lg); }
/* Post sin foto: el enlace de la foto queda vacío y, con el flex-grow que le
   da el módulo, empujaba el texto al fondo de la tarjeta. */
.hp-block > a:first-child:not(:has(img)) { flex-grow: 0; }
.hp-list .hp-block-body { margin: var(--space-md) var(--space-lg) var(--space-lg); }
.hp-block-body .hp-block-date {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}
.hp-block-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
}
.hp-block-summary {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-2);
}
/* Overlay (foto de fondo): el texto sigue en blanco sobre la foto. */
[data-vm="overlay"] .hp-block-body h2,
[data-vt="overlay"] .hp-block-body h2,
[data-vd="overlay"] .hp-block-body h2 { color: var(--color-paper); }

/* ── Banners: sin borde ni hover de tarjeta ── */
.hp-banner-block,
.hp-banner-block:hover {
  border: none;
  background: transparent;
  transform: none;
  box-shadow: none;
}
.hp-banner-img { border-radius: var(--radius-md); }
.hp-banner-placeholder {
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
}

/* ── Separador «También…» antes del listado inferior: como los rótulos de
   sección de TEIMAS ── */
.hp-list > hr,
.main-inner > hr {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-top: var(--space-2xl);
}
.hp-list { padding-bottom: 0; }

/* «Ver más»: botón de contorno de TEIMAS. */
.hp-list-more { margin-block: var(--space-xl) 0; }
.hp-list-more a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02rem;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  transition:
    color        var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.hp-list-more a:hover { border-color: var(--color-ink); color: var(--color-ink); }