:root {
  /* Base (light) */
  --bg: #ffffff;
  --card: #f6f7fb;
  --surface: #fafbff;
  --text: #0b1020;
  --muted: #5b6476;
  --line: #e6e8f0;

  /* Brand accents */
  --dk-red: #c8102e;
  --ua-blue: #0057b7;
  --ua-yellow: #ffd200;
  --accent: var(--dk-red);
  --accent-2: var(--ua-blue);
  --accent-warm: var(--ua-yellow);

  /* UI tokens */
  --radius: 12px;
  --space: 12px;
  --shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  --logo-min: 40px;
  --logo-mid: 6vw;
  --logo-max: 64px;

  /* Focus ring (high contrast) */
  --focus-ring: 0 0 0 3px rgba(0, 87, 183, 0.25), 0 0 0 6px rgba(200, 16, 46, 0.25);
}

[data-theme="dark"] {
  --bg: #0b1020;
  --card: #121a2b;
  --surface: #0f172a;
  --text: #e7edf7;
  --muted: #93a4c4;
  --line: rgba(231, 237, 247, 0.12);
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--accent-2);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

button:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -50px;
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  transition: transform 0.2s ease;
  z-index: 10;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(60px);
}

.container {
  width: min(100% - 32px, 98ch);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  --logo-min: 50px;
  --logo-mid: 7.2vw;
  --logo-max: 80px;
}

.catalog {
  scroll-margin-top: 96px;
}

.site-header--scrolled {
  box-shadow: var(--shadow);
}

.header__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  min-height: 34px;
  padding: calc(var(--space) * 0.5) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.brand__logo {
  width: clamp(var(--logo-min), var(--logo-mid), var(--logo-max));
  object-fit: contain;
  max-width: 100%;
  height: auto;
  max-height: clamp(var(--logo-min), var(--logo-mid), var(--logo-max));
  display: block;
  border-radius: 50%;
}

.site-header.is-scrolled .brand__logo {
  width: clamp(var(--logo-min), var(--logo-mid), var(--logo-max));
  max-height: clamp(var(--logo-min), var(--logo-mid), var(--logo-max));
}

.brand__name {
  color: var(--text);
  font-size: 1.1rem;
}

.brand__accent {
  color: var(--accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.img--soft-shadow {
  box-shadow: var(--shadow);
  background: #fff;
}

.site-nav {
  display: none;
  flex-direction: column;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--muted);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--line);
  width: min(100%, 260px);
  position: absolute;
  right: 16px;
  top: calc(100% + 8px);
}

.site-nav a {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-weight: 600;
  background: transparent;
  line-height: 1;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(0, 87, 183, 0.08);
  box-shadow: var(--focus-ring);
}

.site-nav a:focus-visible {
  outline: none;
}

.header-utils {
  display: none;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

.header-search {
  display: none;
}

.header-search input[type='search'] {
  width: min(22vw, 240px);
  min-width: 160px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.header-search input[type='search']:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent-2);
}

.header-search {
  position: relative;
}

.header-search__hint {
  position: absolute;
  inset: 0 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.header-search__hint > span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
}

.header-search:hover input[type='search']:placeholder-shown + .header-search__hint,
.header-search:focus-within input[type='search']:placeholder-shown + .header-search__hint {
  opacity: 1;
}

.header-search:hover input[type='search']:placeholder-shown + .header-search__hint > span,
.header-search:focus-within input[type='search']:placeholder-shown + .header-search__hint > span {
  animation: header-hint-scroll 10s linear infinite;
}

.header-search:hover input[type='search']:placeholder-shown::placeholder,
.header-search:focus-within input[type='search']:placeholder-shown::placeholder {
  color: transparent;
}

@keyframes header-hint-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.lang-switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.has-lang-select .lang-switch {
  display: none;
}

.lang-select {
  appearance: none;
  min-width: 0;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
}

.lang-select:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.lang-switch__button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.lang-switch__button:focus-visible {
  box-shadow: var(--focus-ring);
}

.lang-switch__button[aria-pressed="true"] {
  background: var(--accent-2);
  color: #fff;
  border-color: rgba(0, 87, 183, 0.6);
}

.theme-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-toggle--footer {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.btn--subtle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.btn--subtle:hover {
  background: rgba(15, 27, 60, 0.06);
}

.header__cta {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}

.header__cta:hover {
  background: rgba(200, 16, 46, 0.08);
}

[data-theme="dark"] .theme-toggle {
  background: var(--surface);
  border-color: var(--line);
}

.site-header.is-open .site-nav {
  display: flex;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease;
  content: "";
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  position: relative;
}

.menu-toggle__icon::before {
  top: -6px;
}

.menu-toggle__icon::after {
  top: 4px;
}

.site-header.is-open .menu-toggle__icon {
  background: transparent;
}

.site-header.is-open .menu-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .menu-toggle__icon::after {
  transform: translateY(-4px) rotate(-45deg);
}

.site-nav__admin-link {
  display: inline-flex;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hero {
  padding: calc(var(--space) * 3) 0;
  background: var(--bg);
}

.hero .container {
  display: grid;
  gap: 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent-2);
  margin: 0 0 8px;
}

.hero h1 {
  margin: 0 0 4px;
  font-size: clamp(3.15rem, 7.7vw, 5.04rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
}

.hero-brand-mark {
  display: inline-flex;
  line-height: 0;
  width: 0.535em;
  height: 0.851em;
  transform: translateY(0.02em);
  flex: 0 0 auto;
}

.hero-brand-mark__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-subtitle {
  margin: 0 0 12px;
  font-size: clamp(1.06rem, 2.4vw, 1.34rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}

.hero__accent-bar {
  display: block;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ua-blue), var(--ua-yellow));
  margin: 6px 0 16px;
}

.hero-summary {
  color: var(--muted);
  margin: 0 0 24px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}


.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.hero-community {
  position: fixed;
  left: 6px;
  top: 34%;
  transform: translateY(-50%);
  z-index: 30;
  margin: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
  display: block;
}

.hero-community__alerts {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  min-width: 190px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.hero-community__alerts h3 {
  margin: 0;
  font-size: 0.86rem;
}

.hero-community__alert-link {
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.social-link--alerts {
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .hero-community {
    top: 170px;
    transform: none;
    left: max(10px, calc((100vw - 98ch) / 2 - 72px));
  }
}

.hero-community__socials {
  display: grid;
  gap: 6px;
}

.btn {
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.hero-search {
  display: grid;
  gap: 8px;
}

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

.search {
  background: var(--surface);
  border-radius: 12px;
  padding: 0;
  border: none;
  overflow: visible;
}


.hero-search input[type="search"] {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 10px;
}

.search input[type="search"]:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.search .btn.primary {
  border-radius: 10px;
  border: 1px solid var(--line);
}

.hero-search input[type="search"]::placeholder {
  color: var(--muted);
}

.hero-search__help {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.btn.primary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn.ghost {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}

.btn.secondary {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}

.btn.primary:hover,
.btn.primary:focus-visible {
  background: rgba(200, 16, 46, 0.08);
}

.btn.ghost:hover,
.btn.ghost:focus-visible,
.btn.secondary:hover,
.btn.secondary:focus-visible {
  background: rgba(0, 87, 183, 0.08);
}

.hero-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 282px;
  justify-self: end;
}

.hero-card:hover {
  box-shadow: var(--shadow);
}

/* Trello #65 (final consistency): Hero now follows the same 2:3 + cover
   poster standard Catalog/Recommended/Similar already use (was 3:4 +
   contain -- letterboxed, never cropped, with visible gutters on sources
   that don't happen to be exactly 3:4). Still a CSS background-image
   rather than a real <img> (applyHeroMediaImage in script.js sets these
   inline) -- same visual result (2:3, center-cropped to fill, no
   gutters), smaller change than restructuring the hero to an <img> tag. */
.hero-card__media {
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--surface);
  order: 1;
}

.hero-card__media--placeholder {
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}

.hero-card__header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  align-items: center;
  order: 0;
}

.hero-card__kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 87, 183, 0.12);
  border: 1px solid rgba(0, 87, 183, 0.24);
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-card__body {
  display: none;
}

.status {
  color: var(--accent-2);
  font-weight: 600;
}

.hero-card__title {
  font-size: 1.1rem;
  margin: 0;
}

.hero-card__meta {
  margin: 0;
  color: rgba(248, 250, 252, 0.88);
}

/* Trello #65 (final consistency): the ONE typography rule for the
   canonical top block's date and time on every poster-card surface --
   Catalog, Recommended, Similar Events, and the Live/Nearest hero. Two
   separate block-level elements (not one string relying on text-wrap to
   break at the right point -- see formatCanonicalStart's own comment),
   same font size/weight/line-height/color for both, deliberately no
   price/free here any more (Ivan's final call -- moved to the desktop
   secondary panel and the mobile Quick Preview sheet only). */
.poster-card__when-date,
.poster-card__when-time {
  display: block;
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 600;
}

.section-header {
  margin-bottom: 18px;
}

.section-header h2 {
  margin: 0 0 8px;
}

.section-summary {
  margin: 0;
  color: var(--muted);
}

.about__list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--text);
}

