/* ==========================================================================
   ADNANSON SOLUTIONS — SERVICES HUB (services/index.html) ONLY
   --------------------------------------------------------------------------
   The hub presents the five verticals as a "file registry": full-width
   index rows with the service's ledger code, name, one-line summary and a
   thumbnail that reveals on hover. Scannable in seconds, distinctive to us.
   ========================================================================== */

.idx {
  list-style: none;
  margin: 0;
  padding: 0;
}

.idx-row {
  --acc: var(--copper-ink);
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 300px 3rem;
  gap: 2rem;
  align-items: center;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--base-3);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-left 0.35s var(--ease-out);
}
.idx li:first-child .idx-row { border-top: 1px solid var(--base-3); }

/* Accent bar that grows in from the left on hover */
.idx-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--acc);
  transition: transform 0.3s var(--ease-out);
}
.idx-row:hover, .idx-row:focus-visible { padding-left: 1.4rem; }
.idx-row:hover::before, .idx-row:focus-visible::before { transform: translateY(-50%) scaleY(1); }

.idx-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--acc);
}
/* Second line under the code: the file number */
.idx-code .idx-file {
  display: block;
  color: var(--text-2);
  font-size: 0.62rem;
  margin-top: 0.35rem;
  letter-spacing: 0.12em;
}

.idx-row h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 500;
  margin: 0 0 0.4rem;
  transition: color 0.25s ease;
}
.idx-row:hover h2,
.idx-row:focus-visible h2 { color: var(--acc); }
.idx-row p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-small);
  max-width: 52ch;
}

/* Thumbnail: the same photograph the home takeover uses for this service,
   full color at rest (the old dimmed/desaturated rest state read stale
   against the bright site). Hover pushes gently in. */
.idx-thumb {
  position: relative;
  height: 176px;
  overflow: hidden;
  background: var(--base-2);
}
.idx-thumb::after { /* fine accent baseline, keyed to the service color */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.idx-row:hover .idx-thumb::after,
.idx-row:focus-visible .idx-thumb::after { transform: scaleX(1); }
.idx-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.8s var(--ease-out);
}
.idx-row:hover .idx-thumb img,
.idx-row:focus-visible .idx-thumb img {
  transform: scale(1.08);
}

.idx-arr {
  font-size: 1.4rem;
  color: var(--text-2);
  transition: transform 0.3s var(--ease-out), color 0.25s ease;
}
.idx-row:hover .idx-arr, .idx-row:focus-visible .idx-arr {
  transform: translateX(6px);
  color: var(--acc);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  /* Narrow layouts keep the imagery: the thumb becomes a full-width band
     under the text instead of disappearing. */
  .idx-row { grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; }
  .idx-thumb {
    grid-column: 2 / 3;
    grid-row: 2;
    height: 190px;
    margin-top: 1.3rem;
  }
}
@media (max-width: 480px) {
  .idx-row { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.2rem; padding: 1.8rem 0; }
  .idx-arr { display: none; }
  .idx-thumb { height: 150px; }
}