/**
 * Section: Rate cards
 *
 * Ported from _mockups/index.html `.c-rates` / `.c-rate` / `.c-rate-note` /
 * `.c-rate-cta` and _mockups/pricing.html `.pr-rates` / `.pr-rate`. The two are
 * the same component; the only differences are the card heading level and the
 * card button, both of which are content and both of which the renderer
 * derives. So there is nothing to resolve here and no variant to express.
 *
 * WHAT IS DELIBERATELY NOT HERE, because a shared file already owns it and a
 * second owner for one rule is how the button system broke in Phase 0:
 *
 *   .card              the paper ground, the hairline, the radius and the
 *                      resting shadow. The markup is `class="card rate-card"`
 *                      and only the delta is below.
 *   .pasia-ticklist    the ticked list and its gold check, in components.css,
 *                      already shared by four other sections. Only its type
 *                      size and its margins differ on a rate card.
 *   .note              the small line under the cards, including
 *                      `.note strong { color: var(--forest) }`, which is the
 *                      whole of `.c-rate-note strong`. Only the centring is
 *                      below.
 *   .btn, .eyebrow     primitives in tokens.css.
 *   .head, .head h2 em base.css, including the gold italic clause the heading
 *                      field's instructions promise.
 *   .ph-badge          components.css, including the dashed gold form used for
 *                      the missing "as of" date. It pins its own ground on both
 *                      sides, so it does not composite against the card.
 *
 * THE REVEAL, AS IT NOW IS, BECAUSE THIS FILE USED TO DESCRIBE IT WRONGLY.
 * `.reveal` in base.css is an `animation`, not a `transition`, and the four
 * `.reveal-dN` delay classes have been DELETED. This file previously warned
 * about a `transition` shorthand resetting `transition-delay` and dropping
 * `opacity`; that collision cannot happen any more, because `animation` and
 * `transition` are different properties, which is exactly why base.css moved.
 *
 * The longhand form of the card's transition below is therefore NOT a defence
 * against anything, and it must not be read as one. A transition written as
 * longhands is no protection from an animation: an animation outranks every
 * normal author declaration. The one real rule that replaces the old warning is
 * DO NOT DECLARE `animation` ON A `.reveal` ELEMENT from this file.
 *
 * The cards still carry NO `.reveal`, which is what both mock-ups do: `.reveal`
 * sits on the grid, on the note and on the button row, and the cards fade in
 * with the grid. That is what makes the hover lift work, and it is the only
 * reason it works. base.css runs the reveal with the default `fill-mode: none`
 * precisely so a hover `transform` survives once the fade has finished; an
 * earlier version filled and silently beat every hover lift on the site.
 *
 * ---------------------------------------------------------------------------
 * CONTRAST, MEASURED, NOT ESTIMATED, AND MEASURED AS COMPOSITED
 *
 * The card head is flat --forest #0e4038:
 *
 *   --paper          #ffffff                11.61:1   the card name
 *   --gold-bright    #d8b25e                 5.78:1   the service line
 *
 * The card body is --paper #ffffff:
 *
 *   --forest         #0e4038                11.61:1   the amount
 *   --ink-soft       #45524d                 8.18:1   the ticked items
 *   --ink-faint      #5f6b66                 5.55:1   the unit after the amount
 *   --gold-deep      #7e622e                 5.72:1   the tick glyph
 *
 * The band under the cards is the default --mist #f7f4ee:
 *
 *   --ink-soft       #45524d                 7.45:1   the note
 *   --forest         #0e4038                10.57:1   its bold clause
 *
 * The placeholder badge is NOT measured against a bare token, because its
 * ground is its own: `.ph-badge` pins `background-color: var(--paper)` under
 * its gold stripe, which composites to #f9f3e9, so --gold-deep on it is 5.17:1
 * wherever the badge lands. It never inherits the card or the band.
 *
 * NEVER a tint token as a text colour. --brand-tint is translucent forest and
 * composites to 1.00:1 on the card head, and --gold-deep measures 2.03:1 there.
 * AGENTS.md §1.7.
 * ------------------------------------------------------------------------- */

