/*
|--------------------------------------------------------------------------
| Social Media – Frontend
|--------------------------------------------------------------------------
*/

.social-media-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-7);

    width: 100%;
}

.social-media-hero,
.social-media-section,
.social-media-note {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);

    background: rgba(15, 23, 42, 0.88);

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.social-media-hero {
    position: relative;

    overflow: hidden;

    padding:
        var(--spacing-8)
        var(--spacing-7);

    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 39, 0.98),
            rgba(15, 23, 42, 0.96)
        );
}

.social-media-hero::after {
    content: '';

    position: absolute;
    top: -110px;
    right: -70px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background: rgba(59, 130, 246, 0.08);

    pointer-events: none;
}

.social-media-hero__eyebrow,
.social-media-section__heading > span,
.social-media-card__label {
    color: var(--color-primary-400);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.social-media-hero h1 {
    position: relative;
    z-index: 1;

    margin:
        var(--spacing-2)
        0
        var(--spacing-3);

    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
}

.social-media-hero > p {
    position: relative;
    z-index: 1;

    max-width: 820px;

    margin: 0;

    color: var(--text-secondary);

    font-size: var(--font-size-lg);
    line-height: 1.7;
}

.social-media-section,
.social-media-note {
    padding: var(--spacing-7);
}

.social-media-section__heading {
    max-width: 820px;

    margin-bottom: var(--spacing-5);
}

.social-media-section__heading h2,
.social-media-note h2 {
    margin:
        var(--spacing-1)
        0
        var(--spacing-2);

    font-size: var(--font-size-xl);
}

.social-media-section__heading p,
.social-media-note p {
    margin: 0;

    color: var(--text-muted);

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Karten
|--------------------------------------------------------------------------
*/

.social-media-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--spacing-4);
}

.social-media-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 220px;

    padding: var(--spacing-5);

    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);

    background: rgba(2, 6, 23, 0.46);
}

.social-media-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: var(--spacing-4);

    border: var(--border-width) solid rgba(96, 165, 250, 0.2);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.1),
            rgba(15, 23, 42, 0.78)
        );

    color: #dbeafe;
}

.social-media-card__icon svg {
    width: 31px;
    height: 31px;

    overflow: visible;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-media-card__icon .social-icon-fill {
    fill: currentColor;
    stroke: none;
}

.social-media-card__icon .social-icon-cut {
    fill: rgba(15, 23, 42, 0.96);
    stroke: none;
}

.social-media-card__content {
    flex: 1;
}

.social-media-card h3 {
    margin:
        var(--spacing-2)
        0;

    font-size: var(--font-size-lg);
}

.social-media-card__username {
    margin: 0;

    color: var(--text-muted);

    overflow-wrap: anywhere;
}

.social-media-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    margin-top: var(--spacing-5);

    padding:
        var(--spacing-2)
        var(--spacing-4);

    border: var(--border-width) solid rgba(59, 130, 246, 0.34);
    border-radius: var(--radius-md);

    background: rgba(37, 99, 235, 0.1);

    color: var(--text-link);

    font-weight: var(--font-weight-semibold);
    text-decoration: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.social-media-card__link:hover,
.social-media-card__link:focus-visible {
    transform: translateY(-1px);

    border-color: rgba(96, 165, 250, 0.55);

    background: rgba(37, 99, 235, 0.18);

    color: var(--text-link-hover);
}


/*
|--------------------------------------------------------------------------
| Leerzustand / Hinweis
|--------------------------------------------------------------------------
*/

.social-media-empty {
    padding: var(--spacing-6);

    border: var(--border-width) dashed var(--border-color-strong);
    border-radius: var(--radius-lg);

    text-align: center;
}

.social-media-empty h3 {
    margin:
        0
        0
        var(--spacing-2);
}

.social-media-empty p {
    margin: 0;

    color: var(--text-muted);
}

.social-media-note {
    border-color: rgba(59, 130, 246, 0.25);

    background: rgba(37, 99, 235, 0.06);
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .social-media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .social-media-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .social-media-hero,
    .social-media-section,
    .social-media-note {
        padding: var(--spacing-5);
    }
}

/*
|--------------------------------------------------------------------------
| Plattform-Icons
|--------------------------------------------------------------------------
*/

.social-media-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: var(--spacing-4);

    border: var(--border-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);

    background: rgba(15, 23, 42, 0.78);

    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.social-media-card:hover .social-media-card__icon {
    transform: translateY(-2px);
}

.social-media-card__icon svg {
    width: 31px;
    height: 31px;

    overflow: visible;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-media-card__icon .social-icon-fill {
    fill: currentColor;
    stroke: none;
}

.social-media-card__icon .social-icon-cut {
    fill: currentColor;
    stroke: none;
}


/*
|--------------------------------------------------------------------------
| Instagram
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="instagram"]
.social-media-card__icon {
    border-color: rgba(253, 29, 29, 0.35);

    background:
        radial-gradient(
            circle at 30% 105%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285aeb 90%
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(214, 36, 159, 0.22);
}


/*
|--------------------------------------------------------------------------
| Facebook
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="facebook"]
.social-media-card__icon {
    border-color: rgba(24, 119, 242, 0.55);

    background: #1877f2;

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(24, 119, 242, 0.22);
}


/*
|--------------------------------------------------------------------------
| TikTok
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="tiktok"]
.social-media-card__icon {
    border-color: rgba(37, 244, 238, 0.35);

    background:
        linear-gradient(
            145deg,
            #121212,
            #080808
        );

    color: #ffffff;

    box-shadow:
        -3px 3px 0 rgba(37, 244, 238, 0.55),
        3px -3px 0 rgba(254, 44, 85, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.28);
}


/*
|--------------------------------------------------------------------------
| YouTube
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="youtube"]
.social-media-card__icon {
    border-color: rgba(255, 0, 0, 0.45);

    background: #ff0000;

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(255, 0, 0, 0.2);
}

.social-media-card[data-platform="youtube"]
.social-media-card__icon .social-icon-cut {
    fill: #ff0000;
}


/*
|--------------------------------------------------------------------------
| Threads
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="threads"]
.social-media-card__icon {
    border-color: rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            145deg,
            #181818,
            #050505
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28);
}


/*
|--------------------------------------------------------------------------
| Bluesky
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="bluesky"]
.social-media-card__icon {
    border-color: rgba(0, 133, 255, 0.45);

    background:
        linear-gradient(
            145deg,
            #1185fe,
            #0069d9
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(0, 133, 255, 0.22);
}


/*
|--------------------------------------------------------------------------
| X
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="x"]
.social-media-card__icon,
.social-media-card[data-platform="twitter"]
.social-media-card__icon {
    border-color: rgba(255, 255, 255, 0.2);

    background:
        linear-gradient(
            145deg,
            #171717,
            #000000
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3);
}


/*
|--------------------------------------------------------------------------
| Twitch
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="twitch"]
.social-media-card__icon {
    border-color: rgba(145, 70, 255, 0.5);

    background:
        linear-gradient(
            145deg,
            #9146ff,
            #6f2ddb
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(145, 70, 255, 0.24);
}


/*
|--------------------------------------------------------------------------
| Discord
|--------------------------------------------------------------------------
*/

.social-media-card[data-platform="discord"]
.social-media-card__icon {
    border-color: rgba(88, 101, 242, 0.5);

    background:
        linear-gradient(
            145deg,
            #5865f2,
            #4752c4
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(88, 101, 242, 0.24);
}