/* ============================================================================
   _game-seo.css — Zone 4: editorial SEO content, DE-BOXED (quiet, article-like)
   ============================================================================
   The biggest fix for "lelijke grijze blokken overal": the seo_* sections stop
   being gray cards. They render flat on the page background, in one centered
   reading column (~70ch), separated by generous whitespace + a hairline top
   rule. Each heading gets a small accent tick "eyebrow". The verdict is a
   tinted accent callout; the benchmark table is clean with an accent header
   and color-mix zebra; keep/lower panels carry meaning via success/warning
   tints; the FAQ is a minimal hairline accordion. Tokens only.
   ============================================================================ */

.fps-game-seo {
    /* The article FILLS the dashboard/shell width (no thin centred column) and
       is anchored LEFT so its edge lines up with the console + readout above.
       Long-form prose is capped to a comfortable measure via --fps-measure so
       lines stay readable while tables/grids use the full width. Tight,
       consistent type — nothing oversized. */
    --fps-measure: 72ch;
    max-width: 100%;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    margin-top: var(--fps-rhythm);
    font-size: var(--fps-fs-md);
}

/* Long-form prose keeps a sane line length, anchored left (not centred), so
   it stays readable within the now-full-width article. Structural blocks
   (the benchmark table, settings/facts/related grids) fill the width. */
.fps-game-seo__verdict,
.fps-game-seo__intro,
.fps-game-seo__body,
.fps-game-seo__methodology-text,
.fps-game-seo__patch-text,
.fps-game-seo__faq,
.fps-game-seo__upscaler-list {
    max-width: var(--fps-measure);
    line-height: 1.75;
}

/* De-boxed: flat on the page, hairline separator, breathing room. */
.fps-game-seo__block {
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--border);
}

.fps-game-seo__block:first-child {
    padding-top: 0;
    border-top: none;
}

/* Heading with a small accent "eyebrow" tick above it. */
.fps-game-seo__heading {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--fps-fs-h2);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
    padding-top: 0.75rem;
}

.fps-game-seo__heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 3px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--brand-primary), var(--accent));
}

/* ---------- 1. Verdict — accent callout (the one tinted panel) --------- */

.fps-game-seo__verdict {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-top: none;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.fps-game-seo__verdict-text {
    margin: 0;
    font-size: var(--fps-fs-lg);
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ---------- 2. Intro + body ------------------------------------------- */

.fps-game-seo__intro {
    margin: 0 0 var(--space-md);
    font-size: var(--fps-fs-lg);
    line-height: 1.7;
    color: var(--text-secondary);
}

.fps-game-seo__intro:last-child {
    margin-bottom: 0;
}

.fps-game-seo__body {
    font-size: var(--fps-fs-md);
    line-height: 1.72;
    color: var(--text-secondary);
}

.fps-game-seo__body :is(h2, h3, h4) {
    color: var(--text-primary);
    margin: var(--space-lg) 0 var(--space-sm);
}

.fps-game-seo__body p {
    margin: 0 0 var(--space-md);
}

.fps-game-seo__body a {
    color: var(--accent);
    text-underline-offset: 0.15em;
}

/* ---------- 3. Kan mijn PC ... draaien? (measured FPS table) ----------- */

.fps-game-seo__can-run-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin-bottom: var(--space-md);
}

.fps-game-seo__can-run-header .fps-game-seo__can-run-heading {
    margin-bottom: 0;
}

/* Trust chip: confirms the table below is real measured data. */
.fps-game-seo__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    font-size: clamp(0.75rem, 0.4vw + 0.55rem, 0.8125rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}

.fps-game-seo__badge--measured {
    color: var(--success);
    background: var(--success-bg);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.fps-game-seo__badge--measured::before {
    content: "\2713";
    font-weight: 700;
}

.fps-game-seo__badge--cpu {
    color: var(--text-secondary);
    background: var(--surface-2);
    border-color: var(--border);
}

.fps-game-seo__can-run-note {
    margin-top: 0.625rem;
    font-size: clamp(0.75rem, 0.4vw + 0.55rem, 0.8125rem);
    color: var(--text-secondary);
}

.fps-game-seo__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.fps-game-seo__can-run-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fps-fs-base);
}

/* Accent-tinted header row */
.fps-game-seo__can-run-table thead tr {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.fps-game-seo__can-run-table th {
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    white-space: nowrap;
}

.fps-game-seo__can-run-table td {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* Zebra via color-mix — subtle, theme-safe. */
.fps-game-seo__can-run-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

/* FPS columns are data — tabular mono. */
.fps-game-seo__can-run-table td:nth-child(4),
.fps-game-seo__can-run-table td:nth-child(5) {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}

.fps-game-seo__can-run-table tbody tr:last-child td {
    border-bottom: none;
}

/* Verdict cells as small chips */
.fps-verdict {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.fps-verdict--success {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.fps-verdict--info {
    background: color-mix(in srgb, var(--info) 14%, transparent);
    color: var(--info);
}

.fps-verdict--warning {
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: var(--warning);
}

.fps-verdict--error {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    color: var(--error);
}

/* ---------- 4. Beste instellingen (keep / lower_first) ---------------- */

.fps-game-seo__settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .fps-game-seo__settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.fps-game-seo__settings-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* Tints encode meaning: keep = success, lower = warning. */
.fps-game-seo__settings-card--keep {
    border-color: color-mix(in srgb, var(--success) 25%, var(--border));
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--success) 6%, transparent);
}

.fps-game-seo__settings-card--lower {
    border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
    border-left: 3px solid var(--warning);
    background: color-mix(in srgb, var(--warning) 6%, transparent);
}

.fps-game-seo__settings-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--fps-fs-md);
    font-weight: 700;
    color: var(--text-primary);
}

