/* Макет D — конверсионный. В отличие от A и C здесь не один экран, а короткая
   лента: сначала повод написать прямо сейчас (статус клуба и быстрая бронь),
   потом что происходит в клубе и сколько стоит, потом зал и контакты.
   Ничего важного не спрятано за кнопкой. */

.layout-d {
  /* поля у краёв меньше, чем в остальных макетах: страница длинная,
     и воздух по бокам съедал полезную ширину */
  --cdb-pad: clamp(18px, 3vw, 48px);
}

.topbar-right {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.layout-d .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(8, 12, 11, 0.92), transparent);
}

.page {
  position: relative;
  z-index: 2;
}

.hero {
  min-height: 100dvh;
  display: grid;
  /* бронь стоит справа от описания, а не под ним */
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.8fr);
  /* Содержимое центрируется по высоте, а не расталкивается по углам.
     Раньше строка была во всю высоту, текст цеплялся за верх, а бронь за
     низ: при коротком тексте между ними оставалась пустая треть экрана, и
     бронь висела в углу, не совпадая ни с одной строкой слева. */
  grid-template-rows: auto;
  align-content: center;
  gap: clamp(24px, 4vw, 64px);
  /* Верхний отступ больше шапки (она прилипшая, высотой ~107 px) с запасом:
     при 92 px на низком окне ноутбука содержимое поднималось под плашку
     статуса, и блок брони упирался в «Открыто · до 01:00». */
  padding: 132px var(--cdb-pad) 56px;
  width: min(1280px, 100%);
  margin: 0 auto;
}

.hero-text {
  align-self: center;
  /* Колонка была во всю ширину, и строки растягивались на 700 с лишним
     пикселей. Ограничиваем ширину и центрируем блок в колонке. */
  max-width: 620px;
  justify-self: center;
  display: grid;
  /* растягиваем колонку, чтобы фирменный блок и заявление можно было
     центрировать над заголовком, оставив сам заголовок по левому краю */
  justify-items: stretch;
  gap: 14px;
}

/* Фирменный блок и заявление центрируются по видимой ширине заголовка, а не
   по колонке: коробка <h1> занимает колонку целиком, и по ней логотип с
   заявлением уезжали правее текста на добрую полусотню пикселей. Ширину
   самой длинной строки меряет alignToTitle() в app.js; без скриптов
   остаётся прежнее поведение — центр колонки. */
.hero-text .lockup,
.hero-text .claim {
  width: min(100%, var(--cdb-title-width, 100%));
}

.hero-text .lockup {
  justify-items: center;
}

.hero-text .lockup-sub {
  max-width: 100%;
}

.hero-text .claim {
  text-align: center;
}

/* --- Статус клуба --- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--cdb-line);
  border-radius: 999px;
  background: rgba(8, 12, 11, 0.86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cdb-muted);
}

/* цвет точки задаёт состояние, выставленное скриптом по времени Марбельи */
.status:has([data-state='open']) .status-dot {
  background: #2fbf62;
  box-shadow: 0 0 10px rgba(47, 191, 98, 0.8);
}

.claim {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--cdb-gold-soft);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.hero .title {
  /* ширину строки задаёт колонка сетки: жёсткое ограничение в символах
     разрывало заголовок после «14» */
  max-width: none;
  /* кегль меньше общего: заголовок разбит на две фразы вручную, и при
     крупном размере первая фраза переносилась сама, давая три строки */
  font-size: clamp(1.75rem, 3.5vw, 2.9rem);
}

.hero .lead {
  max-width: 52ch;
  margin-bottom: 6px;
}

/* --- Быстрая бронь --- */