.about__list li {
  margin: 6px 0;
}

.catalog,
.about,
.contact,
.docs,
.legal {
  padding: calc(var(--space) * 3) 0;
}

.contacts__section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}

.contacts__section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.contacts__email {
  display: inline-block;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.contacts__email:hover {
  opacity: 0.75;
}

.contacts__faq article {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.contacts__faq article:first-child {
  border-top: 0;
  padding-top: 0;
}

.contacts__hint {
  margin: 0 0 12px;
  color: var(--muted);
}

.contacts__social-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.contacts__social-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--bg);
  display: grid;
  gap: 10px;
  align-content: start;
}

.contacts__social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  background: var(--surface);
  width: fit-content;
}

.contacts__social-link:hover {
  border-color: var(--text);
}

.contacts__social-handle {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.contacts__social-qr {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.contacts__social-qr--placeholder {
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
}

.contacts__faq h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.contacts__faq p {
  margin: 0;
  color: var(--muted);
}


.docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 24px;
}

.not-found {
  padding: calc(var(--space) * 3) 0;
}

.not-found__search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.not-found__search input {
  flex: 1;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text);
}

.not-found__help {
  margin: 0 0 16px;
  color: var(--muted);
}

.docs-section {
  margin-top: 24px;
}

.docs-section h2 {
  margin: 0 0 8px;
}

.terms-content p {
  margin: 0 0 12px;
}

.terms-content ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.terms-content li {
  margin-bottom: 6px;
}

.filters {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}

.filters__group {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  background: var(--bg);
}

.filters__main {
  display: grid;
  gap: 12px;
}

.filters__row.filters__row--main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: end;
}

.filters__row.filters__row--main .filters__field {
  flex: 1 1 auto;
  min-width: 0;
}

.filters__row.filters__row--main .filters__field select {
  width: 100%;
}

.filters__advanced-toggle {
  height: 38px;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: end;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .filters__row.filters__row--main {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .filters__row.filters__row--main .filters__field {
    flex: 1 1 100%;
  }

  .filters__row.filters__row--main .filters__advanced-toggle {
    margin-left: 0;
  }
}

.filters__advanced-toggle.is-active,
.filters__advanced-toggle[aria-expanded='true'] {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
}

.filters__advanced {
  display: grid;
  gap: 12px;
  align-items: start;
}

.filters__group--tags {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
}

.filters__label {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

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

.filters__tag-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  max-height: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  padding: 4px 0;
}

.filters__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filters__tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filters__tag--selected {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}

.filters__tag[data-tone='warm'].filters__tag--selected {
  background: var(--accent-warm);
  color: #111;
  border-color: var(--accent-warm);
}

.filters__tag:not(.filters__tag--selected):hover,
.filters__tag:not(.filters__tag--selected):focus-visible,
.filters__tag:not(.filters__tag--selected):focus-within {
  outline: none;
  border-color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
}

.filters__tags-more {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 0;
  cursor: pointer;
}

.filters__tags-more:hover,
.filters__tags-more:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filters__row--presets {
  align-items: flex-start;
}

.filters__field {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.filters__field input,
.filters__field select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.95rem;
}

.filters__field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filters__preset-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

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

.filters__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filters__toggle--active,
.filters__toggle[aria-pressed="true"] {
  background: var(--accent-2);
  color: #fff;
  border-color: rgba(0, 87, 183, 0.6);
}

.filters__toggle:focus-visible,
.filters__toggle:focus-within {
  background: rgba(0, 87, 183, 0.08);
  border-color: var(--accent-2);
}

.filters__toggle--active:focus-visible,
.filters__toggle--active:focus-within,
.filters__toggle[aria-pressed="true"]:focus-visible,
.filters__toggle[aria-pressed="true"]:focus-within {
  background: var(--accent-2);
  color: #fff;
  border-color: rgba(0, 87, 183, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .filters__toggle:hover {
    background: rgba(0, 87, 183, 0.08);
    border-color: var(--accent-2);
  }

  .filters__toggle--active:hover,
  .filters__toggle[aria-pressed="true"]:hover {
    background: var(--accent-2);
    color: #fff;
    border-color: rgba(0, 87, 183, 0.6);
  }
}

.filters__toggle:focus-visible,
.filters__toggle:focus-within {
  box-shadow: var(--focus-ring);
}

.filters__reset-inline {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 4px 2px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}

.catalog-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.catalog-pages {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.catalog-page {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.catalog-page.is-active {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
}

.catalog-page:hover,
.catalog-page:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.filters__hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.filters__reset-inline:hover,
.filters__reset-inline:focus-visible {
  text-decoration-color: var(--accent-2);
  color: var(--text);
}

.filters__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filters__toggles {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

body:not(.is-admin) [data-admin-only] {
  display: none !important;
}

body:not(.is-admin) [data-admin-controls] {
  display: none !important;
}

.filters__actions .btn.ghost {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 0;
  border-radius: 0;
}

.filters__actions .btn.ghost:hover,
.filters__actions .btn.ghost:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--accent-2);
  text-underline-offset: 3px;
}

.filters__count {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.catalog-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.event-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: visible;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  min-width: 0;
}

/* Gated to fine-pointer-with-hover only. Ungated, this fired on ANY
   narrow-viewport + real-mouse context (e.g. Chrome DevTools responsive
   mode without a touch-emulating device profile) -- exactly Ivan's manual
   mobile QA environment -- and its transform turned .event-card into the
   containing block for the Quick Preview sheet's position:fixed, trapping
   the sheet inside the card's own box instead of the viewport. */
@media (hover: hover) and (pointer: fine) {
  .event-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
}

.event-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  aspect-ratio: 2 / 3;
  min-height: 0;
}

.event-card__image--placeholder {
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.2));
  aspect-ratio: 2 / 3;
  min-height: 0;
}

.poster-card {
  width: 100%;
}

.poster-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  /* Trello #65 (final consistency): longhand, not the `background`
     shorthand -- .hero-card__media (a .poster-card__media that also sets
     background-size/position/repeat for its CSS background-image) comes
     earlier in this file with equal specificity, so the shorthand here
     was winning the cascade and silently resetting those sub-properties
     back to their initial values (background-size: auto) on every load. */
  background-color: var(--surface);
}

.poster-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.poster-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d4d4d8, #e5e7eb);
}

.poster-card__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  color: inherit;
  text-decoration: none;
}

.poster-card__cover-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* Graduated scrim, not a flat wash: darkest at the top (datetime row)
   and bottom (title/location/actions) where text needs contrast, mostly
   clear through the middle so the poster itself stays visible. A flat
   rgba(7,10,24,0.8) here previously covered the ENTIRE card at all times
   on .poster-card--catalog (see the opacity:1 rule below -- Trello #63
   made this overlay permanently visible instead of hover-only), which
   read as an unwanted dark haze over every poster, including real
   user-uploaded ones, not just synthetic fixtures. */
.poster-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  background: linear-gradient(
    to bottom,
    rgba(7, 10, 24, 0.58) 0%,
    rgba(7, 10, 24, 0.22) 16%,
    rgba(7, 10, 24, 0.05) 38%,
    rgba(7, 10, 24, 0.05) 52%,
    rgba(7, 10, 24, 0.3) 68%,
    rgba(7, 10, 24, 0.78) 100%
  );
  color: #f8fafc;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.poster-card__content {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border-radius: 0;
}

