/* wp-content/plugins/notts-osteo-elements/assets/css/intro-block.css
 *
 * The prose section on a condition page. No raw colours — everything resolves against
 * tokens.css or the custom properties the Elementor controls write onto the wrapper.
 *
 * ON THE SITE GRID: full-width background, content on the same 1440 / 72 as everything else.
 *
 * Author: Sean Burn
 */

.nosteo-intro {
  --nosteo-intro-bg: var(--nosteo-white);

  background: var(--nosteo-intro-bg);
  font-family: var(--nosteo-font);
  color: var(--nosteo-ink);
}

.nosteo-intro__inner {
  max-width: var(--nosteo-site-max);
  margin: 0 auto;
  padding: var(--nosteo-section-pad-y) var(--nosteo-site-pad);
  /* Measures itself, not the window — the block can sit in any container. */
  container-type: inline-size;
  container-name: nosteo-intro;
}

/* Stacked by default. */
.nosteo-intro__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
/* One rule doing the separating, not two. margin AND padding both scaling meant the gap
   between passages was double what either value suggested. */
.nosteo-intro__section + .nosteo-intro__section {
  margin-top: clamp(26px, 4vw, 56px);
  padding-top: clamp(26px, 4vw, 56px);
  border-top: 1px solid var(--nosteo-hair-soft);
}

.nosteo-intro__heading {
  margin: 0;
  padding-bottom: 14px;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
  /* Short heavy rule belonging to the words rather than the column. */
  position: relative;
}
.nosteo-intro__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  background: var(--nosteo-resolve);
}

.nosteo-intro__text > p {
  /* A measure, not the full column. Prose set across 1296px is unreadable — the eye loses
     the line on the way back. This is the single biggest difference from the live version. */
  max-width: 68ch;
  margin: 0 0 1em;
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.72;
  color: var(--nosteo-muted-ink, var(--nosteo-ink));
}
.nosteo-intro__text > p:last-child { margin-bottom: 0; }

/* ---------- editorial two-column ----------
   The heading moves into a narrow left rail and the prose runs beside it. Sticky, so on a
   long passage the heading stays with the text it names instead of scrolling away. */

@container nosteo-intro (min-width: 820px) {
  .nosteo-intro__section {
    grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .nosteo-intro__rail {
    position: sticky;
    top: calc(var(--nosteo-header-h, 0px) + 28px);
  }
  .nosteo-intro__heading { padding-bottom: 16px; }
}

@supports not (container-type: inline-size) {
  @media (min-width: 980px) {
    .nosteo-intro__section {
      grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
      gap: clamp(28px, 4vw, 64px);
      align-items: start;
    }
    .nosteo-intro__rail {
      position: sticky;
      top: calc(var(--nosteo-header-h, 0px) + 28px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sticky is not motion, but a heading that tracks the scroll can be disorienting for the
     same visitors, so it stands still too. */
  .nosteo-intro__rail { position: static; }
}