.quick {
  display: grid;
  gap: 9px;
  /* Ширина колонки, а не по надписи. Узкая плашка висела в пустой правой
     половине, не совпадая краями ни с чем, и читалась как случайно
     приклеенная. По ширине колонки у неё появляется правый край общий с
     остальным экраном. На узких экранах остаётся компактной. */
  width: min(100%, 420px);
  max-width: min(100%, 420px);
  /* правая колонка, напротив текста: у нижнего края блоку не с чем было
     выравниваться, и он читался как случайно приклеенный */
  /* Раскрытая панель у верха колонки. Свёрнутая плашка висела в пустоте
     справа: маленькая, ни с чем не совпадающая по краям. Раскрытая форма
     занимает колонку целиком и читается как часть экрана, а не наклейка. */
  align-self: start;
  justify-self: end;
  /* свёрнутый блок должен быть лишь чуть больше самой надписи,
     отступы одинаковые со всех сторон */
  padding: 13px;
  border: 1px solid var(--cdb-line);
  border-radius: var(--cdb-radius);
  background: rgba(7, 12, 10, 0.86);
}

/* раскрытому блоку нужна вся ширина под поля формы */
.quick[open] {
  width: min(100%, 420px);
}

/* Сворачивание сделано нативным <details>: он работает без скрипта, ловит
   клавиатуру и читается экранными дикторами как «раскрыть/свернуть». */
.quick-summary {
  display: flex;
  align-items: center;
  /* только надпись, без значка: любой значок у края делает блок
     несимметричным, а отступы вокруг должны быть одинаковыми */
  justify-content: center;
  padding: 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
}

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


.quick[open] .quick-summary {
  margin-bottom: 6px;
}


.field-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdb-muted);
}

.quick-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field-wide,
.quick-send {
  grid-column: 1 / -1;
}

.quick-row {
  align-items: end;
}

.field {
  display: grid;
  gap: 4px;
}

.field-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdb-muted);
}

.field input,
.field select {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--cdb-line);
  border-radius: 12px;
  background: rgba(12, 18, 16, 0.9);
  color: var(--cdb-text);
  font: inherit;
  font-weight: 600;
  color-scheme: dark; /* нативный календарь браузера тоже тёмный */
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--cdb-gold);
}

.quick-send {
  min-height: 44px;
  margin-top: 2px;
}

.quick-hint {
  font-size: 0.86rem;
  color: var(--cdb-gold-soft);
}

/* --- Полосы контента --- */

/* Полоса контента тоже стекло: карточки внутри полупрозрачны, и сквозь них
   была бы видна только эта полоса. Сквозь обе шары видно по всей ленте, а
   не только на первом экране. */
.band {
  padding: clamp(48px, 7vw, 88px) var(--cdb-pad);
  background: rgba(6, 10, 9, 0.9);
  border-top: 1px solid var(--cdb-line);
}

.band-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 56px);
  /* колонки одной высоты: текст слева должен занимать тот же вертикальный
     отрезок, что и блок цен справа, а не висеть коротким столбиком */
  align-items: stretch;
}

.band-single {
  grid-template-columns: 1fr;
  gap: 20px;
}

.today {
  display: grid;
  /* Метка и список — одна группа, центрированная по высоте относительно
     блока цен справа. Раньше метка была прибита к верху отдельной строкой,
     и между ней и списком висел разрыв в половину блока. */
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0;
}

/* Строки стоят плотной группой и центрируются по высоте относительно блока
   цен справа. Раньше здесь было align-content: space-between — список
   растягивался на всю высоту соседа, и между четырьмя строками появлялись
   провалы в несколько сантиметров. */
.today .facts {
  align-content: normal;
}

/* Заголовок и список слева набраны тем же масштабом, что и блок цен
   справа: у него надпись-метка 0.72rem вразрядку и текст 0.86–0.95rem.
   Раньше слева стоял крупный заголовок и текст в 1rem, и две колонки
   читались как куски из разных макетов. */
.today .section-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdb-muted);
  margin-bottom: 16px;
}

.today .facts {
  gap: 12px;
}

.today .facts li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cdb-text);
}

/* «Ещё в клубе» — единственная ссылка в ряду, рассчитанном на три. Узкая
   таблетка в левой трети под широкими карточками цен читалась чужеродно.
   Здесь она занимает всю ширину и повторяет форму соседних блоков. */
.layout-d .deck-links {
  grid-template-columns: 1fr;
}

.layout-d .deck-link {
  border-radius: var(--cdb-radius);
  padding: 16px 30px;
}

.layout-d .gallery {
  grid-template-columns: repeat(4, 1fr);
}

