/* Reuse the service-page components in emergency-locksmith.css.
   Repair-specific layouts: four problem cards, a two-photo job and comparison. */
.repair-problems,
.repair-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.repair-problems .area-info-card p {
  margin-top: 0;
}

.repair-comparison {
  margin-top: 1.5rem;
}

.repair-comparison .area-info-card {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  background: #f4f5f7;
}

.repair-comparison .area-info-card:last-child {
  border-top-color: #23232E;
}

.repair-comparison .area-info-card p {
  margin-top: .4rem;
}

.repair-related-link {
  padding-top: .5rem;
}

.repair-signs {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border-left: 4px solid #F5B421;
  background: white;
}

.repair-signs ul {
  display: grid;
  gap: .65rem;
  margin-top: 1.25rem;
  padding-left: 1.2rem;
}

.repair-signs li::marker {
  color: #78500b;
}

.repair-urgent-note {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-left: 4px solid #F5B421;
  background: #fff7e8;
}

.repair-urgent-note h3 {
  font-size: 1.15rem;
  color: #23232E;
}

.lock-repairs-page .emergency-trust {
  background: white;
}

@media (min-width: 600px) {
  .repair-problems,
  .repair-comparison,
  .repair-job-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .repair-job-gallery {
    max-width: 1162px;
    margin-inline: auto;
  }
}