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

.detail__crumbs { padding-top: clamp(22px, 3vw, 34px); }

/* ── герой + липка панель ───────────────────────────────── */
.detail__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(min(300px, 100%), .8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(18px, 2.4vw, 26px);
}

.detail__lead-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.detail__hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  /* висоту вирівнює js/detail.js під висоту панелі фактів */
  height: clamp(320px, 44vw, 520px);
}

.detail__hero > img { width: 100%; height: 100%; object-fit: cover; }

.detail__hero::after { opacity: .22; }

/* Заголовок «наїжджає» на нижній край фото */
.detail__title {
  position: relative;
  z-index: 2;
  margin-top: clamp(-116px, -9vw, -64px);
  padding: 0 clamp(20px, 2.6vw, 32px) 0 clamp(14px, 2vw, 26px);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.042em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(22, 17, 28, .55);
}

.detail__lead {
  max-width: 52ch;
  font-size: var(--text-body-l);
  line-height: 1.55;
  color: var(--text-lead);
}

.detail__aside {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface-card);
}

.panel--share { gap: 12px; padding: clamp(18px, 2.6vw, 24px); }

.panel__actions { display: flex; flex-direction: column; gap: 10px; }

.panel__cta { padding: 17px 24px; font-size: 16px; }

.panel__save {
  padding: 15px 24px;
  background: none;
  border: 1px solid var(--border-control);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

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

.panel__save[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.panel__note { font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }

.price--big {
  min-height: 40px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

.price--big.price--free {
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-accent);
}

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

.share__btn {
  padding: 10px 15px;
  border: 1px solid rgba(203, 184, 221, .24);
  font-size: var(--text-body-s);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

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

/* ── тіло сторінки ──────────────────────────────────────── */
.detail__body {
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 72px);
  padding-top: clamp(40px, 5vw, 64px);
  min-width: 0;
}

.detail__prose { display: flex; flex-direction: column; gap: 22px; }

.detail__prose p {
  font-size: var(--text-body-l);
  line-height: 1.68;
  color: var(--text-lead);
  text-wrap: pretty;
}

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

/* ── розклад ────────────────────────────────────────────── */
.schedule { display: flex; flex-direction: column; }

.schedule__row {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 36px);
  padding: 20px 0;
  border-top: 1px solid rgba(203, 184, 221, .12);
}

.schedule__time {
  min-width: 66px;
  font-size: var(--text-body-l);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.schedule__what { font-size: 18px; line-height: 1.5; color: var(--text-lead); }

/* ── два інфо-блоки ─────────────────────────────────────── */
.detail__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

.infobox {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface-card);
}

.infobox__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-page);
}

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

.infobox__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.infobox__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.022em;
}

.infobox__meta { font-size: var(--text-body-m); color: var(--text-secondary); }

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

.infobox__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.infobox__btn { padding: 13px 20px; min-height: 0; font-size: var(--text-body-s); font-weight: var(--weight-regular); }

/* ── схожі ──────────────────────────────────────────────── */
.detail__similar {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: clamp(64px, 8vw, 104px);
}

/* ── таблиця приміток (сторінка місця) ──────────────────── */
.notes { border-top: 1px solid rgba(203, 184, 221, .12); }

.notes__row {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  align-items: baseline;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid rgba(203, 184, 221, .12);
}

.notes__key {
  flex: 0 0 auto;
  min-width: 160px;
  font-size: var(--text-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.notes__val {
  flex: 1 1 300px;
  font-size: var(--text-body-m);
  line-height: var(--lh-body);
  color: var(--text-lead);
}

/* ── список подій місця (великі дати) ───────────────────── */
.bigdates { display: flex; flex-direction: column; }

.bigdate {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(203, 184, 221, .12);
}

.bigdate__num {
  flex: 0 0 auto;
  min-width: 108px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(38px, 5vw, 56px);
  line-height: .9;
  letter-spacing: -.05em;
}

.bigdate__body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bigdate__title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.18;
  letter-spacing: -.022em;
}

.bigdate__meta { font-size: 16px; color: var(--text-secondary); }

/* ── карта / як дістатися ───────────────────────────────── */
.mapbox {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-card);
}

.mapbox > img { width: 100%; height: 100%; object-fit: cover; }

.mapbox__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  padding: 8px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-meta);
  font-weight: var(--weight-strong);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
}

/* ── сторінка місця ─────────────────────────────────────── */
.place {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 128px);
  padding-top: clamp(32px, 5vw, 56px);
}

.place__intro { display: flex; flex-direction: column; gap: 28px; }

.place__headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.place__title {
  max-width: 12ch;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 8vw, 96px);
  line-height: .9;
  letter-spacing: -.05em;
  text-wrap: balance;
}

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

.place__hero {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--surface-card);
}

.place__hero > img { width: 100%; height: 100%; object-fit: cover; }
.place__hero::after { opacity: .22; }

.place__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.place__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 62ch;
}

.place__h2 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: .96;
  letter-spacing: -.04em;
}

.place__h2--sm { font-size: clamp(28px, 4vw, 46px); line-height: .98; }

.place__map-text .place__h2 { margin-top: 0; }

.place__p {
  font-size: var(--text-body-l);
  line-height: var(--lh-body);
  color: var(--text-quiet);
}

.place__p--quiet { color: var(--text-secondary); }

.place__panel {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface-card);
}

.place__next { display: flex; flex-direction: column; gap: 8px; }

.place__next .fact__key { font-size: var(--text-meta); }

.place__next-title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.place__next-when { font-size: 16px; color: var(--text-secondary); }

/* пари ключ-значення */
.kv {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-hairline);
}

.kv__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 16px;
}

.kv__k { color: var(--text-tertiary); }
.kv__v { color: var(--text-primary); text-align: right; }

.place__panel-actions { display: flex; flex-direction: column; gap: 12px; }

.place__panel-btn { padding: 16px 22px; font-size: 16px; }

.place__events,
.place__nearby { display: flex; flex-direction: column; gap: 32px; }

.bigdates { border-top: 1px solid var(--border-hairline); }

.bigdate {
  border-top: 0;
  border-bottom: 1px solid var(--border-hairline);
  padding: 26px 0;
}

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

.bigdate__num { min-width: 130px; font-size: clamp(44px, 6vw, 72px); line-height: .86; }

.bigdate__num--free { color: var(--accent); }

.bigdate__mon {
  margin-left: 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-s);
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.bigdate .price { flex: 0 0 auto; min-height: 32px; }
.bigdate .price--free { padding: 0 12px; font-size: var(--text-micro); }

/* як дістатися */
.place__map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
}

.place__map-img {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--surface-card);
}

.place__map-img > img { width: 100%; height: 100%; object-fit: cover; }
.place__map-img::after { opacity: .22; }

.place__map-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
  max-width: 52ch;
}

.place__map-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.place__map-actions .btn { padding: 16px 24px; font-size: 16px; }

/* картка «поруч» */
.near-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity var(--dur-base) var(--ease);
}

.near-card:hover { color: var(--text-primary); }

.near-card__media { position: relative; overflow: hidden; background: var(--surface-card); }
.near-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.near-card__media::after { opacity: .2; }

.near-card__body { display: flex; flex-direction: column; gap: 8px; }

.near-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -.025em;
}

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

.near-card__walk {
  margin-top: 2px;
  font-size: var(--text-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── сторінка постаті ───────────────────────────────────── */
.person__hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}

.person__id { display: flex; flex-direction: column; gap: 18px; }

.person__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(44px, 9vw, 112px);
  line-height: .88;
  letter-spacing: -.055em;
}

.person__years {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: -.03em;
  color: var(--text-faint);
}

.person__lead {
  max-width: 44ch;
  margin-top: 4px;
  font-size: var(--text-body-l);
  line-height: var(--lh-body);
  color: var(--text-quiet);
}

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

.person__portrait > img { width: 100%; height: 100%; object-fit: cover; }
.person__portrait::after { opacity: .22; }

/* таймлайн років */
.timeline .notes__row { flex-wrap: wrap; gap: 18px; }

