/* ==========================================================================
   COMPONENT — .c-services / .c-service
   Relocation. Four collapsible cards, one per row.

   Built on <details> and <summary> rather than on a tab widget assembled from
   divs and ARIA. That is not a shortcut: it opens and closes with no
   JavaScript at all, it is keyboard-operable and announced correctly with
   nothing written by us, and it prints open. A hand-built tablist has to
   re-implement every one of those and gets at least one of them wrong.

   The shared `name="relocation"` makes the BROWSER close the others, so the
   accordion is exclusive with no state kept anywhere. Where `name` is not
   supported the cards simply open independently, which nobody notices.

   Desktop: the heading holds the left of the card, the detail the right.
   Mobile: the same card stacked, heading over detail.
   WP Phase 2 target: template-parts/sections/services.php
   ========================================================================== */

.c-services {
  position: relative;
  padding-block: var(--section-pad);
  color: var(--stone-50);
  overflow: clip;
}

.c-services .c-head__standfirst { color: var(--stone-300); }
.c-services .c-head__index { color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   THE STACK
   -------------------------------------------------------------------------- */

.c-services__stack {
  grid-column: content-start / content-end;
  display: grid;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   ONE CARD
   -------------------------------------------------------------------------- */

.c-service {
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 20%, transparent);
  background: color-mix(in oklab, var(--slate-950) 42%, transparent);
  backdrop-filter: blur(10px);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.c-service:hover { border-color: color-mix(in oklab, var(--stone-50) 34%, transparent); }

.c-service[open] {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--slate-950) 62%, transparent);
}

/* --- The heading row ------------------------------------------------------ */

.c-service__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  list-style: none;            /* Firefox */
  user-select: none;
}

/* The default disclosure triangle, removed in favour of our own mark. */
.c-service__head::-webkit-details-marker { display: none; }

.c-service__head:focus-visible {
  outline: var(--bw-rule) solid var(--c-accent);
  outline-offset: calc(var(--bw-rule) * -3);
}

.c-service__no {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  color: var(--slate-300);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-service[open] .c-service__no { color: var(--c-accent-text); }

.c-service__name {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-light);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--stone-300);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.c-service[open] .c-service__name,
.c-service__head:hover .c-service__name { color: var(--stone-50); }

.c-service__tag {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--slate-300);
  white-space: nowrap;
}

/* A plus that becomes a minus. Two strokes, one rotated away. */
.c-service__mark {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: grid;
  place-content: center;
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 26%, transparent);
  color: var(--stone-300);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.c-service__mark svg { inline-size: 0.85rem; block-size: auto; }

.c-service__mark svg path {
  transition: d var(--dur-fast) var(--ease-out);
}

.c-service__mark svg { transition: transform var(--dur-base) var(--ease-out); }

/* The mark is a way IN, not a way out. On an open card it sat at the right
   edge of the heading column — which is exactly where the longest names end,
   so it collided with them — and it was never needed: opening another card
   closes this one, and the heading itself still toggles. So it goes when the
   card is open, and the collision goes with it. */
.c-service[open] .c-service__mark { display: none; }

/* --- The body ------------------------------------------------------------- */

.c-service__body {
  /* Two columns on a wide screen: the heading above holds the left of the
     card, so the detail is indented to sit under the name rather than under
     the number, which keeps a straight edge down the section. */
  padding: 0 var(--sp-6) var(--sp-6);
}

.c-service__inner {
  display: grid;
  gap: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 14%, transparent);
}

.c-service__lede {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
}

.c-service__copy {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--stone-300);
}

.c-service__points {
  display: grid;
  gap: var(--sp-3);
}

.c-service__points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--stone-300);
}

.c-service__points li::before {
  content: "";
  inline-size: var(--sp-4);
  block-size: var(--bw-hair);
  margin-block-start: 0.7em;
  background: var(--c-accent);
}

