/* Metanoeia Moments — чёрно-белый минимализм; структура: список + карта */
:root {
  --paper: #ffffff;
  --ink: #000000;
  --chip: #ececec;
  --chip-hover: #dedede;
  --line: #d4d4d4;
  --muted: #5e5e5e;
  --display: "Unbounded", "Arial Black", sans-serif;
  --text: "Onest", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1.25rem, 3vw, 2rem);
  --header-h: 4.25rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.45 var(--text); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  height: var(--header-h); padding: 0 var(--pad);
  background: var(--paper); border-bottom: 1px solid var(--ink);
}
.wordmark {
  font: 700 clamp(1rem, 2.6vw, 1.35rem)/1 var(--display); text-transform: uppercase;
  letter-spacing: -.02em; text-decoration: none; white-space: nowrap;
}
.header-right { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.stats { margin: 0; color: var(--muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-btn {
  display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.15rem; border-radius: 999px;
  background: var(--chip); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.about-btn:hover { background: var(--chip-hover); }
.about-btn[aria-current] { background: var(--ink); color: var(--paper); gap: .45rem; }
.about-x { font-size: 1.3em; line-height: 0; }
.lang { display: inline-flex; background: var(--chip); border-radius: 999px; padding: .2rem; flex: none; }
.lang a { padding: .3rem .7rem; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9rem; color: var(--muted); }
.lang a[aria-current] { background: var(--ink); color: var(--paper); }

/* ---------- общие элементы ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 2.75rem; padding: 0 1.3rem; border-radius: 999px;
  background: var(--chip); color: var(--ink); text-decoration: none;
  font: 500 1rem/1 var(--text); cursor: pointer; white-space: nowrap; border: 0;
}
.chip:hover { background: var(--chip-hover); }
.chip.is-active { background: var(--ink); color: var(--paper); }
.segment { display: inline-flex; background: var(--chip); border-radius: 999px; }
.segment .chip { background: transparent; }
.segment .chip.is-active { background: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.partner { display: inline-block; margin: 0 0 1rem; padding: .15rem .6rem; border: 1px solid var(--ink); font-size: .85rem; }
sup { font-size: .55em; line-height: 0; }

/* ---------- календарь: список слева, карта справа ---------- */
.cal { display: grid; grid-template-columns: minmax(22rem, 34rem) 1fr; height: calc(100dvh - var(--header-h)); }
.side { overflow-y: auto; border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.map-wrap { position: relative; background: #f2f2f2; }
#map { position: absolute; inset: 0; }

.filters { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 1.25rem var(--pad) 0; border-bottom: 1px solid var(--ink); }
.selects { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.select { position: relative; display: block; }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 2.9rem;
  padding: 0 2.6rem 0 1.2rem; border: 0; border-radius: 999px; background: var(--chip);
  font: 500 1rem/1 var(--text); color: var(--ink); cursor: pointer; text-overflow: ellipsis;
}
.select select:hover { background: var(--chip-hover); }
.select::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%; width: .5rem; height: .5rem;
  border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.count-row { display: flex; justify-content: space-between; align-items: baseline; padding: 1.1rem 0 .9rem; }
.count { margin: 0; font-size: 1.15rem; }
.count-row { gap: 1rem; }
.count-row .reset { margin-left: auto; }
.sub-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.reset { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

.list { flex: 1; }
.month-label { margin: 0; padding: 1.6rem var(--pad) .6rem; font: 400 .95rem/1.2 var(--display); color: var(--muted); }
.month ul { list-style: none; margin: 0; padding: 0; }
.ev { border-top: 1px solid var(--line); }
.month .ev:last-child { border-bottom: 1px solid var(--line); }
.ev-head {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; width: 100%;
  padding: 1.1rem var(--pad); background: none; border: 0; text-align: left; cursor: pointer;
}
.ev-head:hover { background: #f6f6f6; }
.ev.open .ev-head { background: var(--ink); color: var(--paper); }
.ev-date { display: flex; flex-direction: column; }
.ev-until { font-size: .8rem; color: var(--muted); }
.ev-day { font: 400 1.9rem/1 var(--display); letter-spacing: -.03em; }
.ev-mon { margin-top: .25rem; font-size: .9rem; color: var(--muted); }
.ev.open .ev-until, .ev.open .ev-mon, .ev.open .ev-type, .ev.open .ev-artist { color: #bdbdbd; }
.ev-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ev-type { font-size: .88rem; color: var(--muted); }
.ev-title { font-weight: 700; font-size: 1.2rem; line-height: 1.15; text-transform: uppercase; }
.ev-place { font-size: 1.02rem; }
.ev-artist { font-size: .95rem; color: var(--muted); }
.ev-more { padding: 1rem var(--pad) 1.4rem calc(var(--pad) + 4.6rem); background: var(--ink); color: var(--paper); }
.ev-more p { margin: 0 0 1rem; max-width: 34rem; }
.ev-dates { color: #bdbdbd; }
.ev-more .chip { background: #2b2b2b; color: var(--paper); }
.ev-more .chip:hover { background: #3a3a3a; }
.ev-more .chip.is-active { background: var(--paper); color: var(--ink); }
.empty { padding: 2.5rem var(--pad); font-size: 1.1rem; }
.subscribe { margin-top: 1rem; padding: 2.25rem var(--pad) 2.5rem; border-top: 1px solid var(--ink); scroll-margin-top: 9rem; }
.subscribe h2 { margin: 0 0 .5rem; font: 400 clamp(1.3rem, 3vw, 1.7rem)/1.15 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.subscribe p { margin: 0 0 1.25rem; color: var(--muted); }
.subscribe form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.subscribe input[type=email] { flex: 1 1 16rem; height: 3.1rem; max-height: 3.1rem; box-sizing: border-box; padding: 0 1.25rem; border: 1.5px solid var(--ink); border-radius: 999px; font: 500 1.05rem/1 var(--text); background: var(--paper); color: var(--ink); min-width: 0; -webkit-appearance: none; }
.subscribe input[type=email]:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.subscribe .chip { height: 3.1rem; padding: 0 1.6rem; font-size: 1.05rem; }
.sub-msg { margin-top: 1rem !important; color: var(--ink) !important; font-weight: 500; }
@media (max-width: 600px) { .subscribe form { flex-direction: column; align-items: stretch; } .subscribe input[type=email], .subscribe .chip { width: 100%; flex: 0 0 3.1rem; justify-content: center; } }
.site-footer { display: flex; justify-content: space-between; padding: 1.5rem var(--pad); color: var(--muted); font-size: .9rem; }

/* маркеры карты */
.maplibregl-ctrl-group { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--ink); }
.maplibregl-ctrl-attrib { font-size: .7rem; }

/* ---------- карточка события (диалог и отдельная страница) ---------- */
.detail {
  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--ink);
  width: min(40rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--paper); color: var(--ink); overflow-y: auto;
}
.detail::backdrop { background: rgba(0, 0, 0, .35); }
.detail-close {
  position: sticky; top: 0; margin-left: auto; display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; background: var(--paper); border: 0; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; z-index: 2;
}

.detail-close:focus-visible { outline-offset: -4px; }
.detail-body { padding: 0 var(--pad) 3rem; margin-top: -1.5rem; }
.loading { color: var(--muted); padding-top: 3rem; }
.card-detail { display: block; }
.detail-media { margin: 0 0 1.75rem; }
.detail-media img { width: 100%; object-fit: cover; background: var(--chip); }
.detail-media.is-h img { aspect-ratio: 16 / 9; }
.detail-media.is-v { margin: 2rem 0 0; width: min(100%, 26rem); }
.detail-media.is-v img { aspect-ratio: 3 / 4; }
.credit { margin-top: .45rem; color: #9b9b9b; font-style: italic; font-size: .85rem; }
.credit a { color: inherit; text-underline-offset: .15em; }
.detail-title { margin: 0; font: 400 clamp(1.8rem, 5vw, 3rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.detail-artist { margin: .6rem 0 0; font-size: clamp(1.2rem, 2.6vw, 1.5rem); text-transform: uppercase; }
.detail-meta { margin: 1.75rem 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.detail-meta dt { color: var(--muted); font-size: .9rem; margin-bottom: .2rem; }
.detail-meta dd { margin: 0; font-size: 1.05rem; }
.detail-text { margin-top: 2rem; max-width: 38rem; font-size: 1.08rem; line-height: 1.55; }
.detail-text p { margin: 0 0 1em; }
.review { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); max-width: 38rem; }
.review h2 { margin: 0 0 1.25rem; font: 400 clamp(1.3rem, 3vw, 1.7rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.review p { margin: 0 0 1em; font-size: 1.1rem; line-height: 1.6; }
.gallery { margin-top: 2.5rem; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--chip); }

/* ---------- About ---------- */
.about { max-width: 46rem; padding: clamp(2rem, 6vw, 4rem) var(--pad) 5rem; }
.about-title { margin: 0 0 2rem; font: 400 clamp(2.8rem, 10vw, 6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: -.035em; }
.about-text p { margin: 0 0 1.1em; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.55; }
.contact { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.contact h2 { margin: 0 0 1rem; font: 400 1.1rem/1.2 var(--display); text-transform: uppercase; }
.contact-mail { font-size: clamp(1.3rem, 3.5vw, 2rem); text-underline-offset: .18em; word-break: break-all; }
.contact p { margin: .9rem 0 0; color: var(--muted); }
.contact-list { margin: 0; display: grid; gap: 1.4rem; }
.contact-list dt { color: var(--muted); margin-bottom: .3rem; }
.contact-list dd { margin: 0; }

.event-page { max-width: 60rem; padding: 1.5rem var(--pad) 4rem; }
.back { display: inline-block; margin-bottom: 1.5rem; text-underline-offset: .2em; }

/* ---------- телефон: карта, фильтры, список ---------- */
@media (max-width: 900px) { .subscribe { scroll-margin-top: 11rem; } }
@media (max-width: 900px) {
  .stats { display: none; }
  .cal { display: flex; flex-direction: column; height: auto; }
  .map-wrap { order: -1; height: 48vh; min-height: 18rem; border-bottom: 1px solid var(--ink); }
  .side { overflow: visible; border-right: 0; }
  .filters { top: var(--header-h); }
  .detail { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }