/* Alleen de openbare socialstrook. De productkleuren en footer blijven intact. */
.os-social {
 --social-accent:#00d8ba;--social-navy:#0b1f27;--social-papier:#f2f4f3;--social-zacht:#bfccd0;--social-hover:#203c45;--social-rand:#637c84;
 background:var(--social-accent);color:var(--social-navy);border-radius:20px;
 padding:clamp(20px,3vw,32px);margin:0 0 32px;text-align:left;
 font-family:'OpenSein DM Sans',Arial,sans-serif;line-height:1.5;container-type:inline-size;
}
.os-social,.os-social * { box-sizing:border-box; }
.os-social .os-social-boven { margin:0 0 8px;color:var(--social-navy);font-size:.875rem;font-weight:600;letter-spacing:.01em; }
.os-social h2 { margin:0;max-width:25ch;color:var(--social-navy);font-family:'OpenSein Bricolage','OpenSein DM Sans',Arial,sans-serif;font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;text-wrap:balance; }
.os-social .os-social-onder { margin:12px 0 22px;color:var(--social-navy);font-size:1rem;line-height:1.5; }
/* Vier sporen vormen twee even brede knoppen; de losse vijfde staat gecentreerd. */
.os-social .os-social-raster { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px; }
.os-social .os-social-link { grid-column:span 2;display:flex;align-items:center;gap:12px;min-width:0;min-height:68px;padding:12px 16px;border:1px solid transparent;border-radius:12px;background:var(--social-navy);color:var(--social-papier);text-decoration:none;font-size:1rem;font-weight:400;line-height:1.25;transition:background-color 100ms ease,border-color 100ms ease,transform 100ms ease; }
.os-social .os-social-link:last-child:nth-child(odd) { grid-column:2 / span 2; }
.os-social .os-social-beeld { display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:24px; }
.os-social .os-social-beeld img { display:block;width:22px;height:22px;object-fit:contain; }
/* Het officiële PNG bevat vrije ruimte; de zichtbare witte markering blijft circa 21 px hoog. */
.os-social [data-social-platform="youtube"] .os-social-beeld img { width:auto;height:40px;max-width:none; }
.os-social .os-social-copy { display:flex;flex-direction:column;gap:3px;min-width:0; }
.os-social .os-social-naam { color:var(--social-papier);font-weight:600;overflow-wrap:anywhere; }
.os-social .os-social-cta { color:var(--social-zacht);font-size:.8125rem;font-weight:400;overflow-wrap:anywhere; }
.os-social .os-social-pijl { flex:0 0 18px;margin-left:auto;color:var(--social-papier); }
.os-social .os-social-link:focus-visible { outline:3px solid var(--social-navy);outline-offset:4px; }
.os-social .os-social-link:active { transform:translateY(1px); }
.os-social--rustig { background:var(--social-navy);color:var(--social-papier);border-radius:12px; }
.os-social--rustig .os-social-boven { color:var(--social-zacht);font-weight:400; }
.os-social--rustig h2 { max-width:none;color:var(--social-papier);font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2; }
.os-social--rustig .os-social-onder { color:var(--social-zacht);font-size:.9375rem;margin:10px 0 18px; }
.os-social--rustig .os-social-link { min-height:52px;background:transparent;border-color:var(--social-rand);font-size:.875rem; }
.os-social--rustig .os-social-link:focus-visible { outline-color:var(--social-accent); }
.os-social--rustig .os-social-handle { margin:14px 0 0;color:var(--social-zacht);font-size:.8125rem; }
@media(hover:hover) { .os-social .os-social-link:hover { background:var(--social-hover);color:var(--social-papier);transform:translateY(-2px); } .os-social--rustig .os-social-link:hover { border-color:var(--social-accent); } }
@container(max-width:30rem) { .os-social .os-social-link { gap:6px;padding:12px 8px;font-size:.875rem; } .os-social .os-social-beeld { flex-basis:24px;width:24px; } .os-social .os-social-pijl { display:none; } }
/* De vaste rustige footer toont alle vijf naast elkaar zodra hun namen ruim passen. */
@container(min-width:60rem) { .os-social--rustig .os-social-raster { grid-template-columns:repeat(5,minmax(0,1fr)); } .os-social--rustig .os-social-link,.os-social--rustig .os-social-link:last-child:nth-child(odd) { grid-column:auto; } }
/* Vergrote tekst krijgt één kolom; namen en tikdoelen blijven volledig zichtbaar. */
@container(max-width:13rem) { .os-social .os-social-raster { grid-template-columns:1fr; } .os-social .os-social-link,.os-social .os-social-link:last-child:nth-child(odd) { grid-column:auto; } }
@media(max-width:340px) { .os-social .os-social-raster { gap:10px; } }
@media(prefers-reduced-motion:reduce) { .os-social .os-social-link { transition:none; } .os-social .os-social-link:is(:hover,:active) { transform:none; } }