/**
 * Componente común: card-post
 * Tarjeta de entrada. Usado en T-01, T-06, T-13, T-17 y dentro de `related`.
 *
 * Tokens: los nombres canónicos de style.css sección 1, SIN literal de
 * respaldo. El respaldo es lo que enmascaraba el fallo del issue #60: al
 * escribir un segundo argumento en la función var(), el navegador se quedaba
 * siempre con ese literal y la paleta de marca no llegaba nunca. Si un token no
 * existe, tiene que romperse a la vista.
 *
 * @package pfuture
 * @module contenidos
 */

/* Dirección «Expediente» (docs/DISENO-EXPEDIENTE.md, «Tarjetas»): borde de un
 * píxel, sin sombra en reposo ni en hover, y el radio único de tarjeta. El
 * hover es UNA sola señal, el borde a `border-strong`: se retiraron la sombra
 * md y el aumento de la imagen, que eran dos señales más sobre lo mismo.
 * `--pf-radius-card` y no el radio `lg`: hoy valen igual, pero es el alias de
 * tarjeta y no una coincidencia de valores de la que depender. Issue #116. */
.pf-card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pf-color-surface);
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius-card);
  transition: border-color var(--pf-transition);
}

.pf-card-post:hover,
.pf-card-post:focus-within {
  border-color: var(--pf-color-border-strong);
}

/* Toda la tarjeta es clicable solo cuando el script está activo. Sin JavaScript
 * el enlace del título sigue siendo el único, que es el que tiene nombre
 * accesible. Ver la cabecera de script.js. */
[data-pf-card-post-click] .pf-card-post {
  cursor: pointer;
}

/* --- Imagen ---------------------------------------------------------------
 * El hueco queda reservado antes de que la imagen cargue: aspect-ratio aquí
 * más los atributos width y height que emite wp_get_attachment_image(). Cero
 * salto de layout. */

.pf-card-post__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pf-color-bg-alt);
}

/* La imagen no reacciona al hover: ni escala ni transición. La única señal de
 * la tarjeta es el borde, arriba. */
.pf-card-post__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Cuerpo --------------------------------------------------------------- */

.pf-card-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pf-space-2xs);
  padding: var(--pf-space-sm);
}

/* Etiqueta en versalitas según la regla de uso: 13px, peso 500, el tracking
 * común y `text-muted` (5.30:1 sobre `surface` en claro, 7.18:1 en oscuro).
 * No va en `brand`, que desde el #111 es navy y se leía como un segundo
 * titular encima del título; ni en `accent`, que no es color de texto
 * (DEC-022 de core). El enlace de dentro hereda el color y no se subraya en
 * reposo: el teal y el subrayado permanente son de la prosa, no de una
 * etiqueta de tarjeta. */
.pf-card-post__category {
  margin: 0;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-color-text-muted);
}

.pf-card-post__category-link {
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

.pf-card-post__category-link:hover {
  color: var(--pf-color-brand-strong);
  text-decoration: underline;
}

/* `--pf-color-heading` y no `ink`: es el color único de titulares y de títulos
 * de tarjeta (docs/DISENO-EXPEDIENTE.md, «Tokens nuevos»). En claro coinciden;
 * en oscuro `heading` es un punto más claro que `text` para que el título
 * siga mandando sobre el extracto. */
.pf-card-post__title {
  margin: 0;
  font-size: var(--pf-text-md);
  font-weight: var(--pf-weight-bold);
  line-height: var(--pf-leading-snug);
  color: var(--pf-color-heading);
}

.pf-card-post__link {
  color: inherit;
  text-decoration: none;
}

.pf-card-post__link:hover {
  color: var(--pf-color-brand-strong);
  text-decoration: underline;
}

.pf-card-post__excerpt {
  margin: 0;
  font-size: var(--pf-text-base);
  line-height: var(--pf-leading-normal);
  color: var(--pf-color-text-muted);

  /* Sin `line-clamp`. Lo llevaba (3 líneas aquí, 4 en `featured`, 2 en
   * `compact`) para emparejar alturas en la rejilla, y desde el #153 el PHP
   * pinta entero el extracto escrito a mano: el navegador volvía a cortarlo y a
   * pintar la elipsis que el issue mandaba quitar, medido con
   * `scrollHeight > clientHeight` en 4066 y 2066 a 390 px y en `/blog/guias/`
   * a 1280 (#166). El texto ya viene acotado de origen —dos frases de hasta 25
   * palabras, o los 160 caracteres del extracto automático—, así que el tope
   * que hacía el clamp lo hace el propio texto. Ver DEC-060. */
}

.pf-card-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  margin-top: auto;
  padding-top: var(--pf-space-2xs);
  font-size: var(--pf-text-sm);
  color: var(--pf-color-text-muted);
}

