/* ==========================================================================
   MUSKOKA HOT TUB - PATTERNS
   Tier 4 of 4. Page-level composition. Consumes tokens only.
   ========================================================================== */

/* Layout containment */
.mht-main { display: block; }

.mht-container {
  max-width: var(--mht-container-default);
  margin-inline: auto;
  padding-inline: var(--mht-section-x);
}
.mht-container--narrow { max-width: var(--mht-container-narrow); }
.mht-container--wide   { max-width: var(--mht-container-wide); }

/* Section rhythm. Pick one of five; never invent a padding value. */
.mht-section       { padding-block: var(--mht-section-y-md); }
.mht-section--xs   { padding-block: var(--mht-section-y-xs); }
.mht-section--sm   { padding-block: var(--mht-section-y-sm); }
.mht-section--lg   { padding-block: var(--mht-section-y-lg); }
.mht-section--xl   { padding-block: var(--mht-section-y-xl); }
.mht-section--dark { background: var(--mht-abyss); color: var(--mht-mist); }
.mht-section--tint { background: var(--mht-surface-1); }

/* Fallback entry content (index.php) */
.mht-entry { padding-block: var(--mht-section-y-md); }
.mht-entry__title { margin-bottom: var(--mht-gap-6); }
.mht-entry__content { max-width: 66ch; }

/* Scroll reveal, paired with data-mht-reveal in main.js */
[data-mht-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--mht-t-slow) var(--mht-ease), transform var(--mht-t-slow) var(--mht-ease);
}
[data-mht-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-mht-reveal] { opacity: 1; transform: none; transition: none; }
}