/* ============================================================
   Trust Center primitives — host-agnostic, token-only.

   Originally lived in AfricaDocumentsWebSite's app-custom-trust.css.
   The host-agnostic primitives below — trust list, framework
   cards, nine-point requirement grid, data-residency cards,
   country jurisdiction grid, compliance certification cards —
   compose any product's Trust Center page on top of the shared
   marketing chrome (.c-hero, .c-section-head, .c-band, .c-cta).

   The .c-trust-africa__* host wrappers that compose AD's Africa
   subsection of the page stay in AD's custom CSS — those
   classes name a *page composition*, not a primitive.
   ============================================================ */

@layer components {

    /* ── Trust-list ─────────────────────────────────────────────────
       Bordered bullet list used inside trust pillars. Distinct from
       .c-checklist (which uses checkmark ticks for "we deliver this")
       — this is "we do these things", a more granular detail list. */
    .c-trust-list {
        list-style: none;
        margin: var(--space-3) 0 0;
        padding: 0;
        font-size: var(--fs-ui);
        line-height: 1.55;
        color: var(--color-ink-soft);
    }

    .c-trust-list li {
        position: relative;
        padding: var(--space-2) 0 var(--space-2) var(--space-4);
        border-top: 1px solid var(--color-line);
    }

    .c-trust-list li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .c-trust-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--space-2) + 0.55em);
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 50%;
        background: var(--color-accent);
    }

    .c-trust-list li:first-child::before {
        top: 0.55em;
    }

    /* ── Framework cards ────────────────────────────────────────────
       Two prominent cards (e.g. a treaty + a protocol) sitting above
       a per-country grid. Token-only, host-agnostic. */
    .c-trust-frameworks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
        margin-bottom: var(--space-9);
    }

    @media (max-width: 900px) {
        .c-trust-frameworks { grid-template-columns: 1fr; }
    }

    .c-trust-framework {
        padding: var(--space-6);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }

    .c-trust-framework__label {
        font-size: var(--fs-caption);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin: 0 0 var(--space-3);
    }

    .c-trust-framework__mark {
        font-family: var(--font-display);
        font-size: var(--fs-heading);
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.2;
        color: var(--color-ink);
        margin: 0 0 var(--space-2);
    }

    .c-trust-framework__meta {
        font-size: var(--fs-ui-sm);
        color: var(--color-accent);
        margin: 0 0 var(--space-4);
    }

    .c-trust-framework__desc {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
        line-height: 1.55;
        margin: 0;
    }

    /* ── Nine-point requirement grid ────────────────────────────────
       Scannable reference grid (typically GDPR-parity / regulatory
       common denominator). Three-column card grid with accent left
       rails; --extension variant pre-highlights items that go beyond
       the baseline. */
    .c-trust-requirements {
        padding-top: var(--space-7);
        border-top: 1px solid var(--color-line);
        margin-bottom: var(--space-9);
    }

    .c-requirement-grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }

    @media (max-width: 900px) {
        .c-requirement-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
        .c-requirement-grid { grid-template-columns: 1fr; }
    }

    .c-requirement {
        position: relative;
        padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: border-color var(--dur-fast) var(--ease),
                    transform var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease);
    }

    /* Left accent rail — visible on hover, pre-highlighted for
       --extension variant items. */
    .c-requirement::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--color-line);
        transition: background var(--dur-fast) var(--ease);
    }

    .c-requirement:hover {
        border-color: var(--color-accent);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px -12px var(--color-shadow-deep);
    }

    .c-requirement:hover::before {
        background: var(--color-accent);
    }

    .c-requirement--extension::before {
        background: var(--color-accent);
    }

    .c-requirement__num {
        font-family: var(--font-display);
        font-size: var(--fs-caption);
        font-weight: 500;
        color: var(--color-accent);
        letter-spacing: 0.12em;
        margin: 0 0 var(--space-3);
    }

    .c-requirement__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-body-lg);
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin: 0 0 var(--space-2);
        color: var(--color-ink);
    }

    .c-requirement__desc {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
        line-height: 1.55;
        margin: 0;
    }

    /* Parity / footnote callout — quiet branded callout below the grid */
    .c-trust-requirements__note {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
        line-height: 1.55;
        max-width: 72ch;
        margin: var(--space-6) 0 0;
        padding: var(--space-4) var(--space-5);
        background: var(--color-surface-alt);
        border-left: 3px solid var(--color-accent);
    }

    .c-trust-requirements__note-label {
        display: inline-block;
        font-family: var(--font-display);
        font-size: var(--fs-caption);
        font-weight: 500;
        color: var(--color-accent);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-right: var(--space-3);
    }

    /* ── Data residency cards ───────────────────────────────────────
       Two cards explaining where data lives. Primary card has an
       accent ring to read as the canonical default; secondary lists
       jurisdiction-specific additional arrangements. */
    .c-trust-residency {
        padding-top: var(--space-7);
        border-top: 1px solid var(--color-line);
        margin-bottom: var(--space-9);
    }

    .c-trust-residency__cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }

    @media (max-width: 900px) {
        .c-trust-residency__cards { grid-template-columns: 1fr; }
    }

    .c-trust-residency-card {
        padding: var(--space-6);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        position: relative;
    }

    .c-trust-residency-card--primary {
        background: var(--color-surface);
        border-color: var(--color-accent);
        box-shadow: 0 0 0 1px var(--color-accent);
    }

    .c-trust-residency-card__label {
        font-size: var(--fs-caption);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin: 0 0 var(--space-3);
    }

    .c-trust-residency-card--primary .c-trust-residency-card__label {
        color: var(--color-accent);
    }

    .c-trust-residency-card__mark {
        font-family: var(--font-display);
        font-size: var(--fs-heading);
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 1.2;
        color: var(--color-ink);
        margin: 0 0 var(--space-2);
    }

    .c-trust-residency-card__region {
        font-size: var(--fs-ui-sm);
        color: var(--color-accent);
        margin: 0 0 var(--space-4);
    }

    .c-trust-residency-card__list {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: var(--fs-ui);
        line-height: 1.55;
        color: var(--color-ink-soft);
    }

    .c-trust-residency-card__list li {
        position: relative;
        padding: var(--space-2) 0 var(--space-2) var(--space-4);
        border-top: 1px solid var(--color-line);
    }

    .c-trust-residency-card__list li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .c-trust-residency-card__list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--space-2) + 0.55em);
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 50%;
        background: var(--color-accent);
    }

    .c-trust-residency-card__list li:first-child::before {
        top: 0.55em;
    }

    .c-trust-residency-card__list strong {
        color: var(--color-ink);
        font-weight: 500;
    }

    /* ── Jurisdictions grid ─────────────────────────────────────────
       Tight three-column grid of country/law/regulator tiles, each
       marked with a left accent rail so the list reads authoritative
       rather than marketing-y. */
    .c-jurisdiction-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }

    @media (max-width: 900px) {
        .c-jurisdiction-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
        .c-jurisdiction-grid { grid-template-columns: 1fr; }
    }

    .c-jurisdiction {
        padding: var(--space-3) var(--space-5);
        border-left: 2px solid var(--color-accent);
    }

    .c-jurisdiction__country {
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        font-weight: 500;
        color: var(--color-ink);
        letter-spacing: -0.01em;
        margin: 0 0 var(--space-1);
    }

    .c-jurisdiction__law {
        font-size: var(--fs-ui);
        color: var(--color-ink);
        margin: 0 0 var(--space-1);
        line-height: 1.4;
    }

    .c-jurisdiction__reg {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        margin: 0;
        line-height: 1.4;
    }

    /* ── Compliance certification cards ─────────────────────────────
       Six muted tiles on a dark surface (typically inside .c-band) —
       used for ISO/SOC/GDPR/HIPAA/PCI/FedRAMP marks. */
    .c-compliance-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        margin-top: var(--space-7);
    }

    @media (max-width: 900px) {
        .c-compliance-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
        .c-compliance-grid { grid-template-columns: 1fr; }
    }

    .c-cert {
        position: relative;
        padding: var(--space-5) var(--space-6);
        background: rgb(250 249 245 / .04);
        border: 1px solid rgb(250 249 245 / .15);
        border-radius: var(--radius-md);
        transition: border-color var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .c-cert:hover {
        border-color: var(--color-accent-soft);
        background: rgb(250 249 245 / .07);
        transform: translateY(-1px);
    }

    .c-cert__icon {
        width: 1.75rem;
        height: 1.75rem;
        color: var(--color-accent-soft);
        margin-bottom: var(--space-4);
        display: block;
    }

    .c-cert__mark {
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        font-weight: 500;
        color: var(--color-on-dark);
        letter-spacing: -0.01em;
        margin: 0 0 var(--space-2);
    }

    .c-cert__desc {
        color: rgb(250 249 245 / .65);
        font-size: var(--fs-ui);
        margin: 0;
    }
}