@use "tokens" as *;

// Bloque `related` (BlockRelated.vue): cabecera en rejilla (títulos + botón
// al índice a la derecha en ≥600, patrón del relateds de CDL) sobre una
// PreviewGrid compacta.
.block--related {
  .block__related-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: $space-4;

    // 600px es un umbral PROPIO de esta cabecera (sin token: no encaja en
    // $bp-sm/$bp-md) — por debajo, título + subtítulo + botón caen en TRES
    // filas (una columna); container query sobre `content` (el ancho real
    // del bloque), coherente con el resto de bloques con imagen.
    @container content (min-width: 600px) {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  .block__related-titles {
    min-width: 0; // que los títulos largos no desborden la rejilla
    display: grid;
    gap: $space-2;
  }

  .block__related-button {
    justify-self: center; // estrecho: los botones de bloque van centrados

    @container content (min-width: 600px) {
      justify-self: end;
    }
  }

  // Centrado/derecha del campo común `align`: la cabecera acompaña.
  &.block--align-center .block__related-header {
    @container content (min-width: 600px) {
      grid-template-columns: 1fr;
    }
  }

  &.block--align-center .block__related-button {
    justify-self: center;
  }
}