/**
 * Social Media Block
 *
 * @package Timelapse
 * @since 1.0.0
 */

/* ── Wrapper ── */
.tl-social-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
}

/* ── Text Label ── */
.tl-social-text {
    font-family: var(--tl-font-primary);
    font-weight: var(--tl-weight-bold);
    font-size: var(--tl-text-body);
    margin-bottom: var(--tl-space-md);
    color: var(--tl-white);
    text-align: center;
}

/* ── Icons Container ── */
.tl-social-icons {
    display: flex;
    gap: var(--tl-space-sm);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Individual Icon ── */
.tl-social-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--tl-radius-circle);
    background: var(--tl-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.4s var(--tl-ease-out),
                transform 0.4s var(--tl-ease-out),
                filter 0.4s var(--tl-ease-out),
                box-shadow 0.4s var(--tl-ease-out);
}

.tl-social-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--tl-black);
    transition: fill 0.4s var(--tl-ease-out);
}

/* ── Group Hover Effect ── */
.tl-social-icons:hover .tl-social-icon {
    opacity: 0.2;
    transform: scale(0.9);
    filter: blur(1px);
}

.tl-social-icons:hover .tl-social-icon:hover {
    opacity: 1;
    transform: scale(1.15);
    filter: blur(0);
    box-shadow: var(--tl-shadow-glow);
}