.fps-game-seo__settings-list {
    margin: 0;
    padding: 0 0 0 1.125rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--fps-fs-base);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ---------- 5. DLSS / FSR / RT-advies (list) -------------------------- */

.fps-game-seo__upscaler-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.fps-game-seo__upscaler-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}

.fps-game-seo__upscaler-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fps-game-seo__upscaler-tech {
    font-size: var(--fps-fs-md);
    color: var(--text-primary);
}

.fps-game-seo__upscaler-detail {
    font-size: var(--fps-fs-base);
    color: var(--text-secondary);
}

.fps-game-seo__upscaler-detail strong {
    color: var(--text-primary);
}

/* ---------- 6. Upgrade-pad -------------------------------------------- */

.fps-game-seo__upgrade-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.fps-game-seo__upgrade-step {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.fps-game-seo__upgrade-step--to {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.fps-game-seo__upgrade-step strong {
    font-size: var(--fps-fs-base);
    color: var(--text-primary);
}

.fps-game-seo__upgrade-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.fps-game-seo__upgrade-arrow {
    color: var(--accent);
    flex-shrink: 0;
}

.fps-game-seo__upgrade-why {
    margin: 0 0 var(--space-md);
    font-size: var(--fps-fs-base);
    line-height: 1.65;
    color: var(--text-secondary);
}

.fps-game-seo__upgrade-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: linear-gradient(135deg, var(--brand-primary), var(--accent));
    color: var(--bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fps-fs-base);
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fps-game-seo__upgrade-cta:hover,
.fps-game-seo__upgrade-cta:focus-visible {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 42%, transparent);
    transform: translateY(-1px);
}

/* ---------- 7. Key facts ---------------------------------------------- */

.fps-game-seo__facts {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
}

@media (min-width: 768px) {
    .fps-game-seo__facts {
        grid-template-columns: max-content 1fr;
        column-gap: var(--space-lg);
    }
}

.fps-game-seo__facts dt {
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--space-xs) 0;
}

.fps-game-seo__facts dd {
    margin: 0;
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
    .fps-game-seo__facts dt {
        border-bottom: 1px solid var(--border);
    }
}

/* ---------- 8. Veelgestelde vragen (minimal accordion) ---------------- */

.fps-game-seo__faq {
    display: flex;
    flex-direction: column;
}

.fps-game-seo__faq-item {
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) 0;
}

.fps-game-seo__faq-item:first-child {
    padding-top: 0;
}

.fps-game-seo__faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fps-game-seo__faq-question {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fps-fs-md);
    color: var(--text-primary);
    list-style: none;
    transition: color 0.15s ease;
}

.fps-game-seo__faq-question:hover {
    color: var(--accent);
}

.fps-game-seo__faq-question::-webkit-details-marker {
    display: none;
}

.fps-game-seo__faq-question::before {
    content: "+";
    display: inline-block;
    width: 1.375rem;
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-mono);
}

.fps-game-seo__faq-item[open] .fps-game-seo__faq-question::before {
    content: "\2212";
}

.fps-game-seo__faq-answer {
    margin-top: var(--space-sm);
    padding-left: 1.375rem;
    font-size: var(--fps-fs-base);
    line-height: 1.72;
    color: var(--text-secondary);
}

.fps-game-seo__faq-answer p:last-child {
    margin-bottom: 0;
}

/* ---------- 9. Methodologie & herkomst (quiet provenance) ------------- */

.fps-game-seo__methodology-text {
    margin: 0;
    font-size: var(--fps-fs-base);
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---------- 10. Patch-impact ------------------------------------------ */

.fps-game-seo__patch {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.fps-game-seo__patch-label {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    background: color-mix(in srgb, var(--info) 14%, transparent);
    color: var(--info);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fps-game-seo__patch-text {
    margin: 0;
    font-size: var(--fps-fs-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- 11. Verwante games ---------------------------------------- */

.fps-game-seo__related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
}

.fps-game-seo__related-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--text-primary);
}

.fps-game-seo__related-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fps-game-seo__related-card:hover .fps-game-seo__related-image img,
.fps-game-seo__related-card:focus-visible .fps-game-seo__related-image img {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.fps-game-seo__related-name {
    font-size: var(--fps-fs-base);
    font-weight: 500;
}

.fps-game-seo__related-card:hover .fps-game-seo__related-name,
.fps-game-seo__related-card:focus-visible .fps-game-seo__related-name {
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .fps-game-seo__faq-question,
    .fps-game-seo__upgrade-cta,
    .fps-game-seo__related-image img {
        transition: none;
    }
}