/* The "Tickets and tours" row (city.json money.tours; docs/features/affiliates.md).
   Staged into public/ only for a city with the switch (scripts/city/stage.mjs), and
   linked only by the pages that show the row (place pages, the map), so a city
   without it builds exactly as before. Look: reports/mockups/tours-card/mock.html. */
.tours {
  margin: 0 0 3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.tours-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
/* Three classes: outranks the journal look's serif headings (main h2, 0-2-3). */
.tours .tours-head .tours-title {
  margin: 0;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.tours-ad {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-tag, 4px);
  padding: 1px 6px;
  white-space: nowrap;
}
.tours-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.75rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.tours-offer-text { display: flex; flex-direction: column; min-width: 0; }
.tours-offer-main { font-size: 0.94rem; font-weight: 700; line-height: 1.35; }
.tours-offer-sub { font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.tours-cta {
  flex-shrink: 0;
  background: var(--red-fill);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.55rem 0.875rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.tours-offer:hover .tours-cta { background: var(--red-dark, #c1121f); }
.tours-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}
.tours-more:hover { border-color: var(--ink); }
.tours-arrow { flex-shrink: 0; color: var(--muted); }
.tours-offer:focus-visible,
.tours-more:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tours-note {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The map's place card: tighter, and no taller than the mockup's row. Selectors
   carry #detail-body to outrank MapApp's scoped rules (one id, two attributes). */
#detail-body > div.tours.tours-map { margin: 0 0 1.5rem; }
#detail-body > div.tours.tours-map[hidden],
#detail-body.is-guide > div.tours.tours-map { display: none; }
.tours-map .tours-offer { margin-top: 0.5rem; padding: 0.6rem 0.8rem; }
.tours-map .tours-more { margin-top: 0.4rem; padding: 0.5rem 0.8rem; }
.tours-map .tours-note { margin-top: 0.5rem; }
/* Phones: the card is a sheet whose parts are ordered (MapApp: name, line and
   actions peek first, then the photo); the row follows the photo. */
@media (max-width: 899px) {
  #detail-body > div.tours.tours-map { order: 3; margin: 0 0 1.1rem; }
}

@media (pointer: coarse) {
  .tours-offer, .tours-more { min-height: 44px; }
  .tours-cta { min-height: 36px; display: inline-flex; align-items: center; }
}