/* ==========================================================================
   Social Media
   Zentrierter Abschnitt: Headline + Text + Slot für Social-Media-Kanäle.
   Hintergrund (#040A17) und Text-/Headline-Farbe werden im Dark Mode global
   über #main-wrapper.neo-dark gesetzt (identisch zum Modal). Die Kanal-Icons
   stylt die Child-Komponente "social_media_channel" selbst.
   ========================================================================== */

.social-media {
    text-align: center;
}

/* ---- Content (Headline + Text) ---- */

.social-media__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-16);
    max-width: 860px;
    margin-inline: auto;
    margin-bottom: var(--gap-36);
}

.social-media__headline,
.social-media__text {
    margin: 0;
}

/* ---- Channel row (Slot) ---- */

/* Gap + max. Icons pro Reihe je Breakpoint. Die max-width begrenzt die Reihe
   auf N × Icongröße + (N-1) × Gap (+4px Puffer), sodass das (N+1). Icon
   umbricht. Bei weniger Icons als N bleiben sie zentriert.
     S   (<768):  3 Icons, Gap 20px
     M2  (≥768):  4 Icons, Gap 48px
     M1  (≥1024): 5 Icons, Gap 48px
     L   (≥1280): 6 Icons, Gap 48px
     XL  (≥1920): 7 Icons, Gap 96px */
.social-media__channels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 173px;
    margin-inline: auto;
}

/* ==========================================================================
   Responsive (analog Figma: M2 / M1 / L / XL)
   ========================================================================== */

@media (min-width: 768px) {

    .social-media__content {
        gap: var(--gap-24);
        margin-bottom: var(--gap-48);
    }

    .social-media__channels {
        gap: 48px;
        max-width: 416px;
    }
}

@media (min-width: 1024px) {

    .social-media__channels {
        max-width: 531px;
    }
}

@media (min-width: 1280px) {

    .social-media__content {
        gap: var(--gap-36);
        margin-bottom: var(--gap-72);
    }

    .social-media__channels {
        max-width: 646px;
    }
}

@media (min-width: 1920px) {

    .social-media__channels {
        gap: 96px;
        max-width: 1294px;
    }
}