/* GLADIOZ — Services page */

.svc-list { padding: 60px 0 100px; }

.svc-rows {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.svc-row {
  display: grid;
  grid-template-columns: 60px 1fr 360px;
  gap: 48px;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  position: relative;
  transition: background 0.5s ease;
}

.svc-row:hover { background: var(--paper-2); }

.svc-row .num {
  font-size: 0.9rem;
  color: var(--maroon);
  padding-top: 14px;
}

.row-body h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 20px;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}
.row-body h2 em {
  font-style: italic;
  color: var(--maroon);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

.row-body p {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 50ch;
  margin-bottom: 28px;
}

.row-meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.row-meta li {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.row-meta .mono-sm {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
}

.row-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--maroon);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-bottom: 1px solid var(--maroon);
  padding-bottom: 4px;
}

.row-art {
  aspect-ratio: 4/5;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.35 0.08 264) 0 12px,
      oklch(0.42 0.1 264) 12px 24px);
  border-radius: 4px;
  position: relative;
  transform: rotate(1deg);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.row-art::after {
  content: attr(data-tag);
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: oklch(1 0 0 / 0.7);
}
.svc-row:hover .row-art { transform: rotate(-1deg) scale(1.02); }

.row-art.alt-2 {
  background: repeating-linear-gradient(45deg,
    oklch(0.32 0.06 30) 0 14px, oklch(0.4 0.1 30) 14px 28px);
}
.row-art.alt-3 {
  background: repeating-linear-gradient(90deg,
    oklch(0.55 0.08 75) 0 12px, oklch(0.62 0.1 75) 12px 24px);
}

/* alternating layout */
.svc-row:nth-child(even) {
  grid-template-columns: 360px 1fr 60px;
}
.svc-row:nth-child(even) .num { order: 3; padding-left: 0; text-align: right; }
.svc-row:nth-child(even) .row-art { order: 1; transform: rotate(-1deg); }
.svc-row:nth-child(even) .row-body { order: 2; }
.svc-row:nth-child(even):hover .row-art { transform: rotate(1deg) scale(1.02); }

@media (max-width: 960px) {
  .svc-row, .svc-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .svc-row:nth-child(even) .num { order: 0; text-align: left; }
  .svc-row:nth-child(even) .row-art { order: 0; }
  .row-meta { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.cta-band { padding: 140px 0; text-align: center; background: var(--paper-2); border-top: 1px solid var(--rule); }
.cta-inner h2 { font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 24px; }
.cta-inner h2 em { font-style: italic; color: var(--maroon); }
.cta-inner p { font-size: 1.2rem; font-weight: 300; color: var(--ink-2); max-width: 50ch; margin: 0 auto 36px; font-style: italic; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }