/* -----------------------------------------------------------------------------
   mod-box-grid — heading + optional intro + a grid of cards.

   The grid is six columns wide and cards span it, which is what lets one
   module do both 2-up and 3-up off a single track definition:

       6 columns, 24px gap, inside the 1200px container
       2-up  span 3  →  588px      (measured on the reference: 588)
       3-up  span 2  →  384px      (measured: 384)
       lone trailing card span 6  →  1200px

   Everything here is scoped under .b-box-grid. The only colours, sizes and
   durations used are the ones in alwc-tokens.css.
   -------------------------------------------------------------------------- */

.b-box-grid {
  position: relative;
  overflow: clip;
}

/* --- background photograph (--media) ---------------------------------------
   Independent of inversion. The reference shows its light instance's photo at
   full strength; we hold it back to a texture instead, because body copy over
   a full-strength photograph cannot be guaranteed AA and AA is this project's
   floor, not its target. On the dark band the reference measures the photo at
   0.2 over the flat green, which is what --inverted does here. */

.b-box-grid__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.b-box-grid__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}

/* 0.14 rather than the reference's measured 0.2. At 0.2 the brightest patch
   of a photograph composites to about rgb(89 96 82), and --sage-light body
   copy over that measures 4.0:1 — under the AA floor. 0.14 brings the same
   patch to 4.7:1 with no visible change to the register. */
.b-box-grid--inverted .b-box-grid__bg img {
  opacity: 0.14;
}

.b-box-grid > .container {
  position: relative;
  z-index: 1;
}

/* --- heading block --------------------------------------------------------
   Centred, as on the reference. The intro sits under it on a short measure so
   it reads as one block with the heading rather than as running text. */

.b-box-grid__head {
  text-align: center;
  margin-bottom: var(--sp-16);
}

/* A second head inside the same band, for a block that carries two related
   grids under one section (added 12 Aug 2026 for /aesthetics/, where the six
   facials and the three peels are one choice made twice — separate sections
   would have implied they were unrelated services). It needs top space that
   the first head, sitting directly under the band padding, does not. */
.b-box-grid__head--second {
  margin-top: clamp(var(--sp-16), 8vw, var(--sp-24));
}

.b-box-grid__heading {
  max-width: 20ch;
  margin-inline: auto;
}

.b-box-grid__intro {
  max-width: 58ch;
  margin: var(--sp-6) auto 0;
  color: var(--soft);
}

.b-box-grid--inverted .b-box-grid__intro {
  color: var(--sage-light);
}

/* --- the grid ------------------------------------------------------------- */