/* Trello #65 (unified overlay): the ONE top-area layout for every
   poster-card surface -- a single column, date/time then price/free
   stacked in source order (no named grid-areas needed: exactly two
   children, always in that order). Previously Catalog didn't use this
   block at all (see the removed .event-card__meta/__datetime), the hero
   had its own near-identical override, and Recommended/Similar had a
   third variant with no price row -- this replaces all three. Allowed to
   wrap naturally on extremely narrow cards rather than truncating or
   forcing single-line via white-space:nowrap. */
.poster-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-items: start;
  margin-bottom: auto;
  /* .save-star sits position:absolute at top:0/right:0 of
     .poster-card__media (a 44px-wide button), outside this block's
     normal flow. Without this reserved space, a long localized date/
     time (now allowed to wrap naturally rather than truncate -- see
     .poster-card__when) or a wide price/range grows this block right
     underneath the star with no awareness of it -- confirmed via
     bounding-box overlap at 320/360/390px once Recommended/Similar/
     Catalog started sharing this exact block (Trello #65 unification).
     40px clears the star's full 44px tap target past
     .poster-card__content's own 12px padding, plus a small gap (same
     value the old catalog-only .event-card__meta used for the same
     reason). */
  padding-right: 40px;
}

.poster-card__title {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.poster-card__meta {
  margin: 0;
  color: rgba(248, 250, 252, 0.88);
  font-size: 0.82rem;
  line-height: 1.3;
}

.poster-card__cta {
  width: fit-content;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  align-self: flex-start;
  pointer-events: auto;
}

.poster-card__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poster-card__bottom--center {
  align-items: center;
  text-align: center;
}

.poster-card__bottom--center .event-card__tags {
  justify-content: center;
}

.poster-card__bottom--center .poster-card__cta {
  align-self: center;
}

.poster-card__content .event-card__link,
.poster-card__content .event-card__cta,
.poster-card__content .btn,
.poster-card__content [role="button"],
.poster-card__content .star-btn,
.poster-card__content .save-star,
.poster-card__content .event-card__preview-btn {
  pointer-events: auto;
}

.event-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 720px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.event-card__body {
  display: none;
}

.event-card__location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card__price {
  font-weight: 600;
  color: #f8fafc;
}

.event-card__price--free {
  background: var(--ua-yellow);
  color: #111;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.event-card__price--paid {
  background: var(--ua-blue);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.event-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
  max-height: calc(1.35em * 2);
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.event-card__link {
  color: #f8fafc;
  text-decoration: none;
}

.event-card__link:hover,
.event-card__link:focus-visible {
  color: #f8fafc;
  text-decoration: underline;
  text-decoration-color: rgba(248, 250, 252, 0.85);
  text-underline-offset: 3px;
}

.event-card__location {
  margin: 0;
  color: rgba(248, 250, 252, 0.88);
}

.event-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-card__actions {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.event-card__tag {
  background: var(--accent-2);
  color: #fff;
  border: 1px solid var(--accent-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.event-card__tag:nth-child(even) {
  background: var(--accent-warm);
  color: #111;
  border-color: var(--accent-warm);
}

/* Scoped to .poster-card__overlay specifically (not just
   .poster-card--catalog/--recommended) -- Trello #63's Quick Preview sheet
   reuses these same price classes on its own light background, and must
   NOT inherit this translucent-on-image treatment or the pill would be
   nearly invisible there. The sheet is a sibling of .poster-card__overlay,
   not a descendant, so this scoping naturally excludes it.
   Trello #65 (final consistency): price is back in the secondary panel
   (a default poster overlay no longer shows it at all, so desktop's only
   remaining way to see it is this hover/focus reveal) -- re-adding the
   same light-on-dark pill contrast a prior #65 pass removed as dead CSS
   when price briefly lived only in the (now also removed) top block. */
.poster-card--catalog .poster-card__overlay .event-card__price--free,
.poster-card--catalog .poster-card__overlay .event-card__price--paid,
.poster-card--recommended .poster-card__overlay .event-card__price--free,
.poster-card--recommended .poster-card__overlay .event-card__price--paid {
  background: rgba(248, 250, 252, 0.14);
  border: 1px solid rgba(248, 250, 252, 0.32);
  color: #f8fafc;
}

.poster-card--catalog .event-card__tag,
.poster-card--catalog .event-card__tag:nth-child(even),
.poster-card--recommended .event-card__tag,
.poster-card--recommended .event-card__tag:nth-child(even) {
  background: rgba(248, 250, 252, 0.14);
  border-color: rgba(248, 250, 252, 0.32);
  color: #f8fafc;
}

/* Trello #63: essential title/date/city/CTA must be visible by default on
   the catalog card, on every viewport -- not hidden behind hover (desktop)
   or dropped entirely (mobile, see the display:none override below).
   Trello #65: .poster-card--recommended (Recommended strip + Similar
   Events, which share this same modifier) gets the identical always-visible
   essential tier -- previously this card's *entire* overlay was hover-only
   on desktop and force-hidden on mobile, meaning mobile users saw no date/
   title/city/CTA at all and desktop users needed a hover to see anything.
   .poster-card--hero is intentionally excluded and keeps its existing
   hover-to-reveal behavior untouched. */
.poster-card--catalog .poster-card__overlay,
.poster-card--recommended .poster-card__overlay {
  opacity: 1;
  visibility: visible;
}

.event-card__tag--pending {
  background: transparent;
  color: var(--text);
  border: 1px dashed var(--accent-2);
}

.event-card__cta {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  box-sizing: border-box;
  align-self: flex-start;
  min-width: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: #14181f;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.28);
  transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

.event-card__cta--details {
  background: rgba(248, 250, 252, 0.94);
  color: #14181f;
  border-color: rgba(15, 23, 42, 0.08);
  font-size: 0.85rem;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .event-card__cta:hover {
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.32);
  }
}

.event-card__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.event-card__cta:active {
  transform: scale(0.97);
}

/* --- Secondary-information panel (Trello #63): price/tag/description/
   organizer. Collapsed by default on every viewport; revealed inline on
   desktop hover/keyboard-focus only. Never the only place this content
   lives -- the mobile Quick Preview sheet below carries the same fields,
   built from the same shared object (modules/event-card-secondary.mjs). */
.event-card__secondary {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 200ms ease, opacity 200ms ease, margin 200ms ease;
}

/* min-width: 768px matches the same breakpoint that hides the "i"
   trigger/sheet below it (see the @media (min-width: 768px) block further
   down) -- the desktop hover/focus-reveal panel and the mobile Quick
   Preview sheet are mutually exclusive by viewport WIDTH, not by pointer
   type alone. (hover: hover) and (pointer: fine) alone is not enough: a
   narrow viewport with a real mouse (Chrome DevTools responsive mode
   without a touch-emulating device, i.e. Ivan's manual QA environment)
   also reports hover:hover/pointer:fine, and would otherwise reveal this
   desktop-only panel underneath the mobile card too. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  /* Bare .poster-card (Trello #65) rather than .poster-card--catalog only
     -- Recommended, Similar Events and Highlights all reuse this same
     secondary panel now, so the hover-reveal has to fire for any surface's
     shell, not just the catalog's. */
  .poster-card:hover .event-card__secondary {
    max-height: 140px;
    opacity: 1;
    margin: 6px 0 8px;
  }
}

/* Bare .poster-card (Trello #65), not .poster-card__overlay specifically --
   Highlights' secondary panel sits under .highlights__overlay rather than
   .poster-card__overlay, so a selector naming that class wouldn't ever
   match it. This is safe at this breakpoint: the "i" trigger and its sheet
   are unconditionally display:none at min-width:768px (see the block
   further down), so there is no mobile sheet content inside the card that
   focus could land on here, on any surface -- the sibling-leak concern
   this rule used to guard against only existed below 768px, where this
   rule never applies anyway.
   min-width: 768px still matters for a second reason: closing the mobile
   Quick Preview returns focus to the "i" button, which lives inside the
   card -- without this width gate, that focus return alone would satisfy
   :focus-within and pop the desktop secondary panel open right after
   every close. */
@media (min-width: 768px) {
  .poster-card:focus-within .event-card__secondary {
    max-height: 140px;
    opacity: 1;
    margin: 6px 0 8px;
  }
}

.event-card__secondary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* Structural only -- exists so .event-card__tag:nth-child(even) can never
   fire here regardless of what else shares the row (see the module's
   comment). No visual styling of its own. */
.event-card__secondary-tag-slot {
  display: contents;
}

.event-card__secondary .event-card__tag {
  font-size: 0.64rem;
  padding: 1px 7px;
}

.event-card__secondary-desc {
  margin: 0 0 4px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__secondary-language {
  margin: 0 0 4px;
  font-size: 0.68rem;
  color: rgba(248, 250, 252, 0.75);
}

.event-card__secondary-organizer {
  margin: 0;
  font-size: 0.68rem;
  color: rgba(248, 250, 252, 0.75);
}

/* --- Mobile Quick Preview trigger ("i"). Visually secondary to the CTA;
   its own 44x44 tap target via padding, matching the save-star technique.
   Hard-hidden at desktop widths below, alongside the sheet itself. */
.event-card__preview-btn {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.4);
  background: rgba(7, 10, 24, 0.32);
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  padding: 0;
}

.event-card__preview-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .event-card__preview-btn:hover {
    background: rgba(7, 10, 24, 0.5);
  }
}

/* --- Mobile Quick Preview sheet. Moved to a direct child of
   document.body while open (see modules/event-card-quick-preview.mjs), so
   position:fixed always resolves against the real viewport regardless of
   any card ancestor's transform/overflow/stacking context. z-index is set
   above every other fixed/sticky page-chrome layer (.site-header: 50,
   .modal: 50, .company-modal: 80, the save-toast: 1200) so page chrome
   can never paint over an open sheet. */
.event-card__sheet[hidden] {
  display: none;
}

/* Explicit height, not just inset:0's implicit box-model sizing:
   mobile browsers collapse/expand their own UI chrome (URL bar, bottom
   controls) as the user scrolls or opens a modal, and a fixed-position
   overlay's containing block does not reliably re-measure in sync with
   that transition across engines -- the well-documented cause of a
   full-screen fixed overlay leaving a gap (showing the real page
   background underneath) once the chrome finishes hiding and more of
   the screen becomes available than the overlay was sized for. 100vh
   is the universal baseline (present at layout time even without
   dvh/svh support); 100dvh is the dynamic viewport height unit made
   for exactly this, recalculating as chrome shows/hides; the custom
   property is the most robust layer on top, set from
   window.visualViewport.height in modules/event-card-quick-preview.mjs
   (visualViewport reports the actual current visible area directly,
   independent of any engine-specific containing-block quirk) and kept
   in sync via its own resize/scroll events for as long as the sheet is
   open. Each is a real override in browsers that support it; the var()
   fallback keeps this correct even where the JS hasn't run yet. */
.event-card__sheet {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--wod-quick-preview-vvh, 100dvh);
  z-index: 2000;
}

.event-card__sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
  /* Defense in depth alongside the JS background touchmove/wheel lock
     (modules/event-card-quick-preview.mjs) -- the backdrop has nothing
     of its own to scroll, but this rules out any residual overscroll/
     pull-to-refresh gesture starting from a touch here. */
  touch-action: none;
}

.event-card__sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  max-height: calc(var(--wod-quick-preview-vvh, 100dvh) * 0.85);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  /* No top padding: the handle is its own full-bleed chrome zone (below)
     that owns the panel's rounded top corners instead. */
  padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(2, 6, 23, 0.3);
  box-sizing: border-box;
  /* Progressive enhancement only, not the sole lock -- iOS Chrome/
     WebKit was observed still scroll-chaining into the background
     catalog on a non-scrollable (or boundary-exhausted) panel even with
     this in place, which is why panelCanScrollInDirection in
     modules/event-card-quick-preview.mjs (the edge-aware background
     touchmove/wheel listeners) is the mechanism that actually works
     regardless of browser support here; this rule just helps on
     browsers that honor it. */
  overscroll-behavior: contain;
}

