/* Guide hub - Index rows layout (option 01 from the guide-cards deck).
   Numbered magazine table-of-contents: hairline rows, category right,
   arrow slides in on hover. */

.guides-index{
  margin-top:54px;
  text-align:left;
  border-top:1px solid rgba(42,38,64,.85);
}
.guides-index .gi-row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:24px;
  align-items:center;
  padding:26px 8px;
  border-bottom:1px solid rgba(42,38,64,.7);
  transition:background .2s ease;
}
.guides-index .gi-row:hover{background:rgba(18,16,28,.5)}
.guides-index .gi-num{
  font-family:var(--display); font-weight:700;
  font-size:.78rem; letter-spacing:.2em;
  color:var(--cyan);
}
.guides-index h3{
  font-family:var(--display); font-weight:600;
  font-size:1.25rem; letter-spacing:-.015em;
  color:var(--ink); margin:0;
  transition:color .2s ease;
}
.guides-index .gi-row:hover h3{color:var(--cyan)}
.guides-index p{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:.92rem; line-height:1.6;
  color:var(--muted);
  margin:6px 0 0; max-width:70ch;
}
.guides-index .gi-side{
  display:flex; align-items:center; gap:18px;
}
.guides-index .gi-cat{
  font-family:var(--display); font-weight:600;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.guides-index .gi-arrow{
  color:var(--muted-strong); font-size:1.1rem; line-height:1;
  transition:transform .2s ease, color .2s ease;
}
.guides-index .gi-row:hover .gi-arrow{
  transform:translateX(4px); color:var(--cyan);
}

@media (max-width:640px){
  .guides-index .gi-row{grid-template-columns:40px 1fr; gap:14px; padding:20px 4px}
  .guides-index .gi-side{display:none}
}