/**
 * BH Coastal — Layout
 * --------------------
 * Mobile-first. A single container pattern used everywhere, generous
 * vertical rhythm between sections, and a content-width cap so body
 * copy never stretches into an uncomfortable measure on wide screens.
 */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter-md);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-lg);
  }
}

/* Section rhythm — the vertical spacing between major page blocks.
   Generous by design: whitespace is a stated brand principle, not
   an afterthought. */
.section {
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-8);
  }
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--inverse {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
  color: var(--color-inverse-text);
}

.section--inverse .kicker {
  color: var(--color-sandstone);
}

/* Constrains body copy to an editorial reading measure regardless
   of how wide the parent section is. */
.prose {
  max-width: var(--content-max-width);
}

.prose.center {
  margin-inline: auto;
  text-align: center;
}

/* Simple responsive two-column split, used for image/text pairings
   (product pages, story pages) once individual pages are composed. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

/* Hairline divider — the recurring structural device between
   sections, echoing a waterline rather than a heavy rule. */
.hr-hairline {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}