/* ==========================================================================
   Component: Social Section
   "Книжный клуб онлайн" — text + social icons + video player
   ========================================================================== */

.social-section {
    background: var(--color-bg);
    padding: 120px var(--page-padding);
}

/* --- Grid layout: 4 children repositioned per breakpoint --- */
.social-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "label   video"
        "heading video"
        "social  video";
    gap: 0 120px;
    align-items: center;
}

.social-section__label   { grid-area: label; }
.social-section__heading { grid-area: heading; }
.social-section__video   { grid-area: video; }
.social-section__social  { grid-area: social; }

/* --- Label --- */
.social-section__label {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xl);
    font-weight: 500;
    letter-spacing: 3.06px;
    text-transform: uppercase;
    line-height: normal;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

/* --- Heading group (title + desc) --- */
.social-section__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.social-section__title {
    font-family: var(--font-family-serif);
    font-size: 40px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-text);
}

.social-section__desc {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 400;
    line-height: 24px;
    color: var(--color-dark-500);
}

/* --- Social block (links + caption) --- */
.social-section__social {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.social-section__links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.social-section__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    color: var(--color-white);
    transition: opacity 0.2s;
}

.social-section__link:hover {
    opacity: 0.8;
}

.social-section__link svg,
.social-section__link img {
    width: 28px;
    height: 28px;
}

/* Social brand colors */
.social-section__link--youtube  { background: #FF0033; }
.social-section__link--telegram { background: #2AAAED; }
.social-section__link--facebook { background: #0866FF; }
.social-section__link--rutube   { background: #A0CDEA; }
.social-section__link--vk       { background: #007EBB; }

/* --- Caption --- */
.social-section__caption {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 17px;
    color: var(--color-dark-500);
}

/* --- Video / Illustration --- */
.social-section__video {
    position: relative;
}

.social-section__video-link {
    display: block;
    transition: opacity 0.2s;
}

.social-section__video-link:hover {
    opacity: 0.85;
}

.social-section__illustration {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet: <=1024px --- */
@media (max-width: 1024px) {
    .social-section {
        padding: 64px var(--page-padding);
    }

    .social-section__inner {
        gap: 0 60px;
    }

    .social-section__title {
        font-size: 32px;
        line-height: 38px;
    }

}

/* --- Mobile: <=768px --- */
@media (max-width: 768px) {
    .social-section {
        padding: 64px var(--page-padding);
    }

    .social-section__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "video"
            "heading"
            "social";
        gap: 0;
        text-align: center;
        justify-items: center;
    }

    .social-section__label {
        font-size: var(--font-size-base);
        letter-spacing: 2.38px;
        margin-bottom: var(--spacing-md);
    }

    .social-section__heading {
        gap: 12px;
        margin-bottom: var(--spacing-lg);
    }

    .social-section__title {
        font-size: 26px;
        line-height: 30px;
    }

    .social-section__desc {
        font-size: var(--font-size-base);
        line-height: 20px;
    }

    .social-section__video {
        margin-bottom: var(--spacing-md);
        padding: 12px 0;
    }

    .social-section__social {
        align-items: center;
    }

    .social-section__links {
        justify-content: center;
    }

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

}