.b-box-grid__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.b-box-grid__card {
  grid-column: span 3;
  padding: var(--sp-10) var(--sp-12);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.b-box-grid--3up .b-box-grid__card {
  grid-column: span 2;
}

/* A lone odd card at the end of a 2-up grid takes the full width rather than
   sitting half-empty. Measured on the reference: 5 cards lay out 2 / 2 / 1
   with the fifth running the whole 1200. Only applies to the 2-up default. */
.b-box-grid:not(.b-box-grid--3up) .b-box-grid__card:last-child:nth-child(odd) {
  grid-column: span 6;
}

/* --- card contents -------------------------------------------------------- */

.b-box-grid__card-title {
  color: var(--ink);
}

/* The short rule under each card title. Sage is a decorative mark here, never
   text — which is the one place the system allows it on a light ground.

   THE RULE BELONGS TO THE TITLE, so it sits closer to it than to the body.
   It used to be 16px below the title and 20px above the body — near enough to
   equal that it read as floating between the two rather than underlining the
   heading, and the description looked stuck to it. 12 above and 24 below is
   the same 38px in total, so no card changes height; the difference is
   entirely which side the mark reads as belonging to. This is the site's most
   repeated card — 140 of them across 29 pages — so the rhythm here sets the
   impression of every grid on the site. */
.b-box-grid__card-title::after {
  content: "";
  display: block;
  width: var(--sp-16);
  height: 2px;
  margin-top: var(--sp-3);
  background: var(--sage);
}

.b-box-grid__card-body {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  color: var(--soft);
}

/* --- inverted -------------------------------------------------------------
   Reversed type. Cards become a lifted panel rather than a solid white fill —
   a white card on the dark band would punch a hole in it. The reference
   measures rgba(255,255,255,0.1) on exactly these four cards.

   The fill is 10% white mixed into --dark and is OPAQUE, not translucent.
   Translucent cards let the photograph through, and a card's contrast then
   depends on which part of the photograph happens to be behind it — which is
   not something a page author can check. Opaque gives one fixed value,
   5.2:1 for the body copy, everywhere. It also matches what the reference
   actually looks like: its cards read as flat panels, not as windows. */

.b-box-grid--inverted .b-box-grid__card {
  background: color-mix(in srgb, var(--card) 10%, var(--dark));
  border-color: color-mix(in srgb, var(--sage) 34%, transparent);
}

.b-box-grid--inverted .b-box-grid__card-title {
  color: var(--card);
}

.b-box-grid--inverted .b-box-grid__card-body {
  color: var(--sage-light);          /* 7.13:1 on --dark */
}

/* --- light ground carrying a photograph -----------------------------------
   The card takes a slight warm tint so it sits on the photograph rather than
   floating clear of it. Opaque, for the same reason as above. */

.b-box-grid--media:not(.b-box-grid--inverted) .b-box-grid__card {
  background: color-mix(in srgb, var(--card) 88%, var(--alt));
}

/* --- numbered steps (--steps) ---------------------------------------------
   The numeral is drawn by a CSS counter, so adding, deleting or reordering a
   step renumbers the whole grid on its own. Pair with <ol> in the markup —
   that is what carries the order for a screen reader; this is the visible
   half of the same fact. */

.b-box-grid--steps .b-box-grid__grid {
  counter-reset: b-box-grid-step;
}

.b-box-grid--steps .b-box-grid__card {
  counter-increment: b-box-grid-step;
}

.b-box-grid--steps .b-box-grid__card-title::before {
  content: counter(b-box-grid-step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--w-label);
  line-height: 1.4;
  letter-spacing: var(--track-label);
  color: var(--accent);              /* 5.67:1 on the light ground */
}

/* Sage is only a legal text colour on the dark band, so the numeral changes
   with the ground rather than staying one colour. */
.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card-title::before {
  color: var(--sage-light);
}

/* --- copy slots -----------------------------------------------------------
   Same treatment as the homepage sections: dashed underline, softened colour,
   so an unfilled slot is obvious at a glance and impossible to mistake for
   finished copy. Delete the s-slot classes as each slot is filled. */

.b-box-grid .s-slot {
  color: var(--soft);
  text-decoration: underline dashed var(--line);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.b-box-grid .s-slot--inline {
  display: inline-block;
}

.b-box-grid--inverted .s-slot {
  color: var(--sage-light);
  text-decoration-color: color-mix(in srgb, var(--sage) 55%, transparent);
}

/* --- narrow ---------------------------------------------------------------
   One column below 1000px, matching the reference's single-track tablet and
   mobile layouts. The full-width-orphan rule is switched off with it, since
   every card is full width by then anyway. */

@media (max-width: 1000px) {
  .b-box-grid__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .b-box-grid .b-box-grid__card,
  .b-box-grid:not(.b-box-grid--3up) .b-box-grid__card:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .b-box-grid__head {
    margin-bottom: var(--sp-12);
  }
}

@media (max-width: 560px) {
  .b-box-grid__card {
    padding: var(--sp-8) var(--sp-6);
  }
  .b-box-grid__heading {
    max-width: none;
  }
}

/* ── appointment storyboard -------------------------------------------------
   Inverted step sections use the approved two-plane composition: an image-led
   dark introduction followed by one connected editorial timeline. Only the
   selected second step takes the strong fill, so four equal cards no longer
   compete at the same volume. */

.b-box-grid--inverted.b-box-grid--steps {
  background: var(--home-forest-deep);
  color: var(--home-paper);
}

/* The photo panel spans the FULL height of the dark zone (21 Aug 2026,
   Robyn: the fixed 390px panel left a bare forest strip between the photo
   and the cream rank on every taller band — "why is this green space
   here"). Bottom-pinned it runs behind the cream rank, whose own opaque
   ground hides it, so the visible photo always ends exactly where the
   cream begins — at any heading length, on all nine pages that use this
   modifier. */
.b-box-grid--inverted.b-box-grid--steps .b-box-grid__bg {
  inset: 0 0 0 auto;
  inline-size: 61%;
  overflow: hidden;
}

/* And the band's bottom forest frame goes with it — the rank now flows
   straight into the next section instead of floating inside a dark
   border. */
.b-box-grid--inverted.b-box-grid--steps {
  padding-block-end: 0;
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--home-forest-deep), transparent 45%);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__bg img {
  opacity: .72;
  object-position: 50% 45%;
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__head {
  inline-size: min(39%, 460px);
  min-block-size: 280px;
  margin: 0 0 clamp(var(--sp-16), 7vw, var(--sp-24));
  text-align: start;
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__heading {
  margin-inline: 0;
  color: var(--home-paper);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__heading::after {
  content: "";
  display: block;
  inline-size: var(--sp-16);
  block-size: 3px;
  margin-block-start: var(--sp-8);
  background: var(--home-orange);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__intro {
  margin-inline: 0;
  color: var(--sage-light);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  align-items: stretch;
  padding-block-start: var(--sp-6);
  background: var(--home-paper);
  box-shadow: 0 0 0 100vmax var(--home-paper);
  clip-path: inset(0 -100vmax);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__grid::before {
  content: "";
  position: absolute;
  inset: var(--sp-10) 0 auto;
  block-size: 1px;
  background: var(--sage);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card,
.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:last-child:nth-child(odd) {
  grid-column: auto;
  position: relative;
  z-index: 1;
  min-block-size: 330px;
  padding: 0 var(--sp-6) var(--sp-8);
  border: 0;
  border-radius: 0;
  background: var(--home-paper);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card + .b-box-grid__card {
  border-inline-start: 1px solid var(--home-line);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) {
  margin-block-start: calc(var(--sp-6) * -1);
  padding-block-start: var(--sp-6);
  background: var(--home-forest-deep);
  box-shadow: 0 18px 40px rgb(19 39 28 / 12%);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card-title {
  color: var(--home-forest-deep);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card-title::before {
  margin-block-end: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  font-weight: var(--w-body);
  letter-spacing: var(--track-display);
  color: var(--home-forest);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) .b-box-grid__card-title,
.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) .b-box-grid__card-title::before {
  color: var(--home-paper);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) .b-box-grid__card-title::before {
  color: var(--home-orange);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card-title::after {
  inline-size: var(--sp-10);
  block-size: 2px;
  background: var(--sage);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) .b-box-grid__card-title::after {
  background: var(--home-orange);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card-body {
  color: var(--ink);
}

.b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) .b-box-grid__card-body {
  color: var(--sage-light);
}

@media (max-width: 900px) {
  .b-box-grid--inverted.b-box-grid--steps {
    background: var(--home-forest-deep);
  }
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__bg {
    position: relative;
    inline-size: 100%;
    block-size: 280px;
    margin-block-end: var(--sp-8);
  }
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__head {
    inline-size: 100%;
    min-block-size: 0;
    margin-block-end: var(--sp-10);
  }
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__grid::before {
    inset: 0 auto 0 var(--sp-8);
    inline-size: 1px;
    block-size: auto;
  }
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__card,
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:last-child:nth-child(odd),
  .b-box-grid--inverted.b-box-grid--steps .b-box-grid__card:nth-child(2) {
    min-block-size: 0;
    margin: 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-8) var(--sp-16);
    border-inline-start: 0;
    border-block-end: 1px solid var(--home-line);
  }
}