/* ── Контакти ───────────────────────────────────────────────────────────────
   Поверх базового css/pages/page.css. Композиція як на проді: карта ліворуч,
   контактні дані праворуч. Тут лише те, чого немає в базі.                  */

/* Карта ширша за типову ліву колонку (на проді ~630px від 1280px). */
.content-page__content .media-row__side {
    flex-basis: 50%;
}
/* Пропорція, за якої карта лишається читабельною й не тягне сторінку вгору. */
.content-page__content .media-row__figure iframe {
    aspect-ratio: 4 / 3;
}

/* ── Соцмережі ──────────────────────────────────────────────────────────────
   Іконки беруться зі спрайта теми (<use href="#icon-…">), а не вставляються
   інлайновим SVG: інлайнові в контенті були без width/height і розтягувались
   на всю ширину контейнера — по 1300px заввишки кожна.
   44×44 — мінімальний зручний тач-таргет, іконка всередині менша.          */
/* Селектори з `.content-page__content` попереду обов'язкові: базові правила
   списків (`ul { list-style: disc }`, `li { display: list-item }`) важать
   більше за самі `.socials*` — інакше між іконками проступають маркери. */
.content-page__content .socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.content-page__content .socials__item {
    display: block;
    margin: 0;
}
.socials__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text);
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    transition: opacity var(--transition);
}
.socials__link:hover,
.socials__link:focus-visible {
    opacity: .6;
}
.socials__icon {
    width: 22px;
    height: 22px;
}

@media (max-width: 768px) {
    /* Коли колонки стають одна під одною, карта на всю ширину контейнера
       за пропорцією 4/3 виростає до ~546px на планшеті — телефон і графік
       тоді нижче першого екрана. Стеля висоти лишає карту читабельною і
       піднімає контакти нагору; ширину вона зберігає повну. */
    .content-page__content .media-row__figure iframe {
        max-height: 320px;
    }
    .content-page__content .socials {
        margin-top: 16px;
    }
}

/* ── Адреса й маршрут ───────────────────────────────────────────────────────
   <address> у більшості браузерів курсивний за замовчуванням — гасимо, щоб
   він не випадав із решти значень у блоці фактів. */
.contacts__address {
    font-style: normal;
}
/* Другорядне посилання під адресою: менше й приглушене, щоб не важило
   стільки ж, скільки сама адреса. */
.content-page__content .contacts__route {
    display: inline-block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-muted);
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    .content-page__content .contacts__route { font-size: 16px; }
}