@use "tokens" as *;

// Rejilla de previews del catálogo público (PreviewGrid.vue). Mobile-first:
// 1 columna → 2 → 3 → 4 (patrón CDL). Media queries y no container queries:
// también se monta fuera de las páginas del CRM (índices, singles).
.preview-grid {
  display: grid;
  gap: $space-5;

  &__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: $space-4;

    @media (min-width: $bp-sm) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: $bp-md) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (min-width: $bp-lg) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  &--loading &__grid {
    opacity: 0.55;
    pointer-events: none;
  }

  // Hueco de un ítem: la tarjeta + acciones opcionales (slot actions)
  // superpuestas en la esquina.
  &__slot {
    position: relative;
    min-width: 0;
  }

  // Tarjeta (enlace o div): al pasar, SOLO un glow sutil del color de
  // acento por los cuatro lados (sin desplazarse). El foco por teclado
  // conserva su halo de acento.
  &__item {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: $radius-md;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }

  a.preview-grid__item:hover {
    box-shadow: 0 0 12px 2px color-mix(in srgb, $accent-500 40%, transparent);
  }

  a.preview-grid__item:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, $accent-500 55%, transparent), $shadow-md;
    outline: none;
  }

  // El PNG de la preview marca su propia proporción; el fallback (sin PNG
  // generado) reserva proporción de carta (~63×88 mm ⇒ 5/7) con el nombre.
  &__image {
    display: block;
    width: 100%;
    height: auto;
  }

  &__fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 7;
    padding: $space-3;
    text-align: center;
    font-weight: $k-fw-semibold;
    color: $text-2;
    background: color-mix(in srgb, $surface 65%, transparent);
    border: 1px dashed $border-strong;
    border-radius: $radius-md;
  }

  &__empty {
    margin: 0;
    padding: $space-6 0;
    text-align: center;
    color: $text-2;
  }

  // Paginación: prev / "x de y" / next.
  &__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $space-3;
  }

  &__page-btn {
    padding: $space-2 $space-4;
    font-size: $fs-14;
    font-weight: $k-fw-semibold;
    color: $text-1;
    background: color-mix(in srgb, $surface 65%, transparent);
    border: 1px solid $border;
    border-radius: $radius-md;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;

    &:hover:not(:disabled) {
      border-color: $accent-500;
      color: $accent-500;
    }

    &:disabled {
      opacity: $disabled-opacity;
      cursor: default;
    }
  }

  &__page-state {
    color: $text-2;
    font-size: $fs-14;
    white-space: nowrap;
  }

  // Variante compacta (bloque related): tarjetas y huecos más contenidos.
  // El bloque trae SIEMPRE 6 ítems y es el grid quien decide cuántos enseña
  // para que la rejilla salga siempre completa, sin filas cojas:
  // 4 en 2×2 (estrecho) → 6 en 3×2 (md) → 4 en 4×1 (lg) → 5 en 5×1 (xl).
  &--compact &__grid {
    gap: $space-3;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    @media (min-width: $bp-md) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (min-width: $bp-lg) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (min-width: $bp-xl) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  // Qué huecos se ven en cada tramo (los demás, ocultos): 4 → 6 → 4 → 5.
  &--compact &__slot:nth-child(n + 5) {
    display: none;

    @media (min-width: $bp-md) {
      display: block;
    }

    @media (min-width: $bp-lg) {
      display: none;
    }
  }

  &--compact &__slot:nth-child(5) {
    @media (min-width: $bp-xl) {
      display: block;
    }
  }

  &--compact &__fallback {
    font-size: $fs-14;
  }
}