/* --- Variante destacada ---------------------------------------------------
 * T-06, entrada marcada con la meta `featured`. Es la tarjeta grande de la
 * cabecera del índice, así que su imagen es candidata a LCP: la plantilla la
 * pide con `eager => true`.
 *
 * El borde en `brand` es navy desde el #111 y la regla de uso lo pide así:
 * «la variante destacada usa borde --pf-color-brand, no teal». */

.pf-card-post--featured {
  border-color: var(--pf-color-brand);
}

.pf-card-post--featured .pf-card-post__body {
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md);
}

.pf-card-post--featured .pf-card-post__title {
  font-size: var(--pf-text-xl);
  line-height: var(--pf-leading-tight);
}

.pf-card-post--featured .pf-card-post__excerpt {
  font-size: var(--pf-text-md);
}

/* --- Variante compacta ----------------------------------------------------
 * Listados laterales y bloque de relacionados: menos aire y el extracto a dos
 * líneas. Mismo radio y mismo hover que la tarjeta normal: las reglas que
 * anulaban aquí la sombra y el `scale` de la imagen se fueron con ellos. */

.pf-card-post--compact {
  border-radius: var(--pf-radius-card);
}

.pf-card-post--compact .pf-card-post__media {
  aspect-ratio: 4 / 3;
}

.pf-card-post--compact .pf-card-post__body {
  padding: var(--pf-space-xs);
}

.pf-card-post--compact .pf-card-post__title {
  font-size: var(--pf-text-base);
}

.pf-card-post--compact .pf-card-post__excerpt {
  font-size: var(--pf-text-sm);
}

/**
 * Rejilla del envoltorio [custom_posts_grid], en
 * inc/services/helpers/shortcodes-post.php. Vive aquí porque esta hoja es la
 * que el shortcode encola siempre como portadora de la rejilla.
 *
 * Las columnas se resuelven solas con `auto-fill`: desde que el envoltorio
 * recortó su superficie al único atributo real, `cpt` (DEC-026), ya no existe
 * el atributo `columns` que fijaba el número, y la rejilla puede recibir una
 * mezcla de tarjetas de cuatro tipos distintos.
 */
.pf-posts-grid {
  display: grid;
  gap: var(--pf-space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* 48rem = 768px = --pf-bp-md. Literal porque una media query no resuelve
 * var(): es la única excepción a la regla de tokens de esta hoja. */
@media (min-width: 48rem) {
  .pf-card-post--featured {
    flex-direction: row;
    align-items: stretch;
  }

  .pf-card-post--featured .pf-card-post__media {
    flex: 0 0 48%;
    aspect-ratio: auto;
  }

  .pf-card-post--featured .pf-card-post__body {
    justify-content: center;
    padding: var(--pf-space-lg);
  }
}

/* Distintivo de guía pilar, al lado de la categoría. El dibujo lo pinta
   `common/pictograma/` en línea y hereda el color del párrafo, que en la
   dirección «Expediente» es `text-muted`; así el distintivo no compite con el
   título ni añade un color nuevo a la tarjeta. `vertical-align` en vez de flex
   para no romper el salto de línea del nombre de la categoría cuando es largo. */
.pf-card-post__category .pf-card-post__guia {
  /* 24 px, que es lo que fija la propuesta visual para este icono (T-01 de
     PROPUESTA-VISUAL-2026-09-15.md §3.2) y la rejilla de dibujo de la
     convención. `common/pictograma/` ya lo declara así en su variante `sm`,
     pero con `display: block`: aquí va DENTRO de una línea de texto, así que
     vuelve a `inline-block` y se centra en la línea de versalitas de 13 px con
     `vertical-align: middle`. En la tanda 14 se dejó a 1,15 em (14,94 px) y la
     revisión lo marcó como desviación sin anotar; se cumple la propuesta.
     El selector lleva DOS clases a propósito: la hoja del pictograma se encola
     después de la de la tarjeta, así que con una sola clase (0,1,0) ganaba
     `.pf-pictograma` por orden de aparición. */
  display: inline-block;
  inline-size: 24px;
  block-size: 24px;
  margin-inline-end: 0.35em;
  vertical-align: middle;
  color: inherit;
}