/* wp-content/plugins/notts-osteo-elements/assets/css/price-table.css
 *
 * The price rows. Section chrome — the 1440/72 shell, the heading, the reveal — comes from
 * home-blocks.css, which this widget also depends on; only the rows themselves live here.
 *
 * Ruled rows rather than a grid of boxes: ten priced treatments is a list, and hairlines let the
 * prices line up on one axis down the page where ten cards would break that axis into ten.
 *
 * No raw colours — everything resolves against tokens.css.
 *
 * Author: Sean Burn
 */

.nosteo-price__rows {
  margin: 0;
  padding: 0;
  /* The top rule, so the first row is closed off the same way as the rest. */
  border-top: 1px solid var(--nosteo-hair);
}

/* dl > div > dt/dd is valid HTML5 and is what lets each pairing be one grid without giving up the
   term/definition semantics. */
.nosteo-price__row {
  /* Held as properties so the badge can cancel them EXACTLY to bleed to the row's edges. Hard-coded
     offsets would drift the moment either padding changed. */
  --nosteo-row-pad-y: 26px;
  --nosteo-row-pad-x: 0px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: var(--nosteo-row-pad-y) var(--nosteo-row-pad-x);
  border-bottom: 1px solid var(--nosteo-hair);
  transition: background 240ms var(--nosteo-ease);
}

/* ---------- the treatment ---------- */

.nosteo-price__term {
  margin: 0;
  min-width: 0;
}

.nosteo-price__name {
  display: block;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
  text-wrap: balance;
}

/* Duration as a tag, in the same mono the eyebrows use, so it reads as data rather than prose. */
.nosteo-price__dur {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--nosteo-tint);
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nosteo-resolve-ink);
}

.nosteo-price__desc {
  display: block;
  margin-top: 12px;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--nosteo-muted);
}

/* ---------- the price ---------- */

.nosteo-price__value {
  /* The UA gives dd a 40px inline start margin, which would push every price off the axis. */
  margin: 0;
}

.nosteo-price__figure {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--nosteo-weight-strong);
  /* Same-width digits, so £85 and £120 align on the decimal axis rather than drifting. */
  font-variant-numeric: tabular-nums;
}

.nosteo-price__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--nosteo-muted);
}

/* ---------- the button ---------- */

.nosteo-price__act { min-width: 0; }

/* Orange, because these are booking buttons and that is the site's rule for them. Compact, so ten
   of them down a page read as a price list rather than ten competing calls to action. */
.nosteo-price__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--nosteo-accent);
  box-shadow: inset 0 0 0 1px var(--nosteo-accent);
  color: var(--nosteo-white);
  font-size: 14px;
  font-weight: var(--nosteo-weight-strong);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms var(--nosteo-ease), color 220ms var(--nosteo-ease);
}
/* Colour restated on both states: reset.css carries `a:active,a:hover{color:#336}` at (0,1,1),
   which outranks the base rule above and would otherwise repaint the label navy. */
.nosteo-price__cta:hover,
.nosteo-price__cta:focus-visible {
  background: var(--nosteo-white);
  color: var(--nosteo-accent);
}
.nosteo-price__cta:focus-visible {
  outline: 2px solid var(--nosteo-ink);
  outline-offset: 2px;
}

/* ---------- the flagged row ---------- */

/* Kept to a tint and an edge. A flag that changes the type as well as the surface stops being a
   flag and becomes a second design. */
.nosteo-price__row--flagged {
  background: var(--nosteo-tint);
  box-shadow: inset 3px 0 0 var(--nosteo-accent);
  /* Clears the 3px accent edge. Without it the badge and the body copy both sat flush against that
     edge and merged into it — two orange shapes touching, which read as a rendering fault. */
  --nosteo-row-pad-x: 18px;
}

/* A full-width band across the top of the row on a phone, not a small inline tag. At this width a
   tag has nowhere to sit except against the accent edge, and a band that meets it deliberately
   reads as a ribbon on a rail instead of a collision. Negative margins cancel the row's padding on
   three sides so it reaches the row's own edges. */
.nosteo-price__badge {
  display: block;
  margin: calc(-1 * var(--nosteo-row-pad-y)) calc(-1 * var(--nosteo-row-pad-x)) 16px;
  padding: 9px var(--nosteo-row-pad-x);
  background: var(--nosteo-accent);
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nosteo-white);
}

.nosteo-price__foot {
  margin: 22px 0 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nosteo-muted);
}

/* ---------- side by side ----------
   Measured against the section container, not the window, so the block reflows to the space it is
   actually in. `auto` on the last two columns means the price column is only ever as wide as the
   longest price, which is what keeps the buttons on a single axis. */
@container nosteo-sec (min-width: 700px) {
  .nosteo-price__row {
    --nosteo-row-pad-y: 30px;

    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: clamp(20px, 3vw, 44px);
  }
  .nosteo-price__row--flagged { --nosteo-row-pad-x: 24px; }
  /* Back to a small inline tag: there is room beside the name here, and a full-width band across a
     1200px row would be a stripe rather than a flag. */
  .nosteo-price__badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
  }
  .nosteo-price__value { text-align: right; }
  /* Optically level with the treatment name, whose cap height sits below its line box top. */
  .nosteo-price__figure { margin-top: 2px; }
}

@supports not (container-type: inline-size) {
  @media (min-width: 860px) {
    .nosteo-price__row {
      --nosteo-row-pad-y: 30px;

      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: start;
      gap: clamp(20px, 3vw, 44px);
    }
    .nosteo-price__row--flagged { --nosteo-row-pad-x: 24px; }
    .nosteo-price__badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; }
    .nosteo-price__value { text-align: right; }
    .nosteo-price__figure { margin-top: 2px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-price__row,
  .nosteo-price__cta { transition: none; }
}