/* ============================================================
   Sections: events (#shows), stockists (#shops)
   Owner: Agent B. Nobody else edits this file.
   Class prefixes: .events-, .shops-
   Colours: var(--token) from css/tokens.css ONLY.
   ============================================================ */

/* ---- events (#shows) — deep teal band ---- */

.events {
  background: var(--band-teal);
  padding: var(--pad-band-tight);
}

.events-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 28px;
}

.events-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-section);
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--white);
}

.events-caption {
  font-size: var(--size-ui);
  color: var(--on-teal-soft);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--s-2);
}

.events-card {
  background: var(--white);
  border-top: 3px solid var(--aqua);
  padding: 26px;
  display: grid;
  gap: 9px;
  align-content: start;
}

.events-card--highlight {
  border-top: 3px solid var(--turquoise);
  box-shadow: var(--shadow-card);
}

.events-date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-meta);
  font-size: var(--size-meta-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
}

.events-date--highlight {
  color: var(--band-teal-deep);
  font-weight: 500;
}

.events-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}

.events-place {
  display: flex;
  align-items: start;
  gap: 8px;
  font-size: var(--size-ui);
  line-height: 1.5;
}

.events-place .ms {
  color: var(--turquoise);
}

.events-place-text {
  display: grid;
  gap: 1px;
}

.events-venue {
  color: var(--body-soft);
}

.events-town {
  color: var(--body-quiet);
}

.events-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  font-family: var(--font-meta);
  font-size: var(--size-meta-sm);
  letter-spacing: 0.08em;
  color: var(--meta);
  text-decoration: none;
}

.events-map:hover {
  color: var(--turquoise);
}

/* ---- stockists (#shops) — aqua-tint band ---- */

.shops {
  background: var(--band-aqua-tint);
  padding: var(--pad-band-tight);
}

.shops-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 26px;
}

.shops-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-section);
  letter-spacing: 0.02em;
  margin: 0;
}

.shops-caption {
  font-size: var(--size-ui);
  color: var(--on-aqua-soft);
}

.shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-2);
}

.shops-card {
  background: var(--white);
  display: grid;
  align-content: start;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* The town, as the card's header. Replaces the 3px aqua rule — this section
   answers "where can I buy this near me", so the towns are the scan line. */
.shops-city {
  background: var(--band-teal-deep);
  color: var(--white);
  padding: 9px 22px;
  font-family: var(--font-meta);
  font-size: var(--size-meta-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shops-body {
  padding: 18px 22px 22px;
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.shops-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.shops-top {
  display: flex;
  gap: var(--s-2);
  align-items: start;
  min-width: 0;
}

/* Faked map tile — no API/key. CSS grid lines over --map-ground plus a
   centred pin glyph, matching the design mock's prototype technique. */
.shops-mapthumb {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: var(--map-ground);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0px, rgba(255, 255, 255, 0.95) 6px, transparent 6px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.95) 0px, rgba(255, 255, 255, 0.95) 5px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(180, 199, 193, 0.55) 0px, rgba(180, 199, 193, 0.55) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(180, 199, 193, 0.55) 0px, rgba(180, 199, 193, 0.55) 1px, transparent 1px, transparent 26px);
  background-position: 34px 0, 0 62px, 0 0, 0 0;
  border: 1px solid var(--map-border);
}

.shops-mapthumb .ms {
  color: var(--turquoise);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.shops-info {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shops-name {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.shops-address {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-softer);
}

.shops-town {
  font-family: var(--font-meta);
  font-size: var(--size-meta-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-quiet);
}

.shops-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-top: 1px solid var(--card-rule);
  padding-top: 13px;
}

.shops-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-meta);
  font-size: var(--size-meta-sm);
  color: var(--meta);
  text-decoration: none;
}

.shops-link:hover {
  color: var(--turquoise);
}

.events-empty {
  margin: 0;
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: var(--white);
  max-width: 46ch;
}