/**
 * Related Links Component ("Das könnte Dich auch interessieren")
 * Juliana y Fadi Tango Website
 *
 * Wiederverwendbar auf allen Seiten (siehe includes/related-links.php).
 * Bewusst dezent gehalten - kein visueller Bruch mit dem restlichen
 * Design, aber echt sichtbar und klickbar (kein verstecktes Markup).
 */

.related-links {
    width: 100%;
    margin: 0;
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl)) 0;
    background: var(--gradient-dark);
}

.related-links__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    padding-right: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

.related-links__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm) 0;
    letter-spacing: var(--letter-spacing-base);
    text-align: center;
}

.related-links__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
}

.related-links__link {
    display: inline-block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 0.4rem var(--spacing-sm);
    border: var(--border-width-thin, 1px) solid var(--color-primary);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-base);
}

.related-links__link:hover,
.related-links__link:focus-visible {
    transform: var(--transform-lift);
    box-shadow: var(--shadow-glow-white-hover);
}

@media (max-width: 480px) {
    .related-links__list {
        flex-direction: column;
    }

    .related-links__link {
        width: 100%;
        text-align: center;
    }
}