/* Карточки остаются нативными кнопками: мышь, touch и клавиатура работают одинаково. */
.fg-collection-card,.fg-project-card{padding:0;text-align:left}
.fg-collection-card img{filter:grayscale(1)}
.fg-collection-card,.fg-project-card{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s,box-shadow .7s;transform-origin:center}
.fg-collection-card img,.fg-project-card img{left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;transition:filter .75s ease}
.fg-collection.has-active-project .fg-collection-card:not(.is-selected),.fg-projects.has-active-project .fg-project-card:not(.is-selected){filter:brightness(.55);transform:scale(.94)}
.fg-collection-card.is-selected,.fg-project-card.is-selected{z-index:4;transform:scale(1.12);box-shadow:0 32px 90px #0009}
.fg-collection-card.is-selected img{filter:grayscale(0)}
.fg-project-info{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:clamp(18px,2.5vw,38px);display:flex;flex-direction:column;gap:12px;background:linear-gradient(transparent,rgba(8,9,11,.94) 42%);color:#f5f2ec;opacity:0;translate:0 20px;transition:opacity .55s,translate .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fg-project-info b{font:700 clamp(18px,2vw,32px)/1.15 'IBM Plex Mono',monospace;overflow-wrap:break-word;hyphens:auto}
/* 32px — кегль подписи на десктопе. Длинные заголовки переносятся с дефисом:
   в моноширинном 32px «Установленная» требует ~250px, а карточка дает ~180px,
   поэтому без переноса текст обрезался краем карточки. */
@media(min-width:901px){.fg-project-info b{font-size:32px}
 .fg-project-info{padding:clamp(18px,2vw,28px)}}.fg-project-info span{font:400 clamp(12px,1vw,16px)/1.5 'IBM Plex Mono',monospace;color:#d6d0c5}
.fg-project-card.is-selected .fg-project-info,.fg-collection-card.is-selected .fg-project-info{opacity:1;translate:0 0}
@media(max-width:900px){
 .fg-collection-card.is-selected,.fg-project-card.is-selected{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.fg-collection-card img,.fg-project-card,.fg-project-info{transition:none}}

/* Клик разворачивает карточку в широкую колонку — ту же, что занимает крупный кадр.
   Пропорции карточек совпадают (267/333 = 0.802, 459/572 = 0.802), поэтому меняется
   только ширина колонки: высота подтягивается сама, без скачка aspect-ratio.
   Рост дает сама сетка, поэтому transform:scale у выбранной карточки снят —
   иначе карточка выросла бы дважды и наехала на соседей. */
@media(min-width:901px){
 .fg-collection .fg-door-grid{transition:grid-template-columns .7s cubic-bezier(.16,1,.3,1)}
 .fg-collection .fg-door-grid:has(>:nth-child(1).is-selected){grid-template-columns:459fr 267fr 267fr 267fr}
 .fg-collection .fg-door-grid:has(>:nth-child(2).is-selected){grid-template-columns:267fr 459fr 267fr 267fr}
 .fg-collection .fg-door-grid:has(>:nth-child(3).is-selected){grid-template-columns:267fr 267fr 459fr 267fr}
 .fg-collection .fg-door-grid:has(>:nth-child(4).is-selected){grid-template-columns:267fr 267fr 267fr 459fr}
 .fg-collection .fg-collection-card.is-selected{transform:none}
 .fg-collection.has-active-project .fg-collection-card:not(.is-selected){transform:none}
}
@media(prefers-reduced-motion:reduce){.fg-collection .fg-door-grid{transition:none}}

/* Подпись под карточкой: появляется у нажатой двери и гаснет при выборе другой.
   Скрытые подписи занимают место (visibility, не display), поэтому ряд не прыгает
   при переключении карточек. Ряд 2 начинается под самой высокой карточкой —
   а высокая всегда та, что выбрана, значит подпись всегда строго под ней. */
.fg-door-grid>.fg-door-note{grid-row:2;display:none;flex-direction:column;gap:calc(12 * var(--u));
 padding-top:calc(24 * var(--u));color:#f5f2ec}
.fg-door-note b{font:700 calc(32 * var(--u))/1.15 'IBM Plex Mono',monospace;overflow-wrap:break-word;hyphens:auto}
.fg-door-note span{font:400 calc(16 * var(--u))/1.5 'IBM Plex Mono',monospace;color:#d6d0c5}
.fg-collection .fg-door-grid:has(>:nth-child(1).is-selected)>:nth-child(5),
.fg-collection .fg-door-grid:has(>:nth-child(2).is-selected)>:nth-child(6),
.fg-collection .fg-door-grid:has(>:nth-child(3).is-selected)>:nth-child(7),
.fg-collection .fg-door-grid:has(>:nth-child(4).is-selected)>:nth-child(8){display:flex}
@media(max-width:900px){.fg-door-note b{font-size:22px}.fg-door-note span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.fg-door-grid>.fg-door-note{transition:none}}

/* Кнопка живет внутри подписи, поэтому появляется и гаснет вместе с ней.
   32u + gap 12u = 44u от последней строки текста. */
.fg-door-note .fg-button{align-self:start;margin-top:calc(32 * var(--u))}

/* До нажатия все четыре карточки одинаковы: равные колонки и общая пропорция.
   При клике колонка выбранной карточки расширяется, соседние сжимаются. */
@media(min-width:901px){
 .fg-collection .fg-door-grid{grid-template-columns:repeat(4,1fr)}
 .fg-collection .fg-door-grid>.fg-collection-card{aspect-ratio:267/333;align-self:start}
 /* Каждая подпись закреплена за колонкой своей карточки. Без этого единственная
    показанная подпись автоматически встает в первую свободную ячейку ряда,
    то есть всегда под первой дверью. */
 .fg-door-grid>:nth-child(5){grid-column:1}
 .fg-door-grid>:nth-child(6){grid-column:2}
 .fg-door-grid>:nth-child(7){grid-column:3}
 .fg-door-grid>:nth-child(8){grid-column:4}
}

/* Мобильная: своя раскладка сетки, подпись занимает всю ширину под карточками
   и не резервирует место (иначе четыре скрытых подписи дали бы пустые ряды). */
@media(max-width:900px){
 .fg-door-grid>.fg-door-note{grid-row:auto;grid-column:1/-1}
 .fg-collection .fg-door-grid:has(>:nth-child(1).is-selected)>:nth-child(5),
 .fg-collection .fg-door-grid:has(>:nth-child(2).is-selected)>:nth-child(6),
 .fg-collection .fg-door-grid:has(>:nth-child(3).is-selected)>:nth-child(7),
 .fg-collection .fg-door-grid:has(>:nth-child(4).is-selected)>:nth-child(8){display:flex}
}