/**
 * Homepage "Members, in their words" section: template-parts/home-members.php. Matches the toolkit and "Who's behind it":
 * dark by default, light under html[data-theme="light"]. Scoped to .smw.
 */

.smw {
    --smw-bg: #0a0a0a;
    --smw-text: #f5f5f2;
    --smw-text2: #c4c9d2;
    --smw-muted: #9aa1ad;
    --smw-gold: #f5c518;
    --smw-green: #34d399;
    --smw-line: #232c3b;
    --smw-line2: #3d3d3d;
    --smw-panel: linear-gradient(180deg, #161e2c 0%, #111827 100%);
    padding: 80px 0 88px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--smw-bg);
    color: var(--smw-text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .smw {
    --smw-bg: #f5f5f5;
    --smw-text: #1a1a1a;
    --smw-text2: #4a4f57;
    --smw-muted: #5f646d;
    --smw-gold: #8a6606;
    --smw-green: #00a86b;
    --smw-line: #e2e5ea;
    --smw-line2: #d4d7dc;
    --smw-panel: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    border-top-color: rgba(0, 0, 0, 0.06);
}
.smw *, .smw *::before, .smw *::after { box-sizing: border-box; }
.smw :where(h2, p, blockquote, figure, figcaption) { margin: 0; padding: 0; }
.smw :where(p, span, div, h2, b, blockquote) { color: inherit; font-size: inherit; }
.smw :focus-visible { outline: 3px solid var(--smw-gold); outline-offset: 3px; border-radius: 6px; }
.smw .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.smw-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* Heading beside the Trustpilot score */
.smw-head { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.smw .smw-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smw-gold); }
.smw .smw-h2 { margin-top: 14px; font-size: 64px; line-height: 1.02; font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; color: var(--smw-text); }
.smw-score { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: 18px; border: 1px solid var(--smw-line); background: var(--smw-panel); }
.smw .smw-score b { font-family: 'Instrument Serif', Georgia, serif; font-size: 64px; font-weight: 400; line-height: 0.9; color: var(--smw-text); }
.smw-stars { display: flex; gap: 3px; }
.smw-stars svg { width: 20px; height: 20px; fill: var(--smw-green); }
.smw .smw-score p { margin-top: 6px; font-size: 15px; color: var(--smw-text2); }
.smw a.smw-all-d, .smw a.smw-all-d:hover { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--smw-gold); text-decoration: none; }
.smw a.smw-all-d:hover { text-decoration: underline; }

/* Two even rows of four: every card is as tall as the tallest, names line up along the bottom */
.smw-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 48px; }
.smw-q { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 22px; border-radius: 18px; border: 1px solid var(--smw-line); background: var(--smw-panel); }
.smw .smw-topic { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--smw-gold); }
.smw .smw-q blockquote { border: 0; font-size: 17px; font-style: normal; line-height: 1.55; color: var(--smw-text2); }
/* One short exact phrase per quote stands out; the rest of the quote sits back */
.smw .smw-q blockquote strong { font-weight: 600; color: var(--smw-text); }
.smw-q figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--smw-line); font-size: 14px; color: var(--smw-muted); }
.smw .smw-q figcaption b { font-weight: 700; color: var(--smw-text); }
.smw .smw-q figcaption a, .smw .smw-q figcaption a:hover { color: var(--smw-muted); text-decoration: underline; text-underline-offset: 3px; }
.smw .smw-q figcaption a:hover { color: var(--smw-gold); }

.smw .smw-more { display: none; }
.smw a.smw-all-m { display: none; }
.smw .smw-fine { margin-top: 28px; max-width: 72em; font-size: 13px; line-height: 1.55; color: var(--smw-muted); }

/* Tablets: two columns, so the quotes keep a readable line length */
@media (max-width: 1279px) {
    .smw .smw-h2 { font-size: 52px; }
    .smw-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .smw-head { grid-template-columns: 1fr; gap: 24px; }
    .smw-score { justify-self: start; }
}
/* Phones: one column; three chosen quotes first, then "Show 5 more reviews" */
@media (max-width: 760px) {
    .smw { padding: 72px 0 80px; font-size: 16px; }
    .smw-wrap { padding: 0 18px; }
    .smw .smw-eyebrow { font-size: 13px; }
    .smw .smw-h2 { margin-top: 12px; font-size: 40px; line-height: 1.05; }
    .smw-head { gap: 22px; }
    .smw-score { gap: 16px; padding: 16px 18px; justify-self: stretch; }
    .smw .smw-score b { font-size: 52px; }
    .smw-stars svg { width: 17px; height: 17px; }
    .smw .smw-score p { margin-top: 4px; font-size: 14px; }
    .smw a.smw-all-d { display: none; }
    .smw-wall { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; margin-top: 20px; }
    .smw-q { order: var(--smw-order, 10); gap: 12px; padding: 20px; border-radius: 16px; }
    .smw .smw-topic { font-size: 11px; }
    .smw .smw-q blockquote { font-size: 16px; }
    .smw-q figcaption { padding-top: 10px; font-size: 13px; }
    .smw.is-collapsed .smw-extra { display: none; }
    .smw .smw-more:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--smw-line2); background: transparent; color: var(--smw-text); font: 700 15px/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer; }
    .smw .smw-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .smw a.smw-all-m, .smw a.smw-all-m:hover { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--smw-gold); text-decoration: none; }
    .smw .smw-fine { margin-top: 14px; font-size: 12px; }
}