/* ============================================================
   КАТАЛОГ РЕПЕТИТОРОВ — карточка анкеты и обвязка страницы
   theme/dist-tutor/css/page_facet/card.css

   Разметка прежняя (theme/dist-tutor/tpl/page/facet/user.tpl):
   три колонки .pic / .summary / .available_kit, доставшиеся от вёрстки
   на float. Здесь они распускаются через display:contents, а содержимое
   выстраивается одной колонкой: фото и кнопка вынесены из потока
   (position:absolute), поэтому у всего текста один левый край и между
   блоками нет провалов.

   Почему пришлось переделывать:
   - до 1020px старый responsive.css прятал .available_kit — в карточке
     не оставалось ни одной кнопки связи;
   - в полосе 1000–1200px колонка текста ужималась до ~150px,
     и карточка вытягивалась на 2790px;
   - имя стояло по центру над прижатым влево фото, справа — пустота;
   - текст был выключен по ширине (justify) — «реки» пробелов;
   - превью документа обрезалось до половины миниатюры;
   - кегли скакали от 12 до 18,4px.

   Шкала кегля: 21/700 — имя, 15 — «о себе» и ссылки-действия,
   14,5 — вторичный текст, 13 — мелочь, 11/700 капсом — подписи разделов.

   Ловушки портала (CLAUDE.md): 1rem = 10px, body — флекс, у старых
   правил встречаются id-селекторы (#page_wrap) и глобальное
   * { margin: 0 auto }. Отсюда префикс #page_wrap и точечные !important.
   ============================================================ */

/* ---------- 0. Сброс наследия ---------- */

#page_wrap .ctlg_object .info > .pic,
#page_wrap .ctlg_object .info > .summary,
#page_wrap .ctlg_object .info > .available_kit {
    display: contents !important;
}

/* Дубли и мусор: второе имя (для мобильных), пустой блок мессенджеров,
   таблица опыта, обрезанное превью документов внутри .pic, кнопки
   сравнения, зелёная кнопка в подвале карточки (призыв должен быть один),
   колонка обратной связи, клирфиксы. */
#page_wrap .ctlg_object .fio-mobile,
#page_wrap .ctlg_object .btn-ws,
#page_wrap .ctlg_object .summary-field.experience,
#page_wrap .ctlg_object .pic .album-photo-user,
#page_wrap .ctlg_object .pic .buttons,
#page_wrap .ctlg_object .block-footer,
#page_wrap .ctlg_object .available_kit > div:not(.dt-card-aside),
#page_wrap .ctlg_object > .header,
#page_wrap .ctlg_object .clearer,
#page_wrap .ctlg_object .university .clear {
    display: none !important;
}

/* Имя, предметы, рейтинг и специализацию старый CSS прятал на узких
   экранах — показываем на всех. */
#page_wrap .ctlg_object .fio-pk,
#page_wrap .ctlg_object .summary-field.subjects,
#page_wrap .ctlg_object .rating,
#page_wrap .ctlg_object .summary-field.speciality,
#page_wrap .ctlg_object .summary .album-photo {
    display: block !important;
}

/* Выключка по ширине давала «реки» пробелов; всё по левому краю.
   text-align:center у .available_kit прописан в шаблоне инлайном. */
#page_wrap .ctlg_object,
#page_wrap .ctlg_object p,
#page_wrap .ctlg_object .summary-field,
#page_wrap .ctlg_object .summary-field .val,
#page_wrap .ctlg_object .text-review,
#page_wrap .ctlg_object .dt-card-aside,
#page_wrap .ctlg_object .dt-card-aside * {
    text-align: left !important;
}

#page_wrap .ctlg_object.teacher_profile_mini {
    overflow: visible;
    padding: 24px 26px;
}

/* ---------- 1. Раскладка ----------
   Одна колонка контента. Фото — в левом отступе, кнопка на широких
   экранах — в правом: оба вынуты из потока, поэтому не растягивают
   строки и не сдвигают текст. */

#page_wrap .ctlg_object .info {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-left: 156px;      /* место под фото */
    min-height: 186px;        /* карточка не ниже фотографии */
}

