/* ============================================================
   SSR Listing About — [ssr_listing_about]
   Desktop: design 1d with 13b's soft-filled chips, plus 21a's
   "Full property details" bar under the description (rendered
   by the features section, positioned here).
   Mobile (<=767px): About this home above Highlights, the bar
   last; the card is gone and its facts are the hero's pills.

   Tokens are read from the site's Additional CSS when present and
   fall back to literals, so the section renders correctly even if
   the global token block is ever removed. Same pattern as hero.css.
   ============================================================ */
.ssr-about {
  --a-dark:      var(--charcoal-700, #414042);
  --a-ink:       var(--text-on-light, #2f2e30);
  --a-muted:     var(--text-on-light-muted, #6f6d73);
  --a-line:      var(--border-on-light, #d6d5d8);
  --a-hair:      var(--charcoal-100, #ececed);
  --a-fill:      var(--charcoal-50, #f7f7f6);
  --a-surface:   var(--surface-light, #fff);
  --a-brand:     var(--accent-brand-strong, #8fa317);
  --a-cta:       var(--accent-cta, #ff5a5f);
  --a-cta-hover: var(--accent-cta-hover, #ea3f45);
  --a-ring:      var(--state-focus-ring, #ff5a5f);
  --a-display:   var(--font-display, Outfit, system-ui, sans-serif);
  --a-body:      var(--font-body, 'Public Sans', system-ui, sans-serif);
  --a-r-md:      var(--radius-md, 8px);
  --a-r-lg:      var(--radius-lg, 14px);
  --a-r-pill:    var(--radius-pill, 999px);
  --a-shadow:    var(--shadow-sm, 0 1px 2px rgba(26,26,27,.06), 0 1px 1px rgba(26,26,27,.04));
  --a-cta-shadow: var(--shadow-cta, 0 8px 20px rgba(255,90,95,.35));
  --a-ease:      var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
  --a-dur:       var(--duration-base, 200ms);

  --a-max:  var(--wp--style--global--wide-size, 1240px); /* page width: Site Editor > Styles > Layout */
  --a-rail: 372px;
  --a-gap:  48px;

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

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

/* wpautop wraps runs of inline elements in <p> and splits around block elements. Injected
   paragraphs become transparent so their children lay out as if they were not there; the
   description's own paragraphs carry a class and stay block-level (rule below). */
.ssr-about p { display: contents; margin: 0; padding: 0; }
.ssr-about p:empty { display: none; }

.ssr-about__inner {
  max-width: var(--a-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--a-rail);
  gap: var(--a-gap);
  align-items: start;
}

/* Flex column so mobile can reorder the blocks without changing the DOM. */
.ssr-about__main { display: flex; flex-direction: column; min-width: 0; }

/* ---- Highlights --------------------------------------------------------- */
.ssr-about__eyebrow {
  order: 1;
  margin: 0;
  font: 600 12px/1.2 var(--a-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-brand);
}

.ssr-about__chips {
  order: 2;
  list-style: none;
  margin: 14px 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* 13b: soft-filled, no outline — the chips read as a quieter layer than the
   hero's stat row above them. */
.ssr-about__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--a-r-md);
  background: var(--a-fill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--a-ink);
}

/* The emoji ships inside the stored string; giving it its own element is the only
   way to size it apart from the label, since the chip is a flex container. */
.ssr-about__chipicon {
  flex: none;
  font-size: 18px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---- About this home ---------------------------------------------------- */
.ssr-about__h2 {
  order: 3;
  margin: 0 0 14px;
  font-family: var(--a-display);
  font-size: clamp(21px, 1.1rem + .6vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--a-ink);
}

.ssr-about__desc { order: 4; position: relative; }

/* The reveal is CSS only: no JS means no flash of the full text before a script
   collapses it, which matters here because FlyingPress defers scripts. */
.ssr-about__state {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.ssr-about__body { max-width: 60ch; }

/* Beats the display:contents rule above — these are real paragraphs. */
.ssr-about .ssr-about__p {
  display: block;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--a-muted);
  text-wrap: pretty;
}

.ssr-about .ssr-about__p:last-child { margin-bottom: 0; }

.ssr-about .ssr-about__p.is-lead {
  font-size: 16.5px;
  color: var(--a-ink);
}

/* Collapsed: clamp by height and fade the cut edge. */
.ssr-about__state:not(:checked) ~ .ssr-about__body {
  max-height: 12.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.ssr-about__state:checked ~ .ssr-about__body { max-height: none; }

.ssr-about__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: var(--a-r-pill);
  background: transparent;
  color: var(--a-dark);
  font-family: var(--a-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--a-dur) var(--a-ease);
}

.ssr-about__toggle:hover { background: var(--a-fill); }
.ssr-about__toggle::before { content: 'Read full description'; }
.ssr-about__state:checked ~ .ssr-about__toggle::before { content: 'Show less'; }

.ssr-about__toggle::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--a-dur) var(--a-ease);
}

.ssr-about__state:checked ~ .ssr-about__toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Focus lands on the visually hidden checkbox, so show it on the label. */
.ssr-about__state:focus-visible ~ .ssr-about__toggle {
  outline: 2px solid var(--a-ring);
  outline-offset: 2px;
}

/* ---- 21a: the hosted features bar --------------------------------------- */
/* The features section renders the bar with its own page-width container for standalone use;
   inside this column it takes the column. Order 5 lands it after the description on desktop
   and after the chips on mobile without touching the DOM. */
.ssr-about__main > .ssr-feat--bar {
  order: 5;
  max-width: none;
  margin: 30px 0 0;
  padding: 0;
}

/* ---- At a glance card --------------------------------------------------- */
.ssr-about__card {
  padding: 24px 24px 22px;
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow);
}

.ssr-about__cardtitle {
  margin: 0;
  font: 700 12px/1.2 var(--a-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-muted);
}

.ssr-about__list { margin: 8px 0 0; }

.ssr-about__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--a-hair);
}

.ssr-about__row:last-of-type { border-bottom: 0; }

.ssr-about__row dt,
.ssr-about__row dd { margin: 0; line-height: 1.35; }

.ssr-about__row dt { font-size: 13px; color: var(--a-muted); }

.ssr-about__row dd {
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  color: var(--a-ink);
  font-variant-numeric: tabular-nums;
}

.ssr-about__row.is-key dd {
  font-family: var(--a-display);
  font-size: 15px;
  font-weight: 700;
}

.ssr-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--a-r-pill);
  font-family: var(--a-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--charcoal-100, #ececed);
  color: var(--charcoal-700, #414042);
}

.ssr-badge--brand   { background: var(--green-100, #f4fad1); color: var(--accent-brand-strong, #8fa317); }
.ssr-badge--cta     { background: var(--coral-100, #ffe4e5); color: var(--coral-700, #c92e34); }
.ssr-badge--success { background: #e4f6ea; color: var(--state-success, #3fae6c); }
.ssr-badge--warning { background: #fbeed2; color: #93701f; }

.ssr-about__cta { margin-top: 16px; }

.ssr-about .ssr-btn--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--a-r-pill);
  background: var(--a-cta);
  color: #fff;
  font-family: var(--a-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--a-cta-shadow);
  transition: background var(--a-dur) var(--a-ease), transform 120ms var(--a-ease);
}

.ssr-about .ssr-btn--cta:hover,
.ssr-about .ssr-btn--cta:focus-visible {
  background: var(--a-cta-hover);
  color: #fff;
  transform: translateY(-1px);
}

.ssr-about .ssr-btn--cta:focus-visible { outline: 2px solid var(--a-ring); outline-offset: 3px; }

.ssr-about .ssr-about__fine {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--a-muted);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .ssr-about { --a-rail: 320px; --a-gap: 32px; }
  .ssr-about__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 20c. Below the rail's breakpoint the card is gone entirely and its job is split:
   the hero's stat row already carries beds/baths/sq ft/acres/year, and the location
   facts come back here as tappable pills. */
/* One breakpoint for the whole page: the hero switches to its mobile layout at 767, so the
   rail drops at 767 too. Splitting them left a 768-1024 band where the card was gone but the
   hero still showed its desktop location line — the facts appeared twice. */
@media (max-width: 767px) {
  .ssr-about { padding: 36px 20px; }
  .ssr-about__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ssr-about__rail { display: none; }

  /* About this home first — the one change from 20c. */
  .ssr-about__h2      { order: 1; }
  .ssr-about__desc    { order: 2; }
  .ssr-about__eyebrow { order: 3; margin-top: 30px; }
  .ssr-about__chips   { order: 4; margin: 14px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ssr-about__body { max-width: none; }
  .ssr-about__state:not(:checked) ~ .ssr-about__body { max-height: 15em; }
  .ssr-about__main > .ssr-feat--bar { margin-top: 24px; }
}

@media (max-width: 860px) {
  .ssr-about__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ssr-about__chips { gap: 8px; }
  .ssr-about__chip { padding: 10px 12px; gap: 8px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssr-about * { transition: none !important; }
}

@media print {
  .ssr-about__state:not(:checked) ~ .ssr-about__body {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ssr-about__toggle, .ssr-about .ssr-btn--cta { display: none; }
  .ssr-about__card { box-shadow: none; }
}