/*
 * Partners page.
 *
 * The old page's problem was not styling, it was construction: seven cards
 * written out seven times, each with its own badge colours drawn from
 * Bootstrap's semantic set (bg-info, bg-warning, color-primary) rather than
 * the palette. Twenty-nine colours were measured on that page. One template
 * and this file replace all of it.
 *
 * Gold appears exactly twice here: as a hairline rule, and on the figures.
 * Never as a field, never behind text.
 *
 * Written with logical properties throughout so the Arabic edition needs no
 * mirrored rules.
 */

/* ============================================================== layout === */

.pt-hero,
.pt-section,
.pt-cta { padding-block: clamp(48px, 7vw, 96px); }

.pt-section { background-color: var(--sc-paper); }
.pt-section--tint { background-color: var(--sc-paper-deep); }

/* ================================================================ hero === */

.pt-hero {
    background-color: var(--sc-ink);
    background-image: var(--sc-pattern);
    background-size: 480px auto;
    color: var(--sc-paper);
    text-align: center;
}

.pt-eyebrow {
    font-family: var(--sc-font-display);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sc-accent);
    margin-block-end: var(--s-3);
}

/* Arabic does not have letter case, and tracking breaks its joins. */
[dir="rtl"] .pt-eyebrow { letter-spacing: normal; text-transform: none; }

.pt-title {
    font-family: var(--sc-font-display);
    font-size: clamp(30px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--sc-paper);
    margin: 0 auto var(--s-4);
    max-inline-size: 20ch;
    text-wrap: balance;
}

/* Its own class, deliberately not motion.css's `.sc-rule`.
   That class animates itself with `transform: scaleX()` while the reveal
   system animates `transform: translateY()` on the same element — one
   property, two owners, and whichever loses leaves the rule invisible. A
   static hairline has no such argument with anything. */
/* A span, not an <hr>. The theme styles every <hr> on the site to a cream
   hairline at opacity 0.1, so the gold rule rendered — at ten percent, which
   reads as nothing. The rule is decorative and already aria-hidden, so the
   semantic element bought nothing and cost a debugging round. */
.pt-rule {
    display: block;
    inline-size: 64px;
    block-size: 2px;
    margin: 0 auto var(--s-5);
    background: var(--sc-accent);
    opacity: 1;
    border: 0;
}

.pt-lead {
    max-inline-size: 64ch;
    margin: 0 auto;
    font-size: var(--t-lg);
    line-height: 1.8;
    color: color-mix(in srgb, var(--sc-paper) 86%, transparent);
}

/* --- the three figures ---------------------------------------------- */

.pt-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    max-inline-size: 760px;
    margin: var(--s-6) auto 0;
    padding-block-start: var(--s-5);
    border-block-start: 1px solid color-mix(in srgb, var(--sc-paper) 18%, transparent);
    list-style: none;
}

.pt-figures li { text-align: center; }

/* Inherits the gold gradient from motion.css; only the size changes, because
   three figures side by side cannot carry the 104px homepage treatment. */
.pt-hero .pt-figure {
    display: block;
    font-size: clamp(34px, 5.2vw, 56px);
    line-height: 1.05;
}

.pt-figure-label {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--t-xs);
    line-height: 1.5;
    color: color-mix(in srgb, var(--sc-paper) 74%, transparent);
}

@media (max-width: 575px) {
    .pt-figures { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ===================================================== section headers === */

.pt-head { margin-block-end: var(--s-5); max-inline-size: 72ch; }

.pt-h2 {
    font-family: var(--sc-font-display);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-ink);
    margin: 0 0 var(--s-3);
}

/* The one gold rule per section header. */
.pt-h2::after {
    content: "";
    display: block;
    inline-size: 56px;
    block-size: 2px;
    margin-block-start: var(--s-3);
    background: var(--sc-accent);
}

.pt-sub {
    font-size: var(--t-base);
    line-height: 1.8;
    color: var(--sc-muted);
    margin: 0;
}

/* ================================================================ grid === */

.pt-grid { display: grid; gap: var(--s-4); }

.pt-grid--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991px) {
    .pt-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .pt-grid--two,
    .pt-grid--three { grid-template-columns: 1fr; }
}

/* ======================================================= partner card === */

/* The whole card is the link: one tab stop, and a target far larger than the
   44px minimum rather than a small button in the corner. */