#page_wrap .ctlg_object .user-ava {
    position: absolute;
    left: 0;
    top: 0;
    width: 132px !important;
    margin: 0;
}

/* Порядок блоков: имя → «последний вход» → цена и кнопка → скидка →
   документы → тексты → цены. Без явного order блок «последний вход»
   (он есть только у вошедших) вставал первым, над именем. */
#page_wrap .ctlg_object .summary > .summary-field { order: 10; }
#page_wrap .ctlg_object .summary-field.name       { order: 1; }
#page_wrap .ctlg_object .lastaccess               { order: 2; }
#page_wrap .ctlg_object .dt-card-aside            { order: 3; }
#page_wrap .ctlg_object .summary-field.dt-offer   { order: 4; }
#page_wrap .ctlg_object .summary .album-photo     { order: 5; }
#page_wrap .ctlg_object .summary-field.about      { order: 6; }
#page_wrap .ctlg_object .summary-field.education  { order: 7; }
#page_wrap .ctlg_object .summary-field.speciality { order: 8; }
#page_wrap .ctlg_object .summary-field.reviews    { order: 9; }

/* «Последний вход»: в шаблоне это две строки по центру */
#page_wrap .ctlg_object .lastaccess {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 5px;
    margin: -6px 0 0 !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dt-dim);
    text-align: left !important;
}
#page_wrap .ctlg_object .lastaccess br { display: none; }

#page_wrap .ctlg_object .summary-field,
#page_wrap .ctlg_object .summary .album-photo {
    width: auto !important;
    margin: 0 !important;
}

/* В старом CSS есть глобальное * { margin: 0 auto }: любой блок, который
   уже своего контейнера, оно ставит по центру — так второй вуз в
   «Образовании» уезжал вправо. Гасим по всей карточке. */
#page_wrap .ctlg_object .summary-field *,
#page_wrap .ctlg_object .album-photo *,
#page_wrap .ctlg_object .dt-card-aside,
#page_wrap .ctlg_object .dt-card-aside *,
#page_wrap .ctlg_object .lastaccess {
    margin-left: 0;
    margin-right: 0;
}

/* ---------- 2. Шапка ---------- */

#page_wrap .ctlg_object .user-photo,
#page_wrap .ctlg_object .user-photo img,
#page_wrap .ctlg_object .user-ava img {
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    border-radius: 16px;
}
#page_wrap .ctlg_object .user-photo img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

#page_wrap .ctlg_object a.fio,
#page_wrap .ctlg_object a.fio h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dt-ink) !important;
}
/* значок проверенного преподавателя рядом с именем */
#page_wrap .ctlg_object .dt-verified {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-left: 6px;
    vertical-align: -3px;
    color: var(--dt-accent, #2563eb);
}
#page_wrap .ctlg_object .dt-verified svg { display: block; }

#page_wrap .ctlg_object .summary-field.name h2 {
    margin: 0 !important;
    padding: 0;
    text-align: left !important;
}
#page_wrap .ctlg_object .summary-field.subjects {
    margin: 4px 0 0 !important;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--dt-muted);
}
#page_wrap .ctlg_object .summary-field.subjects a { color: var(--dt-muted); text-decoration: none; }
#page_wrap .ctlg_object .summary-field.subjects a:hover { color: var(--dt-accent); text-decoration: underline; }

/* рейтинг — под фотографией, без подписи-иконки */
#page_wrap .ctlg_object .rating {
    margin: 10px 0 0 !important;
    text-align: left !important;
}
#page_wrap .ctlg_object .rating .lbl { display: block; }
#page_wrap .ctlg_object .rating .f-icon-rating { display: none; }
#page_wrap .ctlg_object .rating .stars { margin: 0 !important; }

/* ---------- 3. Скидки ----------
   Список карточек: значок-ценник, крупная величина скидки (100% — просто
   «Бесплатно») и условие под ней. Раньше это была плашка-ценник с
   «хвостом», налезавшая на рамку. */