.timeline__year {
  flex: 0 0 92px;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-body-m);
  letter-spacing: -.02em;
  color: var(--accent);
}

.timeline .notes__val { flex: 1 1 240px; font-size: var(--text-body-m); line-height: 1.5; color: var(--text-quiet); }

/* маршрут */
.route {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-hairline);
}

.route__row {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-hairline);
}

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

.route__n {
  flex: 0 0 auto;
  min-width: 84px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: .86;
  letter-spacing: -.05em;
  color: var(--plum-700);
}

.route__row:hover .route__n { color: var(--accent); }

.route__body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.route__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.16;
  letter-spacing: -.025em;
}

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

.route__walk {
  flex: 0 0 auto;
  font-size: var(--text-body-s);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── сторінка закладу ───────────────────────────────────── */
.venue__id { display: flex; flex-direction: column; gap: 16px; }

.venue__tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.venue__tags .badge { padding: 7px 13px; font-weight: var(--weight-strong); }

.venue__title { max-width: 14ch; margin-top: 0; }

.venue__open {
  padding: 12px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
}

.venue__open--shut { border-color: var(--border-control); color: var(--text-secondary); }

.venue__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(280px, 100%), 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.venue__main {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  min-width: 0;
}

.venue__intro { display: flex; flex-direction: column; gap: 20px; }

.venue__lead {
  max-width: 58ch;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: var(--lh-body);
  color: var(--text-lead);
  text-wrap: pretty;
}

.venue__body {
  max-width: 62ch;
  font-size: 18px;
  line-height: var(--lh-prose);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.venue__block { display: flex; flex-direction: column; gap: 22px; }

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

.venue__h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: .98;
  letter-spacing: -.035em;
}

.venue__h2--lg { font-size: clamp(28px, 4vw, 48px); line-height: .96; letter-spacing: -.04em; }

/* меню з крапками-лідерами */
.menu { display: flex; flex-direction: column; }

.menu__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(203, 184, 221, .12);
}

.menu__name { flex: 1 1 auto; min-width: 0; font-size: 18px; }

.menu__dots {
  flex: 1 1 auto;
  min-width: 24px;
  border-bottom: 1px dotted var(--border-control);
}

.menu__price {
  flex: 0 0 auto;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--text-quiet);
}

/* події закладу */
.venue__events { display: flex; flex-direction: column; }

.venue-event {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(203, 184, 221, .12);
  transition: opacity var(--dur-base) var(--ease);
}

.venue-event:hover { opacity: .82; color: var(--text-primary); }

.venue-event__date {
  flex: 0 0 auto;
  min-width: 96px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.venue-event__d {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 40px;
  line-height: .85;
  letter-spacing: -.04em;
}

.venue-event__m {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-tertiary);
}

.venue-event__body {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venue-event__title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.venue-event__meta { font-size: 16px; color: var(--text-secondary); }

.venue-event__price { flex: 0 0 auto; align-self: center; }
.venue-event__price.price--free { min-height: 0; padding: 6px 12px; font-size: var(--text-meta); }

/* галерея */
.venue__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 2px;
}

.venue__shot { position: relative; overflow: hidden; background: var(--surface-card); }
.venue__shot > img { width: 100%; height: 100%; object-fit: cover; }
.venue__shot::after { opacity: .18; }

/* панель закладу */
.venue__panel { gap: 18px; padding: clamp(22px, 3vw, 30px); }

.stackfacts { display: flex; flex-direction: column; }

.stackfact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
  border-top: 1px solid rgba(203, 184, 221, .12);
}

.stackfact .fact__key { font-size: var(--text-micro); letter-spacing: .14em; }

.stackfact__v { font-size: var(--text-body-m); line-height: 1.45; }

.panel__link { color: var(--text-quiet); text-decoration: underline; text-underline-offset: 3px; }

.venue__map { min-height: 320px; }
.venue__map-note { max-width: 48ch; font-size: 18px; line-height: 1.65; }
.venue__map-btn { align-self: flex-start; padding: 16px 24px; }

/* ── адаптив ────────────────────────────────────────────── */