/* services.css: the merged Services & Pricing page ONLY.
   Loaded via that page's {% block page_styles %}, the same arrangement as
   home.css: page-scoped styles never ride along on every other page.
   Everything here uses the tokens from tokens.css; no raw hex. */

.page-lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

/* The four marketing cards. Their own class rather than home.css's .card, so
   the ownership test keeps each selector in exactly one sheet. */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 620px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .offer-grid { grid-template-columns: repeat(4, 1fr); }
}
.offer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.offer-card h3 { color: var(--pink-text); margin-bottom: var(--space-2); }

/* The location tabs: links styled as tabs. The active one is aria-current,
   which is also what a screen reader announces. */
.location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 3px solid var(--teal);
  margin-bottom: var(--space-6);
}
.location-tab {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--mint);
  color: var(--teal-text);
  font-weight: 700;
  text-decoration: none;
}
.location-tab[aria-current="page"] {
  background: var(--teal);
  color: var(--white);
}
.location-tab:hover { text-decoration: none; }

/* The venue header block under the tabs: where it is, how to reach it, and
   its deposit policy line (which arrives as a finished sentence). */
.location-block {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.location-block h2 { margin-bottom: var(--space-2); }
.location-address { color: var(--ink-soft); }
.location-phone { margin-top: var(--space-1); }
.location-deposit {
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--teal-text);
}

/* Section rhythm: replaces the inline margin-top the old pages carried. */
.price-section { margin-top: var(--space-12); }

.policy-list {
  margin-top: var(--space-4);
  padding-left: 1.25rem;
}
.policy-list li { margin-bottom: var(--space-2); }