/*
 * Вёрстка, которая ломается от длины текста.
 *
 * Все правила здесь появились по одной причине: перевод длиннее английского.
 * «Email» превращается в «Correo electrónico», «Free» в «Бесплатно», «Sign in» в
 * «Iniciar sesión» — и вёрстка, собранная по английской строке, расходится.
 *
 * Файл лежит отдельно от собранного бандла намеренно: исходники Vite на этом
 * сервере отсутствуют, пересобрать бандл здесь нельзя. Все правила привязаны к
 * существующим классам и не заводят новых, поэтому при следующей настоящей
 * сборке их можно перенести в SCSS без изменений.
 *
 * Общий принцип во всех правилах ниже один: не подгонять размер под конкретный
 * язык, а разрешить блоку сжиматься и переносить текст. Тогда следующий язык не
 * потребует новой правки.
 */

/* ------------------------------------------------------------------
   Окно «Поделиться»
   ------------------------------------------------------------------
   Четыре колонки заданы как 1fr, а у 1fr наименьшая ширина равна ширине
   содержимого. Длинное неразрывное слово («electrónico», «Копировать»)
   растягивало свою колонку, сетка становилась шире окна, и последний столбец —
   иконка X и «Копировать ссылку» — выезжал за границу и обрезался.

   minmax(0, 1fr) снимает этот минимум: колонка получает ровно четверть ширины, а
   подпись переносится внутри неё. */

.dd-share-pop__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dd-share-item {
    min-width: 0;
}

.dd-share-item__label {
    display: block;
    max-width: 100%;
    /* Слово длиннее колонки переносится по слогам, а не выходит за край. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ------------------------------------------------------------------
   Нижнее меню на телефоне
   ------------------------------------------------------------------
   Пять равных ячеек по flex: 1. Английские подписи короткие, поэтому проблема не
   проявлялась. Испанское «Iniciar sesión» — два слова, они переносились на
   вторую строку и вылезали из полосы вниз.

   Ячейке разрешено сжиматься (min-width: 0), подпись остаётся в одну строку и при
   нехватке места укорачивается многоточием. Заодно у нижнего меню теперь своя
   короткая подпись входа — см. ключ nav_login_short. */

.mbn-item {
    min-width: 0;
}

.mbn-item > span:not(.mbn-cart-wrap) {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* На узких телефонах подпись уменьшается, вместо того чтобы обрезаться. */
@media (max-width: 380px) {
    .mbn-item {
        font-size: 10px;
    }
}

/* ------------------------------------------------------------------
   Логотип в подвале
   ------------------------------------------------------------------
   Внутри ссылки лежат картинка и текст «Daddy Dread» как строчные элементы.
   Места на одну строку не хватало, строка переносилась — и картинка
   выравнивалась по левому краю ссылки, а текст под ней был шире. Отсюда
   ощущение сбитого центра.

   Столбец с выравниванием по центру убирает зависимость от переноса. */

.footer-logo a.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* ------------------------------------------------------------------
   Счётчик отзывов на карточке товара
   ------------------------------------------------------------------
   «(3 opiniones)» и «(3 отзыва)» шире английского «(3 reviews)», и строка со
   звёздами, счётчиком и кнопками переставала помещаться: счётчик переносился на
   вторую строку и разрывал блок.

   Счётчик остаётся неразрывным, а переносится вся строка целиком — тогда
   звёзды и счётчик всегда рядом. */

.wc-product__reviews-link {
    white-space: nowrap;
    flex: 0 0 auto;
}

.wc-product__reviews-count {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Закреплённая панель курса
   ------------------------------------------------------------------
   Кнопка объявлена как flex-grow: 1, то есть забирает всё свободное место. Блоку
   с названием и ценой оставалось столько, сколько кнопка не взяла. Английское
   «$99.00» в эти остатки помещалось, а «Бесплатно» — нет: слово выходило за свои
   границы, а кнопка, идущая следующей в разметке, рисовалась поверх и срезала
   его по букве.

   Поэтому дело не в цене, а в кнопке: ей запрещено расти. Свою ширину она
   держит содержимым и внутренними отступами, а остаток достаётся названию с
   ценой. Слово видно целиком на любом языке — убирать его не нужно. */

.course-sticky-bar .course-cta-btn,
.course-sticky-bar .js-course-add-to-cart {
    flex: 0 1 auto;
}

.course-sticky-bar__info {
    /* Название и цена забирают остаток строки. */
    flex: 1 1 auto;
    min-width: 0;
}

.course-sticky-bar__price {
    /* Цена не сжимается и не переносится: это короткая строка, которую
       посетитель должен прочитать целиком. */
    flex: 0 0 auto;
    white-space: nowrap;
}

.course-sticky-bar__title {
    max-width: 100%;
}

/*
 * «Бесплатно» в панели — того же размера, что и цена.
 *
 * Метка бесплатного курса объявлена 28 пикселями: на самой странице это крупная
 * цифра вместо цены, и там это уместно. Но в закреплённой панели шириной 460
 * пикселей девять букв по 28 пикселей не помещаются рядом с кнопкой «Смотреть
 * бесплатно →» — слово выходило за свой блок, и кнопка рисовалась поверх.
 *
 * Платная цена в этой же панели набрана 16 пикселями и помещается всегда.
 * Значит и метке здесь нужен тот же размер: тогда слово влезет на любом языке,
 * а не только там, где оно короткое, как английское Free.
 */
.course-sticky-bar .course-price--free {
    font-size: 16px;
    line-height: 1.2;
}