/* ============================================================
   JJ SUPPLIES · categoria.css
   Plantilla de página de sección (ferretería, caballos, …).
   Se carga sólo en las páginas de categoría.
   ============================================================ */

/* ---- Hero de categoría ---- */
.jj-cathero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(420px, 62vh, 620px); background: var(--pine-black);
}
.jj-cathero > .jj-photo { position: absolute; inset: 0; height: auto; }
.jj-cathero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Suficiente para que el titular cream se lea, sin apagar la foto */
  background:
    linear-gradient(180deg, rgba(18,22,17,0.60) 0%, rgba(18,22,17,0.18) 32%, rgba(18,22,17,0.70) 76%, var(--pine-black) 100%),
    linear-gradient(90deg, rgba(18,22,17,0.50) 0%, rgba(18,22,17,0.08) 62%, transparent 100%);
}
.jj-cathero-inner { position: relative; padding-top: 140px; padding-bottom: clamp(40px, 6vh, 72px); }
.jj-cathero-title {
  font-family: var(--font-display); font-weight: 400; color: var(--arteaga-cream);
  font-size: clamp(38px, 6vw, 74px); line-height: 1.04; margin: var(--space-4) 0 0;
  text-shadow: 0 2px 30px rgba(10,13,9,0.5); text-wrap: balance;
}
.jj-cathero-lead {
  max-width: 54ch; margin: var(--space-5) 0 0; color: rgba(243,236,221,0.86);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; text-wrap: pretty;
}
.jj-cathero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* ---- Entrada del hero ----
   El titular se arma palabra por palabra saliendo del desenfoque; migas,
   bajada y CTA suben detrás. Todo por posición, cero estilos en línea. */
.jj-cathero-title span { display: inline-block; }
.js .jj-cathero-title span { opacity: 0; }
body.jj-ready .jj-cathero-title span {
  animation: jjWordIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body.jj-ready .jj-cathero-title span:nth-child(1)  { animation-delay: 0.12s; }
body.jj-ready .jj-cathero-title span:nth-child(2)  { animation-delay: 0.165s; }
body.jj-ready .jj-cathero-title span:nth-child(3)  { animation-delay: 0.21s; }
body.jj-ready .jj-cathero-title span:nth-child(4)  { animation-delay: 0.255s; }
body.jj-ready .jj-cathero-title span:nth-child(5)  { animation-delay: 0.30s; }
body.jj-ready .jj-cathero-title span:nth-child(6)  { animation-delay: 0.345s; }
body.jj-ready .jj-cathero-title span:nth-child(7)  { animation-delay: 0.39s; }
body.jj-ready .jj-cathero-title span:nth-child(8)  { animation-delay: 0.435s; }
body.jj-ready .jj-cathero-title span:nth-child(9)  { animation-delay: 0.48s; }
body.jj-ready .jj-cathero-title span:nth-child(10) { animation-delay: 0.525s; }
body.jj-ready .jj-cathero-title span:nth-child(11) { animation-delay: 0.57s; }
body.jj-ready .jj-cathero-title span:nth-child(n+12) { animation-delay: 0.615s; }

body.jj-ready .jj-cathero .jj-crumbs { animation-delay: 0.04s; }
body.jj-ready .jj-cathero-lead { animation-delay: 0.46s; }
body.jj-ready .jj-cathero-cta { animation-delay: 0.58s; }

/* ---- Migas de pan ---- */
.jj-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(243,236,221,0.6); margin: 0; padding: 0; list-style: none;
}
.jj-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.jj-crumbs li + li::before { content: '·'; color: var(--bear-orange); }
.jj-crumbs a { color: rgba(243,236,221,0.6); font-weight: 600; }
.jj-crumbs a:hover { color: var(--bear-orange); }
.jj-crumbs [aria-current='page'] { color: var(--arteaga-cream); font-weight: 600; }

/* ---- Retícula de subsecciones ---- */
.jj-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: clamp(36px, 4.5vw, 60px); }
.jj-sub {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.jj-sub:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.jj-sub-media { position: relative; aspect-ratio: 4 / 3; flex: none; }
.jj-sub-media .jj-photo { position: absolute; inset: 0; height: auto; }
.jj-sub-media .jj-photo-img { transition: transform 600ms var(--ease-standard); }
.jj-sub:hover .jj-sub-media .jj-photo-img { transform: scale(1.045); }
.jj-sub-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.jj-sub-title { font-size: 17.5px; font-weight: 700; color: var(--text-heading); margin: 0 0 6px; line-height: 1.3; }
.jj-sub-desc { font-size: 14.5px; line-height: 1.62; color: var(--text-muted); margin: 0 0 var(--space-4); }
.jj-sub-cta { margin-top: auto; font-size: 13.5px; }

/* ---- Franja de ayuda ---- */
.jj-cathelp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-6); margin-top: clamp(36px, 4vw, 56px);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-sunken); border: var(--border-hairline);
}
.jj-cathelp p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); max-width: 60ch; }
.jj-cathelp strong { color: var(--text-heading); }

/* ---- Otras secciones (pie de la categoría) ---- */
.jj-siblings-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.jj-siblings-list {
  list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.jj-sibling {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-radius: var(--radius-md);
  background: rgba(243,236,221,0.05); border: 1px solid rgba(243,236,221,0.12);
  color: var(--arteaga-cream); font-size: 15px; font-weight: 600; line-height: 1.3;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.jj-sibling:hover { background: rgba(243,236,221,0.1); border-color: rgba(243,236,221,0.3); color: var(--arteaga-cream); }
.jj-sibling svg { flex: none; color: var(--bear-orange); transition: transform var(--dur-base) var(--ease-standard); }
.jj-sibling:hover svg { transform: translateX(4px); }
.jj-sibling.is-current { background: var(--bear-orange); border-color: var(--bear-orange); color: var(--pine-black); }
.jj-sibling.is-current svg { color: var(--pine-black); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .jj-subs { grid-template-columns: 1fr 1fr; }
  .jj-siblings-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .jj-cathero { min-height: clamp(380px, 58vh, 520px); }
  .jj-cathero-inner { padding-top: 118px; padding-bottom: 40px; }
  .jj-cathero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .jj-cathero-cta > * { justify-content: center; width: 100%; }
  .jj-subs { grid-template-columns: 1fr; gap: 14px; }
  .jj-sub-media { aspect-ratio: 2 / 1; }
  .jj-cathelp { padding: var(--space-5); }
  .jj-siblings-list { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .jj-sub:active { transform: translateY(-1px) scale(0.995); box-shadow: var(--shadow-card); }
}