/*
  Витрина: то, чего в прототипе не было и быть не могло.

  Прототип — SPA без сервера: у него не было ни хлебных крошек, ни настоящих
  фотографий, ни форм, которые работают без JS. Всё остальное оформление берётся
  1:1 из `prototype/css` (см. `css/showcase/`), и дублировать его здесь нельзя —
  разойдётся на первой же правке дизайн-системы.

  Поэтому тут только надстройки поверх готовых слоёв: они пользуются теми же
  токенами и не переопределяют компоненты прототипа.
*/

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 10px;
    top: 10px;
    z-index: 90;
    padding: 9px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Крошки: обязательный минимум публичной страницы (steering seo.md) ───── */

.crumbs {
    font-size: 12.5px;
    color: var(--ink-faint);
    margin-bottom: 14px;
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li + li::before {
    content: "/";
    margin-right: 7px;
    color: var(--line);
}

.crumbs a {
    color: var(--ink-soft);
}

.crumbs a:hover {
    color: var(--accent);
}

/* ── Подвал ──────────────────────────────────────────────────────────────── */

.pub-foot {
    border-top: 1px solid var(--line);
    margin-top: 40px;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.pub-foot .in {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.pub-foot nav {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.pub-foot a:hover {
    color: var(--accent);
}

/* ── Каталог: карточка с настоящей фотографией ───────────────────────────── */

/*
  В прототипе обложкой была полоса цветных плиток (`.ph-gal`) — заглушка вместо
  снимка. Теперь на её месте фотография; эмодзи направления остаётся поверх,
  когда фото нет.
*/
.vcard .ph-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vcard .ph-empty {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}

.cats a.chip {
    display: inline-block;
}

.catalog-empty {
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    color: var(--ink-soft);
    background: var(--surface-2);
}

/* ── Страница площадки ───────────────────────────────────────────────────── */

/* Обложка площадки вместо эмодзи-плашки, когда фотографии есть. */
.venue-head .vph-photo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    object-fit: cover;
    flex: none;
}

.venue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.venue-rating {
    color: var(--hold);
    font-weight: 600;
}

.venue-about {
    margin: 8px 0 0;
    max-width: 64ch;
    color: var(--ink-soft);
    font-size: 13.5px;
}

/*
  Фотографии — горизонтальной лентой. Сетка во всю ширину отодвигала вниз
  выбор места и времени, то есть ровно то, ради чего гость пришёл: снимки на
  этой странице иллюстрация, а не содержание.
*/
.venue-gal {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 16px 0 0;
    padding: 0 0 4px;
    list-style: none;
    scrollbar-width: thin;
}

.venue-gal li {
    flex: none;
}

.venue-gal img {
    display: block;
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-2);
}

/*
  Часы работы — свёрнуты в строку.

  Раньше здесь стояла таблица на семь строк и шестьсот пикселей ради «пн–вс,
  круглосуточно». Гостю почти всегда нужен один ответ — открыто ли сегодня;
  неделя целиком нужна изредка, и `<details>` отдаёт её без единой строки
  скрипта, оставаясь при этом в HTML для поиска.
*/
.hours {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 13.5px;
}

.hours > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 13px;
    cursor: pointer;
    list-style: none;
}

.hours > summary::-webkit-details-marker {
    display: none;
}

.hours-more {
    margin-left: auto;
    color: var(--accent);
    font-size: 12.5px;
}

.hours-more::after {
    content: " ▾";
}

.hours[open] .hours-more::after {
    content: " ▴";
}

.hours table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0 13px 4px;
}

.hours th,
.hours td {
    text-align: left;
    padding: 6px 13px;
    border-top: 1px solid var(--line-soft);
    font-weight: 400;
}

.hours th {
    width: 110px;
    font-weight: 600;
    white-space: nowrap;
}

.hours tr.is-today th {
    color: var(--accent);
}

.hours tr.is-closed td {
    color: var(--ink-faint);
}

.hours-date {
    margin-left: 6px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 400;
    color: var(--ink-faint);
}

.hours-note {
    color: var(--hold);
}

.hours .hint {
    padding: 0 13px 10px;
}

/* Услуги: те же карточки, что в выборе, но здесь это контент, а не кнопки. */
.svc-card.static {
    cursor: default;
}

.svc-card.static:hover {
    border-color: var(--line);
}

