/**
 * SC Index — Shared editorial index component.
 *
 * Reusable numbered editorial grid extracted from servicios.css (2026-06-19).
 * Used by: page-servicios.php, page-division.php, page-servicio.php,
 * page-particulares.php via get_template_part('templates/parts/sc-index').
 *
 * Design: asymmetric numbered list — item 01 (ancla) spans full row with
 * media beside text; items 02+ sit side-by-side with media below text.
 * Folio: index-based sprintf('%02d', $i+1) — never ACF-curated.
 *
 * UNLAYERED — body.scc-fase0 prefix pattern (matches section.css, bodas.css).
 * Zero color literals — exclusively design tokens (var(--color-*)).
 */

/* ── Grid ── */
body.scc-fase0 .sc-index__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* Item: folio (col 1) + texto (col 2) + media (col 3, frame contenido). */
body.scc-fase0 .sc-index__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

/* 01 = ancla: ocupa la fila superior completa; el media se mueve AL LADO del
 * texto (3 columnas: folio · texto · foto contenida ~3/2), no banner gigante. */
body.scc-fase0 .sc-index__item:first-child,
body.scc-fase0 .sc-index__item--ancla {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

/* Ritmo variado: 03 cae para romper la baseline con 02. */
body.scc-fase0 .sc-index__item:nth-child(3) {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

/* Folio: serif dorado weight 300, top-left. 02/03 menores que el ancla. */
body.scc-fase0 .sc-index__folio {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-gold);
  user-select: none;
  transition: transform var(--dur-normal, 280ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
body.scc-fase0 .sc-index__item:first-child .sc-index__folio,
body.scc-fase0 .sc-index__item--ancla .sc-index__folio {
  font-size: clamp(3rem, 7vw, 5rem);
}

body.scc-fase0 .sc-index__text {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Hairline dorada: estática a media longitud por default; barre en hover. */
body.scc-fase0 .sc-index__rule {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 1px;
  background: var(--color-gold-ink);
  margin-bottom: 0.75rem;
  clip-path: inset(0 60% 0 0);
}
body.scc-fase0 .sc-index__item:first-child .sc-index__rule,
body.scc-fase0 .sc-index__item--ancla .sc-index__rule {
  max-width: 280px;
}

/* Eyebrow demoted: label pequeño gold-ink (NO kicker tracked en cada bloque). */
body.scc-fase0 .sc-index__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-ink);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
body.scc-fase0 .sc-index__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-dark, var(--color-black));
  margin: 0 0 0.875rem;
  text-wrap: balance;
}
body.scc-fase0 .sc-index__item:first-child .sc-index__title,
body.scc-fase0 .sc-index__item--ancla .sc-index__title {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
}
body.scc-fase0 .sc-index__body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-body);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}
body.scc-fase0 .sc-index__item:first-child .sc-index__body,
body.scc-fase0 .sc-index__item--ancla .sc-index__body {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}
body.scc-fase0 .sc-index__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--color-gold-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  transition: gap .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
body.scc-fase0 .sc-index__cta .arrow {
  transition: transform .25s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

/* Media: frame contenido (no banner). En 02/03 vive en una 2ª fila bajo el
 * texto; en el ancla 01 se coloca en la 3ª columna al lado del texto. */
body.scc-fase0 .sc-index__media {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-cream);
  position: relative;
}
body.scc-fase0 .sc-index__item:first-child .sc-index__media,
body.scc-fase0 .sc-index__item--ancla .sc-index__media {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
  align-self: stretch;
}
body.scc-fase0 .sc-index__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}
body.scc-fase0 .sc-index__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--color-gold-ink);
  text-align: center;
  padding: 1rem;
}

/* ── Hover (solo dispositivos con hover real): hairline barre 36px→full vía
 * clip-path (~220ms ease-out-quart); folio sube 2px; foto scale(1.03);
 * flecha CTA avanza. transform/clip-path/opacity únicamente. ── */
@media (hover: hover) and (pointer: fine) {
  body.scc-fase0 .sc-index__rule {
    clip-path: inset(0 calc(100% - 36px) 0 0);
    transition: clip-path 220ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  }
  body.scc-fase0 .sc-index__item:hover .sc-index__rule,
  body.scc-fase0 .sc-index__item:focus-within .sc-index__rule {
    clip-path: inset(0 0 0 0);
  }
  body.scc-fase0 .sc-index__item:hover .sc-index__folio,
  body.scc-fase0 .sc-index__item:focus-within .sc-index__folio {
    transform: translateY(-2px);
  }
  body.scc-fase0 .sc-index__item:hover .sc-index__media img,
  body.scc-fase0 .sc-index__item:focus-within .sc-index__media img {
    transform: scale(1.03);
  }
  body.scc-fase0 .sc-index__cta:hover { gap: 0.85rem; }
  body.scc-fase0 .sc-index__cta:hover .arrow { transform: translateX(3px); }
}

/* ── Entrada escalonada: folio + regla reaccionan al .is-revealed que el
 * data-stagger global pone en cada .sc-index__item (sin JS nuevo). El folio 01
 * entra primero y un poco más lento → jerarquía en el tiempo. ── */
html.js-reveal-ready body.scc-fase0 .sc-index__item .sc-index__folio {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.7s var(--ease-out-soft, cubic-bezier(0.16, 1, 0.3, 1));
}
html.js-reveal-ready body.scc-fase0 .sc-index__item:first-child .sc-index__folio,
html.js-reveal-ready body.scc-fase0 .sc-index__item--ancla .sc-index__folio {
  transition-duration: 1s, 1s;
}
html.js-reveal-ready body.scc-fase0 .sc-index__item.is-revealed .sc-index__folio {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: sin movimiento ni contenido oculto tras hover. La regla
 * queda a media longitud estática; folio visible e inmóvil. */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-index__rule {
    clip-path: inset(0 50% 0 0) !important;
    transition: none !important;
  }
  body.scc-fase0 .sc-index__folio {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.scc-fase0 .sc-index__media img { transition: none !important; }
}

/* ── Responsive: la asimetría degrada a stack limpio en narrow. ──
 * Tablet (≤900px): una sola columna; el ancla pierde su span y su 3ª col,
 * el media vuelve a la 2ª fila bajo el texto como 02/03; sin offsets. */
@media (max-width: 900px) {
  body.scc-fase0 .sc-index__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 6vw, 3rem);
  }
  body.scc-fase0 .sc-index__item:first-child,
  body.scc-fase0 .sc-index__item--ancla {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  body.scc-fase0 .sc-index__item:first-child .sc-index__media,
  body.scc-fase0 .sc-index__item--ancla .sc-index__media {
    grid-column: 2;
    grid-row: 2;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    align-self: auto;
  }
  body.scc-fase0 .sc-index__item:nth-child(3) { margin-top: 0; }
}
/* ── .sc-index--compact — Numbered editorial list with NO media column.
 *
 * Use when items have no images and no per-item URLs (e.g. division services).
 * Layout: ancla (01) spans full row as 2-col folio+text; items 02+ sit in a
 * clean 2-column grid. No media frame is rendered — .sc-index__media is hidden.
 * Trailing odd item (when N-1 items after ancla is odd) expands to full row.
 *
 * Ancla: loses its 3rd (media) column → 2 columns only (folio · text).
 * ── */

body.scc-fase0 .sc-index--compact .sc-index__media {
  display: none;
}

/* Ancla in compact: no 3rd col — revert to 2-col folio+text, top-aligned. */
body.scc-fase0 .sc-index--compact .sc-index__item:first-child,
body.scc-fase0 .sc-index--compact .sc-index__item--ancla {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-bottom: clamp(0.25rem, 1.5vw, 1rem);
}

/* Remove the nth-child(3) baseline offset — compact items align flush. */
body.scc-fase0 .sc-index--compact .sc-index__item:nth-child(3) {
  margin-top: 0;
}

/* Trailing odd item (when the post-ancla count is odd, e.g. 5 items → 2+2+1):
 * expand to full row so there's no half-empty orphan card. */
body.scc-fase0 .sc-index--compact .sc-index__item:last-child:nth-child(even) {
  grid-column: 1 / -1;
  /* Constrain width so the text block doesn't stretch to full-grid width. */
  max-width: 55ch;
}

