/* =============================================================
   Ben's Gunsmithing — Service page styles
   Governs Repair / Customize / Restore / Appraise per the
   `repair service page 3.png` north star. Loaded after site.css.
   Page header (.page-header) and CTA banner are shared chrome.
   Layout: two columns — olive-check service list (left),
   bordered pricing block + one asymmetric photo (right aside).
   ============================================================= */

/* -------------------------------------------------------------
   1. Two-column body
   ------------------------------------------------------------- */
.svc-body {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--s-3xl);
  align-items: start;
}

/* Optional one-line lead above the service list. */
.svc-lead {
  max-width: 60ch;
  margin-bottom: var(--s-xl);
  color: var(--charcoal-light);
}

/* -------------------------------------------------------------
   2. Olive-check service list — each item: olive check glyph,
      Bitter brown title (with " · " qualifiers), two lines of body.
   ------------------------------------------------------------- */
.check-list { list-style: none; }
.check-item { padding-block: var(--s-md); }
.check-item + .check-item { border-top: 1px solid var(--cream-dark); }

.check-item__title {
  position: relative;
  padding-left: 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-heading);
  color: var(--brown-dark);
}
/* Olive checkmark via masked SVG so it inherits the action color. */
.check-item__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 22px;
  height: 22px;
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Per-item service icon (inline SVG) — replaces the generic checkmark on
   Repair / Customize / Appraise. Restore keeps the plain checkmark until
   its items get dedicated icons. The --icon modifier suppresses ::before. */
.check-item__title--icon::before { content: none; }
.check-item__title--icon { padding-left: 44px; } /* wider gutter for the 34px icon */
.check-item__title--icon + .check-item__desc { padding-left: 44px; } /* keep desc flush with its title */
.check-item__icon {
  position: absolute;
  left: 0;
  top: -0.06em; /* centers the 34px icon on the title's first line */
  width: 34px;
  height: 34px;
  color: var(--green);
}
.check-item__desc {
  padding-left: 34px;
  margin-top: var(--s-xs);
  color: var(--charcoal-light);
  font-size: var(--fs-small);
  max-width: 60ch;
}

/* -------------------------------------------------------------
   3. Aside — pricing block (Sheet White on cream) + one photo
   ------------------------------------------------------------- */
.aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
}

.price-block {
  background-color: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-sm);
  padding: var(--s-xl);
}
.price-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--brown-dark);
  margin-bottom: var(--s-md);
}

/* Dot-leader rows: label · · · · · value */
.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-xs);
  padding-block: var(--s-xs);
}
.price-row__label {
  /* Never shrinks, so a long value can't squeeze the label into wrapping.
     max-width is a safety valve: an absurdly long label wraps inside its
     own box instead of pushing the leader + value off the row. */
  flex: 0 0 auto;
  max-width: 65%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--charcoal);
}
.price-row__leader {
  /* Baseline-aligned (not stretched), so the dots sit on the label's first
     text line even when the value wraps to a second line. min-width keeps
     a few dots visible no matter how long the value gets. */
  flex: 1 1 auto;
  min-width: var(--s-md);
  border-bottom: 2px dotted var(--gray-light);
}
.price-row__value {
  /* Shrinkable: a long value wraps onto its own extra lines (right-aligned)
     while staying on the same row as the label and leader. */
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-small);
  color: var(--charcoal);
}

.price-note {
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--cream-dark);
  font-size: var(--fs-small);
  color: var(--charcoal-light);
}

/* Asymmetric aside photo. Natural ratio, no crop. */
.aside__photo { margin: 0; }
.aside__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.aside__photo figcaption {
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gray);
}

/* A short flag for content awaiting Ben's sign-off (dev aid; subtle). */
.copy-flag {
  margin-top: var(--s-lg);
  font-size: var(--fs-small);
  color: var(--charcoal-light);
}

/* -------------------------------------------------------------
   4. Responsive — single column on tablet/phone, photo last
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .svc-body {
    grid-template-columns: 1fr;
    gap: var(--s-2xl);
  }
}