/* ShoDe — спільні стилі каталогів (події, місця, заклади, постаті, календар) */

.catalog {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
  padding-top: clamp(40px, 6vw, 72px);
}

.catalog__head { display: flex; flex-direction: column; gap: 16px; }

.crumbs { font-size: var(--text-body-s); color: var(--text-tertiary); }

.crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Роздільник малює CSS — у розмітці він зайвий */
.crumbs__list li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--text-tertiary);
}

.crumbs a { color: var(--text-tertiary); }
.crumbs [aria-current="page"] { color: var(--text-quiet); }

.catalog__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(38px, 7vw, 84px);
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* ── панель фільтрів ────────────────────────────────────── */
.filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface-card);
}

.searchbox--lg { min-height: 52px; padding: 0 16px; gap: 12px; }

.searchbox--lg .searchbox__icon {
  font-size: var(--text-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.searchbox--lg .searchbox__input { font-size: var(--text-body-m); padding: 12px 0; }

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid rgba(203, 184, 221, .12);
}

.filters__label {
  font-size: var(--text-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.chip--sm { min-height: 40px; padding: 8px 14px; }

.filters .chip { border-color: rgba(203, 184, 221, .22); }

/* сортування */
.sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort__wrap { position: relative; display: inline-flex; align-items: center; }

.sort__toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: var(--tap-min);
  padding: 0 14px;
  background: none;
  border: 1px solid var(--border-control);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.sort__toggle:hover { border-color: var(--accent); color: var(--accent); }

.sort__caret { font-size: 11px; line-height: 1; color: var(--accent); }

.sort__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--surface-badge);
  border: 1px solid var(--border-control);
}

.sort__menu button {
  min-height: var(--tap-min);
  padding: 12px 16px;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  text-align: left;
  cursor: pointer;
}

.sort__menu button:hover { background: var(--bg-page); color: var(--accent); }
.sort__menu button.is-active { color: var(--accent); }

/* обрані фільтри */
.filters__active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.filters__tags { display: flex; flex-wrap: wrap; gap: 10px; }

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  background: var(--surface-badge);
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.filter-tag__x { color: var(--accent); font-size: 16px; line-height: 1; }

.link-underline {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.link-underline:hover { color: var(--accent); }

/* ── список ─────────────────────────────────────────────── */
.catalog__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 460px;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 30px;
}

/* Заголовок групи розтягується на всю ширину сітки */
.catalog__month {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-s);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.catalog__month:first-child { margin-top: 0; }

/* ── порожній стан ──────────────────────────────────────── */
.empty-state {
  width: 100%;
  min-height: 420px;
  padding: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 72px);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
}

.empty-state__stamp {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(72px, 14vw, 180px);
  line-height: .84;
  letter-spacing: -.055em;
  color: var(--plum-700);
}

.empty-state__line {
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.empty-state__actions .btn { padding: 16px 26px; font-size: 16px; }

/* ── каталоги з групами (місця, заклади, постаті) ───────── */
.catalog--wide { gap: clamp(44px, 6vw, 72px); padding-top: clamp(32px, 5vw, 56px); }

.filters--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 2.6vw, 28px);
}

.filters__search { flex: 1 1 100%; }

.filters__reset { margin-left: auto; padding: 8px 4px; text-underline-offset: 4px; }

.group { display: flex; flex-direction: column; gap: 26px; }

.group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.group__label {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-s);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.group__note { font-size: var(--text-body-s); color: var(--text-tertiary); }

.places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 30px;
}

/* картка місця / постаті */
.place-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity var(--dur-base) var(--ease);
}

.place-tile:hover { color: var(--text-primary); }

.place-tile__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
}

.place-tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.place-tile__media::after { opacity: .18; }

.place-tile__events {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 8px 12px;
  background: rgba(22, 17, 28, .86);
  font-size: var(--text-meta);
  letter-spacing: .06em;
  color: var(--accent);
}

.place-tile__body { display: flex; flex-direction: column; gap: 9px; }

.place-tile__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.place-tile__note {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── заклади ────────────────────────────────────────────── */
.catalog__title--narrow { max-width: 13ch; letter-spacing: -.05em; }

.venues__lead {
  max-width: 32ch;
  margin-bottom: 8px;
  font-size: var(--text-body-m);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.venues__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 420px;
}

.group--venues { gap: 24px; }

.group__head--rule {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(203, 184, 221, .22);
}

.venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 30px;
}

.venue-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity var(--dur-base) var(--ease);
}

.venue-tile:hover { color: var(--text-primary); }

.venue-tile__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
}

.venue-tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.venue-tile__media::after { opacity: .2; }

.venue-tile__promo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
}

.venue-tile__body { display: flex; flex-direction: column; gap: 9px; }

.venue-tile__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 21px;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.venue-tile__note { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }

.venue-tile__meta { margin-top: 2px; }

.venue-tile__open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 4px;
  padding: 0 11px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.venue-tile__open--shut {
  padding: 0;
  background: none;
  color: var(--text-faint);
  font-size: 14px;
  font-weight: var(--weight-regular);
}

.venues__empty { min-height: 0; padding: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 72px); }
.venues__empty .empty-state__stamp { font-size: clamp(64px, 12vw, 148px); }
.venues__empty .empty-state__line { font-size: clamp(21px, 3vw, 32px); }

/* ── постаті ────────────────────────────────────────────── */
.catalog__title--people { max-width: 14ch; letter-spacing: -.05em; }

.people__lead {
  max-width: 34ch;
  margin-bottom: 8px;
  font-size: var(--text-body-m);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 30px;
}

.person-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity var(--dur-base) var(--ease);
}

.person-tile:hover { color: var(--text-primary); }

.person-tile__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
}

.person-tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.person-tile__media::after { opacity: .2; }

.person-tile__years {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 8px 12px;
  background: rgba(22, 17, 28, .86);
  font-size: var(--text-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.person-tile__guest {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--accent);
  font-size: var(--text-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-accent);
}

.person-tile__body { display: flex; flex-direction: column; gap: 9px; }

.person-tile__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.person-tile__note { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }

.person-tile__addr { margin-top: 2px; }

/* ── широка смуга-заклик ────────────────────────────────── */
.promo-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(203, 184, 221, .22);
}

.promo-bar__copy { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }

.promo-bar__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
}

.promo-bar__text {
  font-size: var(--text-body-m);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.promo-bar__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.promo-bar__btn { padding: 16px 26px; font-size: 16px; }

/* ── компактний порожній стан ───────────────────────────── */
.empty-slim {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 26ch;
  padding: 24px 0 8px;
}

.empty-slim__stamp {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 7vw, 88px);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--plum-700);
}

.empty-slim__line {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.empty-slim__btn { align-self: flex-start; padding: 15px 24px; }

/* ── пара блоків-закликів ───────────────────────────────── */
.cta-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2px;
}

.cta-pair__box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(32px, 4vw, 56px);
}

.cta-pair__box--card { background: var(--surface-card); }
.cta-pair__box--plum { background: var(--plum-700); }

.cta-pair__title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.cta-pair__text {
  max-width: 44ch;
  font-size: var(--text-body-m);
  line-height: var(--lh-body);
  color: var(--text-quiet);
}

.cta-pair__btn { align-self: flex-start; margin-top: auto; padding: 15px 24px; }

/* ── ICS-фід ────────────────────────────────────────────── */
.ics {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
}

.ics__btn {
  padding: 16px 26px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
}

.ics__btn:hover { background: var(--accent); color: var(--on-accent); }

.ics__note { max-width: 46ch; }