#page_wrap .ctlg_object .dt-offer .dt-offer-promos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#page_wrap .ctlg_object .dt-offer .dt-promo {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 2px 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    border: 1px solid rgba(37, 99, 235, .3);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .06);
}
#page_wrap .ctlg_object .dt-offer .dt-promo::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M10.6 1.8H4.6c-1.5 0-2.8 1.3-2.8 2.8v6c0 .7.3 1.4.8 1.9l6.3 6.3c1.1 1.1 2.8 1.1 3.9 0l5.3-5.3c1.1-1.1 1.1-2.8 0-3.9l-6.3-6.3c-.5-.5-1.2-.8-1.9-.8zM6.3 7.6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page_wrap .ctlg_object .dt-offer .dt-promo-value {
    grid-column: 2;
    grid-row: 1;
    position: static;
    display: block;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--dt-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: normal;
    -webkit-clip-path: none;
    clip-path: none;
}
#page_wrap .ctlg_object .dt-offer .dt-promo-value::after { display: none; }
#page_wrap .ctlg_object .dt-offer .dt-promo-text {
    grid-column: 2;
    grid-row: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--dt-text);
}

/* ---------- 4. Документы ----------
   Лента миниатюр в один ряд с горизонтальной прокруткой; раньше первая
   обрезалась по ширине колонки, а остальные уходили во второй ряд.
   Высота 96px — с 56px дипломы не читались. */

#page_wrap .ctlg_object .summary .album-photo { overflow: visible; }
#page_wrap .ctlg_object .album-photo .carousel-inner,
#page_wrap .ctlg_object .album-photo .album { overflow: visible; }
#page_wrap .ctlg_object .album-photo .album_line {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: auto !important;
    height: auto !important;      /* в styles.css жёсткие 55px + overflow:hidden */
    margin: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#page_wrap .ctlg_object .album-photo .album_line::-webkit-scrollbar { display: none; }
#page_wrap .ctlg_object .album-photo .album_line a {
    display: block;
    flex: none;
    width: auto !important;
    height: 96px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    background: #f8fafc;
}
#page_wrap .ctlg_object .album-photo img {
    width: auto !important;
    max-width: 150px !important;
    height: 96px !important;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
#page_wrap .ctlg_object .album-photo .carousel-control { display: none; }
#page_wrap .ctlg_object .album-photo .album_line a:nth-child(n+6) { display: none; }

/* ---------- 5. Тексты ---------- */

#page_wrap .ctlg_object .title-education,
#page_wrap .ctlg_object .title-specialization,
#page_wrap .ctlg_object .title-review {
    margin: 0 0 6px !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--dt-dim);
}

/* ссылки-действия: «Смотреть подробнее…», «Все отзывы (N)» */
#page_wrap .ctlg_object .summary a.btn-link,
#page_wrap .ctlg_object .dt-more-link { font-size: 15px; }

/* «О себе» — три строки, дальше «Смотреть подробнее…» */
#page_wrap .ctlg_object .summary-field.about p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 4px !important;
    font-size: 15px;
    line-height: 1.55;
    color: var(--dt-text);
}
#page_wrap .ctlg_object .summary-field.about p:last-child { margin: 0 !important; }

/* образование — сетка «значок / строка», без float и клирфиксов */
#page_wrap .ctlg_object .summary-field.education .university {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: start;
}
#page_wrap .ctlg_object .summary-field.education .lbl {
    float: none !important;
    margin: 0 !important;
    line-height: 1.5;
    color: var(--dt-dim);
}
#page_wrap .ctlg_object .summary-field.education .universityval {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--dt-text);
}

/* специализация — две строки: список бывает на пол-экрана */
#page_wrap .ctlg_object .summary-field.speciality .val {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--dt-muted);
}

/* ---------- 6. Отзыв ---------- */

#page_wrap .ctlg_object .summary-field.reviews .text-review {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px !important;
    padding: 0 0 0 14px;
    border-left: 3px solid #e2e8f0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--dt-text);
}
#page_wrap .ctlg_object .summary-field.reviews p:last-child { margin: 0 !important; }

/* ---------- 7. Цены ---------- */

#page_wrap .ctlg_object .dt-pricelist td {
    padding: 5px 0;
    font-size: 14.5px;
}

