/*
 * collection.css — экран «Твоё собрание» (архив гаданий).
 * Направление «Полночный архив», бриф — /DESIGN.md §5. Только роли из tokens.css.
 *
 * Собранное человеком показывается как коллекция экспонатов: день — раздел,
 * гадание — витрина с картой. Поверхность, рамку и радиус даёт .tile из
 * components.css, здесь только раскладка коллекции и подписи.
 */

.collection {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vh, 30px);
}

/* Заголовок дня — метка раздела, а не заголовок экрана: экран уже назван выше. */
.collection__date {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-ui);
    color: var(--mark);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hair);
}

/* Две колонки всегда: на узком экране плитки ужимаются, а не схлопываются (§9). */
.collection__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    /* Витрина без карты (гороскоп, сонник, число судьбы) высотой равна своему
       содержимому. Без этого сетка растягивала её на высоту соседней витрины
       с картой, и рядом с экспонатом стоял пустой ящик в полкарты высотой. */
    align-items: start;
}

.collection__item {
    display: flex;
    flex-direction: column;
    color: inherit;
}

.collection__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--ink);
}

.collection__meta {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--mark);
    margin-top: 2px;
}

/* Гадание ещё считается: гасим прозрачностью, ничего не мигает и не двигается. */
.collection__item--wait { opacity: .6; }