/*
 * Theme — Footer
 *
 * Секція «09 · Футер» з макета. Чотири колонки фіксованої ширини
 * (400 / 190 / 260 / 360 = 1210 з 1280 контейнера), решта простору —
 * природний gap flex-розкладки space-between, без підбору чисел.
 */

/* Орнамент листя — фон, не контент, тому CSS, а не <img>. На всю ширину
   екрана, не контейнера: у макеті вузол займає весь футер (1920px) з
   лівим краєм у x=0, а .footer__inner — це .container, вузький і по
   центру, тому фон живе саме тут, на .footer, а не на ньому. */
.footer {
    position:   relative;
    padding:    88px 0 56px;
    background: var(--footer-bg) url("../../img/leaf-pattern.svg") top left / 1920px auto no-repeat;
    color:      var(--text-secondary);
    /* Притискає футер до низу на коротких сторінках — узгоджено з
       .site { display:flex; flex-direction:column; min-height:100vh } */
    margin-top: auto;
}

/* Золота волосяна лінія — на всю ширину екрана, не контейнера */
.footer::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: var(--gold-line);
}

.footer__inner {
    position: relative;
    z-index:  1;
}

.footer__columns {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    row-gap:         44px;
}

.footer__col { min-width: 0; }
.footer__col--brand { width: 400px; }

/* ── Бренд ──────────────────────────────────────────────────────────────── */
.footer__col--brand {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            28px;
}
.footer__logo { display: block; line-height: 0; }
.footer__logo-img { display: block; width: auto; height: 56px; }
.footer__tagline {
    margin:         0;
    max-width:      400px;
    color:          var(--footer-color);
    font-size:      14px;
    line-height:    22px;
    letter-spacing: .28px;
}