/* ---------- 8. Цена и кнопка ----------
   До 1100px — строкой сразу под именем, тем же левым краем. */

#page_wrap .ctlg_object .dt-card-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 0;
}
#page_wrap .ctlg_object .dt-card-aside__cta {
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    font-size: 14.5px;
    line-height: 1.3;
    white-space: nowrap;
}
#page_wrap .ctlg_object .dt-card-aside__formats {
    order: 1;
    flex: 0 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
#page_wrap .ctlg_object .dt-card-aside__title { display: none; }
#page_wrap .ctlg_object .dt-card-aside__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
#page_wrap .ctlg_object .dt-card-aside__item {
    grid-template-columns: 8px auto auto;
    align-items: baseline;
    gap: 0 8px;
    margin: 0 !important;   /* глобальное * { margin: 0 auto } центрировало строку */
    padding: 0 !important;
    border: 0 !important;
}
#page_wrap .ctlg_object .dt-card-aside__dot { align-self: center; }
#page_wrap .ctlg_object .dt-card-aside__name { font-size: 14.5px; }
#page_wrap .ctlg_object .dt-card-aside__price { grid-column: 3; font-size: 13px; }

/* ---------- 8.1. Средние экраны ----------
   Кнопка — в правом верхнем углу карточки, а не в строке с ценой:
   в потоке она вставала посреди строки и выглядела случайной. */

@media (min-width: 620px) and (max-width: 1099px) {
    /* место под кнопку держит только строка имени: отступ у всей карточки
       сжимал бы и текст, оставляя справа пустую полосу во всю высоту */
    #page_wrap .ctlg_object .summary-field.name { padding-right: 160px; }
    #page_wrap .ctlg_object .dt-card-aside__cta {
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* ---------- 9. Широкие экраны ----------
   Кнопка и формат занятий уходят в правый край карточки. */

@media (min-width: 1100px) {
    #page_wrap .ctlg_object .info { padding-right: 272px; }
    #page_wrap .ctlg_object .dt-card-aside {
        position: absolute;
        top: 0;
        right: 0;
        box-sizing: border-box;
        width: 244px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
        border: 1px solid var(--dt-border);
        border-radius: 16px;
        background: #f8fafc;
    }
    #page_wrap .ctlg_object .dt-card-aside__cta {
        order: 0;
        width: 100% !important;
        padding: 10px 16px !important;
        text-align: center !important;
    }
    #page_wrap .ctlg_object .dt-card-aside__formats { order: 1; flex: none; }
    #page_wrap .ctlg_object .dt-card-aside__title { display: block; font-size: 11px; }
    #page_wrap .ctlg_object .dt-card-aside__list { display: block; }
    #page_wrap .ctlg_object .dt-card-aside__item {
        display: grid;
        grid-template-columns: 8px 1fr;
        gap: 2px 8px;
        padding: 8px 0 !important;
        border-top: 1px solid #e8edf4 !important;
    }
    #page_wrap .ctlg_object .dt-card-aside__item:first-child {
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    #page_wrap .ctlg_object .dt-card-aside__price { grid-column: 2; }
}

/* ---------- 10. Телефоны ----------
   Отступ под фото съел бы половину ширины, поэтому фото стоит только
   рядом с именем, а всё остальное идёт во всю ширину карточки. */

