/* =====================================================================
   SERVICES — the rate card on /work-with-val and /studio-pieces
   ---------------------------------------------------------------------
   Both pages are unlisted and share this file. Every value is a token
   from core/site.css; nothing here sets a colour or a size of its own.

   A LEDGER, NOT A GRID OF CARDS. Each .svc-row is one thing you can
   buy, set on a hairline like the .channels directory: what it is on
   the left, the time or basis in the middle, the price on the right.
   The list is the grid and every row is a subgrid of it, so the three
   columns line up the whole way down a group without fixed widths.
   A list with no .svc-meta (the Studio pieces table has no Time column)
   drops the middle column.
   ===================================================================== */

.svc-list{
  list-style:none;padding:0;margin:var(--sp-5) 0 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:var(--sp-7);
  border-top:1px solid var(--line);
}
.svc-list:not(:has(.svc-meta)){grid-template-columns:minmax(0,1fr) auto}

.svc-row{
  grid-column:1 / -1;
  display:grid;grid-template-columns:subgrid;align-items:baseline;
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
}
.svc-main{grid-column:1}
.svc-meta{grid-column:2}
.svc-price{grid-column:-2}

.svc-name{
  font-family:var(--font-title);font-weight:300;
  font-size:var(--fs-1);line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);color:var(--signal);
}
.info-section .svc-what{
  margin-top:var(--sp-2);max-width:56ch;
  font-size:var(--fs-00);line-height:var(--lh-body);color:var(--haze);
}

.svc-meta dt{
  font-size:var(--fs-000);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--haze-dim);
}
.svc-meta dd{margin-top:var(--sp-1);font-size:var(--fs-00);color:var(--signal)}

/* The figure is the one large thing on a row: the title face at its
   lightest, so a price reads like a heading, not like a button. */
.info-section .svc-price{
  margin:0;text-align:right;white-space:nowrap;
  font-family:var(--font-title);font-weight:var(--wt-title);
  font-size:var(--fs-2);line-height:var(--lh-tight);color:var(--signal);
}
.svc-price small{
  display:block;margin-bottom:var(--sp-1);
  font-family:var(--font-ui);font-size:var(--fs-000);
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--haze-dim);
}
.svc-unit{font-size:var(--fs-00);color:var(--haze)}
.info-section .svc-price.is-quoted{
  font-family:var(--font-ui);font-weight:400;
  font-size:var(--fs-00);color:var(--haze);
}

/* an add-on under a list: not a row, because it is not bought alone */
.info-section .svc-note{margin-top:var(--sp-4);font-size:var(--fs-00);color:var(--haze)}
.svc-note strong{font-weight:600;color:var(--signal)}

/* the one line at the foot that points at the other page */
.info-section.svc-next{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.info-section .svc-next-line{margin:0;font-size:var(--fs-0);color:var(--haze)}

.page-services .page-lede + .page-lede{margin-top:var(--sp-3)}
/* the lede sits outside .info-section, so its link borrows that underline */
.page-services .page-lede a{color:var(--signal);border-bottom:1px solid var(--line-hot);
  transition:border-color var(--dur-med) var(--ease)}
.page-services .page-lede a:hover,.page-services .page-lede a:focus-visible{border-bottom-color:var(--warm)}

/* On a phone the description takes the full width and the time and the
   price share the line under it, the price still at the right. */
@media (max-width:640px){
  .svc-list,.svc-list:not(:has(.svc-meta)){grid-template-columns:minmax(0,1fr) auto}
  .svc-row{row-gap:var(--sp-3)}
  .svc-main{grid-column:1 / -1}
  .svc-meta{grid-column:1}
  .svc-price{grid-column:2}
}