.footer-socials {
    display:    flex;
    align-items: center;
    gap:        12px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.footer-socials__link {
    display:         grid;
    place-items:     center;
    width:           44px;
    height:          44px;
    color:           var(--gold-text);
    border:          1px solid var(--gold-line);
    border-radius:   var(--radius-pill);
    transition:      color var(--transition), background-color var(--transition), border-color var(--transition);
}
.footer-socials__link:hover {
    color:            var(--on-solid);
    background-color: var(--gold-solid);
    border-color:     var(--gold-solid);
}

.footer-developer {
    padding-top: 12px;
}
.footer-developer__label {
    margin:         0 0 14px;
    color:          var(--footer-color);
    font-size:      12px;
    font-weight:    500;
    line-height:    16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
/* Логотип приглушений, бо це не наш бренд, а підпис — на ховері
   доводимо до повної яскравості, як і решту посилань футера. */
.footer-developer__logo {
    display:    block;
    width:      107px;
    height:     auto;
    opacity:    .75;
    transition: opacity var(--transition);
}
/* Зона натискання доростає до 44px невидимим ::after: сам логотип за
   макетом 107×22, і збільшувати його не можна — 11px згори й знизу дають
   рівно 44. Прийом той самий, що на малих цілях решти сторінок (іконки
   соцмереж такого не потребують — вони й так 44×44). */
.footer-developer__link {
    position:      relative;
    display:       inline-block;
    border-radius: var(--radius);
}
.footer-developer__link::after {
    content:  "";
    position: absolute;
    inset:    -11px -8px;
}
.footer-developer__link:hover .footer-developer__logo,
.footer-developer__link:focus-visible .footer-developer__logo { opacity: 1; }

/* ── Спільні заголовки колонок і посилання ─────────────────────────────── */
.footer-nav__title,
.footer-contacts__title,
.footer-office__title {
    margin:         0 0 16px;
    color:          var(--gold-text);
    font-size:      12px;
    font-weight:    800;
    line-height:    16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.footer-link {
    position:        relative;
    display:         inline-block;
    color:           var(--text-secondary);
    font-size:       16px;
    line-height:     26px;
    text-decoration: none;
    transition:      color .2s ease-out;
}
/* Волосяна лінія розкривається зліва — на відміну від пунктів шапки,
   де вона йде від центру: так задано в макеті для посилань футера. */
.footer-link::after {
    content:          "";
    position:         absolute;
    left:             0;
    right:            0;
    bottom:           2px;
    height:           1px;
    background:       var(--gold-solid);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform .2s ease-out;
}
.footer-link:hover {
    color: var(--gold-text);
}
.footer-link:hover::after { transform: scaleX(1); }

/* Розмір S — рядок унизу (правова інформація) */
.footer-link--s {
    color:       var(--footer-color);
    font-size:   12px;
    line-height: 18px;
}

/* ── Меню ───────────────────────────────────────────────────────────────── */
.footer-nav { width: 190px; }
.footer-nav__list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

/* ── Контакти ───────────────────────────────────────────────────────────── */
.footer-contacts {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    width:          260px;
}
/* Меню під телефоном і поштою ( локація footer_contacts ). Той самий вигляд,
   що в .footer-nav__list: колонка посилань із кроком 10px; відступ від
   пошти дає gap колонки. */
.footer-contacts__list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
.footer-link--phone {
    color:       var(--gold-text);
    font-size:   20px;
    font-weight: 500;
    line-height: 26px;
}
.footer-link--phone:hover { color: var(--gold-1); }

/* ── Відділ продажу ─────────────────────────────────────────────────────── */
.footer-office {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    width:          360px;
}
.footer-office__address,
.footer-office__hours {
    margin:      0;
    font-style:  normal;
    font-size:   15px;
    line-height: 22px;
}
.footer-office__address { color: var(--text-secondary); }
.footer-office__hours   { color: var(--footer-color); }

/* Одне посилання: картинка й підпис разом — окремий link-arrow поруч
   дублював би цю саму ціль другим посиланням з тим самим текстом. */
.footer-map {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:              16px;
    width:           100%;
    text-decoration: none;
}
.footer-map__img {
    display:       block;
    width:         100%;
    height:        150px;
    object-fit:    cover;
    background:    var(--bg-elevated);
    border:        1px solid var(--gold-line);
}

/* ── Низ ────────────────────────────────────────────────────────────────── */
.footer__bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    flex-wrap:       wrap;
    margin-top:      72px;
    padding-top:     28px;
    border-top:      1px solid var(--gold-line);
}
.footer__copyright {
    margin:      0;
    color:       var(--footer-color);
    font-size:   12px;
    line-height: 18px;
}
.footer-legal__list {
    display:    flex;
    gap:        28px;
    margin:     0;
    padding:    0;
    list-style: none;
}

@media (max-width: 1140px) {
    /* На десктопі патерн підігнаний під ширину макета 1920px — нижче
       цього порогу він просто обрізався зліва (position: top left),
       і лінії ставали дрібними відносно секції. Розтягуємо по висоті
       ( auto 100% ): висота патерну завжди дорівнює висоті самого
       футера, а ширина йде за пропорціями джерела — на планшеті (в два
       рядки, ~900px) лінії помірно просторніші, на телефоні (один
       стовпчик, ~1400px+) розтягуються ще більше — без окремого числа
       на кожен брейкпоінт, розмір сам іде за фактичною висотою секції. */
    .footer { background-size: auto 100%; }

    .footer__columns { row-gap: 36px; }
    .footer__col--brand,
    .footer-nav,
    .footer-contacts,
    .footer-office { width: calc(50% - 20px); }

    /* У два рядки по двоє колонок пари за замовчуванням ідуть за DOM-
       порядком (Бренд+Меню / Контакти+Відділ продажу) — і другий рядок
       виходить дуже нерівним: Контакти лише 116px, Відділ продажу з
       мінікартою — 376px, зайвих 260px порожнечі під коротшою колонкою.
       Переставляємо пари за висотою контенту: Бренд(≈292)+Відділ
       продажу(≈376) в один рядок, Меню(≈238)+Контакти(≈116) в другий —
       найбільший розрив падає з 260px до ≈120px. */
    .footer__col--brand  { order: 1; }
    .footer-office        { order: 2; }
    .footer-nav            { order: 3; }
    .footer-contacts        { order: 4; }
}

@media (max-width: 640px) {
    /* Один стовпчик замість пар з попереднього брейкпоінта — DOM-порядок
       уже не грає ролі, тож розставляємо колонки за сенсом читання:
       бренд → меню → контакти → відділ продажу з мапою. Останній свідомо
       внизу: це найважча, найдетальніша картка ( адреса + графік +
       мінікарта + посилання ), логічне місце для неї — перед підвалом,
       а не одразу після бренду, куди її поставив --order з брейкпоінта
       ≤1140px ( там пара з Брендом балансувала висоту рядка ). */
    .footer__col--brand  { order: 1; }
    .footer-nav            { order: 2; }
    .footer-contacts         { order: 3; }
    .footer-office            { order: 4; }

    .footer { padding: 56px 0 32px; }
    .footer__col--brand,
    .footer-nav,
    .footer-contacts,
    .footer-office { width: 100%; }
    .footer__bottom {
        flex-direction: column;
        align-items:    flex-start;
        gap:            14px;
        margin-top:     44px;
    }

    /* Тач-ціль пунктів меню: рядок тексту 26px замалий для пальця.
       Додаємо padding і настільки ж зменшуємо gap списку — сумарний
       ритм між пунктами лишається майже тим самим (36px → 34px),
       а власна зона дотику кожного посилання зростає до 44px. */
    .footer-nav__list,
    .footer-contacts__list { gap: 2px; }
    .footer-link       { padding: 9px 0; }
}

/* Місце під плаваючу кнопку запису ( .mcta, main.css ) — вона фіксована, і
   на самому низу сторінки накривала б останній рядок футера.

   Блок стоїть у кінці файлу навмисно: вище є і @media (max-width: 1140px),
   і @media (max-width: 640px) зі скороченим `padding`, який перебив би
   самий лише padding-bottom незалежно від порядку брейкпоінтів. І сам
   файл має йти після main.css — footer.css підключається пізніше, тому
   поруч зі стилями .mcta це правило теж не спрацювало б. */
@media (max-width: 768px) {
    /* 150, а не висота самої кнопки: над нею ще лежить скрим ( .mcta::before,
       164px разом з блоком ), і на 104px у нього потрапляв останній рядок —
       посилання «Політика конфіденційності» помітно гасло. */
    .footer { padding-bottom: 150px; }
}