/* ============================================================
   WA Mining Index — interlinks.css  (Fase 2+ del rediseño visual)
   ------------------------------------------------------------
   Capa de PRESENTACIÓN de los bloques de ENLAZADO INTERNO (SEO).
   Contrato visual: Descripciones IA/HANDOFF_interlinks_render.md
   (frente seo → frente redesign). El PHP de servido (frente seo)
   EMITE las clases .wmi-il-*; acá SOLO se estilan. NO se toca PHP.

   Bloques (las 5 raíces del §3 del handoff):
     · .wmi-il-parents        — combo: breadcrumb "up" a servicio + mina
     · .wmi-il-related        — combo: Related Services at this Mine
     · .wmi-il-nearby         — combo: Same Service at Nearby Mines
     · .wmi-il-mine-services  — mina:  B2B Services (grid .wmi-il-grid > .wmi-il-card)
     · .wmi-il-service-mines  — hub:   Active at these Mines (lista .wmi-il-list)
   Eyebrow común: .wmi-il-eyebrow

   REGLAS DURAS SEO (handoff §2) que este CSS respeta:
     · Links server-rendered <a href> SIEMPRE visibles: PROHIBIDO
       display:none / visibility:hidden / height:0 (degradan el crawl).
     · Bloques anexados DESPUÉS del contenido, SIN layout shift sobre el cuerpo
       (solo separadores propios; nada reposiciona el contenido de arriba).
     · Visibilidad sin JS (hover/animación sí; mostrar/ocultar no).
     · Scope body.wmi: fuera de él, HTML semántico sin estilar pero FUNCIONAL
       (degradación elegante — ninguna regla aplica sin body.wmi).

   Requiere theme.css (tokens). Prefijo .wmi-il-*. Breakpoint móvil: 920px
   (alineado con detail.css; el combo carga sobre hub.css @900px — diferencia
   inmaterial). CARGA (la cablea el frente seo, NO redesign): agregar
   '/css/interlinks.css' al $wmi_page_css de mine.php (mina), mine_service.php
   (combo) y service.php (hub de servicio) al inyectar el render.
   ============================================================ */

/* ------------------------------------------------ 0 · BASE COMPARTIDA
   Separación del cuerpo: hairline superior + ritmo vertical. Sin layout
   shift (solo afecta al bloque anexado, nunca al contenido de arriba). */
body.wmi .wmi-il-parents,
body.wmi .wmi-il-related,
body.wmi .wmi-il-nearby,
body.wmi .wmi-il-mine-services,
body.wmi .wmi-il-service-mines {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-2);
}

/* Eyebrow mono (patrón de label del sistema) — handoff §5 */
body.wmi .wmi-il-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Headings de sección — display uppercase, alineado con .wmi-dt-panelhead h2 */
body.wmi .wmi-il-related > h3,
body.wmi .wmi-il-nearby > h3,
body.wmi .wmi-il-mine-services > h2,
body.wmi .wmi-il-service-mines > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
}
body.wmi .wmi-il-mine-services > h2,
body.wmi .wmi-il-service-mines > h2 { font-size: 24px; }
body.wmi .wmi-il-related > h3,
body.wmi .wmi-il-nearby > h3 { font-size: 16px; }

/* Lead (intro) — scoped a los bloques il; NO toca un .lead global */
body.wmi .wmi-il-mine-services > .lead,
body.wmi .wmi-il-service-mines > .lead {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ------------------------------------------------ 1 · PARENTS (combo)
   Links "up" a servicio + mina. Mono apagado → acento en hover. El texto
   ya trae el glifo ← (lo emite el PHP de seo); acá no se inyecta nada. */
body.wmi .wmi-il-parents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
body.wmi .wmi-il-parents > a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  transition: color .14s ease;
}
body.wmi .wmi-il-parents > a:hover,
body.wmi .wmi-il-parents > a:focus-visible { color: var(--accent); outline: none; }

/* ------------------------------------------------ 2 · LISTAS TERMINAL
   Combo (related / nearby) + hub (service-mines). Filas estilo "terminal
   table": zebra --zebra, divisor --border, hover --hover-row → acento
   (handoff §5). Anchor text de longitud variable (1–2 líneas). */
body.wmi .wmi-il-related ul,
body.wmi .wmi-il-nearby ul,
body.wmi .wmi-il-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--border-2);
}
body.wmi .wmi-il-related li,
body.wmi .wmi-il-nearby li,
body.wmi .wmi-il-list li { border-bottom: 1px solid var(--border); }
body.wmi .wmi-il-related li:last-child,
body.wmi .wmi-il-nearby li:last-child,
body.wmi .wmi-il-list li:last-child { border-bottom: none; }
body.wmi .wmi-il-related li:nth-child(even),
body.wmi .wmi-il-nearby li:nth-child(even),
body.wmi .wmi-il-list li:nth-child(even) { background: var(--zebra); }

body.wmi .wmi-il-related li > a,
body.wmi .wmi-il-nearby li > a,
body.wmi .wmi-il-list li > a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
/* marcador → de fila (mono, apagado → acento en hover) */
body.wmi .wmi-il-related li > a::before,
body.wmi .wmi-il-nearby li > a::before,
body.wmi .wmi-il-list li > a::before {
  content: '\2192';   /* → */
  font-family: var(--font-mono);
  color: var(--text-faint);
  flex: none;
  transition: color .14s ease, transform .14s ease;
}
body.wmi .wmi-il-related li > a:hover,
body.wmi .wmi-il-nearby li > a:hover,
body.wmi .wmi-il-list li > a:hover,
body.wmi .wmi-il-related li > a:focus-visible,
body.wmi .wmi-il-nearby li > a:focus-visible,
body.wmi .wmi-il-list li > a:focus-visible {
  background: var(--hover-row);
  color: var(--accent);
  box-shadow: inset 2px 0 0 0 var(--accent);   /* barra izq. en hover, sin shift */
  outline: none;
}
body.wmi .wmi-il-related li > a:hover::before,
body.wmi .wmi-il-nearby li > a:hover::before,
body.wmi .wmi-il-list li > a:hover::before,
body.wmi .wmi-il-related li > a:focus-visible::before,
body.wmi .wmi-il-nearby li > a:focus-visible::before,
body.wmi .wmi-il-list li > a:focus-visible::before {
  color: var(--accent);
  transform: translateX(2px);
}

/* ------------------------------------------------ 3 · MINE SERVICES GRID (mina)
   Cards-CTA de procurement. Grid responsive auto-fit min 240px → stack mobile.
   Card --panel + --border-3; hover --tint-08 + --glow (handoff §5). */
body.wmi .wmi-il-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
body.wmi .wmi-il-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--border-3);
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.4;
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
body.wmi .wmi-il-card::after {   /* flecha CTA */
  content: '\2192';   /* → */
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--accent);
  flex: none;
  transition: transform .16s ease;
}
body.wmi .wmi-il-card:hover,
body.wmi .wmi-il-card:focus-visible {
  background: var(--tint-08);
  border-color: var(--accent);
  box-shadow: var(--glow);
  transform: translateY(-1px);
  outline: none;
}
body.wmi .wmi-il-card:hover::after,
body.wmi .wmi-il-card:focus-visible::after { transform: translateX(3px); }

/* ------------------------------------------------ 4 · RESPONSIVE (920px) */
@media (max-width: 920px) {
  body.wmi .wmi-il-parents,
  body.wmi .wmi-il-related,
  body.wmi .wmi-il-nearby,
  body.wmi .wmi-il-mine-services,
  body.wmi .wmi-il-service-mines { margin-top: 28px; padding-top: 20px; }

  body.wmi .wmi-il-mine-services > h2,
  body.wmi .wmi-il-service-mines > h2 { font-size: 19px; }
  body.wmi .wmi-il-related > h3,
  body.wmi .wmi-il-nearby > h3 { font-size: 15px; }

  body.wmi .wmi-il-grid { grid-template-columns: 1fr; }   /* stack en mobile */

  body.wmi .wmi-il-related li > a,
  body.wmi .wmi-il-nearby li > a,
  body.wmi .wmi-il-list li > a { padding: 12px 14px; font-size: 13.5px; }
}

/* ------------------------------------------------ 5 · REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body.wmi .wmi-il-card:hover,
  body.wmi .wmi-il-card:focus-visible { transform: none; }
  body.wmi .wmi-il-card:hover::after,
  body.wmi .wmi-il-card:focus-visible::after,
  body.wmi .wmi-il-related li > a:hover::before,
  body.wmi .wmi-il-nearby li > a:hover::before,
  body.wmi .wmi-il-list li > a:hover::before { transform: none; }
}