/* =========================================================
   Nero Development — Verticals (page-specific)
   ========================================================= */

:root {
  --nero-charcoal-3: #232323;
}

/* ---------- Vertical rows ---------- */
.verticals .container { max-width: 1140px; }

.vertical-list {
  list-style: none;
}

.vertical-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: 64px;
  border-top: 1px solid var(--border-faint);
}
.vertical-row:first-child { border-top: none; }

/* ---------- Visual panel (no photography — numeral as anchor) ---------- */
.vertical-row__panel {
  background: var(--nero-charcoal-1);
  border: 1px solid var(--border-faint);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-row__panel-num {
  font-size: clamp(48px, 6vw, 64px);
  color: var(--nero-orange);
  opacity: 0.4;
  letter-spacing: 2px;
}

/* ---------- Content side ---------- */
.vertical-row__content { max-width: 560px; }
.vertical-row__index {
  font-size: 0.75rem;
  color: var(--nero-orange);
}
.vertical-row__name {
  font-size: 28px;
  font-weight: 200;
  letter-spacing: -0.01em;
  margin-top: 10px;
}
.vertical-row__desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 520px;
  margin-top: 14px;
}

.vertical-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 1.5rem;
}
.vertical-tag {
  padding: 8px 14px;
  background: var(--nero-charcoal-3);
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .vertical-row,
  .vertical-row.vertical-row--flip {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 1.75rem;
    padding-block: 2.5rem;
  }

  /* Force natural document order on every row, undoing any
     right-panel placement from the two-column layout above. */
  .vertical-row > * { order: 0; }

  .vertical-row__panel { aspect-ratio: 16 / 9; }
}