/* ==========================================================================
   SVEF — Partners

   The tier register.

   The tiers were five identical cards in a five-up grid. At full width that
   gives each column about 200px, which is too narrow for the content: the
   tier name broke over two lines, every commitment wrapped to two or three,
   and the set read as a pricing ladder. It is not one — an Academic partner
   is not a smaller Corporate partner, it is a different counterpart.

   So the tiers are set as a register instead: full-width rows in a ruled
   stack, the way an index is set. Each row has room to state who the tier
   is for on the left and what it includes on the right, with a rule between
   the two halves because that division is the actual structure of the
   content rather than decoration.
   ========================================================================== */

.tier-register {
  /* One step between --fs-h3 (1.45rem) and --fs-section (2.7rem). The scale
     has no rung there, and the tier names need to out-rank a card heading
     without competing with the section title above them. */
  --fs-tier: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);

  border-block: 1px solid var(--hair);
}

/* ------------------------------------------------------------------- row */

.tier-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--hair-soft);
  /* Held on every row and coloured on the one under the pointer, so lighting
     a row does not shift it three pixels sideways as it lights. */
  border-left: 3px solid transparent;
  transition: background var(--dur-slow) var(--ease-curtain),
              border-left-color var(--dur-slow) var(--ease-curtain),
              box-shadow var(--dur-slow) var(--ease-curtain);
}
.tier-row:last-child { border-bottom: 0; }

/* ----------------------------------------------------------- the lit row
   No tier is marked at rest. The register reads as five equal entries and
   the accent belongs to whichever one the reader is on — which is the
   honest arrangement for content that is five different counterparts
   rather than a ladder with a top.

   On the shadow: an elevation shadow is not available here. tokens.css sets
   every --shadow-* to none and says why — black blurred over #131519 puts
   down no visible ink, so a raised card on this ground raises nothing. What
   does read on a dark surface is light, so the lift is a champagne bloom
   spreading right off the rule rather than a drop shadow falling under the
   row.

   :focus-within carries the same treatment to the keyboard: tabbing to a
   row's Enquire link lights the row it belongs to, so the pointer is not
   the only way to tell which tier you are acting on. */
.tier-row:hover,
.tier-row:focus-within {
  background: var(--slate-3);
  border-left-color: var(--champagne);
  box-shadow: inset 3rem 0 3rem -3rem
              color-mix(in srgb, var(--champagne) 34%, transparent);
}

/* -------------------------------------------------------------- identity */

/* The glyph sits in a margin of its own rather than in line with the name,
   so the name and the line beneath it share a left edge. Indenting the name
   past its own description is the thing that makes a row look assembled
   rather than set. */
.tier-identity {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-3);
  align-content: start;
}
.tier-mark {
  grid-column: 1;
  align-self: center;
  color: var(--champagne);
}
.tier-name,
.tier-for { grid-column: 2; }

.tier-name {
  font-family: var(--font-display);
  font-size: var(--fs-tier);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--bone);
  margin: 0;
  /* base.css balances every heading, which is right for a section title and
     wrong here: given "Founding Partner" in a column wide enough to hold it,
     the balancer still splits it over two lines to even them up. These are
     two-word names in a fixed rail, so they wrap only when the rail is
     genuinely too narrow. */
  text-wrap: wrap;
}

.tier-for {
  max-width: 34ch;
  margin: 0;
  color: var(--smoke-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* -------------------------------------------------------------- includes
   Two columns from tablet up, which is what keeps a phrase like "Executive
   research collaboration" on one line — the failure the old card could not
   avoid at any width. The marker is a hairline rather than a circled check:
   the same rule the rest of the identity is drawn with, and quiet enough
   that four of them in a row do not read as a checklist. */

.tier-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3) clamp(1.5rem, 3vw, 3rem);
  align-content: start;
}
@media (min-width: 48rem) {
  .tier-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tier-includes li {
  display: flex;
  gap: var(--space-3);
  color: var(--bone);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
}
.tier-includes li::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1px;
  /* Sits at about the x-height of the first line, so it reads as a lead-in
     rule to the phrase rather than as an underline beneath it. */
  margin-top: 0.72em;
  background: var(--champagne-dim);
}

/* ---------------------------------------------------------------- action
   A text link, not a button. Five buttons stacked down the right-hand side
   would each shout as loudly as "Become a Partner" in the band below. */

.tier-action { display: flex; align-items: flex-start; }

.tier-enquire {
  display: inline-block;
  padding-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--champagne);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--champagne-lo);
  transition: color var(--dur-base) var(--ease-curtain),
              border-color var(--dur-base) var(--ease-curtain);
}
.tier-enquire:hover {
  color: var(--champagne-hi);
  border-bottom-color: var(--champagne);
}
/* No focus rule of its own — base.css rings it in champagne with an offset,
   which reads correctly on both the plain row and the tinted lead row. A
   --focus-ring halo here would paint obsidian against slate. */

/* ------------------------------------------------------------ wide layout
   Identity | commitments | action, with a rule on the division that is the
   actual structure of the row: who the tier is for on one side, what it
   includes on the other. Below this width the three stack, and the rule
   would be drawing a boundary that is no longer there. */

@media (min-width: 62rem) {
  .tier-row {
    /* The rail is sized to hold the longest tier name beside its glyph on
       one line at the top of the type scale — "Corporate Partner" is the
       constraint. Below that width the name wraps and the rows lose their
       common left edge. */
    grid-template-columns: minmax(16rem, 21rem) 1fr auto;
    align-items: stretch;
  }
  .tier-identity {
    border-right: 1px solid var(--hair-soft);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }
}