/* ════════════════════════════════════════════════════════════════
   SPARTAN · PAGINACIÓN LATERAL "4 EN 4"
   Cada sección (.arc-grid, etc.) muestra solo un lote de entradas.
   Si hay más, aparece un botón lateral que ocupa TODA la altura del
   lote visible; al pulsarlo, desliza horizontalmente y carga el
   siguiente lote de N entradas. El número de orden de cada entrada
   (inmutable, ver functions.php) aparece con una animación de
   escala: de minúsculo a grande.
   ════════════════════════════════════════════════════════════════ */

/* Envoltorio que JS crea automáticamente alrededor de cada
   [data-paginate]: coloca la rejilla original a la izquierda y el
   botón lateral a la derecha, con la misma altura que el lote visible. */
.sp-pg-shell {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.sp-pg-track {
  flex: 1;
  min-width: 0;
  overflow: hidden; /* recorta el desplazamiento horizontal del lote entrante */
}

/* Entradas ocultas: fuera del flujo, no cuentan para la altura */
.sp-pg-hidden { display: none !important; }

/* Lote que entra: desliza desde la derecha hacia su posición */
@keyframes sppgSlideIn {
  0%   { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0); }
}
.sp-pg-enter {
  animation: sppgSlideIn .45s var(--spartan-ease-soft, cubic-bezier(.25,.8,.25,1)) both;
}
.sp-pg-enter:nth-child(2)  { animation-delay: .04s; }
.sp-pg-enter:nth-child(3)  { animation-delay: .08s; }
.sp-pg-enter:nth-child(4)  { animation-delay: .12s; }
.sp-pg-enter:nth-child(5)  { animation-delay: .16s; }
.sp-pg-enter:nth-child(6)  { animation-delay: .20s; }
.sp-pg-enter:nth-child(7)  { animation-delay: .24s; }
.sp-pg-enter:nth-child(8)  { animation-delay: .28s; }

/* Botón lateral: barra vertical, altura = 100% del lote visible */
.sp-pg-btn {
  flex-shrink: 0;
  width: 40px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--arc-accent, var(--spartan-gold));
  border-left: none;
  color: var(--arc-accent, var(--spartan-gold));
  cursor: pointer;
  padding: 0;
  transition: background .25s, width .25s;
  position: relative;
}
.sp-pg-btn:hover { background: rgba(var(--arc-accent-rgb, 247,182,20), 0.12); width: 46px; }
.sp-pg-btn:disabled {
  opacity: .3; cursor: default; pointer-events: none;
}
.sp-pg-btn-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-pg-btn-label::after { content: '▸▸'; letter-spacing: 1px; }

@media (max-width: 600px) {
  .sp-pg-btn { width: 32px; }
  .sp-pg-btn-label { font-size: 8px; }
}

/* ── Número de orden de publicación (fijo, inmutable) ──────────────
   Insignia en la esquina superior derecha de cada tarjeta. Aparece
   de la nada: de escala minúscula a grande, en ambos sentidos de
   scroll (igual filosofía que .assemble). */
.spartan-order-num {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--arc-accent, var(--spartan-gold));
  text-shadow: 0 0 12px rgba(var(--arc-accent-rgb, 247,182,20), 0.55);
  pointer-events: none;
  /* SIEMPRE visible, con o sin JS: el número nunca depende de que el
     script llegue a ejecutarse ni de que un IntersectionObserver lo
     dispare a tiempo. La animación (más abajo) es solo un extra visual
     que parte YA de un estado visible, nunca de opacity:0. */
  opacity: 1;
  transform: none;
}

/* Si JS confirma que puede animarlo, solo añade un pequeño efecto de
   entrada (nunca lo oculta del todo, para que jamás quede invisible
   si el disparador de scroll falla o se retrasa). */
html.js .spartan-order-num {
  opacity: .55;
  transform: translateX(-18px) scale(.75);
  transition: opacity .5s cubic-bezier(.34,1.56,.64,1),
              transform .55s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
}
html.js .spartan-order-num.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

@media (max-width: 600px) {
  .spartan-order-num { font-size: 28px; opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spartan-order-num { opacity: 1 !important; transform: scale(1) !important; transition: none !important; }
  .sp-pg-enter { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── CARRUSEL DE 4 EN 4 CON FLECHAS ← contador → (estilo página Arsenal) ── */
.sp-pg-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 26px 24px 8px;
}
.sp-pg-nav {
  width: 48px; height: 48px;
  border: 1px solid var(--border-gold, #8a6d1f);
  background: rgba(247, 182, 20, .05);
  color: var(--spartan-gold, #f7b614);
  font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s, color .2s;
}
.sp-pg-nav:hover:not(:disabled) { background: var(--spartan-gold, #f7b614); color: #0a0a0a; transform: translateY(-2px); }
.sp-pg-nav:disabled { opacity: .28; cursor: default; }
.sp-pg-counter {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 2px;
  color: var(--text-muted, #8a8a8a);
  min-width: 130px; text-align: center;
}
/* Con el carrusel de 4-en-4 activo, la paginación numérica de WordPress sobra. */
.post-type-archive-informe .arc-pagination,
.post-type-archive-arsenal .arc-pagination { display: none; }