/* ==========================================================================
   CostGuard – Trust Center landing page
   ──────────────────────────────────────────────────────────────────────────
   Page-only rules for /trust. The hero, the split rows, the band, the icon
   tile, the panel surface and the type all come from /css/costguard-public.css;
   this file adds the grid of seven topic links and the centred note.

   Every selector sits under .cg-trust. No colour literals: every value
   resolves through --cg-*. Logical properties only, so RTL needs no second
   rule apart from the arrow, which has to point the other way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Split rows

   The heading and its prose share a first line, so neither carries a margin
   of its own and the prose is allowed the full width of its track.
   -------------------------------------------------------------------------- */

.cg-trust .cg-pub-split > .cg-pub-lead,
.cg-trust .cg-pub-split > .cg-pub-body {
    max-width: none;
}

.cg-trust .cg-pub-split > .cg-pub-body {
    font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Topic grid

   Seven links. Two columns from md up and three from lg up; the first card
   is twice as wide, and from lg up so is the last, so the rows close as
   2 + 1, 1 + 1 + 1, 1 + 2 and no card is left alone on a row.
   -------------------------------------------------------------------------- */

.cg-trust .cg-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cg-pub-space-3);
}

@media (min-width: 768px) {
    .cg-trust .cg-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cg-trust .cg-trust-card:first-child {
        grid-column: span 2;
    }
}

@media (min-width: 992px) {
    .cg-trust .cg-trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cg-trust .cg-trust-card:last-child {
        grid-column: span 2;
    }
}

/* The whole card is the link. */
.cg-trust .cg-trust-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--cg-pub-space-4);
    color: var(--cg-pub-ink);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cg-trust .cg-trust-card:hover {
    border-color: var(--cg-border-strong);
    box-shadow: var(--cg-shadow-md);
}

/* The shared focus ring squares its target off; the card keeps its own corners. */
.cg-trust .cg-trust-card:focus-visible {
    border-radius: var(--cg-pub-radius);
}

.cg-trust .cg-trust-card .cg-pub-body {
    max-width: 36rem;
    margin-bottom: var(--cg-pub-space-3);
}

/* The label at the foot of a card. Its arrow is drawn here rather than by an
   icon element, because a card holds exactly one icon. */
.cg-trust .cg-trust-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cg-text-primary);
}

.cg-trust .cg-trust-card-more::after {
    content: "\2192";
    line-height: 1;
    transition: transform 0.18s ease;
}

.cg-trust .cg-trust-card:hover .cg-trust-card-more {
    color: var(--cg-accent-text);
}

.cg-trust .cg-trust-card:hover .cg-trust-card-more::after {
    transform: translateX(3px);
}

html[dir="rtl"] .cg-trust .cg-trust-card-more::after {
    transform: scaleX(-1);
}

html[dir="rtl"] .cg-trust .cg-trust-card:hover .cg-trust-card-more::after {
    transform: scaleX(-1) translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .cg-trust .cg-trust-card,
    .cg-trust .cg-trust-card-more::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Centred note on the band
   -------------------------------------------------------------------------- */

.cg-trust .cg-trust-note {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.cg-trust .cg-trust-note .cg-pub-display {
    margin-bottom: var(--cg-pub-space-2);
}

.cg-trust .cg-trust-note .cg-pub-lead {
    max-width: none;
}