.social-video { width: calc(100% - 2rem); max-width: var(--sv-max-width, 1200px); margin: 2.5rem auto; color: inherit; }
.social-video__frame { position: relative; width: 100%; aspect-ratio: var(--sv-ratio, 16/9); overflow: hidden; border-radius: var(--sv-radius, 12px); background: #111; }
.social-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.social-video__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; border: 0; padding: 1.25rem; color: #fff; background: linear-gradient(135deg, #18181b, #27272a); cursor: pointer; font: inherit; }
.social-video__consent span { font-size: 1.05rem; font-weight: 700; }
.social-video__consent small { max-width: 30rem; opacity: .78; }
.social-video__consent:focus-visible { outline: 3px solid #60a5fa; outline-offset: -5px; }
.social-video-showcase { width: min(100% - 2rem, 1440px); margin: 4rem auto; }
.social-video-showcase__header { margin-bottom: 1.75rem; text-align: center; }
.social-video-showcase__header h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.social-video-showcase__header p { margin: .5rem 0 0; color: #6b7280; }
.social-video-showcase__carousel { position: relative; }
.social-video-showcase__grid { display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.social-video-showcase__grid::-webkit-scrollbar { display: none; }
.social-video-showcase__grid:focus-visible { outline: 3px solid #60a5fa; outline-offset: .4rem; }
.social-video-card { flex: 0 0 calc((100% - 5 * 1.25rem) / 6); min-width: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px rgb(15 23 42 / 7%); }
.social-video-showcase__nav { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #e5e7eb; border-radius: 50%; color: #111827; background: #fff; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); cursor: pointer; transform: translateY(-50%); transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
.social-video-showcase__nav:hover { color: #fff; background: #ef4444; }
.social-video-showcase__nav:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.social-video-showcase__nav span { font-size: 2rem; line-height: 1; transform: translateY(-.08em); }
.social-video-showcase__nav--prev { left: -1.375rem; }
.social-video-showcase__nav--next { right: -1.375rem; }
.social-video-card .social-video { width: 100%; max-width: none; margin: 0; }
.social-video-card .social-video__frame { aspect-ratio: 4/5; border-radius: 0; }
.social-video-card .social-video__consent { padding: 1rem; }
.social-video-card .social-video__consent span { font-size: .95rem; }
.social-video-card .social-video__consent small { font-size: .75rem; }
.social-video-card__body { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.social-video-card__body h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.social-video-card__button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1rem; border-radius: 999px; color: #fff; background: #111827; font-weight: 700; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.social-video-card__button:hover { color: #fff; background: #ef4444; transform: translateY(-1px); }
.social-video-error { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .75rem; background: color-mix(in srgb, currentColor 5%, transparent); }
@media (max-width: 767px) { .social-video-showcase { width: min(100% - 1rem, 1440px); } .social-video-card { flex-basis: calc((100% - .75rem) / 2); } .social-video-showcase__grid { gap: .75rem; } .social-video-showcase__nav { width: 2.5rem; height: 2.5rem; } .social-video-showcase__nav--prev { left: .5rem; } .social-video-showcase__nav--next { right: .5rem; } .social-video--instagram, .social-video--tiktok { max-width: 100%; } .social-video__consent { padding: .5rem; } .social-video__consent span { font-size: .8rem; } .social-video__consent small { font-size: .65rem; } .social-video-card__body { gap: .65rem; padding: .75rem; } .social-video-card__button { min-height: 2.4rem; padding: .55rem .65rem; font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .social-video-showcase__grid { scroll-behavior: auto; } }