/* Макет E — азулежу. Страница есть изразцовая панель улицы клуба.
   Правила мира, которые нельзя нарушать при правках:
   1. Плитки не имеют рамок. Разделяет их затирка — фон панели в зазорах.
   2. Ранг задаёт размер плитки и тон глазури, а не бордюр и не тень.
   3. Охра — единственный акцент, и она же орган управления: если охряное,
      значит на это нажимают.
   4. Белая плитка на панели одна — уличная табличка с адресом. Она же
      главный аргумент: клуб стоит здесь, а не в Малаге.
   Всё общее (кнопки, галерея, карта, диалоги) живёт в base.css. */

/* Alegreya: вариативная, один файл на подмножество покрывает всю ось веса.
   Лежит в репозитории — браузер не ходит наружу. SIL Open Font License. */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/alegreya-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/alegreya-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/alegreya-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

.layout-e {
  --cdb-bg: #0a2044;
  --e-grout: #ccd9e6;
  --e-glaze: #14417e;
  --e-glaze-deep: #102f5e;
  --e-glaze-lift: #1a4f95;
  --e-white: #edf2f6;
  --e-white-soft: #a8c0da;
  --cdb-gold: #e0a832;
  --cdb-gold-soft: #f0c465;
  --e-ochre-ink: #2a1a02;
  --e-green: #4bb27c;
  --e-seam: 3px;

  --cdb-text: var(--e-white);
  --cdb-muted: var(--e-white-soft);
  --cdb-line: rgba(237, 242, 246, 0.14);
  --cdb-surface: rgba(237, 242, 246, 0.06);
  --cdb-surface-strong: #102f5e;

  --e-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  /* весь текст мира набран той же гарнитурой, что и роспись:
     системный стек был бы чужим шрифтом на изразце */
  --cdb-font: var(--e-display);

  color: var(--e-white);
  font-family: var(--cdb-font);
}

/* Поверхности, которые рисует браузер, а не мы: без них страница выглядит
   собранной, а не сделанной. */
.layout-e ::selection {
  background: var(--cdb-gold);
  color: var(--e-ochre-ink);
}
.layout-e {
  caret-color: var(--cdb-gold);
  scrollbar-color: var(--e-glaze-lift) var(--e-grout);
  scrollbar-width: thin;
}
.layout-e :focus-visible {
  outline: 3px solid var(--cdb-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Фон: кобальт вместо почти чёрного. Свечения тёплое сверху и зелёное
   снизу — отражение зала на глазури, а не отдельный слой. */
.layout-e .backdrop {
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(224, 168, 50, 0.16), transparent 58%),
    radial-gradient(90% 60% at 82% 108%, rgba(47, 122, 87, 0.2), transparent 62%);
}

.layout-e main,
.layout-e .e-top {
  position: relative;
  z-index: 1;
}

/* --- Панель и плитки ------------------------------------------------- */

.e-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px) clamp(40px, 8vw, 96px);
}

.e-grid {
  display: grid;
  gap: var(--e-seam);
  /* затирка видна и по краю панели, а не только между плитками:
     настоящая изразцовая стена затёрта со всех сторон */
  padding: var(--e-seam);
  /* затирка тоже просвечивает: под сплошной светлой сеткой шаров не видно
     ни через какую глазурь */
  background: color-mix(in srgb, var(--e-grout) 55%, transparent);
  grid-template-columns: repeat(6, 1fr);
}

.e-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Глазурь полупрозрачна: сквозь неё видно падающие шары. Изразец от
     этого не перестаёт быть изразцом — глазурь и в жизни просвечивает, —
     но плотность подобрана так, чтобы белый текст держался на любом шаре. */
  background: var(--e-glaze);
  padding: clamp(18px, 2.6vw, 34px);
  /* глазурованный край: свет сверху, тень снизу. Не декоративный ореол —
     так ведёт себя обожжённая плитка. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Блик глазури. Один слой на все плитки, поэтому свет на панели единый. */
