/* ============================================================
   Services — four rooms, one of them open.

   The old version was a 2x2 plate: photograph, title, rule, three
   lines of copy, link — four times over. It was legible and it was
   inert. Every card showed everything it had at once, so there was
   nothing to do with it and nothing to look at second.

   This is a rack instead. Four tall panels stand side by side
   showing only the room and its name; the one you point at opens,
   taking width from the other three, and an ink veil wipes up the
   photograph while the copy unfolds underneath the name. The
   section holds one open by default, so it never presents as four
   closed doors.

   Three things it has to survive, and does:

     - No pointer. Touch gets a stacked grid with the copy always
       visible — the veil is an affordance, not the content.
     - Keyboard. Each panel is a link and :focus-within opens it, so
       tabbing walks the rack open panel by panel.
     - No JS. The first panel is open in CSS, so a script failure
       leaves a working, readable section.
   ============================================================ */

.services__rack {
  display: flex;
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--rule);
  border: 1px solid var(--rule);
  /* Tall enough to read as rooms rather than as thumbnails; below
     this the copy has nowhere to sit once the panel opens. */
  height: clamp(440px, 62vh, 640px);
  overflow: hidden;
}

.svc {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--blue);
  /* flex-grow is the animated property, not width: it keeps the four
     panels summing to the rack at every frame, so nothing reflows
     outside it and no gap opens along the right edge. */
  transition: flex-grow 0.85s var(--ease);
  will-change: flex-grow;
}

/* ---- Layer 0: the room ---- */

.svc__plate { position: absolute; inset: 0; z-index: 0; }
.svc__plate .media { position: absolute; inset: 0; background: var(--blue); }

/* The reveal curtain is painted --bg by default, which dissolves into
   the page everywhere a photograph sits directly on paper. Here it
   does not: the rack is a dark object standing on warm paper, so a
   cream curtain wiping off these images would read as a flash of the
   page behind them. It takes the panel's colour instead. */
.svc__plate .media__curtain { background: var(--blue); }
/* `scale` rather than `transform` — see the note on .media img in
   base.css: revealMedia owns the inline transform on these. */
.svc__plate img {
  filter: saturate(0.8) contrast(1.08) brightness(0.7);
  transition: filter 0.9s var(--ease), scale 1.4s var(--ease);
}

/* ---- Layer 1: the veil.
   clip-path rather than a transform so the type standing in front of
   it neither scales nor smears, and so it is the same gesture as the
   boot curtain and the work captions — one wipe, three scales. ---- */

.svc__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgb(6 14 28 / 0.94) 0%,
    rgb(6 14 28 / 0.86) 45%,
    rgb(6 14 28 / 0.62) 100%);
  clip-path: inset(100% 0% 0% 0%);
  transition: clip-path 0.85s var(--wipe);
}

/* A permanent floor of ink under the name, so a white label never
   has to sit on an unlucky patch of ceiling while the panel is shut. */
.svc__base {
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(10 22 40 / 0.9) 0%,
    rgb(10 22 40 / 0.5) 44%,
    rgb(10 22 40 / 0) 100%);
}

/* ---- Layer 2: the type ----
   One flow, bottom-aligned. The name stays where it is and the copy
   grows out from under it, which is what makes the panel read as
   opening rather than as swapping content. */

.svc__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.4rem, 2.2vw, 2.25rem);
  pointer-events: none;
}

/* The `/01` .. `/04` tags are gone. Four panels standing side by side
   in a fixed order do not need to be numbered; the tags were reading
   as a catalogue, which is the opposite of what a rack of open doors
   is trying to be. */
.svc__title {
  font-family: var(--display);
  font-weight: 700;
  /* Smaller shut than open: at a quarter of the rack the panel is
     ~270px wide, and a three-word title at 30px would take four
     lines of it. The size is part of the opening. */
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
  transition: font-size 0.85s var(--ease), color 0.5s var(--ease);
}

/* The fold. max-height rather than grid-template-rows: the animatable
   0fr/1fr trick is still too new to be the only thing standing
   between the reader and three lines of copy. */
.svc__fold {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.85s var(--ease),
    opacity 0.45s var(--ease);
}

.svc__text {
  margin-top: 1.1rem;
  font-size: var(--t-small);
  line-height: 1.68;
  color: rgb(255 255 255 / 0.76);
  max-width: 44ch;
}

.svc__link {
  display: inline-flex;
  margin-top: 1.4rem;
  color: var(--blue-soft);
}

/* ---- Layer 3: the hit area ----
   The whole panel is the link, so the target is the room and not
   just the words underneath it. */
.svc__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.svc__hit:focus-visible { outline-offset: -6px; }

/* ---- Open ----
   One attribute, set by hover, focus-within and services.js alike,
   so there is exactly one open state to reason about. */

.svc[data-open='true'] { flex-grow: 2.8; }
.svc[data-open='true'] .svc__veil { clip-path: inset(0% 0% 0% 0%); }
.svc[data-open='true'] .svc__fold { max-height: 22rem; opacity: 1; }
.svc[data-open='true'] .svc__title { font-size: var(--t-h3); }
.svc[data-open='true'] .svc__plate img {
  filter: saturate(0.96) contrast(1.05) brightness(0.86);
  scale: 1.05;
}

/* Without JS the first panel is the open one — a rack of four shut
   doors is worse than no rack at all. */
html:not(.js) .svc:first-child { flex-grow: 2.8; }
html:not(.js) .svc:first-child .svc__veil { clip-path: inset(0% 0% 0% 0%); }
html:not(.js) .svc:first-child .svc__fold { max-height: 22rem; opacity: 1; }

.services__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.services__footer p {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 48ch;
}

/* ============================================================
   Narrow, or no pointer — the rack becomes a grid.

   There is no width to trade between panels below 900px, and below
   any touch device there is no pointer to trade it with. So the
   panels stack and the copy is simply printed on the photograph:
   the same content, with no interaction a finger cannot perform.
   ============================================================ */

@media (max-width: 899px), (hover: none) {
  .services__rack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }
  .svc { flex: none; min-height: 380px; transition: none; }
  .svc__veil { clip-path: inset(0% 0% 0% 0%); transition: none; }
  .svc__fold { max-height: none; opacity: 1; transition: none; }
  .svc__title { font-size: var(--t-h3); transition: none; }
  .svc__body { position: relative; inset: auto; min-height: 380px; }
  .svc__plate { z-index: 0; }
  .svc[data-open='true'] { flex-grow: 0; }
  .svc[data-open='true'] .svc__plate img { scale: 1; }
}

@media (max-width: 599px) {
  .services__rack { grid-template-columns: minmax(0, 1fr); }
  .svc, .svc__body { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc, .svc__veil, .svc__fold, .svc__title, .svc__plate img { transition: none; }
  .svc[data-open='true'] .svc__plate img { scale: 1; }
}