/* A small, dedicated sheet-chrome strip -- full-bleed to the panel's own
   edges/rounded top corners, same background as the panel so it reads
   as part of it. The visible grabber is a ::after pseudo-element sized
   independently of this strip's own height, and the gap below it is a
   real margin-bottom (not collapsible: padding/height on this element,
   not a second adjacent margin) so the poster can never end up flush
   against it again -- that adjacency (this element's old margin-bottom
   directly meeting the poster's old negative margin-top) is exactly
   what collapsed the two together to a 0px gap before.
   height 18px + margin-bottom 6px = 24px total chrome, down from the
   previous 30+10=40px (a ~40% reduction) -- still a comfortable touch
   target since it spans the full sheet width, just not visually airy.
   This is also the drag-to-dismiss zone (modules/event-card-quick-
   preview.mjs): touch-action: none hands the whole gesture to our own
   touchmove handler instead of letting the browser's native scroll/
   rubber-band handling fight with it. width: 100% + explicit centering
   on both axes keeps the grabber centered regardless of content. */
.event-card__sheet-handle {
  /* Matches .event-card__sheet-poster's own width formula below --
     width: 100% here would resolve against the panel's already-narrowed
     content box (100% - 36px of padding), then the -18px side margins
     would shift the left edge into place but fall 36px short on the
     right, silently pulling the whole element (and the centered ::after
     grabber inside it) 18px left of true center. */
  width: calc(100% + 36px);
  height: 18px;
  margin: 0 -18px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  touch-action: none;
}

.event-card__sheet-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

/* Poster preview area (Trello #63 poster-first follow-up): sits below
   the handle's own chrome zone (real, non-collapsing spacing above it
   -- see that rule's comment), full-bleed to the panel's side edges
   only, not the top. A real poster now dominates the sheet rather than
   sitting in a small fixed 220px box: the container has no height of
   its own, so it always wraps tightly to whatever height the image
   below actually renders at -- no vertical letterboxing, ever, for any
   ratio. Horizontal gutters only appear when a portrait image's own
   aspect ratio makes it narrower than the panel once height-capped,
   which is expected and intentional (see the img rule). background is
   a flat, theme-aware token rather than a hardcoded gradient -- subtle
   framing when gutters do appear, never the visual focus itself. */
.event-card__sheet-poster {
  position: relative;
  margin: 0 -18px 14px;
  width: calc(100% + 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
}

/* No explicit width/height set together -- only max-width/max-height,
   with width/height both auto -- is what lets the browser pick the
   largest size satisfying both constraints while preserving the
   image's own intrinsic aspect ratio natively (standard replaced-
   element sizing, no JS/aspect-ratio math needed, and no distortion
   possible since only maximums are constrained). This single rule
   handles every case without per-orientation branching:
   - portrait (e.g. 2:3): max-height binds first, so the image renders
     near its full available height and is narrower than the panel,
     centered with modest side gutters -- much more of the artwork
     visible than the old fixed-220px/62%-width box ever allowed.
   - landscape: max-width binds first (full panel width), and the
     image is only as tall as its own ratio requires -- never
     artificially stretched taller.
   - square/other: whichever constraint binds first, same rule.
   max-height is expressed as ~50% of the sheet's own visible height
   (same vh -> dvh -> visualViewport-custom-property fallback chain
   used elsewhere in this sheet), roughly doubling the old box's ~26%
   share of a typical mobile viewport while still leaving room below
   for title/actions without an oversized initial scroll. */
.event-card__sheet-poster img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50vh;
  max-height: 50dvh;
  max-height: calc(var(--wod-quick-preview-vvh, 100dvh) * 0.5);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.25);
}

/* No-image placeholder stays compact and fixed-height (there is no
   image ratio to derive a size from) so a missing poster never
   allocates the same dominant space a real one does -- title/actions
   move up naturally right behind it. */
.event-card__sheet-poster--empty {
  height: 120px;
  color: var(--muted);
}

.event-card__sheet-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

/* Floats over the poster (top-right) instead of sitting in a separate
   header row -- the translucent dark chip keeps it legible against any
   poster color, light or dark, matching the same technique the card's
   own save-star/"i" buttons already use for the same reason. */
.event-card__sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.4);
  background: rgba(7, 10, 24, 0.45);
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.event-card__sheet-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.6);
}

.event-card__sheet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Sheet-scoped only -- .event-card__price/--free/--paid and .event-card__tag
   stay exactly as they are everywhere else (catalog card, desktop hover
   panel); this is not a global redesign of those classes. The old
   solid --ua-yellow/--ua-blue price fill and solid --accent-2 tag fill
   read as loud/dated next to the sheet's new lighter poster+CTA
   direction, so both are restyled here to a restrained pill: existing
   theme tokens only (var(--surface)/var(--line)/var(--text)/
   var(--accent-2)), so light/dark both fall out for free via the
   tokens' own [data-theme="dark"] overrides -- no new dark-mode rule
   needed. color-mix keeps the tag's tint derived from the same accent
   color already used elsewhere, just diluted, rather than inventing a
   new one. */
.event-card__sheet-row .event-card__price--free,
.event-card__sheet-row .event-card__price--paid {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}

/* Toned down further (Ivan: still read as "too blue" at the first pass'
   14%/var(--accent-2)/35% mix): lower tint percentage, and -- the bigger
   contributor to how loud it read -- the text itself is no longer the
   full-saturation brand blue but a muted blend toward var(--text), so
   it's a soft accent rather than a colored block with saturated text.
   Still visually distinct from the neutral price pill above (that one
   carries no accent color at all) and still clearly a tag. */
.event-card__sheet-row .event-card__tag {
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface));
  color: color-mix(in srgb, var(--accent-2) 55%, var(--text));
  border: 1px solid color-mix(in srgb, var(--accent-2) 20%, var(--line));
  font-weight: 600;
}

.event-card__sheet-desc {
  font-size: 0.85rem;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__sheet-language {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.event-card__sheet-organizer {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 16px;
}

.event-card__sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card__sheet-actions .event-card__cta {
  width: 100%;
}

.event-card__sheet-secondary-action {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-2);
  padding: 8px;
}

/* Body scroll lock while a sheet is open (toggled by
   modules/event-card-quick-preview.mjs). This used to also set
   position: fixed (plus a negated `top` offset) to stop touch-driven
   scrolling on iOS Safari, which overflow: hidden alone doesn't
   reliably do there. Real iPhone 13 Pro / Chrome-on-iOS OPEN TRACE
   evidence showed that position: fixed switch itself collapsing
   window.innerHeight/visualViewport.height from an already-expanded,
   chrome-hidden value down to the small/layout-viewport value the
   instant the sheet opened -- with the browser chrome never visually
   reappearing -- which is what the blank strip at the bottom of the
   sheet actually was. position: fixed is gone for good: overflow:
   hidden stays as a harmless baseline (it propagates to the viewport
   per the HTML spec, since <html> has no overflow of its own, covering
   trackpad/wheel scrolling in most browsers), and the real lock across
   input types is the pair of non-passive touchmove/wheel listeners in
   the JS module, scoped to skip anything targeting
   .event-card__sheet-panel so the sheet's own content stays scrollable. */
body.event-card-sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .event-card__secondary,
  .event-card__preview-btn,
  .event-card__cta,
  .poster-card__img,
  .event-card__sheet-panel {
    transition: none !important;
  }
}

/* The "i" control and its sheet are mobile-only -- desktop uses the
   hover/focus-within secondary panel above instead. Enforced here so this
   holds regardless of markup, matching the approved Design's
   "i must be mobile-only" requirement. */
@media (min-width: 768px) {
  .event-card__preview-btn,
  .event-card__sheet {
    display: none !important;
  }
}

.event-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ua-yellow);
  color: #1a1a1a;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}

.event-card__status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.event-card--archived {
  opacity: 0.85;
}

.event-card__audience {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.event-card__audience-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
}

.highlights {
  padding: calc(var(--space) * 2) 0;
}

.highlights__header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.highlights__stage {
  position: relative;
  width: 100%;
}

.highlights__controls {
  display: inline-flex;
  gap: 8px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.highlights__button {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11, 16, 32, 0.12);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(11, 16, 32, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.highlights__button[data-action="next"] {
  margin-right: 0;
}


.highlights__button:hover,
.highlights__button:focus-visible {
  background: var(--surface);
  border-color: rgba(11, 16, 32, 0.2);
  box-shadow: 0 10px 24px rgba(11, 16, 32, 0.18);
}

.highlights__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 338px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  padding-inline: 32px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.highlights__track--empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  overflow: hidden;
}

.highlights__track::-webkit-scrollbar {
  display: none;
}

.highlights__track:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.highlights__track--recommended {
  display: block;
  overflow: hidden;
  padding-inline: 0;
}

.highlights__card {
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
  border: 0.6px solid var(--line);
  display: grid;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.highlights__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  min-height: 0;
}

.event-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.event-image-frame--recommended {
  width: 100%;
  height: 182px;
  background: var(--surface);
}

.event-image-frame__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.08);
  opacity: 0.7;
}

.event-image-frame__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.32));
}

.event-image-frame__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.event-image-frame--placeholder .event-image-frame__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}

.highlights__card:hover {
  box-shadow: var(--shadow);
}

.recommended-strip {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.recommended-strip::-webkit-scrollbar {
  display: none;
}

.recommended-strip__track {
  display: flex;
  gap: 12px;
}

.recommended-strip--marquee {
  overflow: hidden;
}

.recommended-strip__track--marquee {
  width: max-content;
  will-change: transform;
  animation: recommended-marquee var(--recommended-marquee-duration, 24s) linear infinite;
}

.recommended-strip--marquee:hover .recommended-strip__track--marquee,
.recommended-strip--marquee:focus-within .recommended-strip__track--marquee,
.recommended-strip--marquee.is-paused .recommended-strip__track--marquee {
  animation-play-state: paused;
}

@keyframes recommended-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--recommended-marquee-distance, 50%)));
  }
}

.highlights__card--recommended {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  width: min(240px, calc((100vw - 96px) / 3));
  flex: 0 0 min(240px, calc((100vw - 96px) / 3));
}

.recommended-poster {
  width: 100%;
}

.recommended-poster__detail-link {
  position: absolute;
  inset: 0;
}

.recommended-poster__overlay {
  position: absolute;
  inset: 0;
}

.recommended-poster__overlay-content {
  gap: 8px;
}

.recommended-poster__bottom {
  gap: 8px;
}

/* Trello #63: visible chrome shrunk to a 28px circle with a 16px glyph
   (the inner <span> from renderStarButton) so the star reads as discreet
   against the poster; the <button> itself stays a borderless 44x44 tap
   target around it -- touch-target size is unchanged, only the visible
   size is. Saved state no longer fills a large yellow disc: the chrome
   stays the same dark circle, only the glyph turns a muted gold plus a
   thin gold-tinted ring, so it's still clearly distinguishable without
   dominating the poster. */
.poster-card__media > .save-star {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
}

.poster-card__media > .save-star span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: #f8fafc;
  border: 1px solid rgba(248, 250, 252, 0.36);
  background: rgba(7, 10, 24, 0.4);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.poster-card__media > .save-star:focus-visible {
  outline: none;
  box-shadow: none;
}

.poster-card__media > .save-star:focus-visible span {
  box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .poster-card__media > .save-star:hover span {
    background: rgba(7, 10, 24, 0.6);
    transform: scale(1.08);
  }
}

.poster-card__media > .save-star.is-saved span {
  color: #ffd659;
  background: rgba(7, 10, 24, 0.4);
  border-color: rgba(255, 214, 89, 0.55);
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .poster-card__media > .save-star.is-saved:hover span {
    background: rgba(7, 10, 24, 0.6);
  }
}

.recommended-poster__title {
  font-size: 1rem;
}

.recommended-poster__meta {
  font-size: 0.82rem;
}

.recommended-poster__cta {
  font-size: 0.8rem;
}

@media (max-width: 767px) {
  .hero-brand-mark {
    width: 0.53em;
    height: 0.835em;
    transform: translateY(0.01em);
  }

  .hero-actions {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hero-actions > .btn.primary {
    flex: 0 0 auto;
  }

  .hero-community {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    padding: 7px 6px;
    margin-left: auto;
    z-index: 12;
  }

  .hero-community__alerts {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 10px);
    bottom: auto;
    transform: none;
    z-index: 20;
    min-width: min(220px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .hero-community__socials {
    gap: 5px;
  }

  .hero-card {
    max-width: min(75vw, 265px);
    justify-self: center;
    margin-inline: auto;
  }

  .poster-card__overlay {
    display: none;
  }

  /* Trello #63: catalog cards keep their overlay on mobile -- this is the
     fix for the confirmed bug where all catalog metadata (title, date,
     city, CTA) was previously invisible below 768px. Trello #65 extends
     the same fix to .poster-card--recommended (Recommended strip + Similar
     Events): their overlay was previously display:none on mobile too, so
     these cards showed only a bare poster there with no date/title/city/
     CTA and no way to reach them short of navigating away.
     .poster-card--hero gets the same mobile fix as of the #65 mobile-
     polish pass, specifically so its new "i" Quick Preview trigger (which
     lives inside this overlay, alongside the existing CTA) is reachable
     on mobile at all -- desktop hero hover-reveal is untouched (see the
     opacity/visibility override below, scoped to this same mobile query
     only, never added to the unconditional catalog/recommended rule
     further up this file). */
  .poster-card--catalog .poster-card__overlay,
  .poster-card--recommended .poster-card__overlay,
  .poster-card--hero .poster-card__overlay {
    display: flex;
  }

  /* .poster-card--catalog/--recommended already get opacity:1/visibility:
     visible unconditionally (see the rule earlier in this file) -- that
     rule intentionally excludes .poster-card--hero so its desktop hover-
     reveal design stays exactly as it was. Mobile has no hover though, so
     without this mobile-only equivalent the overlay above would be
     display:flex yet still opacity:0/visibility:hidden from the
     unconditional base rule, leaving it spatially present but invisible. */
  .poster-card--hero .poster-card__overlay {
    opacity: 1;
    visibility: visible;
  }

  .recommended-strip {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }

  .recommended-strip__track {
    gap: 10px;
  }

  .highlights__card--recommended {
    width: calc((100% - 10px) / 2);
    flex-basis: calc((100% - 10px) / 2);
    min-width: calc((100% - 10px) / 2);
    scroll-snap-align: start;
  }
}

@media (min-width: 1280px) {
  .hero-card {
    max-width: 320px;
  }
}

@media (min-width: 768px) {
  .recommended-strip {
    overflow-x: auto;
  }

  .poster-card:hover .poster-card__overlay,
  .poster-card:focus-within .poster-card__overlay,
  .poster-card__cover-link:focus + .poster-card__overlay,
  .poster-card__cover-link:focus-visible + .poster-card__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }
}

.highlights__card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlights__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  background: var(--surface);
  display: block;
}

.highlights__image--placeholder {
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}

.highlights__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 12px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 30%, rgba(2, 6, 23, 0.65) 100%);
}

.highlights__overlay-content {
  display: grid;
  gap: 6px;
  color: #fff;
}

.highlights__overlay h3 {
  color: inherit;
}

.highlights__title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(2, 6, 23, 0.5);
}

.highlights__title-wrap h3 {
  position: relative;
  z-index: 1;
}

.highlights__title-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.35);
  z-index: 0;
}

@supports (backdrop-filter: blur(6px)) {
  .highlights__title-wrap::before {
    background: rgba(2, 6, 23, 0.2);
    backdrop-filter: blur(6px);
  }
}

.highlights__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dk-red);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  width: max-content;
}

.highlights__city {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ua-blue);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  width: max-content;
}

.highlights__empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px;
  max-width: 420px;
  text-align: center;
}

.highlights__empty-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text);
}

.highlights__empty-text {
  margin: 0;
}

.load-more {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.load-more__button {
  min-width: 180px;
}

.site-footer {
  padding: calc(var(--space) * 2) 0;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.footer__row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer__row p {
  margin: 0;
}

.footer__links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.footer__help {
  color: var(--accent-2);
  font-weight: 600;
}

.footer__help:hover,
.footer__help:focus-visible {
  color: var(--accent);
}

.footer__socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  flex-wrap: nowrap;
  margin-left: auto;
}

@media (max-width: 720px) {
  .footer__row {
    flex-wrap: wrap;
  }

  .footer__socials {
    margin-left: 0;
  }
}

.footer__socials-label {
  font-weight: 600;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-link:focus-visible {
  border-color: var(--accent-2);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

.social-icon {
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}

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

.event-page .site-header {
  position: sticky;
}

.event-detail {
  padding: clamp(2rem, 5vw, 3.4rem) 0;
  background:
    radial-gradient(1000px 420px at 100% -10%, rgba(0, 87, 183, 0.08), transparent 58%),
    radial-gradient(900px 360px at -10% 20%, rgba(255, 193, 7, 0.08), transparent 56%);
}

.organizer-detail {
  padding: calc(var(--space) * 3) 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  font-weight: 600;
}

.event-layout {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}

.event-article {
  background: var(--card);
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.event-article:hover {
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.09);
}

.event-article h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 2.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.event-article__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.event-article__title-row h1 {
  margin-bottom: 0;
}

.event-article__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-star {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.save-star:hover,
.save-star:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
  outline: none;
}

.save-star.is-saved {
  color: #ffc93a;
  border-color: rgba(255, 201, 58, 0.9);
  background: rgba(240, 166, 0, 0.24);
}

.save-star.is-saved span {
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 201, 58, 0.4);
}

.save-star--detail {
  margin-top: 4px;
  flex: 0 0 auto;
}

.save-star--reminder {
  text-decoration: none;
}

.save-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(11, 16, 32, 0.92);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.save-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.event-article__meta {
  margin: 12px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.3;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.event-calendar {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.event-calendar__toggle {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  width: 100%;
  justify-content: center;
  background: var(--surface);
}

.event-calendar__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 10;
}

.event-share {
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.event-company {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.event-company__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.event-company__button {
  width: 100%;
  justify-content: center;
}

.event-share__toggle {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  width: 100%;
  justify-content: center;
  background: var(--surface);
}

.event-share__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 10;
}

.event-calendar__option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
}

.event-calendar__option:hover,
.event-calendar__option:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
  outline: none;
}

.event-share__option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
}

.event-share__option:hover,
.event-share__option:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(0, 87, 183, 0.08);
  outline: none;
}

.event-admin {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.event-admin__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(240, 166, 0, 0.15);
  color: #a86b00;
  font-weight: 600;
  font-size: 0.85rem;
  width: fit-content;
}

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

.event-admin__recommended {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.event-admin__field {
  display: grid;
  gap: 4px;
}

.event-admin__field select,
.event-admin__field input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--text);
}

.event-admin__recommended-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-admin__recommended-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.event-admin__recommended-status[data-state="error"] {
  color: #b91c1c;
}

.event-admin__slots {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.event-admin__slots h3 {
  margin: 0;
  font-size: 0.95rem;
}

.event-admin__slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.event-admin__slot-row:last-child {
  border-bottom: 0;
}

.company-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 80;
}

.company-modal[hidden] {
  display: none;
}

.company-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, 0.45);
}

.company-modal__panel {
  position: relative;
  width: min(560px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.company-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.company-modal__header h3 {
  margin: 0;
  font-size: 1rem;
}

.company-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}

.company-modal__message {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  white-space: pre-line;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.company-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-admin__slot-actions {
  display: flex;
  gap: 6px;
}

.event-banner {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}

.event-banner p {
  margin: 0;
}

.event-hero {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  margin: 18px 0 8px;
  display: block;
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}

.event-article__location-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.event-article__location-link:hover {
  color: var(--accent-2);
}

.event-article__section {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
}

.event-article__section h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

[data-event-description] {
  white-space: pre-line;
}

.event-description__toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.event-description__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.similar-events {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.similar-events__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.similar-events__header h2 {
  margin-bottom: 0;
}

.similar-events__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.similar-events__control {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
}

.similar-events__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 240px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Trello #65 mobile polish: hide the native scrollbar, matching
     .recommended-strip/.highlights__track -- touch swipe, trackpad
     scroll, and the existing prev/next carousel buttons all keep working
     since overflow-x: auto itself is untouched, only its visible chrome
     is hidden. */
  scrollbar-width: none;
}

.similar-events__track::-webkit-scrollbar {
  display: none;
}

.similar-events__card {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.similar-events__poster {
  width: 100%;
}

.similar-events__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.similar-events__image--placeholder {
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
}

.event-map {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.event-article__location {
  margin: 0;
  color: var(--muted);
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-tag {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text);
  border: 1px solid rgba(15, 23, 42, 0.14);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.event-tag:nth-child(even) {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text);
}

.event-tag--pending {
  background: transparent;
  color: var(--text);
  border: 1px dashed var(--accent-2);
}

.tag-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 60;
}

.tag-modal[hidden] {
  display: none;
}

.tag-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, 0.4);
}

.tag-modal__panel {
  position: relative;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  width: min(640px, 92vw);
  max-height: min(90vh, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  z-index: 1;
  overflow: hidden;
}

.tag-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.tag-modal__header h3 {
  margin: 0;
}

.tag-modal__close {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 1.1rem;
  cursor: pointer;
}

.tag-modal__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1 1 auto;
  align-content: flex-start;
  padding: 4px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.tag-modal__list .filters__tag {
  max-width: 100%;
  min-width: 0;
}

.tag-modal__list .filters__tag span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.tag-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.organizer {
  display: grid;
  gap: 12px;
  background: rgba(248, 250, 252, 0.96);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--line);
}

.organizer:hover {
  box-shadow: var(--shadow);
}

.organizer__name {
  font-weight: 600;
  margin: 0 0 4px;
}

.organizer__meta {
  margin: 0;
  color: var(--muted);
}

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

.organizer__contacts a {
  color: var(--accent-2);
  font-weight: 600;
}

.event-sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.event-sidebar__card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.event-sidebar .event-article__section {
  margin-top: 0;
}

.event-sidebar__card:hover {
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.event-sidebar__price {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 3.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
}

.event-sidebar__note {
  margin: 0 0 16px;
  color: var(--muted);
}

.event-sidebar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.02);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--line);
  width: 100%;
}

.event-sidebar__cta:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  border-color: rgba(0, 87, 183, 0.38);
  color: var(--accent-2);
}

.event-sidebar__cta:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 4px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.event-sidebar__cta--ticket {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(220, 38, 38, 0.9);
  color: #991b1b;
  font-weight: 700;
}

.event-sidebar__cta--ticket:hover {
  border-color: #dc2626;
  color: #7f1d1d;
  background: rgba(254, 226, 226, 0.98);
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.26);
}

.event-sidebar__cta--ticket:focus-visible {
  outline: 3px solid rgba(220, 38, 38, 0.62);
  border-color: #dc2626;
  color: #7f1d1d;
  background: rgba(254, 226, 226, 0.98);
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
}

.organizer-hero {
  display: grid;
  gap: 16px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--line);
  margin-bottom: 24px;
}

.organizer-hero:hover {
  box-shadow: var(--shadow);
}

.organizer-hero__logo {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
}

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

.organizer-hero__heading h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.organizer-hero__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.2);
  color: var(--accent-2);
  font-size: 0.8rem;
  font-weight: 600;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
  background: transparent;
}

.organizer-hero__description {
  margin: 0;
  color: var(--muted);
}

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

.organizer-hero__contacts a {
  color: var(--accent-2);
  font-weight: 600;
}

.organizer-events {
  padding-bottom: calc(var(--space) * 2);
}

.dashboard {
  padding: calc(var(--space) * 3) 0;
}

.admin-auth {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.admin-auth__status {
  margin: 0;
  color: var(--muted);
}

.admin-auth__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-weight: 600;
}

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

.moderation-list--compact {
  gap: 12px;
}

.moderation-card__history {
  margin-top: 8px;
  color: var(--muted);
}

.moderation-card__history summary {
  cursor: pointer;
  font-weight: 600;
}

.moderation-card__history-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.moderation-card--audit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.moderation-card--audit .moderation-card__meta h3 {
  margin-bottom: 4px;
}

body[data-admin-auth="checking"] [data-admin-protected],
body[data-admin-auth="denied"] [data-admin-protected] {
  display: none;
}

.admin-login {
  padding: calc(var(--space) * 3) 0;
}

.admin-login__card {
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.admin-login__summary {
  margin: 0;
  color: var(--muted);
}

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

.admin-login__status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
}

.admin-login__back {
  color: var(--accent-2);
  font-weight: 600;
}

.dashboard__header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dashboard__header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
}

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

.admin-market-context {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-market-context__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.admin-market-context__select {
  appearance: none;
  min-width: 0;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-market-context__select:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

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

.dashboard__add-event-help {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 220px;
}

.dashboard__add-event [aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.dashboard-tabs__link {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}

.dashboard-tabs__link[aria-current="page"] {
  background: var(--accent);
  border-color: transparent;
}

.dashboard__section {
  margin-bottom: 28px;
}

.dashboard-table {
  display: grid;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}

.dashboard-table:hover {
  box-shadow: var(--shadow);
}

.dashboard-table__row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.dashboard-table__row:last-child {
  border-bottom: none;
}

.dashboard-table__row--head {
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
}

.dashboard-table__row:nth-child(even) {
  background: var(--surface);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-pill--published {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}

.status-pill--pending {
  background: transparent;
  color: #7a5d00;
  border: 1px solid var(--accent-warm);
}

.status-pill--draft {
  background: transparent;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.status-pill--active {
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}

.status-pill--hidden {
  background: transparent;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.status-pill--archived {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

.verification {
  display: grid;
  gap: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--line);
}

.verification__status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
}

.verification__status.is-error {
  color: var(--accent);
}

.verification__option {
  display: grid;
  gap: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}

.verification__option h3 {
  margin: 0;
  font-size: 1.05rem;
}

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

.verification__code {
  display: grid;
  gap: 10px;
}

.verification__pending {
  margin: 0;
  color: var(--accent-2);
  font-weight: 600;
}

.verification__note {
  margin: 0;
  color: var(--muted);
}

.form-note--warning {
  margin: 12px 0 0;
  color: var(--accent);
  font-weight: 600;
}

.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 16px 0;
}

.info-banner p {
  margin: 0;
  color: var(--text);
}

.empty-state {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.empty-state[hidden] {
  display: none;
}

.empty-state__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--accent-2);
  margin: 0 0 8px;
}

.empty-state h2 {
  margin: 0 0 6px;
}

.empty-state__summary {
  margin: 0;
  color: var(--muted);
}

.empty-state__promo {
  display: grid;
  gap: 10px;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.stepper {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  color: var(--muted);
}

.stepper__item {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.stepper__item[aria-current="step"] {
  color: var(--text);
  background: rgba(0, 87, 183, 0.12);
  border-color: rgba(0, 87, 183, 0.4);
}

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

.form-step {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--line);
}

.form-step h2 {
  margin: 0 0 16px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-field__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-field__action {
  font-size: 0.8rem;
}

.tags-input {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}

.tags-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags-input__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--surface);
}

.tags-input__chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.75rem;
}

.tags-input__pending {
  color: var(--muted);
  font-size: 0.7rem;
}

.tags-input__field {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  padding: 2px 0;
}

.pending {
  position: relative;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

.form-field input:disabled,
.form-field textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-field small {
  display: block;
  min-height: 1.2em;
  color: var(--muted);
}

.required {
  color: #f97316;
  margin-left: 4px;
}

.form-fieldset {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.form-fieldset legend {
  padding: 0 6px;
  color: var(--text);
  font-weight: 600;
}

.form-image-preview {
  margin-top: 12px;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  background: var(--surface);
}

.form-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.preview {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  border: 1px dashed var(--line);
  margin-bottom: 16px;
}

.preview__image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  margin-bottom: 12px;
  background: var(--surface);
}

.preview__list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.preview__list div {
  display: grid;
  gap: 4px;
}

.preview__list dt {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preview__list dd {
  margin: 0;
}

.preview--detail {
  padding: 20px;
}

.preview-layout {
  gap: 24px;
}

.preview-article {
  background: transparent;
  box-shadow: none;
  padding: 0 8px;
}

.preview-sidebar .event-sidebar__card {
  position: sticky;
  top: 96px;
}

.moderation-list {
  display: grid;
  gap: 16px;
}

.moderation__more {
  margin-top: 12px;
  align-self: start;
}

.moderation-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
}

.moderation-card:hover {
  box-shadow: var(--shadow);
}

.moderation-card__meta h3 {
  margin: 0 0 6px;
}

.moderation-card__title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.moderation-card__title-link:hover,
.moderation-card__title-link:focus-visible {
  border-bottom-color: currentColor;
}

.moderation-card__meta p {
  margin: 0;
  color: var(--muted);
}

.moderation-card__status {
  display: grid;
  gap: 6px;
}

.moderation-card__reason {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

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

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 16, 32, 0.4);
  z-index: 50;
}

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

.modal__dialog {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 20px;
  width: min(100% - 32px, 420px);
  display: grid;
  gap: 12px;
  z-index: 1;
}

.modal__dialog--wide {
  width: min(100% - 32px, 920px);
}

.admin-edit__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-edit__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
}

.admin-edit__links-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.modal__dialog h2 {
  margin: 0;
}

.modal__dialog p {
  margin: 0;
  color: var(--muted);
}

.modal__dialog textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 1rem;
  resize: vertical;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (min-width: 360px) {
  .container {
    width: min(100% - 28px, 98ch);
  }
}

@media (min-width: 600px) {
  .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (min-width: 640px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

@media (min-width: 768px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: inline-flex;
    flex-direction: row;
    position: static;
    width: auto;
    background: transparent;
    border: none;
    padding: 0;
    gap: 24px;
    margin-right: 0;
    order: 2;
    margin-left: auto;
  }

  .header-utils {
    display: flex;
    order: 3;
    margin-left: 12px;
  }

  .site-nav__admin-link {
    display: none;
  }

  .hero-search__field {
    flex-direction: row;
    align-items: center;
  }

  .hero-subtitle {
    max-width: 30ch;
  }

  .filters__row {
    flex-direction: row;
  }

  .filters__field {
    flex: 1;
  }

  .organizer {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

  .organizer-hero {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .dashboard-table__row {
    grid-template-columns: 2fr 1.2fr 1fr 0.8fr;
    align-items: center;
  }

  .stepper {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions {
    justify-content: flex-end;
  }

  .moderation-card {
    grid-template-columns: 2fr 1fr auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  :root {
    --logo-max: 230px;
  }

  .header-search {
    display: inline-flex;
    margin-left: 8px;
  }

  .filters__advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .filters__group--tags {
    grid-row: 1 / span 2;
    height: auto;
    grid-column: 2;
  }
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
  }

  .header__inner {
    min-height: 72px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: min(100% - 80px, 98ch);
  }

  .hero .container {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }

  .hero {
    padding: calc(var(--space) * 4) 0;
  }

  .event-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }

  .event-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .event-sidebar__card {
    position: static;
  }
}

@media (min-width: 1280px) {
  .container {
    width: min(100% - 120px, 98ch);
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.highlights__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  background: var(--surface);
}

.partners {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.partners__stage {
  display: block;
  gap: 0;
  align-items: center;
}

.partners__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.partners__viewport::-webkit-scrollbar {
  display: none;
}

.partners__track {
  display: flex;
  gap: 12px;
}

.partners__viewport--marquee {
  overflow-x: auto;
  overflow-y: hidden;
}

.partners__track--marquee {
  width: max-content;
  will-change: transform;
  animation: partners-marquee var(--partners-marquee-duration, 24s) linear infinite;
}

.partners__viewport--marquee:hover .partners__track--marquee,
.partners__viewport--marquee:focus-within .partners__track--marquee,
.partners__viewport--marquee.is-paused .partners__track--marquee {
  animation-play-state: paused;
}

@keyframes partners-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--partners-marquee-distance, 50%)));
  }
}

.partner-card {
  flex: 0 0 min(280px, calc((100vw - 96px) / 3));
  padding: 0;
}

.partner-card__inner {
  position: relative;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.partner-card__logo-link {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.partner-card__logo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.1);
  display: block;
}

.partners__arrow {
  display: none !important;
}

.partner-detail {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.partner-detail .container {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.partner-detail__back {
  margin: 0;
  width: fit-content;
  display: inline-flex;
}

.partner-article {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: clamp(1.1rem, 2.8vw, 2rem);
  display: grid;
  gap: 1.1rem;
}

.partner-article__logo {
  width: min(320px, 100%);
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 0.35rem;
}

.partner-article__header {
  display: grid;
  gap: 0.7rem;
}

.partner-article__header h1 {
  margin: 0;
  line-height: 1.15;
}

.partner-article__header p {
  margin: 0;
  color: var(--muted);
}

.partner-article__section h2 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
}

.partner-article__section ul {
  margin: 0;
  padding-left: 1.1rem;
}

.partner-article__section li + li {
  margin-top: 0.4rem;
}

.partner-article__bonus {
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--accent);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 10px;
  margin: 0;
}

.partner-article__faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0.1rem 0.8rem;
}

.partner-article__faq-item + .partner-article__faq-item {
  margin-top: 0.55rem;
}

.partner-article__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.55rem 0;
}

.partner-article__faq-item p {
  margin: 0 0 0.7rem;
  color: var(--muted);
}

.partner-article__actions {
  margin-top: 0.2rem;
}

@media (max-width: 767px) {
  .partner-article {
    border-radius: 16px;
  }
}

.admin-partners-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.admin-partners-form .form-field {
  min-height: 114px;
}

.admin-partners-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.admin-partners-form__checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.admin-partners-details {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 0.8rem;
  display: grid;
  gap: 0.65rem;
}

.admin-partners-advanced {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.admin-partners-advanced legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-weight: 600;
}

.admin-partners-details legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-weight: 600;
}

.admin-partners-advanced:disabled,
.admin-partners-details:disabled {
  opacity: 0.6;
}

.admin-partners-form__actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.admin-partner-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem;
  background: var(--surface);
  align-items: flex-start;
}

.admin-partner-card > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-partner-card > div:first-child p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-partner-card > div:last-child {
  flex: 0 0 auto;
  min-width: 0;
}

.admin-partner-card + .admin-partner-card {
  margin-top: 0.65rem;
}

.admin-partner-card__logo {
  width: 120px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.14);
}

.admin-partner-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-partner-card[data-partner-active="true"] {
  cursor: grab;
}

.admin-partner-card.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

@media (max-width: 1023px) {
  .partner-card {
    flex-basis: min(280px, calc((100vw - 72px) / 2));
  }
}

@media (max-width: 767px) {
  .partners__viewport {
    scroll-snap-type: x mandatory;
  }

  .partner-card {
    flex-basis: 100%;
    scroll-snap-align: start;
  }
}

/* Market Manager v1B */

.market-manager__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.market-manager__list-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.market-manager__list-item--current {
  border-color: var(--accent-2);
}

.market-manager__empty {
  padding: 20px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  color: var(--muted);
  margin-bottom: 16px;
}

.market-manager__add {
  margin-bottom: 24px;
}

.market-manager__add .form-grid {
  margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.market-manager__hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.market-manager__error {
  color: #dc2626;
  font-size: 0.85rem;
  margin: 0;
}

.market-manager__status {
  color: var(--muted);
  font-size: 0.85rem;
  min-height: 1.2em;
}

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

.market-manager__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  cursor: pointer;
}

.market-manager__checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.market-manager__detail {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.market-manager__section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--line);
  min-width: 0;
}

/* CSS Grid items default to min-width: auto (content-based), which lets a
   single wide, unbreakable child force the whole implicit grid column --
   and every sibling section along with it -- wider than the viewport. Reset
   it through this page's own grid/form descendants only, so the fix stays
   scoped to Market Manager and never touches the shared .form-grid/
   .form-field rules other admin pages (partners, the event edit modal) rely
   on. */
.market-manager__detail *,
.market-manager__add * {
  min-width: 0;
}

.market-manager__detail .form-field input,
.market-manager__detail .form-field select,
.market-manager__detail .form-field textarea,
.market-manager__add .form-field input,
.market-manager__add .form-field select {
  width: 100%;
}

.market-manager__section h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
}

.market-manager__identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
}

.market-manager__identity dt {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.market-manager__identity dd {
  margin: 4px 0 0;
  font-weight: 600;
}

.market-manager__brand {
  display: grid;
  gap: 12px;
}

.market-manager__brand-preview {
  width: 100%;
  max-width: 320px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.market-manager__brand-empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.market-manager__blockers {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.market-manager__blockers:empty {
  display: none;
}

.market-manager__lifecycle .market-manager__actions {
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .market-manager__section {
    padding: 16px;
  }

  .market-manager__add .form-grid {
    grid-template-columns: 1fr;
  }
}

/* SEO-3: /events-index.html crawl-discovery list -- deliberately minimal,
   this is a lightweight index page, not a second catalog UI. */
.event-discovery__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-discovery__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.event-discovery__link {
  font-weight: 600;
  color: var(--text);
}

.event-discovery__meta {
  color: var(--muted);
  font-size: 0.9em;
}

.event-discovery__empty {
  color: var(--muted);
}