/* Solutions page (/solutions/) — ports src/pages/Solutions.tsx. Loaded only on that page. */

/* Radial glow behind hero copy. */
.xq-sol-hero { position: relative; padding-top: var(--wp--preset--spacing--section-100); padding-bottom: var(--wp--preset--spacing--section-60); }
.xq-sol-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(124, 58, 237, 0.09) 0%, transparent 70%);
}
.xq-sol-hero > * { position: relative; }
.xq-sol-hero-copy { text-align: center; max-width: 880px !important; }
.xq-sol-hero-copy > * { margin-block: 0; }
.xq-sol-hero-copy .xq-t-h2 { margin-bottom: 20px; }
.xq-sol-hero-copy > .xq-t-body-lg { max-width: 720px; margin-inline: auto; }

/* ── Solutions · pillar selector + detail ── */
.xq-sol-detail { padding-top: var(--wp--preset--spacing--section-60); padding-bottom: var(--wp--preset--spacing--section-100); }
.xq-sol-detail > * { margin-block: 0; }
.xq-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.xq-pillar + .xq-pillar { margin-top: 80px !important; } /* stacked (no-JS) fallback */
.xq-pillar > *, .xq-pillar-main > *, .xq-pillar-side > *, .xq-pillar-badge > * { margin-block: 0; }
.xq-pillar-main > .xq-pillar-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.xq-pillar-badge > .xq-pillar-icon {
  width: 44px; height: 44px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--xq-c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--xq-c) 19%, transparent);
  color: var(--xq-c);
}
.xq-pillar-name { line-height: 1.6; color: var(--xq-c); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.xq-pillar-h { font-size: clamp(28px, 2.5vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: normal; margin-bottom: 20px !important; }
.xq-pillar-body { color: var(--wp--preset--color--text-1); font-size: var(--wp--preset--font-size--h-4); line-height: 1.75; margin-bottom: 32px !important; }
.xq-pillar-main > .is-style-dot-list { margin-bottom: 28px; }
.xq-pillar .is-style-dot-list > li { margin-bottom: 12px; color: var(--wp--preset--color--text-1); font-size: var(--wp--preset--font-size--ui); }
.xq-pillar-side { display: flex; flex-direction: column; gap: 20px; }
.xq-pillar-side > .is-style-panel > .xq-list-label { margin-bottom: 16px; }
.xq-pillar .is-style-square-list > li { color: var(--wp--preset--color--text-0); font-size: var(--wp--preset--font-size--ui); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--wp--preset--color--border); }
.xq-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.xq-pill-row > * { margin: 0 !important; }
.xq-pillar-cta { display: flex; flex-direction: column; gap: 10px; }
.xq-pillar-cta > .is-style-outline { width: 100%; margin: 0; }
.xq-pillar-cta > .is-style-outline > .wp-block-button__link { width: 100%; text-align: center; }
.xq-btn-pillar { width: 100%; }
.xq-btn-pillar > .wp-block-button__link {
  width: 100%; border: none; color: #fff; font-size: var(--wp--preset--font-size--body); padding: 14px 28px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--xq-c) 80%, transparent), color-mix(in srgb, var(--xq-c) 53%, transparent));
  box-shadow: 0 0 28px color-mix(in srgb, var(--xq-c) 15%, transparent);
}
.xq-btn-pillar > .wp-block-button__link:hover { color: #fff; background: linear-gradient(135deg, var(--xq-c), color-mix(in srgb, var(--xq-c) 70%, transparent)); }

/* ── Solutions · named solutions (is-style-card + xq-stretched link) ── */
.xq-named-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.xq-named-grid > * { margin-block: 0; }
.xq-named-card > .xq-icon { display: block; margin-bottom: 14px; }
.xq-named-card > h3 { margin-bottom: 8px; color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--body); font-weight: 700; line-height: 1.6; letter-spacing: normal; }
.xq-named-card > p { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.xq-named-card > p:not(.xq-named-more) { margin-bottom: 14px; }
/* The line box keeps the card's 15px/1.6 strut; only the link text is 12px (as in React). */
.xq-named-card > .xq-named-more { font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.xq-named-more > a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); font-weight: 600; color: var(--wp--preset--color--accent-dark); }

/* ── Solutions · regulatory coverage ── */
.xq-sol-reg { background: var(--wp--preset--color--bg-surface); padding-top: var(--wp--preset--spacing--section-80); padding-bottom: var(--wp--preset--spacing--section-80); }
.xq-sol-reg > *, .xq-reg-grid > * { margin-block: 0; }
.xq-reg-grid { display: grid; gap: 14px; }
.xq-reg-grid--8 { grid-template-columns: repeat(8, 1fr); }
.xq-sol-reg > .xq-reg-grid--8 { margin-bottom: 14px; }
.xq-reg-grid--6 { grid-template-columns: repeat(6, 1fr); }
.xq-reg {
  background: var(--wp--preset--color--bg-surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px;
  padding: 16px; text-align: center; transition: border-color 0.2s;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--text-1);
}
.xq-reg:not(.xq-reg--featured):hover { border-color: var(--wp--preset--color--border-mid); }
.xq-reg--featured { background: var(--wp--preset--color--accent-dim); border-color: var(--wp--preset--color--border-mid); color: var(--wp--preset--color--text-0); }
.xq-pillar-main > .xq-list-label { margin-bottom: 14px; }

@media (max-width: 900px) {
  .xq-pillar { grid-template-columns: 1fr; gap: 40px; }
  .xq-named-grid { grid-template-columns: repeat(2, 1fr); }
  .xq-reg-grid--8 { grid-template-columns: repeat(4, 1fr); }
  .xq-reg-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .xq-named-grid { grid-template-columns: 1fr; }
  .xq-reg-grid--8, .xq-reg-grid--6 { grid-template-columns: repeat(2, 1fr); }
}