/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* SERVICE LIST */

/* ============================================================
   12. SERVICE LIST
   Rows, not cards. All eight prices readable at a glance and
   directly comparable, which is the whole job of a price list.
   Images were dropped on purpose: a photo of a beard trim does
   not help anyone choose, and the gallery already carries the
   visual weight.
   ============================================================ */
.service-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-md);
  border-top: 1px solid rgba(0,0,0,.2);
}
@media (max-width: 767px) { .service-list { grid-template-columns: 1fr; } }

.service-row {
  display: grid; grid-template-columns: 2.25em minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 1em;
  padding: 1.15em 0; border-bottom: 1px solid rgba(0,0,0,.2);
  transition: color .3s ease;
}
.service-row:hover { color: var(--c-brand); }

.service-num { font-size: var(--t-tag); letter-spacing: .06em; color: var(--c-mute); transition: color .3s ease; }
.service-row:hover .service-num { color: var(--c-brand); }

.service-name { display: flex; flex-direction: column; gap: .35em; }
.service-title { font-size: 1.0625em; letter-spacing: .01em; line-height: 1.2; }
.service-desc { font-size: var(--t-tag); letter-spacing: .04em; line-height: 1.5; color: var(--c-mute); max-width: 26em; transition: color .3s ease; }
.service-row:hover .service-desc { color: rgba(224,31,38,.75); }

.service-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625em; letter-spacing: -.01em; line-height: 1.2;
  white-space: nowrap; text-align: right;
}

.service-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5em; flex-wrap: wrap; margin-top: 2.5em;
}

@media (max-width: 767px) {
  .service-row { grid-template-columns: 2em minmax(0, 1fr) auto; padding: 1em 0; }
  .service-desc { max-width: none; }
  .service-foot { flex-direction: column; align-items: flex-start; gap: 1.25em; margin-top: 2em; }
}