/* Shared layout primitives used across multiple components. */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--gutter); }
}

/* Anchor-link targets must not be hidden under the sticky header when
   scrolled to (the browser aligns the target's top edge with the
   viewport top, and the sticky header then sits on top of it). */
#our-story,
#menu-section,
#location-section,
#reviews-section,
#catering-section,
#vacation-box {
  scroll-margin-top: var(--header-height);
}

.section {
  padding-block: var(--space-xl);
}
.section--sm {
  padding-block: var(--space-md);
}

/* Alternating section backgrounds (tint/surface) — js/modules/
   section-alternator.js assigns these two classes to the sections marked
   `.js-alt-bg`, in order, skipping any that are currently [hidden] (e.g.
   the vacation highlight card when vacation.cardActive is false), so two
   same-colored sections never end up adjacent just because something
   between them is toggled off. The classes in the markup are the
   no-JS/fail-open default (the look when every section is visible) —
   see that module's header comment for the full reasoning. */
.bg-tint { background: var(--color-subtle); }
.bg-surface { background: var(--color-surface); }

.section-header {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-xl);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-outline {
  background: var(--color-surface);
  color: var(--color-brand-black);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover { background: var(--color-subtle); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-brand-black);
}
.btn-gold:hover { background: var(--color-gold-hover); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Vacation highlight card (full-width section between hero and story) */
.vacation-card {
  background: linear-gradient(to right, var(--color-red-tint-bg), var(--color-amber-tint-bg));
  border: 2px solid var(--color-red-tint-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .vacation-card { flex-direction: row; text-align: left; padding: var(--space-lg); }
}
.vacation-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-2xl);
  background: var(--color-primary);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vacation-card__title {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

/* Quick-action CTA strip (between catering and footer) */
.quick-cta {
  width: 100%;
  background: var(--color-red-tint-bg);
  border-top: 1px solid var(--color-red-tint-border);
  padding-block: var(--space-md);
}
.quick-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  text-align: center;
}
@media (min-width: 640px) {
  .quick-cta__inner { flex-direction: row; text-align: left; }
}
.quick-cta__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-brand-black);
}
.quick-cta__label .icon { color: var(--color-primary); }
.quick-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.75rem;
}