/* =========================================================
   ioann-presnya footer — BEM stylesheet
   Depends on base.css tokens: --ip-font-body, --ip-font-title,
   --ip-content-max, --ip-side-padding
   ========================================================= */

/* Footer-scoped colour tokens */
.footer {
    --ip-footer-bg:      #4f4f4f;
    --ip-footer-text:    #bdbdbd;
    --ip-footer-title:   #ffffff;
    --ip-footer-divider: #bdbdbd;
}

/* =========================================================
   ROOT ELEMENT
   ========================================================= */
.footer {
    background: var(--ip-footer-bg);
    color: var(--ip-footer-text);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    padding: 32px var(--ip-side-padding) 60px;
    width: 100%;
}

/* Inner wrapper — constrain to content max-width */
.footer__inner {
    max-width: var(--ip-content-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* =========================================================
   BRAND BLOCK
   ========================================================= */
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    /* 279 = 244 (Figma text-box width) + 35 (optical-centering start padding).
       With box-sizing: border-box the content area stays ~244 px so the site
       name fits on exactly 2 lines as per Figma node 1:236. */
    max-width: 279px;
    padding-inline-start: 35px;
}

.footer__logo-icon {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Bundled black line-art asset is inverted to white on the dark footer,
   matching .header--dark .header__logo-icon. NOT applied to admin-uploaded
   logo_footer images, which are used with their original colours. */
.footer__logo-icon--bundled {
    filter: invert(1);
}

.footer__site-name {
    font: 700 24px/1 var(--ip-font-title);
    color: var(--ip-footer-title);
    text-align: center;
    font-feature-settings: 'lnum', 'pnum';
    max-width: 244px;
    margin: 0;
}

/* =========================================================
   DIVIDER
   ========================================================= */
.footer__divider {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--ip-footer-divider);
    margin: 39px 0;
    opacity: 0.7;
}

/* Diamond end-markers — same 6×6 rotated-square motif as the header divider,
   centered on the 1px line at each far end. */
.footer__divider-gem {
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    background: var(--ip-footer-divider);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}
.footer__divider-gem--left  { left: 0; }
.footer__divider-gem--right { right: 0; }

/* =========================================================
   TWO-COLUMN ROW
   ========================================================= */
.footer__row {
    display: flex;
    gap: 60px;
    justify-content: space-between;
    align-items: flex-start;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.footer__col--contacts {
    width: 440px;
    max-width: 100%;
    padding-inline-start: 35px;
}

.footer__col--legal {
    width: 341px;
    max-width: 100%;
}

/* =========================================================
   CONTACTS COLUMN
   ========================================================= */
.footer__address {
    font: 400 18px/1.3 var(--ip-font-body);
    margin: 0;
    color: var(--ip-footer-text);
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font: 400 18px/1.3 var(--ip-font-body);
}

.footer__phone,
.footer__email {
    margin: 0;
}

.footer__phone a,
.footer__email a {
    color: var(--ip-footer-text);
    text-decoration: none;
    transition: opacity .2s ease;
}

.footer__phone a:hover,
.footer__phone a:focus-visible,
.footer__email a:hover,
.footer__email a:focus-visible {
    opacity: .85;
}

.footer__copyright {
    font: 400 18px/1.3 var(--ip-font-body);
    margin: 0;
    color: var(--ip-footer-text);
}

.footer__copyright a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}

.footer__copyright a:hover,
.footer__copyright a:focus-visible {
    opacity: .8;
}

/* =========================================================
   LEGAL LINKS COLUMN
   ========================================================= */
.footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__legal-item {
    display: block;
}

.footer__legal-link {
    display: inline-block;
    font: 400 18px/1.3 var(--ip-font-body);
    color: var(--ip-footer-text);
    text-decoration: none;
    transition: opacity .2s ease;
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
    opacity: .8;
}

.footer__legal-link:focus-visible {
    outline: 2px solid var(--ip-footer-text);
    outline-offset: 2px;
}

/* Plain-text fallback (no URL) */
.footer__legal-link--text {
    cursor: default;
}

.footer__legal-link--text:hover {
    opacity: 1;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */
.footer__socials {
    display: inline-flex;
    gap: 10px;
}

.footer__social {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ip-footer-text);
    transition: opacity .2s ease;
    text-decoration: none;
}

.footer__social:hover,
.footer__social:focus-visible {
    opacity: .8;
}

.footer__social:focus-visible {
    outline: 2px solid var(--ip-footer-text);
    outline-offset: 2px;
}

.footer__social svg {
    width: 30px;
    height: 30px;
}

/* Brand-colour stubs (reserved for future overrides) */
.footer__social--vk {}
.footer__social--telegram {}
.footer__social--youtube {}
.footer__social--max {}

/* =========================================================
   RESPONSIVE — single column below 1200px
   ========================================================= */
@media (max-width: 1199.99px) {
    .footer__brand {
        padding-inline-start: 0;
        align-items: flex-start;
    }

    .footer__row {
        flex-direction: column;
        gap: 28px;
    }

    .footer__col--contacts,
    .footer__col--legal {
        width: 100%;
        padding-inline-start: 0;
    }
}

/* =========================================================
   MOBILE — compact single column at <=767.99px
   ========================================================= */
@media (max-width: 767.99px) {
    .footer {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    .footer__divider {
        margin: 24px 0;
    }

    /* Logo + site name in one row (side by side) instead of stacked */
    .footer__brand {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        max-width: none;
    }

    .footer__logo-icon {
        width: 64px;
        height: 64px;
    }

    .footer__site-name {
        font-size: 20px;
        text-align: left;
    }

    /* Allow social icons to wrap onto a second line on narrow screens */
    .footer__socials {
        flex-wrap: wrap;
    }
}