/**
 * Componente común: related
 * Bloque genérico de contenidos relacionados. Usado en T-07 a T-10.
 *
 * Tokens: los nombres canónicos de style.css sección 1, SIN literal de
 * respaldo. Ver la cabecera de common/card-post/styles.css y el issue #60.
 *
 * Las tarjetas de dentro las estila su propio módulo. Aquí solo el bloque:
 * título, rejilla y hueco.
 *
 * @package pfuture
 * @module contenidos
 */

/* El bloque se acota al contenedor de marca y se centra.
 *
 * Es inerte allí donde la plantilla ya lo envuelve en un contenedor más
 * estrecho —medido: en T-08 el padre es `.pf-single-servicio__content`, 760px—,
 * y evita que el bloque se vaya al ancho de la ventana cuando cuelga
 * directamente de un `<main>` a sangre, que es el caso de T-09. Ver issue #70.
 *
 * NO se usa `width: min(var(--pf-container), 100% - var(--pf-gutter))`, que es
 * el idiom de T-09: ese canalón sí encogería el bloque respecto a sus hermanos
 * en las plantillas que ya lo tienen acotado. */
.pf-related {
  max-width: var(--pf-container);
  margin-block: var(--pf-space-xl);
  margin-inline: auto;
}

/* `--pf-color-heading`, el color único de titulares de la dirección
 * «Expediente» (issue #116). En claro coincide con `ink`; en oscuro es un punto
 * más claro que el texto. */
.pf-related__title {
  margin: 0 0 var(--pf-space-md);
  font-size: var(--pf-text-xl);
  line-height: var(--pf-leading-tight);
  color: var(--pf-color-heading);
}

.pf-related__grid {
  display: grid;
  gap: var(--pf-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

.pf-related__item {
  display: flex;
  flex-direction: column;
}

/* La tarjeta que va dentro ocupa el alto completo del item, para que una fila
 * de relacionados quede a la misma altura sin que el bloque sepa nada de la
 * maqueta interna de la tarjeta. */
.pf-related__item > * {
  flex: 1;
}

/* El enlace de degradación es una tarjeta mínima, así que lleva el radio de
 * tarjeta. El hover ya era una sola señal —borde a `border-strong` y
 * subrayado— y se queda. */
.pf-related__fallback-link {
  display: block;
  padding: var(--pf-space-xs);
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius-card);
  color: var(--pf-color-link);
  text-decoration: none;
}

.pf-related__fallback-link:hover {
  border-color: var(--pf-color-border-strong);
  color: var(--pf-color-link-hover);
  text-decoration: underline;
}

/* Columnas según el número real de items: con dos relacionados no se pinta una
 * fila de tres con un hueco al final. El modificador lo escribe el component.php
 * a partir de count($items), acotado a 3.
 *
 * 48rem = 768px = --pf-bp-md. Literal porque una media query no resuelve var(). */
@media (min-width: 48rem) {
  /* Con UN solo relacionado la pista es la misma que tendría si fueran dos.
   *
   * Sin esta regla el modificador `--cols-1` se quedaba en la columna única del
   * caso móvil y la tarjeta se estiraba a todo el ancho: medido en
   * /portafolio/cesclam-web/, 1280px de tarjeta y 719px de imagen, porque
   * `card-servicio` impone `aspect-ratio: 16 / 9`. Issue #70.
   *
   * A un tercio quedaría perdida en la fila; a la mitad ocupa exactamente lo
   * mismo que una tarjeta del caso de dos, que es «acotada igual que las demás».
   * El sustraendo es el `gap` de la rejilla. */
  .pf-related__grid--cols-1 {
    grid-template-columns: minmax(0, calc((100% - var(--pf-space-md)) / 2));
  }

  .pf-related__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-related__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}