/* Service page results (beard transplant): one table-like grid.
   Desktop: a column per step (label once on top, front photo, side photo). Phone: a block per step. */
.service-results {
  display: grid;
  grid-template-columns: repeat(var(--sr-steps, 4), minmax(0, 1fr));
  grid-template-rows: auto auto auto; /* label, front, side */
  gap: 10px 12px;
  margin: 28px 0 44px;
}
/* subgrid: every column shares the label row height, so photos line up even when a label wraps (German, Russian…) */
.sr-stage { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 10px; min-width: 0; padding: 10px; border-radius: 22px; }
.sr-stage--result { background: #e8f6ee; }
.sr-stage__head { padding: 2px 2px 0; font-size: 15px; line-height: 1.3; } /* number sits inline so the label gets the full column width */
.sr-stage__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline-end: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #3d83ef;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.sr-stage--result .sr-stage__num { background: #22a55b; }
.sr-stage__label { overflow-wrap: break-word; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.3px; color: #1a1c1e; }
.sr-stage--result .sr-stage__label { color: #137a41; }
.sr-stage__photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: #e9edf2;
  cursor: zoom-in;
}
.service-results .sr-stage__photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  transform: scale(1.08); /* the source photos carry a white rounded frame: crop it off */
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.service-results .sr-stage__photo:hover img { transform: scale(1.14); }

/* phone: each step is a block — its label on one line, then front and side side by side */
@media (max-width: 767px) {
  .service-results { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 6px; }
  .sr-stage { grid-row: auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 18px; }
  .sr-stage__head { grid-column: 1 / -1; padding: 0 2px; }
  .sr-stage__num { width: 22px; height: 22px; font-size: 12px; }
  .sr-stage__head, .sr-stage__label { font-size: 14px; }
  .sr-stage__photo { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-results .sr-stage__photo img { transition: none; }
}