/* Compact items: bump body font slightly for readability without media context. */
body.scc-fase0 .sc-index--compact .sc-index__body {
  max-width: 52ch;
}

/* ≤900px: compact already single-col (inherits from base ≤900 rule), nothing extra. */

/* ── .sc-index--steps — Process sequence modifier.
 *
 * Use for ordered process/how-we-work lists (4–6 steps). The folio IS the
 * step number. A gold vertical hairline connects steps visually. No ancla
 * asymmetry — all steps are equal weight. No media column.
 *
 * Layout: single column (full-width items), steps stacked vertically with
 * connector hairline on the left. Reduced-motion: connector is static (no
 * animated draw). ≤900/≤560 inherited from base.
 * ── */

/* Steps: override grid to single column, tighter row-gap for list rhythm. */
body.scc-fase0 .sc-index--steps {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

/* All steps equal weight — no ancla span, revert to 2-col folio+text. */
body.scc-fase0 .sc-index--steps .sc-index__item:first-child,
body.scc-fase0 .sc-index--steps .sc-index__item--ancla {
  grid-column: auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-bottom: 0;
}

/* Folio: step number, same serif-gold treatment but slightly smaller (not hero). */
body.scc-fase0 .sc-index--steps .sc-index__item:first-child .sc-index__folio,
body.scc-fase0 .sc-index--steps .sc-index__item--ancla .sc-index__folio {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Title/body: reset ancla inflated sizes to match regular items (equal weight). */
body.scc-fase0 .sc-index--steps .sc-index__item:first-child .sc-index__title,
body.scc-fase0 .sc-index--steps .sc-index__item--ancla .sc-index__title { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
body.scc-fase0 .sc-index--steps .sc-index__item:first-child .sc-index__body,
body.scc-fase0 .sc-index--steps .sc-index__item--ancla .sc-index__body { font-size: 1rem; }

/* No media in steps. */
body.scc-fase0 .sc-index--steps .sc-index__media {
  display: none;
}

/* Remove nth-child(3) baseline offset. */
body.scc-fase0 .sc-index--steps .sc-index__item:nth-child(3) {
  margin-top: 0;
}

/* Connector: gold hairline between steps via the item's ::after pseudo.
 * Runs from bottom of folio area downward to the next item.
 * Last item gets no connector. */
body.scc-fase0 .sc-index--steps .sc-index__item {
  position: relative;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
body.scc-fase0 .sc-index--steps .sc-index__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: clamp(2.5rem, 5vw, 3.5rem); /* below folio baseline */
  left: calc(clamp(2rem, 4vw, 3rem) / 2 - 0.5px); /* centered on folio column */
  width: 1px;
  bottom: 0;
  background: var(--color-gold);
  opacity: 0.45;
}

/* Reduced-motion: connector static (no animated draw — already static by default). */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-index--steps .sc-index__item::after {
    transition: none !important;
  }
}

/* ≤900px: already single-col from steps layout — nothing extra. */
/* ≤560px: folio stacks above text — inherited from base ≤560px rule below. */

/* Mobile (≤560px): el folio se apila sobre el texto (no compite por ancho). */
@media (max-width: 560px) {
  body.scc-fase0 .sc-index__item,
  body.scc-fase0 .sc-index__item:first-child,
  body.scc-fase0 .sc-index__item--ancla {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  body.scc-fase0 .sc-index__folio,
  body.scc-fase0 .sc-index__text,
  body.scc-fase0 .sc-index__media,
  body.scc-fase0 .sc-index__item:first-child .sc-index__media,
  body.scc-fase0 .sc-index__item--ancla .sc-index__media {
    grid-column: 1;
  }
  body.scc-fase0 .sc-index__folio { grid-row: 1; }
  body.scc-fase0 .sc-index__text { grid-row: 2; }
  body.scc-fase0 .sc-index__media,
  body.scc-fase0 .sc-index__item:first-child .sc-index__media,
  body.scc-fase0 .sc-index__item--ancla .sc-index__media { grid-row: 3; }
}