:root {
  --venue-purple: #2b0b57;
  --venue-purple-2: #6d2aa7;
  --venue-teal: #00a98f;
  --venue-bg: #f8f5fc;
  --venue-card: #fff;
  --venue-text: #210942;
  --venue-muted: #71647e;
  --venue-line: #e5dcef;
}

* { box-sizing: border-box; }
body.venues-page {
  min-height: 100vh;
  margin: 0;
  color: var(--venue-text);
  font-family: Tahoma, Arial, system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgb(0 169 143 / 12%), transparent 26%),
    radial-gradient(circle at 92% 0%, rgb(109 42 167 / 15%), transparent 32%),
    var(--venue-bg);
}

.venues-shell {
  width: min(1220px, 92vw);
  margin: 0 auto;
}

.venues-header {
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.venues-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--venue-purple);
  font-weight: 900;
  text-decoration: none;
}

.venues-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(16%) sepia(73%) saturate(2933%)
    hue-rotate(257deg) brightness(82%) contrast(102%);
}

.venues-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.venues-nav a,
.venues-button {
  padding: 10px 15px;
  border: 1px solid var(--venue-line);
  border-radius: 999px;
  color: var(--venue-purple);
  background: #fff;
  font-weight: 800;
  text-decoration: none;
}

.venues-nav .primary,
.venues-button.primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #4c167d, #6d2aa7);
}

.venues-hero {
  padding: 42px;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 30%, rgb(102 227 206 / 28%), transparent 28%),
    linear-gradient(135deg, #210942, #4c167d 64%, #116b66);
  box-shadow: 0 28px 80px rgb(33 9 66 / 22%);
}

.venues-hero h1 {
  max-width: 760px;
  margin: 0 0 12px;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.08;
}

.venues-hero p {
  max-width: 720px;
  margin: 0;
  color: rgb(255 255 255 / 78%);
  line-height: 1.9;
}

.venues-filters {
  margin: 20px 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(150px, .6fr)) auto;
  gap: 10px;
  border: 1px solid var(--venue-line);
  border-radius: 20px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 12px 36px rgb(33 9 66 / 8%);
}

.venues-filters input,
.venues-filters select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--venue-line);
  border-radius: 13px;
  color: var(--venue-text);
  background: #fff;
  font: inherit;
}

.venues-filters button {
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: var(--venue-purple);
  cursor: pointer;
  font: 900 14px Tahoma, Arial, sans-serif;
}

.venues-summary {
  margin: 20px 0 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.venues-summary h2 { margin: 0; }
.venues-summary p { margin: 5px 0 0; color: var(--venue-muted); }

.venues-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.venue-card {
  overflow: hidden;
  border: 1px solid var(--venue-line);
  border-radius: 22px;
  background: var(--venue-card);
  box-shadow: 0 14px 38px rgb(33 9 66 / 8%);
}

.venue-image {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #efe8f7;
}

.venue-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-image span {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgb(33 9 66 / 82%);
  font-size: 12px;
  font-weight: 800;
}

.venue-card-body { padding: 17px; }
.venue-card h3 { margin: 0 0 7px; font-size: 20px; }
.venue-card p { margin: 0; color: var(--venue-muted); line-height: 1.7; }
.venue-meta {
  margin: 13px 0;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.venue-meta span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #4c167d;
  background: #f0e8f8;
  font-size: 12px;
  font-weight: 800;
}

.venue-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.venue-card-actions .venues-button {
  flex: 1;
  text-align: center;
}

.venues-empty {
  padding: 48px 22px;
  border: 1px dashed #cbb7df;
  border-radius: 22px;
  text-align: center;
  background: #fff;
}

.venues-pagination {
  padding: 26px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.venues-pagination a,
.venues-pagination span {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--venue-line);
  border-radius: 12px;
  color: var(--venue-purple);
  background: #fff;
  text-decoration: none;
  font-weight: 800;
}

.venues-pagination .active {
  color: #fff;
  background: var(--venue-purple);
}

.venues-footer {
  margin-top: 26px;
  padding: 24px 0 110px;
  border-top: 1px solid var(--venue-line);
  color: var(--venue-muted);
  font-size: 12px;
  line-height: 1.8;
}

.venue-detail {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

.venue-detail-media,
.venue-detail-panel {
  overflow: hidden;
  border: 1px solid var(--venue-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 52px rgb(33 9 66 / 10%);
}

.venue-detail-media img {
  width: 100%;
  min-height: 430px;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-detail-panel { padding: 28px; }
.venue-detail-panel h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 52px); }
.venue-detail-panel > p { color: var(--venue-muted); line-height: 1.8; }
.venue-facts { display: grid; gap: 9px; margin: 20px 0; }
.venue-fact {
  padding: 12px 13px;
  border: 1px solid var(--venue-line);
  border-radius: 13px;
  background: #fcfaff;
}
.venue-fact small { display: block; color: var(--venue-muted); margin-bottom: 4px; }

.venue-notice {
  margin: 18px 0;
  padding: 14px;
  border-radius: 15px;
  color: #2b0b57;
  background: #e5faf5;
  line-height: 1.8;
}

@media (max-width: 920px) {
  .venues-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venues-filters { grid-template-columns: 1fr 1fr; }
  .venues-filters input { grid-column: 1 / -1; }
  .venue-detail { grid-template-columns: 1fr; }
  .venue-detail-media img { min-height: 300px; max-height: 440px; }
}

@media (max-width: 620px) {
  .venues-header { align-items: flex-start; flex-direction: column; }
  .venues-hero { padding: 28px 22px; border-radius: 24px; }
  .venues-filters { grid-template-columns: 1fr; }
  .venues-filters input { grid-column: auto; }
  .venues-grid { grid-template-columns: 1fr; }
  .venue-image { height: 230px; }
  .venues-summary { align-items: flex-start; flex-direction: column; }
}