/* [ssr_listing_documents] — section chrome around the ss-listing-documents carousel.
   The cards, the strip, the arrows, the dots and the floor-plan lightbox are that plugin's
   (assets/ss-documents.css); this file only supplies what every section on the page shares:
   the full-bleed surface, the page-width container, the heading row and the mobile padding. */

.ssr-docs {
  --d-ink:     var(--text-on-light, #2f2e30);
  --d-muted:   var(--text-on-light-muted, #6f6d73);
  --d-surface: var(--surface-light, #fff);
  --d-display: var(--font-display, Outfit, system-ui, sans-serif);
  --d-body:    var(--font-body, 'Public Sans', system-ui, sans-serif);
  --d-max:     var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */

  display: block;
  background: var(--d-surface);
  padding: 64px 24px;
  font-family: var(--d-body);
  color: var(--d-ink);
}

.ssr-docs *, .ssr-docs *::before, .ssr-docs *::after { box-sizing: border-box; }

/* wpautop wraps runs of inline elements in <p>. The paragraphs it injects carry no class; the
   plugin's own (.ss-docs__private) do, and keep their layout. Written as :not([class]) rather
   than the usual `.root p` + per-class restore because the restore rules would have to know the
   plugin's margins. */
.ssr-docs p:not([class]) { display: contents; margin: 0; padding: 0; }
.ssr-docs p:empty { display: none; }

.ssr-docs__inner {
  max-width: var(--d-max);
  margin-inline: auto;
}

/* ---------- heading row (same treatment as the Location section) ---------- */

.ssr-docs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ssr-docs .ssr-docs__title {
  margin: 0;
  font-family: var(--d-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--d-ink);
}

.ssr-docs__sub {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--d-muted);
}

/* The plugin sizes its carousel against its container (container-type: inline-size), so inside
   the page-width column the cards come out ~470px tall at 1240px — two landscape floor plans
   across — and clamp to 300px on a phone. Nothing to override here. */

/* ---------- mobile (767 is the page-wide switch) ---------- */

@media (max-width: 767px) {
  .ssr-docs { padding: 40px 16px; }
  .ssr-docs .ssr-docs__title { font-size: 21px; }
}