/* === Discord-strook op spelpagina's (Quiz, Music, Play) ===
   Zelfde strook als op de startpagina (galerij-home.css, blok "Discord-aankondiging (home)").
   Apart bestand met een eigen naam, zodat geen browser een oude versie uit de cache haalt.
   Ingezet door tools/site_tests/discord_link.py; teksten in _socials/discord/site_strook.json ("paginas"). */
.dc-banner { padding: 32px 0 8px; position: relative; }
.dc-strook {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px 24px;
    padding: 20px 24px 20px 20px;
    border-radius: 22px;
    background:
        radial-gradient(140% 90% at 100% 0%, rgba(88, 101, 242, 0.22), transparent 55%),
        linear-gradient(135deg, #1a1a30 0%, #171a3a 60%, #1b1a30 100%);
    border: 1px solid rgba(88, 101, 242, 0.35);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    overflow: hidden;
}
.dc-strook__gloed {
    position: absolute; inset: -30% -40% auto auto;
    width: 60%; height: 170%;
    background: radial-gradient(closest-side, rgba(88, 101, 242, 0.35), transparent 72%);
    pointer-events: none;
}
.dc-strook__foxy {
    position: relative; z-index: 1;
    display: block;
    width: 150px; height: 150px;
    margin-left: -4px;
}
.dc-strook__foxy img {
    width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
.dc-strook__inhoud { position: relative; z-index: 1; min-width: 0; }
.dc-strook__tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(88, 101, 242, 0.26);
    color: #d9deff;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
}
.dc-strook__tag i { font-size: 0.9rem; color: #a9b2ff; }
.dc-strook h2 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 6px; color: var(--text, #f1f1f8); }
.dc-strook p { margin: 0; color: var(--text-secondary); font-size: 1rem; max-width: 60ch; }
.dc-strook__cta {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.dc-strook__meta { color: #8f8fb0; font-size: 0.78rem; letter-spacing: 0.4px; }

.btn--discord {
    background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 22px rgba(88, 101, 242, 0.4);
}
.btn--discord:hover { background: linear-gradient(135deg, #6d78ff 0%, #5865F2 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(88, 101, 242, 0.5); }
.btn--discord:active { transform: translateY(0); }
.btn--discord i { color: #fff; }

@media (max-width: 900px) {
    .dc-strook { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto auto; padding: 18px; gap: 12px 14px; }
    .dc-strook__foxy { width: 110px; height: 120px; grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
    .dc-strook__cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; gap: 14px; }
    .dc-strook__cta .btn { flex: 1 1 auto; justify-content: center; }
    .dc-strook h2 { font-size: 1.25rem; }
    .dc-strook p { font-size: 0.95rem; }
}

@media (max-width: 520px) {
    .dc-banner { padding-top: 24px; }
    .dc-strook { grid-template-columns: 86px minmax(0, 1fr); padding: 16px; border-radius: 18px; }
    .dc-strook__foxy { width: 86px; height: 100px; }
    .dc-strook__cta { flex-direction: column; align-items: stretch; }
    .dc-strook__cta .btn { width: 100%; }
    .dc-strook__meta { text-align: center; }
    .dc-strook h2 { font-size: 1.15rem; }
}

/* Spelpagina: evenveel ruimte boven als onder de strook, gemeten tot de rand van de gekleurde band
   erboven en eronder (anders kleeft de strook tegen die band). Uitzonderingen:
   - na .versions (NL Quiz en Music): die sectie heeft geen eigen achtergrond, haar ruimte volstaat;
   - Play: eronder volgt meteen de FAQ zonder band, met eigen ruimte. */
.dc-banner--pagina { padding: 88px 0; }
.versions + .dc-banner--pagina { padding-top: 0; }
.dc-banner--play { padding-bottom: 0; }
@media (max-width: 520px) {
    .dc-banner--pagina { padding: 64px 0; }
    .versions + .dc-banner--pagina { padding-top: 0; }
    .dc-banner--play { padding-bottom: 0; }
}