/* wp-content/plugins/notts-osteo-elements/assets/css/service-double.css
 *
 * The two-block component. SHARED BY TWO WIDGETS:
 *   ServiceDouble  — what a service treats / what it does for you
 *   EnquireDouble  — Enquire / Book an appointment, on every condition page
 * Same chrome, two content shapes. Changing anything here changes both, on purpose.
 * No raw colours — everything resolves against tokens.css or the custom properties the
 * Elementor controls write onto the wrapper.
 *
 * ON THE SITE GRID. The block's background runs full width and its CONTENT sits on the same
 * 1440 / 72 grid as the header and footer, using the same two tokens. Nothing here restates
 * those numbers, so the grid is changed in one place.
 *
 * Author: Sean Burn
 */

.nosteo-double {
  --nosteo-double-marker: var(--nosteo-accent);
  --nosteo-double-rule:   var(--nosteo-ink);
  --nosteo-double-left:   var(--nosteo-surface);
  --nosteo-double-right:  var(--nosteo-tint);

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

.nosteo-double__inner {
  max-width: var(--nosteo-site-max);
  margin: 0 auto;
  /* Was `0` vertically, which is why the coloured blocks butted straight against the hero above
     them with no gap. On the shared rhythm now. */
  padding: var(--nosteo-section-pad-y) var(--nosteo-site-pad);
}

/* Stacked by default; two columns once there is room. Mobile-first, so a layout that fails
   to match anything is a readable stack rather than two squeezed columns. */
.nosteo-double__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* Both blocks are the same height, set by whichever has more in it — they are a matched pair,
   and two panels of different heights sitting side by side read as something broken rather
   than as a response to the content. (This deliberately reverses an earlier decision to let
   them size independently; the ragged bottom edge was worse than the extra whitespace.)
   Every block is a flex column so anything with margin-top:auto — the mark, the buttons —
   lands on the block floor, which also lines the two buttons up with each other. */
.nosteo-double__block {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 56px);
}
.nosteo-double__block--treats { background: var(--nosteo-double-left); }
.nosteo-double__block--benefits { background: var(--nosteo-double-right); }

/* ---------- headings ---------- */

.nosteo-double__heading {
  margin: 0 0 18px;
  padding-bottom: 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: var(--nosteo-weight-strong);
  /* Short heavy rule under the heading, not a full-width hairline: it belongs to the words,
     so it is sized to them rather than to the block. */
  border-bottom: 0;
  position: relative;
}
.nosteo-double__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  max-width: 300px;
  height: 4px;
  background: var(--nosteo-double-rule);
}

.nosteo-double__intro {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nosteo-ink);
}

/* ---------- lists ---------- */

.nosteo-double__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nosteo-double__item {
  position: relative;
  /* Room for the ring, and a hanging indent so wrapped lines clear it rather than running
     back under the bullet. */
  padding: 0 0 0 34px;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.nosteo-double__item:last-child { margin-bottom: 0; }

/* The ring. A drawn circle rather than a list marker so its colour and weight are
   controllable and it lines up with the first line of text at any font size. */
.nosteo-double__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 13px;
  height: 13px;
  border: 2px solid var(--nosteo-double-marker);
  border-radius: 50%;
}

.nosteo-double__list--benefits .nosteo-double__item { margin-bottom: 18px; }

.nosteo-double__label {
  font-weight: var(--nosteo-weight-strong);
  /* Inline, so the description continues on the same line and wraps under it as one
     paragraph — the label is emphasis, not a separate row. */
}

/* ---------- close ---------- */

/* `margin-top: auto` pushes the mark AND the button below it to the block floor as one group.
   Without it, equal-height blocks left this pair sitting mid-panel with dead space beneath —
   the button has its own auto margin, but the rule further down cancels it when the mark is
   present, so the mark is what has to do the pushing. The gap above is padding, not margin,
   because auto absorbs all the free space and would leave no minimum. */
