/* ===========================================================================
   Consejos

   El listado, el archivo de categoría y la entrada. Se encola sola: el `if
   ( is_home() || is_category() || is_singular( 'post' ) )` de inc/enqueue.php
   ya declaraba la vista y el bucle se saltaba en silencio el archivo que no
   existía.

   Va después de components.css por dependencia declarada, así que aquí se
   afina sin pelear especificidad.
   ======================================================================== */

.paracas-consejos {
  padding-block-end: var(--seccion-y);
}

.paracas-consejos__chips {
  margin-block-start: var(--space-5);
}

/* ---------------------------------------------------------------------------
   La rejilla

   Tres columnas como la de productos, pero con su propia clase: una card de
   consejo lleva extracto y fecha y respira distinto que un envase. Compartir
   la clase habría atado dos cosas que van a divergir.
--------------------------------------------------------------------------- */
.paracas-rejilla--consejos {
  gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------------------------
   La card
--------------------------------------------------------------------------- */
.paracas-consejo {
  display: grid;
  min-inline-size: 0;
}

.paracas-consejo__enlace {
  display: grid;
  grid-template-rows: auto 1fr;
  block-size: 100%;
  border-radius: var(--radio-l);
  background: var(--color-fondo-card);
  color: inherit;
  text-decoration: none;
  overflow: clip;
  transition: box-shadow var(--duracion) var(--curva);
}

.paracas-consejo__enlace:hover {
  box-shadow: var(--sombra-alta);
}

/*
 * EL ZOOM YA ESTABA PAGADO Y NADIE LO DISPARABA.
 *
 * .paracas-consejo__art lleva la clase .paracas-foto, así que su <img> hereda
 * de components.css la `transition: transform 320ms` que usan todas las demás
 * cards del tema. Faltaba la única línea que la activa, y por eso esta era la
 * única card del sitio que al pasar el ratón solo daba sombra.
 */
.paracas-consejo__enlace:hover .paracas-consejo__art > img {
  transform: scale(1.04);
}

/*
 * LA FOTO VA FUERA DEL FLUJO, y esto es la lección cara del proyecto hermano:
 * `block-size: 100%` sobre una imagen cuyo envoltorio tiene altura indefinida
 * resuelve a `auto`, la imagen se dibuja a su tamaño natural y revienta la
 * maqueta EN SILENCIO, sin un error en consola. Y `aspect-ratio` en el
 * envoltorio NO basta: cede ante el tamaño mínimo automático del contenido.
 *
 * Con la altura fija y la imagen en `object-fit: cover` no hay circularidad
 * que resolver: la caja manda y la foto se recorta.
 */
.paracas-consejo__art {
  display: block;
  block-size: 200px;
}

/* La chapa de vídeo. Sale del mismo campo que incrusta el reproductor, así que
   no puede prometer un vídeo que no esté. */
.paracas-consejo__chapa {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-contenido);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: 4px var(--space-3) 4px var(--space-2);
  border-radius: var(--radio-pill);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-consejo__chapa .paracas-icono {
  inline-size: 16px;
  block-size: 16px;
}

.paracas-consejo__cuerpo {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.paracas-consejo__titulo {
  color: var(--color-titular);
  font-size: var(--t-h3);
  font-weight: var(--peso-titular);
  line-height: var(--leading-titular);
  letter-spacing: var(--tracking-titular);
}

.paracas-consejo__desc {
  color: var(--color-texto);
  line-height: var(--leading-body);

  /*
   * TRES LÍNEAS Y TOPE. Un extracto que se corta por `overflow` no da ningún
   * error, así que el tope va aquí declarado y no confiado a que los textos
   * vengan cortos: sin él, una entrada con extracto largo estira su card y
   * descuadra la fila entera.
   */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.paracas-consejo__pie {
  margin-block-start: var(--space-2);
  color: var(--color-texto-suave);
  font-size: var(--t-small);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   La entrada
--------------------------------------------------------------------------- */
.paracas-consejo__meta {
  margin-block-start: var(--space-3);
  color: var(--color-texto-suave);
  font-size: var(--t-small);
  font-weight: 700;
}

.paracas-consejo__video,
.paracas-consejo__portada {
  margin-block-start: var(--space-6);
  border-radius: var(--radio-l);
  overflow: clip;
}

/*
 * La portada solo aparece cuando NO hay vídeo, así que las dos comparten sitio
 * y ninguna necesita saber de la otra. Por eso lleva LA MISMA PROPORCIÓN que el
 * reproductor: la entrada tiene el mismo ritmo lleve vídeo o nota, y el cuerpo
 * empieza a la misma altura en las dos.
 *
 * Con `block-size: auto` la foto se dibujaba a su altura natural —más de 750 px
 * a ancho de contenedor— y se comía la pantalla entera antes del primer
 * párrafo. El envoltorio es .paracas-foto, cuyo img va con object-fit: cover,
 * así que recorta en vez de deformar.
 */
.paracas-consejo__portada {
  aspect-ratio: 16 / 9;
}

.paracas-consejo__pie-cats {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-borde);
}

/* ---------------------------------------------------------------------------
   Paginación
--------------------------------------------------------------------------- */
.paracas-consejos .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-8);
}

.paracas-consejos .page-numbers {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--tactil);
  min-block-size: var(--tactil);
  padding-inline: var(--space-3);
  border-radius: var(--radio-pill);
  color: var(--color-enlace);
  font-weight: 700;
  text-decoration: none;
}

.paracas-consejos .page-numbers.current {
  background: var(--color-fondo-marca);
  color: var(--color-texto-invertido);
}

.paracas-consejos .page-numbers:hover:not(.current) {
  background: var(--color-fondo-card);
}

/* ---------------------------------------------------------------------------
   Reflow. Los breakpoints del tema: 1200 / 900 / 640.
--------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .paracas-rejilla--consejos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .paracas-rejilla--consejos { grid-template-columns: 1fr; }
  .paracas-consejo__art { block-size: 180px; }
}