/* Строка места в списке: к карточке прототипа добавляется миниатюра. */
.rcard .rc-photo {
    width: 74px;
    height: 54px;
    border-radius: 9px;
    object-fit: cover;
    flex: none;
    background: var(--surface-2);
}

.rcard .rc-r .price {
    font-family: "Golos Text", sans-serif;
    font-size: 13px;
    color: var(--ink-soft);
}

/*
  Карточка места открывается по якорю (`:target`), а не по клику в JS: без
  скриптов она тоже должна открываться — внутри неё описание, удобства и план,
  то есть контент страницы, а не украшение.
*/
.place-modal {
    display: none;
}

.place-modal:target {
    display: flex;
}

.place-modal .drawer-x {
    display: grid;
    place-items: center;
    text-decoration: none;
}

/* Ссылка-подложка, закрывающая карточку кликом мимо неё. */
.place-modal .backdrop {
    position: absolute;
    inset: 0;
}

/* ── Отзывы: форма работает без JS, обычным POST ─────────────────────────── */

/*
  Оценка — радиокнопки, а потому переключается без единой строки скрипта.
  Визуально это те же звёзды, что в прототипе: сами инпуты спрятаны, подписи
  подсвечиваются каскадом.
*/
.stars-pick {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.stars-pick input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stars-pick label {
    font-size: 24px;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* Звезда и все, что левее (в обратном потоке — следующие соседи). */
.stars-pick input:checked ~ label,
.stars-pick label:hover,
.stars-pick label:hover ~ label {
    color: var(--hold);
}

.stars-pick input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-error {
    margin: 0 0 10px;
    padding: 8px 11px;
    border-radius: 9px;
    background: var(--busy-soft);
    color: var(--busy);
    font-size: 12.5px;
}

.form-ok {
    margin: 0 0 10px;
    padding: 8px 11px;
    border-radius: 9px;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 12.5px;
}

/* ── Блок выбора ─────────────────────────────────────────────────────────── */

.venue-booking {
    margin-top: 26px;
}

/*
  Сводка справа — заголовок уровня h2 (на странице он не единственный), но
  выглядеть должен как подпись панели, а не как раздел.
*/
.book-summary h2 {
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    margin-bottom: 12px;
}

/*
  До появления острова ленты дат и карточки услуг не кликаются: сервер рисует
  их как текст. Курсор об этом и говорит — иначе гость жмёт и ничего не
  происходит.
*/
.book-layout .day,
.book-layout .svc-card.static {
    cursor: default;
}

.book-layout .day {
    display: inline-block;
}

/* ── Билет брони ─────────────────────────────────────────────────────────── */

.ticket-code {
    font-family: "JetBrains Mono", monospace;
    font-size: 17px;
}

@media (max-width: 700px) {
    .venue-gal li:first-child img { height: 200px; }
    .pub-foot nav { margin-left: 0; }
}

/*
  Места — в две колонки на широком экране.

  Одной колонкой дюжина домиков занимала шестьсот пикселей и уводила выбор
  времени за пределы экрана. Сам список при этом нужен целиком: это и есть
  ответ на вопрос «что тут можно забронировать».
*/
@media (min-width: 720px) {
    .book-layout .rlist {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* Лента дат — одной строкой; перенос означает, что горизонт стал слишком длинным. */
.book-layout .days {
    gap: 6px;
}

/*
  Цена в строке места — под числом гостей, а не рядом: «8 гостей 9 000 ₽» в
  одну строку не помещается и переносится по случайному месту.
*/
.rcard .rc-r .price {
    display: block;
}

/*
  Шапка на телефоне. В прототипе её адаптива нет: там публичная часть
  открывалась на широком экране, а `responsive.css` правит только раскладки
  кабинета. На 375 px бренд, две кнопки и переключатель темы в строку не
  помещаются — «Кабинет бизнеса» уезжал за край.
*/
@media (max-width: 560px) {
    .pub-header .in {
        gap: 8px;
        padding: 10px 14px;
    }

    .pub-header .brand .mark {
        font-size: 16px;
    }

    .pub-header .btn {
        padding: 7px 11px;
        font-size: 13px;
    }

    .pub-header .icon-btn {
        width: 32px;
        height: 32px;
    }

    /* Каталог есть и в подвале, и в крошках — на узком экране он тут лишний. */
    .pub-header .btn.ghost {
        display: none;
    }
}