/* ShoDe — спільні компоненти теми (кнопки, чипи, картки, сітки).
   Ресет винесено в reset.css, адаптив — у style-media.css. */

/* Приховати візуально, лишити для читалок */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Посилання «Перейти до вмісту» мусить показатись, коли на нього
   потрапляє фокус з клавіатури — інакше воно ні для кого не працює. */
a.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip: auto;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-strong);
}

/* ── розкладка ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Секція на всю ширину екрана: сама секція без обмежень,
   всередині — звичайний .container. Ніяких 100vw: vw включає
   ширину скролбара й дає зайвий горизонтальний скрол. */
.bleed { width: 100%; }

.section { padding-block: clamp(56px, 8vw, 104px); }

.section--tight { padding-block: clamp(40px, 5vw, 64px); }

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

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

/* ── заголовок секції ───────────────────────────────────── */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Ліва колонка шапки секції: наднапис + заголовок через 12px — як у макеті.
   Відступ до вмісту дає власний gap секції, а не margin у заголовка. */
.section-head > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-head > .section-note { padding-bottom: 6px; }

/* Без цього flex-елемент не може стати вужчим за найдовше слово
   («Дрогобиччини») і випирає за екран на вузьких пристроях. */
.section-head > * { min-width: 0; }

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

.section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(32px, 5.4vw, 64px);
  line-height: var(--lh-display);
  letter-spacing: -.04em;
}

.section-note {
  font-size: var(--text-body-s);
  line-height: var(--lh-body);
  color: var(--text-tertiary);
  max-width: 34ch;
}

.display-l {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(40px, 8vw, 80px);
  line-height: var(--lh-display);
  letter-spacing: -.045em;
}

.prose {
  max-width: var(--measure-prose);
  font-size: var(--text-body-l);
  line-height: var(--lh-prose);
  color: var(--text-secondary);
}

.prose p + p { margin-top: 1em; }

/* ── кнопки ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 14px 24px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-body-s);
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

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

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

.btn--ghost {
  border: 1px solid var(--border-control);
  color: var(--text-quiet);
}

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

.btn--display { font-family: var(--font-display); }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--plum-700);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ── чипи-фільтри ───────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  min-height: var(--tap-min);
  padding: 10px 16px;
  background: none;
  border: 1px solid var(--border-hairline);
  color: var(--text-quiet);
  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),
              background var(--dur-fast) var(--ease);
}

.chip:hover { border-color: var(--border-control); color: var(--text-primary); }

.chip[aria-pressed="true"],
.chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.chip__count { color: var(--text-tertiary); }

.chip[aria-pressed="true"] .chip__count { color: inherit; }

/* Чип-«таблетка», залитий акцентом (сортування, вкладки) */
.chip--solid[aria-pressed="true"],
.chip--solid.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ── поля вводу ─────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.input {
  min-height: 48px;
  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-m);
  outline: none;
  color-scheme: dark;
  transition: border-color var(--dur-fast) var(--ease);
}

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

.input::placeholder { color: var(--text-disabled); }

/* Рядок пошуку в панелі фільтрів */
.searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid var(--border-control);
}

.searchbox:focus-within { border-color: var(--accent); }

.searchbox__icon {
  flex: 0 0 auto;
  font-size: var(--text-body-s);
  color: var(--text-tertiary);
}

.searchbox__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
}

.searchbox__input:focus { outline: none; }

/* ── картки ─────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  transition: border-color var(--dur-base) var(--ease);
}

/* Ефекти ховера — тільки там, де є чим наводити. На тачі :hover
   спрацьовує від тапу і залишається висіти, доки не тапнеш деінде:
   картка так і стоїть підсвічена вже після переходу назад.
   Це не адаптив, а властивість пристрою, тому блок лишається тут,
   поруч із правилом, а не в style-media.css. */
@media (hover: hover) {
  .card:hover { border-color: var(--border-control); }
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--plum-700);
}

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

/* Фото завжди під soft-light плямою — правило дизайн-системи */
.photo-tint { position: relative; }

.photo-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-tint);
  mix-blend-mode: soft-light;
  opacity: var(--photo-tint-opacity);
  pointer-events: none;
}

.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface-badge);
  color: var(--text-quiet);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
}

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

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

/* ── ціна ───────────────────────────────────────────────── */
.price {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--text-quiet);
}

.price--free {
  padding: 0 13px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-meta);
  font-weight: var(--weight-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── картка події (спільна для каталогів) ───────────────── */
.event-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity var(--dur-base) var(--ease);
}

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

.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-card);
}

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

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

.event-card__date {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(22, 17, 28, .86);
}

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

.event-card__note {
  font-size: var(--text-meta);
  letter-spacing: .06em;
  color: var(--text-quiet);
}

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

.event-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -.022em;
  text-wrap: pretty;
}

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

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

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

.event-card .price { min-height: 32px; color: var(--text-primary); }
.event-card .price--free { padding: 0 12px; font-size: var(--text-micro); }

/* Картки лежать у <li> — елемент списку має тягнутися на всю комірку,
   щоб aspect-ratio й розтяжка працювали як на самій картці. */
.catalog__grid > li,
.places-grid > li,
.venues-grid > li,
.people-grid > li,
.venue__gallery > li { display: flex; }

.catalog__grid > li > *,
.places-grid > li > *,
.venues-grid > li > *,
.people-grid > li > *,
.venue__gallery > li > * { width: 100%; }

/* ── сітки ──────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}

/* min(Npx, 100%) — колонка звужується разом з екраном замість того,
   щоб триматися за Npx і виштовхувати сітку за край. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

/* ── липка панель фактів (внутрішні сторінки) ───────────── */
.sticky-panel {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.facts { display: flex; flex-direction: column; gap: 14px; }

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

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

.fact__val {
  font-size: var(--text-body-m);
  color: var(--text-primary);
}

/* ── порожній стан ──────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px);
  border: 1px dashed var(--border-control);
}

.empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: var(--lh-display);
  letter-spacing: -.03em;
}

.empty__text {
  max-width: 44ch;
  color: var(--text-secondary);
}


/* ── ховер картки ───────────────────────────────────────── */
/* Підкладка малюється псевдоелементом ЗА карткою, тому нічого
   не зсувається: сітка лишається на місці, зʼявляється лише тло
   й тонкий акцентний контур. */
.event-card,
.place-tile,
.venue-tile,
.person-tile,
.near-card,
.place-card,
.venue-card,
.pick,
.story,
.guest {
  position: relative;
  isolation: auto;
}

.event-card::before,
.place-tile::before,
.venue-tile::before,
.person-tile::before,
.near-card::before,
.place-card::before,
.venue-card::before,
.pick::before,
.story::before,
.guest::before {
  content: "";
  position: absolute;
  inset: -16px;
  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-card:hover::before,
  .place-tile:hover::before,
  .venue-tile:hover::before,
  .person-tile:hover::before,
  .near-card:hover::before,
  .place-card:hover::before,
  .venue-card:hover::before,
  .pick:hover::before,
  .story:hover::before,
  .guest:hover::before { opacity: 1; }

  /* Заголовок картки підсвічується акцентом */
  .event-card:hover .event-card__title,
  .place-tile:hover .place-tile__name,
  .venue-tile:hover .venue-tile__name,
  .person-tile:hover .person-tile__name,
  .near-card:hover .near-card__name,
  .place-card:hover .place-card__name,
  .venue-card:hover .venue-card__name,
  .pick:hover .pick__name,
  .guest:hover .guest__name { color: var(--accent); }
}