.e-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.03) 36%,
    transparent 60%
  );
  pointer-events: none;
}

.e-tile > * {
  position: relative;
  z-index: 1;
}

.e-tile--deep {
  background: var(--e-glaze-deep);
}

/* Ранг задаётся размером, поэтому колонки — единственный способ
   расставить приоритет. */
.e-tile--full { grid-column: 1 / -1; }
.e-tile--half { grid-column: span 3; }
.e-tile--third { grid-column: span 2; }
.e-tile--twothirds { grid-column: span 4; }

/* --- Уличная табличка: единственная белая плитка на панели ------------ */

.e-sign {
  grid-column: span 3;
  align-items: flex-start;
  justify-content: center;
}

/* Пластина вывески: она висит на изразцовой стене, а не заменяет собой
   плитку. Размер — по тексту, поэтому пустоты вокруг адреса не остаётся. */
.e-sign address {
  background: var(--e-white);
  color: var(--e-glaze-deep);
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px);
  /* двойная роспись по краю — так размечены настоящие уличные изразцы */
  outline: 2px solid var(--e-glaze);
  outline-offset: -7px;
  box-shadow: 0 6px 18px rgba(4, 14, 32, 0.4);
}

.e-sign address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.e-sign address span:first-child {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.e-sign address span + span {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3f68a4;
}

/* --- Заголовок -------------------------------------------------------- */

.e-headline {
  font-family: var(--e-display);
  font-weight: 700;
  /* Потолок кегля выбран по самому длинному слову набора —
     «профессиональных»: в плитке шириной в половину панели оно должно
     умещаться целиком. Перенос по слову — страховка: у плитки
     overflow: hidden, и без него текст обрезается молча. */
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.e-headline span {
  display: block;
}

.e-lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
  color: var(--e-white-soft);
}

/* Довод, ради которого построена страница. Выделен только размером:
   охра на этой странице означает «на это нажимают», и цветом здесь она
   спорила бы с единственной кнопкой. */
.e-near {
  margin: 16px 0 0;
  font-family: var(--e-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  line-height: 1.2;
  text-wrap: balance;
}

.e-section-title {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* --- Охра: и акцент, и кнопка ---------------------------------------- */

.e-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-seam);
  grid-column: 1 / -1;
}

.e-act {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 26px) 20px;
  font-family: var(--e-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--e-glaze-deep);
  color: var(--e-white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.e-act--primary {
  flex: 2 1 260px;
  background: var(--cdb-gold);
  color: var(--e-ochre-ink);
}

.e-act:hover {
  background: var(--e-glaze-lift);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.32);
}

.e-act--primary:hover {
  background: var(--cdb-gold-soft);
}

/* --- Статус и часы ---------------------------------------------------- */

.e-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 26px) clamp(12px, 3vw, 28px);
}

.e-top-state {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.e-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-white);
}

.e-status::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--e-green);
}

.e-status[data-state='closed']::before {
  background: var(--e-white-soft);
}

/* Часы работы — подписанная плашка, а не строка в потоке: гость ищет их
   глазами, и в отдельном блоке они находятся быстрее. Рамка тонкая: рядом
   живой статус клуба, и два одинаково громких элемента спорили бы. */
.e-hours {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--cdb-line);
  font-size: 0.95rem;
  color: var(--e-white);
}

.e-hours-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-white-soft);
}

/* --- Цены: цифра ведёт, дисциплины идут следом ------------------------ */

.e-price {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Полноценный заголовок плитки, а не надстрочная метка: планка качества
   запрещает кикер над заголовком без исключений, и цена под именем
   читается лучше, чем имя мелкими прописными над числом. */
.e-tile-title {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0 0 8px;
}

.e-note {
  margin: 12px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--e-white-soft);
  max-width: 52ch;
}