@media (max-width: 620px) {
    #page_wrap .ctlg_object.teacher_profile_mini {
        padding: 16px 16px 18px;
        border-radius: 18px;
    }
    #page_wrap .ctlg_object .info {
        gap: 12px;
        padding-left: 0;
        min-height: 0;
    }
    #page_wrap .ctlg_object .user-ava,
    #page_wrap .ctlg_object .user-photo,
    #page_wrap .ctlg_object .user-photo img,
    #page_wrap .ctlg_object .user-ava img {
        width: 92px !important;
        max-width: 92px !important;
    }
    #page_wrap .ctlg_object .summary-field.name {
        padding-left: 108px;
        min-height: 156px;   /* фото 92×123 плюс звёзды под ним */
    }
    #page_wrap .ctlg_object a.fio,
    #page_wrap .ctlg_object a.fio h2 { font-size: 18px; }
    #page_wrap .ctlg_object .summary-field.subjects { font-size: 13.5px; }

    #page_wrap .ctlg_object .dt-card-aside {
        flex-direction: column;   /* цена сверху, кнопка под ней */
        align-items: stretch;
        gap: 10px;
    }
    #page_wrap .ctlg_object .dt-card-aside__formats { order: 0; flex: none; }
    #page_wrap .ctlg_object .dt-card-aside__cta {
        order: 1;
        width: 100% !important;
        padding: 11px 18px !important;
        text-align: center !important;
    }
    #page_wrap .ctlg_object .dt-offer .dt-promo { padding: 10px 12px; border-radius: 12px; }
    #page_wrap .ctlg_object .album-photo .album_line a { height: 80px; }
    #page_wrap .ctlg_object .album-photo img { max-width: 120px !important; height: 80px !important; }
}

/* ============================================================
   11. Обвязка страницы каталога
   ============================================================ */

/* ---------- шапка страницы: крошки и h1 ----------
   Раньше на странице каталога не было ни того, ни другого. */

.dt-crumbs {
    margin: 0 0 10px;
    font-family: var(--dt-font);
    font-size: 13px;
    line-height: 1.4;
    color: var(--dt-dim);
}
.dt-crumbs a {
    color: var(--dt-muted);
    text-decoration: none;
}
.dt-crumbs a:hover { color: var(--dt-accent); text-decoration: underline; }
.dt-crumbs__sep { margin: 0 8px; color: var(--dt-border); }
.dt-crumbs__here { color: var(--dt-dim); }

.dt-catalog-head { margin: 0 0 20px; }
.dt-catalog-h1 {
    margin: 0 !important;
    padding: 0;
    border: 0;
    font-family: var(--dt-font);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--dt-ink);
}
.dt-catalog-sub {
    margin: 6px 0 0 !important;
    font-family: var(--dt-font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--dt-muted);
}

@media (max-width: 700px) {
    .dt-catalog-h1 { font-size: 23px; }
    .dt-catalog-sub { font-size: 14px; }
    .dt-catalog-head { margin-bottom: 16px; }
}

/* ---------- пустая полоса фильтров ----------
   Гостю в панели остаётся один заголовок «Поиск по анкете» без полей
   (поля видны модераторам), и над каталогом висела пустая белая полоса. */
.fsearch:not(:has(input, select, textarea, .dt-drop)) { display: none !important; }

/* под скрытой панелью оставался отступ 46px — на телефоне это пол-экрана
   пустоты до первой анкеты */
@media (max-width: 1000px) {
    #page_wrap .main-container { padding-top: 0 !important; }
}

/* ---------- дерево предметов на узких экранах ----------
   Списком в 44 строки оно занимало целый экран до первой анкеты;
   на телефоне и планшете это лента пилюль с прокруткой. */
@media (max-width: 1000px) {
    .catalog-container .block_cataloger { padding: 14px 14px 12px; border-radius: 18px; }
    .catalog-container .block_cataloger > .title { margin-bottom: 10px; padding: 0; }
    .catalog-container .block_cataloger .c {
        max-height: none !important;
        overflow: visible !important;
    }
    .catalog-container .params-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .catalog-container .params-list::-webkit-scrollbar { display: none; }
    .catalog-container .params-list li {
        flex: none;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid var(--dt-border);
        border-radius: 999px;
        background: #fff;
    }
    .catalog-container .params-list li a.cat-param { white-space: nowrap; font-size: 14px; }
    .catalog-container .params-list li > .count { font-size: 12px; }
}

/* ---------- низ страницы ----------
   Каталог догружает следующие страницы прокруткой (проверено: 10 → 30
   анкет), поэтому нумерованная пагинация человеку не нужна — ссылки
   остаются в разметке для поисковика, но с экрана убраны. Там же снят
   SEO-абзац «Бесплатный подбор онлайн-репетиторов…». */
body .ctlgr_pagination_wrapper,
body .ctlgr_pagination,
.catalog-container > .ctlgr_descr {
    display: none !important;
}