/* ==========================================================================
   Галерея выполненных объектов
   Раздел вынесен из layout.css: правила нужны только адресу `/obyekty/`.
   Файл подключает ObjectController через View::useStyle().
   Карточка объекта собрана из готовых классов (`.card`, `.grid`, `.tags`),
   своего здесь — ряд фильтра, счётчик снимков и подписи карточки.
   ========================================================================== */

/* Ряд кнопок фильтра. Пилюли переносятся по строкам сами: типов объектов
   четыре, но на 360px в строку помещается один. */
.objects__types {
    align-items: center;
}

/* Число объектов в типе. Цифры табличные — ряд не дёргается при переходе
   между разделами галереи. */
.objects__count {
    margin-left: 4px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* На выбранной пилюле подпись читается на акценте, а не серым по оранжевому. */
.tag--link.is-active .objects__count {
    color: var(--color-on-accent);
    opacity: 0.7;
}

.object-list > li {
    display: flex;
}

.object-card {
    width: 100%;
}

/* Снимок объекта заметно выше карточки товара: работа показывается целиком,
   и вытянутый кадр читается лучше квадрата. */
.object-card__media {
    --ratio: 3 / 2;
    position: relative;
}

.object-card__shot {
    display: block;
    width: 100%;
    height: 100%;
}

/* Сколько ещё снимков откроется в просмотрщике. Метка стоит в углу самого
   кадра — подпись под карточкой посетитель связал бы с текстом, а не с фото. */
.object-card__count {
    position: absolute;
    right: var(--space-1);
    bottom: var(--space-1);
    padding: 2px var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-overlay);
    color: var(--color-text);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-variant-numeric: tabular-nums;
}

.object-card__type {
    color: var(--color-accent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.object-card__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

/* Город, площадь и срок работ — одной строкой сразу под названием, поэтому
   между ними убран полный шаг карточки. */
.object-card__title + .object-card__meta {
    margin-top: calc(var(--space-2) * -1 + 4px);
}

.object-card__meta {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Описание обрезается по трём строкам: иначе карточки в ряду разъезжаются
   по высоте — так же, как в каталоге. */
.object-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.object-card__link {
    color: var(--color-accent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* Своих брейкпоинтов у галереи нет: сетка карточек сжимается 3 → 2 → 1
   правилами `.grid--3` из main.css, а фильтр переносится по строкам сам. */