.c-service__body .c-action { color: var(--stone-50); }
.c-service__body .c-action:hover { color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   WIDE: heading left at 25%, detail right at 75%

   The previous attempt let the heading keep its full display size inside a
   22rem column. `white-space: nowrap` does not shrink, so the name simply
   ran out of its column and painted straight over the body text — the two
   columns overlapped rather than sitting side by side.

   Three things fix it, and all three are needed:

   1. The name is sized to the column rather than to the page. Measured, the
      longest of the four — "Tax & Legal Guidance" — is 335px at 34px and
      258px at 26px, and the column offers roughly 386px at 1920 down to
      235px at 1200. The clamp below tracks that.
   2. The number is taken out of the flow, so it stops eating 44px of the
      column that the name needs.
   3. `min-inline-size: 0` and `overflow: hidden` on the two columns, so that
      if any of this is ever wrong again it clips instead of overlapping.

   The split starts at 75rem rather than at 62rem: below 1200px a quarter of
   the rail cannot hold these names on one line at any size worth reading, so
   the card stacks instead — which is what the narrow layout already does.
   -------------------------------------------------------------------------- */

@media (min-width: 75rem) {
  .c-service[open] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 25%) minmax(0, 75%);
    align-items: stretch;
  }

  .c-service[open] .c-service__head {
    position: relative;
    grid-column: 1;
    min-inline-size: 0;
    overflow: hidden;
    display: block;                     /* the number is positioned, not placed */
    padding: var(--sp-5) var(--sp-5) var(--sp-6) calc(var(--sp-6) + 2.25rem);
  }

  .c-service[open] .c-service__no {
    position: absolute;
    inset-block-start: calc(var(--sp-5) + 0.55em);
    inset-inline-start: var(--sp-6);
  }

  .c-service[open] .c-service__name {
    display: block;
    /* Measured, not guessed: at 1920 the column offers about 346px of text
       and "Tax & Legal Guidance" is 335px at 34px — which fits by ONE
       pixel, so the ceiling is 33 and the line has real margin.
       The floor tracks the column down to 1200, where it offers only 195px.

       At the wide end all four names hold one line. Towards 1200 the longest
       two cannot, at any size worth reading — so they are allowed to wrap
       there rather than being clipped, balanced across two lines inside
       their own column. That is a heading finding its measure, not the kind
       of ragged wrap the rest of the page forbids. */
    font-size: clamp(1.45rem, -0.125rem + 1.8vw, 2.05rem);
    line-height: var(--lh-tight);
    white-space: normal;
    text-wrap: balance;
  }

  .c-service[open] .c-service__tag {
    display: block;
    margin-block-start: var(--sp-3);
  }



  .c-service[open] .c-service__body {
    grid-column: 2;
    min-inline-size: 0;
    overflow: hidden;
    /* Clear of the mark in the top right. */
    padding: var(--sp-5) calc(var(--sp-6) + 3rem) var(--sp-6) 0;
  }

  .c-service[open] .c-service__inner {
    padding-block-start: 0;
    border-block-start: 0;
    border-inline-start: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 14%, transparent);
    padding-inline-start: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   NARROW
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .c-service__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
  }

  /* The tag is the first thing to go: the name already says what it is. */
  .c-service__tag { display: none; }

  .c-service__name { font-size: var(--fs-xl); }

  .c-service__body { padding: 0 var(--sp-5) var(--sp-5); }
}

@media (max-width: 26rem) {
  /* Below this the name cannot hold one line at any readable size, so the
     rule that keeps it on one line has to give way rather than clip it. */
  .c-service__name { white-space: normal; font-size: var(--fs-lg); }
}

/* --------------------------------------------------------------------------
   MOTION
   The body slides rather than appearing. `content-visibility` is what makes
   this animatable on <details> without measuring anything in JavaScript;
   where it is unsupported the card simply opens instantly.
   -------------------------------------------------------------------------- */

@supports (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }

  .c-service::details-content {
    block-size: 0;
    overflow: hidden;
    /* Deliberately slower than anything else on the page. 340ms was the
       shared base duration and it was wrong here: a card opening is the
       largest single movement on the site — a whole panel of copy arriving —
       and at base speed it was over before the eye had followed it down.
       At 900ms the card opens at the speed a hand would open it. */
    transition:
      block-size 0.9s var(--ease-out),
      content-visibility 0.9s allow-discrete;
  }

  .c-service[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------------------
   WHAT IS INSIDE ARRIVES AFTER THE CARD HAS MADE ROOM FOR IT

   The panel opening and the copy appearing are two events, not one. Each
   child waits its turn, and the last of them lands a little after the height
   animation finishes — so the card is still settling as the last line
   arrives, rather than everything being finished before the movement is.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .c-service__inner > * {
    opacity: 0;
    translate: 0 0.9rem;
    transition:
      opacity 0.55s var(--ease-out),
      translate 0.55s var(--ease-out);
  }

  .c-service[open] .c-service__inner > * { opacity: 1; translate: 0 0; }

  .c-service[open] .c-service__inner > *:nth-child(1) { transition-delay: 0.22s; }
  .c-service[open] .c-service__inner > *:nth-child(2) { transition-delay: 0.34s; }
  .c-service[open] .c-service__inner > *:nth-child(3) { transition-delay: 0.46s; }
  .c-service[open] .c-service__inner > *:nth-child(4) { transition-delay: 0.58s; }

  /* The bullets inside the list get their own run, so a four-point list
     reads down rather than appearing as a block. */
  .c-service__points li {
    opacity: 0;
    translate: 0 0.6rem;
    transition:
      opacity 0.5s var(--ease-out),
      translate 0.5s var(--ease-out);
  }

  .c-service[open] .c-service__points li { opacity: 1; translate: 0 0; }
  .c-service[open] .c-service__points li:nth-child(1) { transition-delay: 0.50s; }
  .c-service[open] .c-service__points li:nth-child(2) { transition-delay: 0.60s; }
  .c-service[open] .c-service__points li:nth-child(3) { transition-delay: 0.70s; }
  .c-service[open] .c-service__points li:nth-child(4) { transition-delay: 0.80s; }
  .c-service[open] .c-service__points li:nth-child(n+5) { transition-delay: 0.90s; }
}

@media (prefers-reduced-motion: reduce) {
  .c-service,
  .c-service__mark svg,
  .c-service__inner > *,
  .c-service__points li,
  .c-service::details-content { transition: none; }
}