/* --- the grid ------------------------------------------------------------
   `auto-fit` with a `min()` floor rather than a bare `minmax(260px, 1fr)`.
   A bare 260px floor is wider than the content box at the smallest supported
   width once the gutter is taken off, and a track floor the container cannot
   satisfy pushes the page sideways. `min(260px, 100%)` can never exceed the
   container, so the grid cannot overflow it at any width.

   The track floor is a length rather than `auto` on purpose: an `auto` minimum
   is the min-content size of the GRID ITEM, so a long unbroken string in a card
   would widen the track and take the page with it. That is the failure a
   sibling section shipped, and `min-width: 0` on something inside the card does
   not prevent it. The cards also break long strings themselves, below. */
.rate-cards .rate-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-4);
}

/* --- the card -------------------------------------------------------------
   `overflow: hidden` is load-bearing rather than defensive: it is what clips
   the head's forest fill to the card's own radius. */
/* Longhands rather than the shorthand, and `opacity` is no longer in the list.
   It was there as a mitigation against a `.reveal` landing on the card later,
   and that mitigation was never real: see the reveal note in the header. What
   the card actually transitions is the two properties its hover changes. */
.rate-cards .rate-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition-property: transform, box-shadow;
  transition-duration: var(--dur-normal);
  transition-timing-function: var(--ease-out-soft);
}

/* The lift is the mock-ups' own 4px. It is a motion offset rather than a design
   value, and there is no token at that scale: `--s-1` at 8px is twice the
   movement. Not offered as precedent, because the tree has ten of these at six
   different magnitudes, which is a drifting scale rather than a convention. A
   `--lift-*` pair would collapse it; that touches nine files and is a pass of
   its own, raised with the shared-layer owner rather than started here.
   Reduced motion is answered globally in tokens.css. */
.rate-cards .rate-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

/* --- the head ------------------------------------------------------------- */
.rate-cards .rate-card-head {
  background: var(--forest);
  padding: var(--s-4);
}

.rate-cards .rate-card-head .k {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  overflow-wrap: anywhere;
}

.rate-cards .rate-card-title {
  margin-top: var(--s-1);
  font-size: var(--text-xl);
  color: var(--paper);
  overflow-wrap: anywhere;
}

/* --- the body -------------------------------------------------------------
   `flex-grow: 1` so the button sits on the same line across a row of cards
   whose lists are different lengths. */
.rate-cards .rate-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--s-4);
}

/* --- the amount -----------------------------------------------------------
   Money is always a range placeholder, HK$X,XXX, and it comes from the rate
   record rather than from this section. Nothing in this file has any opinion
   about what it says. */
.rate-cards .rate-card-amount {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--forest);
  overflow-wrap: anywhere;
}

/* `inline-block` so the unit moves to the next line AS A UNIT when the amount
   fills the card. Left as a plain inline it breaks between the slash and the
   word, which leaves a dangling "/" hanging off the figure. Atomic for line
   breaking, but still able to wrap inside itself if the unit alone is longer
   than the card, so nothing can be clipped by the card's `overflow: hidden`. */
.rate-cards .rate-card-amount small {
  display: inline-block;
  margin-inline-start: .35em;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-faint);
}

/* The "Fee as of September 2026" line, or the "as of date" gap when no date
   has been entered. It sits on its own line rather than trailing the amount,
   because at --text-2xl the amount wraps on a narrow card and a badge caught
   mid-wrap reads as part of the figure. When it is a date it reads as a card
   sub line: --text-sm in --ink-soft, the same pairing as `.note`. */
.rate-cards .rate-card-dated {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* --- what the fee covers --------------------------------------------------
   `.pasia-ticklist` supplies the list, the gold check and the indent. Only the
   type size and the margins are a rate card's own: the shared list is set at
   --text-base for a body-copy context and this one is a card. */
.rate-cards .rate-card-list {
  margin-top: var(--s-3);
}

.rate-cards .rate-card-list li {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Only when something follows it, which is the card button. No button, no gap,
   and no field is consulted to know which. */
.rate-cards .rate-card-list:not(:last-child) {
  margin-bottom: var(--s-4);
}

/* --- the card button ------------------------------------------------------
   `margin-top: auto` pushes it to the foot of the card so a row of cards agrees
   on where the buttons sit. Unconditional: a card with no button has nothing
   for this to move. */
.rate-cards .rate-card .btn {
  margin-top: auto;
  justify-content: center;
}

/* --- the note and the closing button -------------------------------------- */
.rate-cards .rate-cards-note {
  margin-top: var(--s-5);
  text-align: center;
}

.rate-cards .rate-cards-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--s-4);
}