.nosteo-double__mark {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: auto 0 22px;
  padding-top: 30px;
  color: var(--nosteo-ink);
}
.nosteo-double__mark span {
  flex: 1 1 0;
  height: 2px;
  background: var(--nosteo-double-rule);
}
/* 26x33 now, matching the mark's own viewBox — the old chevron was 24x20 and squashing the new
   one into that box would distort it. */
.nosteo-double__mark svg { width: 26px; height: 33px; flex: none; }
.nosteo-double__mark + .nosteo-double__cta { margin-top: 0; }

.nosteo-double__cta {
  /* One local property drives the fill, the hairline and the hover text, so a variant only has
     to change this — not restate four declarations and drift from them later. */
  --nosteo-cta-colour: var(--nosteo-accent);

  display: block;
  margin-top: auto;
  padding: 16px 24px;
  background-color: var(--nosteo-cta-colour);
  /* Wipes to white on hover, the same gesture as the header's Book Now. background-size on a
     flat gradient, so there is no pseudo-element to stack against the button's own fill and
     the label needs no wrapper to stay above it. */
  background-image: linear-gradient(var(--nosteo-white), var(--nosteo-white));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  box-shadow: inset 0 0 0 1px var(--nosteo-cta-colour);
  color: var(--nosteo-white);
  font-size: 15px;
  font-weight: var(--nosteo-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-size 320ms var(--nosteo-ease), color 200ms var(--nosteo-ease);
}
/* Colour restated on every state: Hello Elementor's reset ships
   `a:active, a:hover { color: #336 }` at (0,1,1), which outranks a single-class rule and
   turns the label navy. */
.nosteo-double__cta:hover,
.nosteo-double__cta:focus-visible,
.nosteo-double__cta:active {
  background-size: 100% 100%;
  color: var(--nosteo-cta-colour);
}

/* Orange is reserved for booking. Everything else that is a button — enquiring, contacting —
   is ink, so the one action the practice actually wants is the only one wearing the accent.
   Inverts to ink-on-white through the same wipe, no extra rules needed. */
.nosteo-double__cta--ink { --nosteo-cta-colour: var(--nosteo-ink); }
.nosteo-double__cta:focus-visible {
  outline: 2px solid var(--nosteo-ink);
  outline-offset: 3px;
}

/* ---------- two columns ---------- */

/* The block can sit in any container, so it measures ITSELF rather than the window — the
   same reason the footer does. A viewport media query would put two columns in a narrow
   container on a wide screen. */
.nosteo-double__inner {
  container-type: inline-size;
  container-name: nosteo-double;
}

@container nosteo-double (min-width: 780px) {
  .nosteo-double__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
    /* No align-items: grid stretches by default, which is what matches the heights. Setting
       `start` here is exactly what used to let them run ragged. */
  }
}

/* Same switch where container queries are unavailable. Scoped to @supports so the two can
   never both apply, and mobile-first means an old browser matching neither simply stacks. */
@supports not (container-type: inline-size) {
  @media (min-width: 940px) {
    .nosteo-double__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(24px, 3vw, 44px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-double__cta { transition: none !important; }
}


/* ---------- Enquire variant ----------
   Same blocks and bullets; different content. The flex column and the floored button now come
   from the base rules, so this only needs the spacing above the button. */

.nosteo-double--enquire .nosteo-double__list { margin-bottom: 28px; }

/* A link inside a bullet. Underlined at rest, because in a list of statements a link that is
   only a colour change is easy to miss entirely. */
.nosteo-double__item a {
  color: var(--nosteo-resolve-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nosteo-double__item a:hover,
.nosteo-double__item a:focus-visible { color: var(--nosteo-accent); }

.nosteo-double__address {
  margin: 0 0 20px;
  font-style: normal;      /* <address> italicises by default; this is a postal address */
  font-size: 16px;
  line-height: 1.7;
}

/* The button when it has moved into the left column, because the right had nothing to say.
   Floors it the same way the mark does, so it still sits on the block's bottom edge. */
.nosteo-double__close {
  margin-top: auto;
  padding-top: 30px;
}
.nosteo-double__close .nosteo-double__cta { margin-top: 0; }