.pt-section .pc,
.pt-principal .pc {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: var(--r-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .22s var(--ease, cubic-bezier(.2,.7,.2,1)),
                box-shadow .22s var(--ease, cubic-bezier(.2,.7,.2,1)),
                border-color .22s ease;
}

.pt-section .pc:hover,
.pt-principal .pc:hover,
.pt-section .pc:focus-visible,
.pt-principal .pc:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--sc-ink) 55%, transparent);
    border-color: var(--sc-accent);
}

.pc:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }

/* --- the logo plate -------------------------------------------------- */

/* Always white, whatever tone the mark is. A logo drawn for white paper does
   not survive being laid over a photograph, which is what the old cards did. */
.pc-plate {
    display: grid;
    place-items: center;
    block-size: 132px;
    padding: var(--s-4) var(--s-5);
    background: #fff;
    border-block-end: 1px solid var(--sc-line);
}

.pc-plate .pc-plate-img {
    max-block-size: 76px;
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}

/* The monogram stand-in, for a body whose logo has not been uploaded. */
.pc-plate .partner-thumb-mark {
    inline-size: 76px;
    block-size: 76px;
    border-radius: var(--r-card);
    background: var(--sc-ink);
    color: var(--sc-paper);
    font-family: var(--sc-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* --- the body -------------------------------------------------------- */

.pc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--s-4) var(--s-4) var(--s-3);
}

.pc-country {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin-block-end: var(--s-2);
}

[dir="rtl"] .pc-country { letter-spacing: normal; text-transform: none; }

.pc-title {
    font-family: var(--sc-font-display);
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--sc-ink);
    text-wrap: balance;
}

/* Clamped so every card in a row ends at the same place. Wrapping is preferred
   to truncation, but a four-line and a nine-line summary side by side is what
   made the old grid look ragged; the full text is on the detail page. */
.pc-summary {
    margin-block-start: var(--s-2);
    font-size: var(--t-sm);
    line-height: 1.75;
    color: var(--sc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-start: auto;
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--sc-line);
}

.pc-count { display: flex; align-items: baseline; gap: 6px; min-block-size: 24px; }

/* Gold on a number — one of the four things the accent is allowed to be. */
.pc-count-figure {
    font-family: var(--sc-font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--sc-accent-deep);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.pc-count-label { font-size: var(--t-xs); color: var(--sc-muted); }

.pc-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--sc-ink);
    white-space: nowrap;
}

.pc-go-arrow { transition: transform .22s ease; }
[dir="rtl"] .pc-go-arrow { transform: scaleX(-1); }

.pc:hover .pc-go-arrow { transform: translateX(3px); }
[dir="rtl"] .pc:hover .pc-go-arrow { transform: scaleX(-1) translateX(3px); }

/* --- the principal partner, wide ------------------------------------- */

.pt-principal { display: grid; gap: var(--s-5); }

@media (min-width: 992px) {
    /* Scoped to beat the base `.pt-principal .pc` rule, which is (0,2,0);
       a bare `.pc--lead` is (0,1,0) and silently loses. */
    .pt-principal .pc--lead { flex-direction: row; align-items: stretch; }
    .pt-principal .pc--lead .pc-plate {
        flex: 0 0 300px;
        block-size: auto;
        border-block-end: 0;
        border-inline-end: 1px solid var(--sc-line);
    }
    .pt-principal .pc--lead .pc-plate .pc-plate-img { max-block-size: 104px; }
    .pt-principal .pc--lead .pc-body { padding: var(--s-5); }
    .pt-principal .pc--lead .pc-title { font-size: var(--t-xl); }
    .pt-principal .pc--lead .pc-summary { -webkit-line-clamp: 4; }
}

.pt-under-label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-muted);
    margin-block-end: var(--s-3);
}

[dir="rtl"] .pt-under-label { letter-spacing: normal; text-transform: none; }

/* ========================================= regulators and registers === */

/* Deliberately quieter than the awarding bodies: a smaller plate and a name,
   no count and no call to action, because these do not award anything. */
.pt-official {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
}

@media (max-width: 639px) { .pt-official { grid-template-columns: 1fr; } }

.pt-official-card {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: var(--r-card);
    text-decoration: none;
    min-block-size: 96px;
    transition: border-color .2s ease, transform .2s ease;
}

