/* Всплывающее окно студии на карте (/studios/).

   Разметку окна собирает шаблон компонента news.list/studios_new; она
   переиспользует классы карточки списка .installer-block__*, а те написаны
   под тёмный фон страницы. Подложку окна рисует сам Яндекс, и она светлая,
   поэтому цвета здесь задаются заново — без этого адрес, режим работы и
   телефон выводятся белым по белому.

   Второе, что задаётся здесь, — размеры. Карта высотой 350 px
   (.map-block в components.css), и у неё overflow: hidden; окно выше карты
   обрезается по её нижней границе. Ограничение ширины окна и высоты снимка
   удерживает его внутри.

   Файл подключается в init.php на разделе студий. */

/* Потолок высоты вместе с прокруткой внутри: режим работы студия заполняет
   сама и свободным текстом. На боевых данных он занимает не больше двух строк,
   но расписание по каждому дню недели отдельной строкой снова вынесло бы окно
   за нижнюю границу карты — молча, как было до этой правки. */
.map-popover {
    max-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px;
    color: var(--color-black);
}

/* В свойстве студии лежит логотип, а не фотография, и нарисован он под тёмный
   фон страницы: на светлой подложке окна белые логотипы исчезают целиком.
   Отсюда тёмная плашка под снимком.

   Вписываем целиком (contain), а не заполняем плашку: логотип с обрезанным
   краем читается как испорченный. Высота меньше, чем в карточке списка, —
   окно должно уместиться в карту по высоте. */
.map-popover__img-wrapper {
    margin-bottom: 10px;
    padding: 6px;
    background: var(--color-dark);
    border-radius: var(--radius-sm);
}
.map-popover__img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: contain;
    object-position: center;
}

.map-popover .installer-block__name {
    font-size: 15px;
    line-height: 1.27;
    margin-bottom: 8px;
    color: var(--color-black);
}

/* Контакты в карточке списка полупрозрачно-белые; на светлой подложке окна
   нужен тёмный тон. Иконки слева от строк остаются серыми — они читаются на
   белом и без правки. */
.map-popover .installer-block__contact {
    color: #4A4A4A;
}

.map-popover .installer-block__more-wrapper {
    margin-top: 12px;
}

/* Подложку окна Яндекс отдаёт с собственным внутренним отступом, из-за
   которого окно шире содержимого. Селектор по вхождению, а не по полному
   имени класса: в нём зашит номер версии API (ymaps-2-1-79-…), и при её смене
   правило перестало бы применяться молча. */
[class*="balloon__content"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Панельный макет: на узком экране с касаниями Яндекс показывает окно не
   пузырём над меткой, а панелью внизу карты.
 *
 * Высоту панели задаёт он сам от высоты карты — при карте 350 px это 155 px,
 * и прокручивает содержимое тоже он, своей полосой, которую не видно.
 * Замер: содержимое 251 px, из них 84 занимает логотип. То есть больше
 * половины видимого отдано картинке, а адрес обрывается на полуслове.
 *
 * Логотип здесь прячем: имя, адрес и телефон нужнее. Свои ограничения высоты
 * снимаем — сейчас они не срабатывают (содержимое до 300 px не достаёт), но у
 * студии с несколькими телефонами дали бы вторую прокрутку внутри первой.
 *
 * Селекторы по вхождению: в полном имени класса зашит номер версии API. */
[class*="balloon_layout_panel"] .map-popover {
    max-height: none;
    overflow-y: visible;
    padding: 10px 12px;
}
[class*="balloon_layout_panel"] .map-popover__img-wrapper {
    display: none;
}
[class*="balloon_layout_panel"] .map-popover .installer-block__name {
    margin-bottom: 6px;
}
[class*="balloon_layout_panel"] .map-popover .installer-block__more-wrapper {
    margin-top: 8px;
}

/* Высота карты на телефоне.
 *
 * Панель, в которой Яндекс показывает окно студии, занимает около 44 % высоты
 * карты и своей высотой не управляется: при карте 350 px это 155 px. Замер на
 * боевых данных: содержимое окна не менее чем у 8 студий из 71 выше — до
 * 186 px у студии с длинным именем, — и у неё за край уходит ссылка
 * «Подробнее», единственный выход на карточку.
 *
 * Ужимать содержимое дальше некуда: логотип здесь уже скрыт, а обрезать имя
 * или график многоточием значит прятать то, ради чего окно и открывают.
 * Поэтому растёт карта.
 *
 * Правило живёт в этом файле, а не в components.css, потому что файл
 * подключается только на разделе студий: карта контактов в карточке студии
 * пользуется тем же классом, и её высота остаётся прежней.
 *
 * Порядок mobile-first: база для телефона, десктоп возвращает исходные 350 px,
 * где окно рисуется обычным пузырём и в высоту карты не упирается. */
.map-block {
    height: 400px;
}

@media screen and (min-width: 768px) {
    .map-block {
        height: 350px;
    }
}