/* =========================================================
   Closing sections for inner pages — gallery link, locations,
   consultation CTA. Loaded only where the template part
   renders, never on the homepage.
   ========================================================= */

/* Asymmetric insets: the gallery and locations bands run off the left edge
   and stop short of the right; the CTA does the reverse. */
:root {
  --ps-gap: 56px;    /* space above and below each band */
  --ps-inset: 80px;  /* the one side that isn't full-bleed */
}

/* ---- Gallery band ---- */
.ps-gallery {
  background: #f4f1e9;
  padding: 70px 0;
}

/* ---- Locations ---- */
.ps-locations {
  background: #f0dfcf;
  padding: 26px 0 20px;
  margin: var(--ps-gap) var(--ps-inset) var(--ps-gap) 0;
}
/* Hold the maps in from the band's own edges so the block reads smaller than
   the full content width. */
.ps-locations .container {
  max-width: 1280px;
}
.ps-locations h2 {
  margin-bottom: 18px;
}
/* auto-fit rather than a fixed 3, so the grid still reads correctly with the
   single clinic it holds today and with more added later. The cap keeps one
   lone card from stretching its map across the whole container. */
.ps-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  justify-content: center;
}
.ps-location {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.ps-map {
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
  overflow: hidden;
}
.ps-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ps-location-name {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: .95rem;
}
.ps-location-name:hover { text-decoration: underline; }
.ps-location p { margin-top: 2px; margin-bottom: 0; }

/* ---- Let's Talk ---- */
.ps-cta {
  background: #512326;
  color: #f5ecd9;
  margin: var(--ps-gap) 0 var(--ps-gap) var(--ps-inset);
}
.ps-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 360px;
}
.ps-cta-copy {
  padding: 64px 56px;
  align-self: center;
  max-width: 560px;
}
.ps-cta-copy h2 {
  color: #f5ecd9;
  margin-bottom: .5em;
}
.ps-cta-copy p {
  color: #e6d6c4;
  max-width: 48ch;
  margin-bottom: 2rem;
}
.ps-cta-media {
  position: relative;
  overflow: hidden;
}
.ps-cta-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  :root { --ps-gap: 36px; --ps-inset: 32px; }
}

@media (max-width: 900px) {
  :root { --ps-gap: 28px; --ps-inset: 16px; }
  .ps-gallery { padding: 52px 0; }
  .ps-locations { padding: 52px 0; }
  .ps-locations-grid { grid-template-columns: 1fr; gap: 36px; }
  .ps-cta-inner { grid-template-columns: 1fr; min-height: 0; }
  .ps-cta-copy { padding: 48px 24px; }
  .ps-cta-media { height: 240px; }
}