/* ---------------------------------------------------------------------------
   Partnerships
   ---------------------------------------------------------------------------
   Seven scenes. Everything here is either a component the scene kit does not
   have or a size the kit's default would get wrong at this density.

   The page it replaced is described at the top of inc/partnerships.php. The one
   thing worth repeating in a stylesheet is what is NOT in it: there is no logo
   wall and no stat band, because the old page's logo wall and stat band were
   both fabricated, and the honest replacement for a borrowed mark is a sentence
   rather than a better-designed mark.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The CEO quote
   ---------------------------------------------------------------------------
   One pull quote on the page, in the scene that carries the announcement, and
   it is a real <blockquote> with a real <cite> because it is a real quotation
   from a named person in a published press release.

   The rule left, not a pair of decorative marks: a quotation mark glyph at this
   size reads as ornament, and it has to be hidden from screen readers to avoid
   being announced as punctuation. A border has neither problem.
   ------------------------------------------------------------------------ */

.srk-page .srpt-quote {
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  padding: 0 0 0 clamp(18px, 2vw, 26px);
  border-left: 3px solid var(--srk-accent-live, var(--srh-accent));
  max-width: 68ch;
}

.srk-page.srpt-root .srpt-quote p {
  margin: 0;
  color: var(--srh-pale);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
}

.srk-page .srpt-quote cite {
  display: block;
  margin-top: clamp(10px, 1.4vh, 14px);
  color: var(--srh-ink-soft);
  font-size: clamp(13px, 0.95vw, 15px);
  font-style: normal;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   The three parties
   ---------------------------------------------------------------------------
   A card per company. The label above the name is the useful part — "The
   infrastructure", "The adoption", "The credential layer" — so it is set as an
   eyebrow inside the card and the company name reads as the heading it is.
   ------------------------------------------------------------------------ */

.srk-page .srpt-role {
  display: block;
  margin-bottom: 0.55em;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * The registered company name, under the trading name. Small and quiet: it is
 * there so a reader can look the company up, not because it is the headline.
 *
 * THREE CLASSES, and not by preference. scene-kit resets
 * `.srk-page .srk-scene p { margin: 0 }`, which is two classes and an element
 * and therefore beats a two-class rule. Written as `.srk-page .srpt-full` the
 * margins below computed to 0 and the company name sat welded to the paragraph
 * under it, reading as the first line of the body copy rather than as a label.
 *
 * This is the same trap product-sharering-me.css documents at length for
 * .srk-lede, and the fix is the same one: specificity rather than !important,
 * scoped to this page's root so nothing else inherits the exception.
 *
 * COMPOUND, not descendant. `.srk-page` and `.srpt-root` are the same <main>
 * element, so `.srk-page .srpt-root` asks for a descendant that does not exist
 * and matches nothing at all. Written that way first, and the symptom was
 * identical to having no rule: it is worth knowing that a too-specific selector
 * and a wrong selector fail in exactly the same way.
 */
.srk-page.srpt-root .srpt-full {
  margin: -0.35em 0 0.9em;
  color: var(--srh-ink-fade);
  font-size: clamp(12px, 0.9vw, 13px);
}

/*
 * The equity disclosure on the Transformational card.
 *
 * It is set apart above a hairline rather than folded into the body copy, and
 * that is a disclosure decision rather than a layout one: a financial interest
 * in a company you are citing as a partner belongs where a skimming reader will
 * still see it. Same weight as the body text, not smaller.
 */
.srk-page.srpt-root .srpt-note {
  margin-top: clamp(12px, 1.6vh, 16px);
  padding-top: clamp(12px, 1.6vh, 16px);
  border-top: 1px solid var(--srh-hairline);
  color: var(--srh-ink-soft);
}

/* ---------------------------------------------------------------------------
   The deployment facts
   ---------------------------------------------------------------------------
   A label and a value per line. A definition list would be the better element,
   but the values here are sentences rather than definitions and two of them
   carry their own punctuation, so this stays a list of labelled statements.
   ------------------------------------------------------------------------ */

.srk-page .srpt-facts {
  list-style: none;
  margin: clamp(22px, 3vh, 32px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vh, 18px);
  max-width: 74ch;
}

.srk-page .srpt-facts li {
  display: grid;
  gap: 2px 18px;
  color: var(--srh-ink);
  padding-left: 22px;
  position: relative;
}

.srk-page .srpt-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--srk-accent-live, var(--srh-accent));
}

.srk-page .srpt-facts strong {
  color: var(--srh-pale);
}

/*
 * Two columns once there is room for the label to sit beside its value. Below
 * that the label stacks, which is why the grid above declares a row gap as well
 * as a column gap.
 */
@media (min-width: 900px) {
  .srk-page .srpt-facts li {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ---------------------------------------------------------------------------
   The three routes
   ------------------------------------------------------------------------ */

/*
 * Every route card ends in a link, and the card is a fixed height in a
 * three-across grid, so the links line up along the bottom rather than floating
 * wherever the body copy happens to stop.
 */
.srk-page .srpt-route {
  display: flex;
  flex-direction: column;
}

.srk-page .srpt-route p {
  flex: 1 1 auto;
}

.srk-page .srpt-more {
  margin-top: clamp(14px, 2vh, 20px);
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.srk-page .srpt-more:hover,
.srk-page .srpt-more:focus-visible {
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------------
   The standards list
   ---------------------------------------------------------------------------
   A real <dl>: each of these is a named thing with a definition, which is the
   one place on the page where that element is exactly right.

   Two across rather than four, because the list is variable length — DIATF
   appears only when inc/certifications.php says it may — and a four-column grid
   that is sometimes five items leaves a widow. Two columns takes four or five
   items without the layout changing shape.
   ------------------------------------------------------------------------ */

.srk-page .srpt-standards {
  margin: clamp(24px, 3.4vh, 36px) 0 0;
  display: grid;
  gap: clamp(16px, 2.4vh, 26px) clamp(24px, 3vw, 44px);
}

@media (min-width: 860px) {
  .srk-page .srpt-standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.srk-page .srpt-standard dt {
  color: var(--srh-pale);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 600;
  margin-bottom: 0.3em;
}

.srk-page .srpt-standard dd {
  margin: 0;
  color: var(--srh-ink-soft);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   The closer
   ------------------------------------------------------------------------ */

.srpt-narrow {
  max-width: 68ch;
}

.srpt-centre {
  text-align: center;
  margin-inline: auto;
}

.srk-page .srpt-centre p {
  margin-inline: auto;
}

.srpt-centre-actions {
  justify-content: center;
}