/* app/static/css/mobile.css

   Адаптация под телефоны. Подключается в base.html ПОСЛЕДНИМ, чтобы
   перекрывать десктопные стили страниц. Брейкпоинт 700px совпадает с уже
   используемым в tv_guide.css (там от 700px включаются 2 колонки). */

@media (max-width: 699px) {

    /* ---------- Хедер: компактнее, чтобы всё влезало в одну строку ---------- */

    .header {
        padding: 0 10px;
    }

    .right-menu a {
        padding: 6px 10px;
    }

    .menu-item {
        padding: 6px 8px;
    }

    .user-profile {
        padding: 6px 8px;
    }

    .user-profile .username {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Поля ввода: 16px, иначе iOS Safari зумит страницу при фокусе ---------- */

    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"] {
        font-size: 16px;
    }

    /* ---------- Строка поиска: поле и кнопка друг под другом ---------- */

    .search-row {
        flex-direction: column;
    }

    .search-row input {
        flex: 0 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .search-row button {
        width: 100%;
        box-sizing: border-box;
    }

    /* ---------- Телепрограмма: крупнее зона нажатия на строке передачи ---------- */

    .guide-programme {
        padding: 8px 0;
    }

    /* ---------- Выдача поиска: двухстрочная строка вместо 7 колонок ---------- */
    /* Верхняя строка — название, нижняя — канал, день, дата, время, длительность */

    .tv-row {
        height: auto;
        padding: 6px 0;
        gap: 2px 6px;
        align-items: center;

        grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto;
        grid-template-areas:
            "index title   title   title title    title"
            "index channel weekday date  time     duration";
    }

    .tv-row .col-index {
        grid-area: index;
        align-self: start;
    }

    .tv-row .col-title {
        grid-area: title;
        font-weight: 600;
    }

    .tv-row .col-channel {
        grid-area: channel;
        padding-right: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tv-row .col-weekday {
        grid-area: weekday;
    }

    .tv-row .col-date {
        grid-area: date;
    }

    .tv-row .col-time {
        grid-area: time;
    }

    .tv-row .col-duration {
        grid-area: duration;
    }

    .tv-row .col-channel,
    .tv-row .col-weekday,
    .tv-row .col-date,
    .tv-row .col-time,
    .tv-row .col-duration {
        font-size: 13px;
    }
}