/* --- Телефон --- */

.sticky-cta {
  display: none;
}

@media (max-width: 900px) {
  /* узкий экран: логотип, название, текст и кнопки идут по центру —
     колонка слишком узкая, чтобы выравнивание по левому краю читалось */
  .hero {
    /* по высоте содержимого: с min-height: 100dvh под кнопкой брони
       оставался хвост экрана в две сотни пикселей */
    min-height: auto;
    /* тот же запас под прилипшую шапку: при 84 px плашка статуса ложилась
       прямо на логотип — знак висит над названием и занимает верх блока */
    padding: 132px var(--cdb-pad) 32px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  .hero-text {
    justify-items: center;
  }

  .lockup {
    justify-items: center;
  }

  .lockup-sub {
    justify-content: center;
  }

  .cta-row {
    justify-content: center;
  }

  .quick {
    justify-self: center;
    align-self: auto;
  }

  .quick[open] {
    width: min(100%, 420px);
  }

  /* и весь остальной текст страницы: разделы, цены, факты, контакты */
  .band-inner {
    text-align: center;
    justify-items: center;
  }

  .today,
  .deck,
  .contact-grid > div {
    width: 100%;
  }

  .facts li,
  .chip-row,
  .social-links,
  .contact-cta,
  .deck-links {
    justify-content: center;
  }

  .deck-main,
  .deck-card,
  .deck-link {
    text-align: center;
    justify-items: center;
  }

  .deck-note {
    padding-right: 0;
  }

  .contact-block {
    justify-items: center;
  }

  .contact-value {
    justify-items: center;
    text-align: center;
  }

  .lead {
    margin-inline: auto;
  }

  /* панели с подробностями: остальная страница уже по центру */
  .dialog-body {
    text-align: center;
  }

  .facts li,
  .contact-cta {
    justify-content: center;
  }

  .map-card .btn {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* ширина по содержимому: см. тот же приём в a.css */
    width: max-content;
    max-width: calc(100% - 28px);
  }
}

@media (max-width: 900px) {
  .band-inner {
    grid-template-columns: 1fr;
  }

  /* «Ещё в клубе» — единственная ссылка в ряду, рассчитанном на три. Узкая
   таблетка в левой трети под широкими карточками цен читалась чужеродно.
   Здесь она занимает всю ширину и повторяет форму соседних блоков. */
.layout-d .deck-links {
  grid-template-columns: 1fr;
}

.layout-d .deck-link {
  border-radius: var(--cdb-radius);
  padding: 16px 30px;
}

.layout-d .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .page {
    padding-bottom: 76px;
  }

  /* Те же три кнопки уже стоят в прилипшей панели внизу, видимой всегда.
     В тексте они были вторым экземпляром в двухстах пикселях от первого. */
  .hero .cta-row {
    display: none;
  }

  .sticky-cta {
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(8, 12, 11, 0.97);
    border-top: 1px solid var(--cdb-line);
  }

  .sticky-cta .btn {
    /* basis auto, как в a.css: при нулевом базисе кнопки равной ширины по
       самой длинной надписи, и испанское «Cómo llegar» ломается на две
       строки. Ниже 900 px это единственный ряд кнопок на странице. */
    flex: 1 1 auto;
    /* при 8 px надпись сидела вплотную к краю кнопки */
    padding: 0 14px;
    min-height: 46px;
    font-size: 0.9rem;
  }

  .quick-btn {
    flex: 1;
  }
}

/* Стекло включается только там, где браузер умеет размывать фон.
   Прозрачность и размытие — одна пара: без размытия подложка в 0.4
   пропускает светлый бок шара, и мелкий текст падает до контраста 1.3 при
   норме 4.5. Там, где backdrop-filter не поддержан или отключён (старые
   сборки Firefox, часть Android WebView, принудительная программная
   отрисовка), остаётся плотная подложка — ровно та, что была до стекла. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .status {
    background: rgba(8, 12, 11, 0.4);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .quick {
    background: rgba(7, 12, 10, 0.45);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .band {
    background: rgba(6, 10, 9, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}