/* ============================================================
   The Butcher Shoppe — BBQ page
   Reuses the shared page-header, preview__grid, milestone and
   cta-banner components; only page-specific tweaks live here.
   ============================================================ */

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.bbq-proof__header {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.bbq-compete__inner {
  max-width: 760px;
  text-align: center;
}

.bbq-compete__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (max-width: 640px) {
  .page-header__actions,
  .bbq-compete__actions,
  .preview__actions { flex-direction: column; }
  .page-header__actions .btn,
  .bbq-compete__actions .btn,
  .preview__actions .btn { width: 100%; }
}

/* ---------- Stats: four across (History's component is built for three) ---------- */
.bbq-proof .milestone-row {
  grid-template-columns: repeat(4, 1fr);
}

/* Word-style stats ("Best in the Country") don't need numeral scale */
.milestone__num--text {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
}

@media (max-width: 1024px) {
  .bbq-proof .milestone-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .bbq-proof .milestone-row { grid-template-columns: 1fr; }
}

/* ---------- Outline buttons on bone/parchment: the default is white-on-dark ---------- */
.section--bone .preview__actions .btn--outline,
.section--parchment .preview__actions .btn--outline {
  color: var(--ink);
  border-color: var(--ink);
}

.section--bone .preview__actions .btn--outline:hover,
.section--parchment .preview__actions .btn--outline:hover,
.section--bone .preview__actions .btn--outline:focus-visible,
.section--parchment .preview__actions .btn--outline:focus-visible {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}