/* Trust & Compliance page (/trust-compliance/) — ports src/pages/Trust.tsx. Loaded only on that page. */

/* ── Hero: green radial wash (absolute, painted over the copy as in React).
 * Trust.tsx puts className="grid-bg" on the hero, but its inline
 * `background: var(--bg-base)` shorthand resets background-image to none, so
 * the source renders no grid — neither do we. ── */
.xq-tc-hero { position: relative; background: var(--wp--preset--color--bg-base); padding-top: var(--wp--preset--spacing--section-100); padding-bottom: var(--wp--preset--spacing--section-60); }
.xq-tc-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
}
.xq-tc-hero > * { margin-block: 0; }
.xq-tc-hero-copy { text-align: center; max-width: 880px !important; }
.xq-tc-hero-copy > * { margin-block: 0; }
.xq-tc-hero-copy > .xq-t-h2 { margin-bottom: 20px; }
.xq-tc-hero-copy > .xq-t-body-lg { max-width: 720px; margin-inline: auto; }

/* ── Framework badge grid: is-style-card groups (tone via xq-tone-*) ── */
.xq-tc-badges { padding-top: var(--wp--preset--spacing--section-60); padding-bottom: var(--wp--preset--spacing--section-80); }
.xq-tc-badges > *, .xq-tc-badge-grid > * { margin-block: 0; }
.xq-tc-badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.xq-tc-badge > .xq-icon { display: block; }
.xq-tc-badge > h3 {
  margin-bottom: 14px; color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--ui); font-weight: 700; line-height: 1.6; letter-spacing: normal;
}
/* Standards pills: is-style-pill at Trust.tsx's size/tint (${color}12 / ${color}30). */
.xq-tc-tags { gap: 6px; }
.xq-tc-tags > .is-style-pill {
  font-size: 10.5px; letter-spacing: normal; padding: 3px 9px;
  background: color-mix(in srgb, var(--xq-c) 7.06%, transparent);
  border-color: color-mix(in srgb, var(--xq-c) 18.82%, transparent);
}

/* ── Control mapping matrix ── */
.xq-tc-matrix { padding-top: 20px; padding-bottom: var(--wp--preset--spacing--section-100); }
.xq-tc-matrix > * { margin-block: 0; }
.xq-tc-matrix > .xq-tc-matrix-head { margin-bottom: 32px; }
.xq-tc-matrix-head > * { margin-block: 0; }
.xq-tc-matrix-head > .xq-t-h2 { margin-bottom: 12px; }
.xq-tc-matrix-head > .xq-t-body-lg { max-width: 640px; }


/* Table: a group of row groups (header row = is-style-eyebrow cells). */
.xq-tc-table { border: 1px solid var(--wp--preset--color--border); border-radius: 6px; overflow: hidden; }
.xq-tc-table > *, .xq-tc-thead > *, .xq-tc-row > * { margin: 0; }
.xq-tc-thead, .xq-tc-row { display: grid; grid-template-columns: 180px 220px 1fr 200px; gap: 16px; }
.xq-tc-thead {
  padding: 12px 22px; background: var(--wp--preset--color--bg-surface); border-bottom: 1px solid var(--wp--preset--color--border);
}
.xq-tc-row { padding: 18px 22px; border-bottom: 1px solid var(--wp--preset--color--border); align-items: center; }
.xq-tc-row:last-child, .xq-tc-row.is-last { border-bottom: none; }
.xq-tc-row[hidden] { display: none; }
.xq-tc-row > * { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.xq-tc-row > .xq-tc-fw { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--text-0); }
.xq-tc-row > .xq-tc-ctl { color: var(--wp--preset--color--text-1); }
.xq-tc-row > .xq-tc-cov { color: var(--wp--preset--color--text-2); line-height: 1.55; }
.xq-tc-row > .xq-tc-link { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); font-weight: 600; }
.xq-tc-link a, .xq-tc-link a:hover { color: var(--wp--preset--color--accent-dark); text-decoration: none; }

/* ── Closing CTA (React: maxWidth 640 + 40px padding → 560 content) ── */
.xq-tc-cta { --wp--style--global--content-size: 560px; padding-top: var(--wp--preset--spacing--section-90); padding-bottom: var(--wp--preset--spacing--section-110); text-align: center; }
.xq-tc-cta > *, .xq-tc-cta-content > * { margin-block: 0; }
.xq-tc-cta-content > .xq-t-h2 { margin-bottom: 16px; }
.xq-tc-cta-content > .xq-t-body-lg { margin-bottom: 32px; }
.xq-tc-cta-btns { justify-content: center; gap: 0; }
.xq-tc-cta-btn > .wp-block-button__link {
  font-size: var(--wp--preset--font-size--ui); font-weight: 600; line-height: 1.6; padding: 12px 26px; border-radius: 6px; border: none;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-0);
}
.xq-tc-cta-btn > .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-0); }

/* React squeezes these grids at every width; stack them on narrow screens. */
@media (max-width: 900px) {
  .xq-tc-badge-grid { grid-template-columns: repeat(2, 1fr); }
  .xq-tc-thead { display: none; }
  .xq-tc-row { grid-template-columns: 1fr; gap: 6px; align-items: start; }
}
@media (max-width: 600px) {
  .xq-tc-badge-grid { grid-template-columns: 1fr; }
}

/* Framework pills that link to their detail page (/trust-compliance/<framework>/). */
.xq-tc-tags .is-style-pill a { color: inherit; text-decoration: none; }
.xq-tc-tags .is-style-pill a:hover, .xq-tc-tags .is-style-pill a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.xq-tc-tags .is-style-pill:has(a) { transition: border-color 0.15s; }
.xq-tc-tags .is-style-pill:has(a:hover) { border-color: var(--wp--preset--color--border-strong); }