.pt-official-card:hover,
.pt-official-card:focus-visible { border-color: var(--sc-accent); transform: translateY(-2px); }
.pt-official-card:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }

.pt-official-plate {
    display: grid;
    place-items: center;
    flex: 0 0 84px;
    block-size: 60px;
    background: #fff;
}

.pt-official-plate .pt-official-img {
    max-block-size: 52px;
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
}

.pt-official-plate .partner-thumb-mark {
    inline-size: 52px; block-size: 52px; border-radius: 8px;
    background: var(--sc-ink); color: var(--sc-paper);
    font-family: var(--sc-font-display); font-weight: 700; font-size: 18px;
}

.pt-official-name {
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--sc-ink);
}

/* ================================================================= cta === */

.pt-cta {
    background-color: var(--sc-ink-deep);
    background-image: var(--sc-pattern);
    background-size: 480px auto;
    text-align: center;
}

.pt-cta-title {
    font-family: var(--sc-font-display);
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 700;
    color: var(--sc-paper);
    margin: 0 0 var(--s-3);
}

.pt-cta-lead {
    max-inline-size: 56ch;
    margin: 0 auto var(--s-5);
    font-size: var(--t-base);
    line-height: 1.8;
    color: color-mix(in srgb, var(--sc-paper) 82%, transparent);
}

.pt-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
}

/* 48px tall: comfortably past the 44px minimum. */
.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-inline: 28px;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.pt-btn:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.pt-btn:hover { transform: translateY(-2px); }

.pt-btn--primary { background: var(--sc-paper); color: var(--sc-ink); border: 1px solid var(--sc-paper); }
.pt-btn--primary:hover { background: #fff; color: var(--sc-ink); }

.pt-btn--ghost {
    background: transparent;
    color: var(--sc-paper);
    border: 1px solid color-mix(in srgb, var(--sc-paper) 45%, transparent);
}
.pt-btn--ghost:hover { border-color: var(--sc-accent); color: var(--sc-paper); }

/* ========================================================== overrides === */

/* The theme paints every p/span/a cream under .active-dark-mode. These cards
   are white plates, so each one has to name its own ground or its text goes
   invisible — the fault that has now been fixed on four page types. */
html body.active-dark-mode .pc .pc-title,
html body.active-dark-mode .pc .pc-go,
html body.active-dark-mode .pt-official-card .pt-official-name { color: var(--sc-ink) !important; }

html body.active-dark-mode .pc .pc-summary,
html body.active-dark-mode .pc .pc-country,
html body.active-dark-mode .pc .pc-count-label { color: var(--sc-muted) !important; }

html body.active-dark-mode .pc .pc-count-figure { color: var(--sc-accent-deep) !important; }

html body.active-dark-mode .pt-section .pt-h2 { color: var(--sc-ink) !important; }
html body.active-dark-mode .pt-section .pt-sub,
html body.active-dark-mode .pt-under-label { color: var(--sc-muted) !important; }

html body.active-dark-mode .pt-hero .pt-title,
html body.active-dark-mode .pt-cta .pt-cta-title { color: var(--sc-paper) !important; }

@media (prefers-reduced-motion: reduce) {
    .pc, .pc-go-arrow, .pt-official-card, .pt-btn { transition: none !important; }
    .pc:hover, .pt-official-card:hover, .pt-btn:hover { transform: none !important; }
}

/* ------------------------------------------------- measured corrections --- */

/* "Explore" measured 1.11:1. `.pc-go` is ink, but the label lives in a child
   span and the theme's blanket dark-mode rule gives that child its own cream.
   A parent's colour cannot help a child that has been given one. */
html body.active-dark-mode .pc .pc-go-text,
html body .pc .pc-go-text { color: var(--sc-ink) !important; }

/* The call to action measured 1.00:1 — cream label on the cream field, an
   invisible button. palette-enforce's `body.active-dark-mode a` is (0,1,2);
   `.pt-btn--primary` is (0,1,0) and loses even with !important. */
html body.active-dark-mode a.pt-btn--primary,
html body a.pt-btn--primary { color: var(--sc-ink) !important; }

html body.active-dark-mode a.pt-btn--ghost,
html body a.pt-btn--ghost { color: var(--sc-paper) !important; }