/* ShoDe — головна сторінка */

/* ── герой ──────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76vh, 720px);
  overflow: hidden;
}

.hero__photo { position: absolute; inset: 0; }

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

/* Плями поверх фото: soft-light + градієнт до тла сторінки */
.hero__photo::after { opacity: .5; background: var(--plum-700); }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 17, 28, .72) 0%, rgba(22, 17, 28, .35) 38%, var(--bg-page) 96%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero__kicker {
  font-size: var(--text-meta);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  /* Заголовок тягнеться на всю ширину контейнера: точний кегль рахує
     js/index.js під конкретну назву міста (у «Стебника» він більший, у
     «Трускавця» — менший, але рядок завжди один і завжди врівень з краєм).

     Значення нижче — запасний варіант, якщо скрипт не відпрацював:
     дільник 7.7 підібраний під найдовшу назву з запасом на скролбар. */
  font-size: min(
    clamp(56px, 15vw, 200px),
    calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 7.7)
  );
  line-height: .84;
  letter-spacing: -.055em;
  text-wrap: balance;
}

/* Скрипт порахував кегль — переносити вже нема потреби */
.hero__title.is-fitted {
  white-space: nowrap;
  text-wrap: nowrap;
}

.hero__week {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__count {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}

.hero__line {
  max-width: 34ch;
  font-size: var(--text-body-l);
  line-height: 1.55;
}

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

/* ── розкладка головної ─────────────────────────────────── */
/* .home на всю ширину; поля дає .container на кожній секції —
   так секція «Історії та люди» може мати тло на весь екран. */
.front {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9vw, 112px);
  padding-top: clamp(56px, 7vw, 96px);
}

.front > section { scroll-margin-top: 90px; }

.section-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.link-underline {
  font-size: 16px;
  color: var(--text-quiet);
  text-decoration: underline;
  text-underline-offset: 5px;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Горизонтальні стрічки — це списки (ul > li) */
.rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Без scroll-padding прилипання притискає першу картку впритул до краю
     й «зʼїдає» поле, яке ми лишили під ореол. */
  scroll-padding-inline: 16px;
  list-style: none;

  /* Місце під ховер-ореол карток. Без цього підкладка першої й останньої
     картки зрізається краєм скрол-контейнера. Відступ компенсуємо
     відʼємним margin, тож картки лишаються урівень з контейнером,
     а знизу зберігається старий просвіт під скролбар. */
  padding: 16px 16px 32px;
  margin: -16px;
}

.rail > li {
  display: flex;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.rail > li > * { width: 100%; }

/* ── два входи ──────────────────────────────────────────── */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2px;
}

.door {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  padding: clamp(30px, 4vw, 48px);
  transition: background var(--dur-base) var(--ease);
}

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

.door--card { background: var(--surface-card); }
.door--card:hover { background: #251D31; }

.door--plum { background: var(--plum-700); }
.door--plum:hover { background: #382A4E; }

.door__art {
  position: absolute;
  right: -16px;
  bottom: -24px;
  width: 44%;
  height: auto;
  opacity: .3;
  pointer-events: none;
}

.door--plum .door__art { right: -12px; bottom: -20px; opacity: .32; }

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

.door--plum .door__kicker { color: var(--text-secondary); }

.door__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.door__more {
  margin-top: auto;
  font-size: var(--text-body-m);
  color: var(--text-secondary);
}

.door--plum .door__more { color: var(--text-quiet); }

/* ── вибір редакції ─────────────────────────────────────── */
/* Кожна секція головної — flex-колонка зі своїм кроком (з макета):
   вибір редакції / місця / заклади / гості — 30px, афіша — 34px,
   історії — 50px. */
.picks,
.places,
.venues,
.guests,
.cities {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.picks__title,
.agenda__title { max-width: 18ch; text-wrap: balance; }

.picks__rail > li { width: min(84vw, 520px); }

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

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

.pick__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-card);
}

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

.pick__media::after { opacity: .18; }

/* Дата звисає за нижній край фото — правило дизайн-системи */
.pick__date {
  position: absolute;
  left: 18px;
  bottom: -14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  z-index: 1;
}

.pick__date-d {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  /* Тягнеться замість стрибка на 640px: 56px на телефоні → 76px на десктопі */
  font-size: clamp(56px, 6vw, 76px);
  line-height: .8;
  letter-spacing: -.05em;
  text-shadow: 0 4px 24px rgba(10, 6, 16, .7);
}

.pick__date-m {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--text-lead);
  padding-top: 8px;
  text-shadow: 0 2px 12px rgba(10, 6, 16, .8);
}

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

.pick__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -.022em;
  text-wrap: pretty;
}

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

/* ── афіша ──────────────────────────────────────────────── */
.agenda { display: flex; flex-direction: column; gap: 34px; }

/* смуга днів */
.daystrip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: var(--daycell-w);
  min-height: var(--daycell-h);
  padding: 14px 14px 12px;
  background: none;
  border: 1px solid rgba(203, 184, 221, .22);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

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

.day.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.day.is-empty {
  border-color: var(--border-faint);
  color: var(--text-disabled);
  cursor: default;
}

.day.is-empty:hover { border-color: var(--border-faint); }

.day__num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.03em;
}

.day__dow {
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.day__count { font-size: 11px; }

.day--beyond {
  justify-content: space-between;
  min-width: 150px;
  border: 1px dashed var(--accent-dash);
  color: var(--accent);
}

.day--beyond:hover { border-color: var(--accent); background: var(--surface-card); color: var(--accent); }

.day--beyond__title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-body-s);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.day--beyond__note {
  font-size: var(--text-micro);
  line-height: 1.4;
  color: var(--text-secondary);
}

.day--beyond__link { font-size: var(--text-meta); }

/* список подій */
.agenda__list {
  display: flex;
  flex-direction: column;
  gap: 64px;
  min-height: 420px;
}

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

.day-group__label {
  margin-bottom: 18px;
  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);
}

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

.event-row__time {
  min-width: clamp(56px, 6vw, 68px);
  padding-top: 4px;
  font-size: clamp(18px, 1.6vw, 20px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.event-row__body {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-row__title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

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

.event-row__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.event-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  background: var(--surface-badge);
  color: var(--text-quiet);
  font-size: var(--text-meta);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
}

.event-tag:hover { color: var(--accent); }

.event-row__media {
  flex: 0 0 auto;
  position: relative;
  width: clamp(96px, 13vw, 148px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-card);
}

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

.event-row__media::after { opacity: .18; }

/* порожній стан афіші */
.agenda__empty {
  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;
}

.agenda__empty-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);
}

.agenda__empty-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;
}

.agenda__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.agenda__more {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.agenda__more-btn {
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
}

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

/* ── місця ──────────────────────────────────────────────── */
.places__grid,
.venues__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 30px;
}

.place-card { display: flex; flex-direction: column; gap: 16px; transition: opacity var(--dur-base) var(--ease); }
.place-card:hover { color: var(--text-primary); }

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

.place-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-title-l);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.place-card__note {
  font-size: var(--text-body-m);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── заклади ────────────────────────────────────────────── */
.venue-card { display: flex; flex-direction: column; gap: 18px; }

/* Партнерська картка більше не має власної рамки й padding: через них
   її фото було вужчим за сусідні, і ряд «стрибав» по висоті. Партнерство
   і так видно з салатового бейджа типу та кнопки «Меню й бронювання». */

/* Картки в сітках головної тягнуться на всю висоту ряду, щоб фото
   й кнопки стояли в один рівень */
.places__grid > li,
.venues__grid > li,
.cities__grid > li { display: flex; }

.places__grid > li > *,
.venues__grid > li > *,
.cities__grid > li > * { width: 100%; }

/* ── хаб міст ───────────────────────────────────────────── */
.hero--hub .hero__title {
  font-size: clamp(44px, 9vw, 128px);
  text-wrap: balance;
}

.hero__resume { align-self: flex-start; }

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

.pick__city {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 1;
}

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

.venue-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }

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

.venue-card .badge { align-self: flex-start; font-weight: var(--weight-strong); }

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

.venue-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}

.venue-card__btn { padding: 12px 18px; min-height: 0; font-weight: var(--weight-strong); }

/* ── історії та люди ────────────────────────────────────── */
/* Секція на всю ширину: сама секція без обмежень, поля дає .container
   всередині. Раніше тут був calc(50% - 50vw) — і сторінка їхала вбік
   рівно на ширину вертикального скролбара. */
.stories {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--surface-card);
}

.stories__inner { display: flex; flex-direction: column; gap: 50px; }

.stories__rail { scrollbar-width: none; }

.stories__rail > li { width: min(84vw, 400px); }

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



.story__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-page);
}

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

.story__years {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--text-tertiary);
}

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

.story__text {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--text-lead);
  text-wrap: pretty;
}

.story__addr {
  font-size: var(--text-body-s);
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.story__link {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--text-body-m);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ── гості ──────────────────────────────────────────────── */
.guests__head { display: flex; flex-direction: column; gap: 12px; max-width: 40ch; }

.guests__lead { max-width: none; font-size: var(--text-body-m); color: var(--text-secondary); }

/* Стрічка виходить за поле контейнера, але не за край екрана */
.guests__rail {
  gap: 20px;
  /* Стрічка виходить за поле контейнера — плюс ті самі 16px під ореол */
  /* Вправо стрічка доходить рівно до краю екрана — не далі,
     інакше сторінка отримує горизонтальний скрол. */
  padding-right: calc(var(--gutter) + 16px);
  padding-bottom: 28px;
  margin-right: calc(-1 * var(--gutter));
}

.guests__rail > li { width: min(70vw, 260px); }

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

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

.guest__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-card);
}

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

.guest__name {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-title-m);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.guest__years { font-size: 14px; letter-spacing: .1em; color: var(--text-tertiary); }

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

.guest__link { font-size: var(--text-body-s); color: var(--accent); }

/* ── додати на сайт ─────────────────────────────────────── */
.pitch__form {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(36px, 5vw, 72px);
  background: var(--surface-card);
}

.pitch__art {
  position: absolute;
  right: -24px;
  top: -10px;
  width: 210px;
  height: auto;
  opacity: .2;
  pointer-events: none;
}

.pitch__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pitch__title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.pitch__lead {
  max-width: 42ch;
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--text-quiet);
}

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

/* Поля цієї форми — з підкресленням, а не в рамці */
.field--line .field__label {
  font-size: var(--text-meta);
  letter-spacing: .14em;
  color: var(--text-secondary);
}

.input--line {
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(203, 184, 221, .34);
  font-size: var(--text-body-l);
}

.input--line:focus { border-color: var(--accent); }

.input--num { font-variant-numeric: tabular-nums; }

.pitch__textarea { line-height: 1.5; resize: vertical; min-height: 84px; }

.pitch__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.pitch__actions .btn { padding: 16px 28px; font-size: 16px; }

.pitch__sent { display: flex; flex-direction: column; gap: 14px; padding: 26px 0; }

.pitch__sent-title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: var(--text-title-l);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--accent);
}

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

.pitch__again { align-self: flex-start; margin-top: 8px; color: var(--text-secondary); }

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


/* ── клік по всій картці ────────────────────────────────── */
/* Ці три картки не можна просто обгорнути в <a>: усередині вже є
   власні посилання, а вкладені <a> — невалідні. Тому основне
   посилання розтягується псевдоелементом на всю картку, а сусідні
   лишаються над накладкою й далі клікаються окремо.
   Плата за це — текст усередині картки більше не виділяється мишею. */
.venue-card,
.event-row,
.story { position: relative; }

.venue-card__name::after,
.event-row__title::after,
.story__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Рядок афіші ловить клік і в полях контейнера */
.event-row__title::after { inset: 0 calc(-1 * var(--gutter)); }

/* Посилання-сусіди мусять лишитись клікабельними */
.venue-card__actions .btn,
.event-row__tags .event-tag {
  position: relative;
  z-index: 2;
}

/* Ховер рядка афіші — той самий, що й на картках, але без
   вертикального ореолу, щоб не наїжджав на сусідні рядки */
.event-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  z-index: -1;
  background: var(--surface-card);
  outline: 1px solid var(--accent-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

@media (hover: hover) {
  .event-row:hover::before { opacity: 1; }
  .event-row:hover .event-row__title { color: var(--accent); }
  .story:hover .story__name { color: var(--accent); }
}