.e-disciplines {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.e-disciplines li {
  padding: 7px 13px;
  background: rgba(237, 242, 246, 0.09);
  font-size: 0.92rem;
}

/* --- Ритм событий: две плитки, без дат -------------------------------- */

.e-beat {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

/* --- Алмазные метки борта: ими размечен стол, ими же размечена панель -- */

.e-rail {
  height: 26px;
  margin: var(--e-seam) 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='26'%3E%3Cpath d='M42 8l5 5-5 5-5-5z' fill='%23a8c0da'/%3E%3C/svg%3E");
  background-size: 84px 26px;
  background-position: center;
  opacity: 0.65;
}

/* --- Галерея, карта, подвал ------------------------------------------- */

.e-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-seam);
  margin-top: var(--e-seam);
}

.layout-e .gallery-item {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: var(--e-grout);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
}

.layout-e .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.layout-e .gallery-item:hover img {
  transform: scale(1.05);
}

.e-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.e-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.e-contact-list dt,
.e-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-white-soft);
  margin-bottom: 4px;
}

.e-contact-list a,
.e-contact-list span {
  color: var(--e-white);
  font-size: 1.02rem;
}

.layout-e .social-link {
  display: inline-block;
  margin: 0 10px 8px 0;
  padding: 8px 14px;
  background: rgba(237, 242, 246, 0.09);
  color: var(--e-white);
  text-decoration: none;
  font-size: 0.92rem;
}

.layout-e .social-link:hover {
  background: rgba(237, 242, 246, 0.16);
}

.e-attrib {
  font-size: 0.76rem;
  color: var(--e-white-soft);
  margin: 8px 0 0;
}

.e-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.e-lockup img {
  width: 40px;
  height: 40px;
}

.e-lockup-name {
  font-family: var(--e-display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1;
  margin: 0;
}

.e-lockup-city {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--e-white-soft);
  margin: 4px 0 0;
}

/* --- Узкие экраны ------------------------------------------------------ */

@media (max-width: 860px) {
  .e-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .e-tile--half,
  .e-tile--third,
  .e-tile--twothirds,
  .e-sign {
    grid-column: 1 / -1;
  }
  .e-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Главное действие берёт всю ширину, два второстепенных делят строку:
     тремя строками подряд они съедали высоту первого экрана.
     Порядок правил важен: селекторы равной силы, побеждает последний. */
  .e-act {
    flex: 1 1 40%;
  }

  .e-act--primary {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  /* Верх занимал три строки: лого, статус с часами, языки. Лого и языки
     садятся в одну строку, состояние клуба уходит под них. */
  .e-top {
    gap: 10px;
  }

  .e-top-state {
    order: 3;
    width: 100%;
    gap: 12px;
  }

  .e-lockup img {
    width: 34px;
    height: 34px;
  }

  .e-lockup-name {
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-e .gallery-item img,
  .e-act {
    transition: none;
  }
}

/* Воздуха над заголовком секции больше, чем под ним. */
.e-section {
  padding-top: clamp(24px, 4vw, 46px);
}

/* Плитки, которым нужен свой режим, вместо инлайновых стилей в разметке. */
.e-tile--flush {
  padding: 0;
  justify-content: stretch;
}

.e-flush {
  margin: 0;
}

.e-address-plain {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Значки просмотрщика нарисованы, а не набраны юникодом: глиф берётся из
   системного шрифта и в мире страницы он чужой. Один вес штриха на все три. */
.layout-e .lightbox button svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.layout-e .lightbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Стекло включается только там, где браузер умеет размывать фон.
   Прозрачность и размытие — одна пара: без размытия подложка в 0.4
   пропускает светлый бок шара, и мелкий текст падает до контраста 1.3 при
   норме 4.5. Там, где backdrop-filter не поддержан или отключён (старые
   сборки Firefox, часть Android WebView, принудительная программная
   отрисовка), остаётся плотная подложка — ровно та, что была до стекла. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .e-tile {
    background: color-mix(in srgb, var(--e-glaze) 74%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}