/* v4.4: scoped to the six existing service-entry sections and five place images.
   Restore the original atelier.css neutral surface here, not site-wide. */
.local-services {
  --local-surface: #f0f2ef;
  background: var(--local-surface);
}

.local-services .local-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.local-services .local-service-grid > a {
  display: block;
  min-width: 0;
  padding-block: .25rem;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.local-services .local-service-grid h3 {
  display: block;
  margin: 0 0 .625rem;
  font-family: var(--display);
  font-size: clamp(1.875rem, 2.4vw, 2.625rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.local-services .local-service-grid p {
  display: block;
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  max-width: 34ch;
}

.local-services .local-service-grid > a:hover h3 {
  color: var(--petrol-text);
}

.local-services .local-service-grid > a:focus-visible {
  outline: 3px solid var(--petrol-text);
  outline-offset: 6px;
}

/* A development-only image position, not a simulated or broken photograph.
   Since 21.09.2026 the five existing figures sit beside the opening copy. */
.local-place-image.planned-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  min-width: 0;
  margin: 2rem 0;
  padding: 1rem;
  background: #f0f2ef;
  border: 1px solid #c4cbc7;
  color: var(--ink);
}

.local-place-image.planned-image figcaption {
  max-width: 30ch;
  font: 400 1.125rem/1.5 var(--body);
}

.local-place-image .local-place-image__status {
  display: block;
}

/* Reuse the established split hero and its petrol photo surface. The normal
   opening-grid breakpoint puts the image after the introduction below 900px. */
.local-opening .local-place-image.planned-image {
  margin: 0;
  background: #173e42;
  border-color: #466367;
  color: var(--paper);
}

@media (max-width: 900px) {
  .local-opening .opening-grid > .local-place-image {
    justify-self: start;
  }
}

@media (min-width: 48rem) {
  .local-services .local-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
  }
}