/* ===========================================================================
   03 · LAYOUT
   Containers, surfaces, vertical rhythm, rules.

   The 82% / 1200px container matches the seven existing layouts. Do not change
   it: every row width in those JSONs is set against it.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Containers
   Divi rows carry their own width, so these apply to .et_pb_row too.
   --------------------------------------------------------------------------- */
#page-container .et_pb_row,
.container {
  width: var(--container-pct);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.container-narrow,
#page-container .container-narrow.et_pb_row {
  width: var(--container-pct);
  max-width: var(--container-narrow);
}

.container-wide,
#page-container .container-wide.et_pb_row {
  width: 92%;
  max-width: var(--container-wide);
}

.full-bleed,
#page-container .full-bleed.et_pb_row {
  width: 100%;
  max-width: none;
}


/* ---------------------------------------------------------------------------
   FULL-BLEED INSIDE THE THEME BUILDER BODY TEMPLATE

   Divi renders a page's own layout inside the body template's Post Content
   module, which sits in a section, a row, and a column. That row carries the
   82% / 1200px container, so NO section in a page layout can reach the
   viewport edge — heroes included. Verified on staging: the hero measured
   619px inside a 755px viewport, inset by the body row.

   The fix is to widen the one wrapper that holds page content, rather than
   breaking each hero out of it with negative margins. A 100vw breakout
   overflows by half a scrollbar, because 100vw counts the scrollbar and 100%
   does not; this approach has no such artifact and leaves each hero's own
   inner row correctly inset at 82%.

   :has() is used deliberately — it is the only way to identify the wrapper
   without depending on Divi's generated index numbers (et_pb_row_0_tb_body),
   which change whenever the template is edited.

   The structural fix is in the Default Body template itself: set that row to
   100% width, 100% max-width, no gutter, and zero section padding. This CSS
   makes the page correct either way.
   --------------------------------------------------------------------------- */
#page-container .et-l--body .et_pb_section:has(.et_pb_post_content) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#page-container .et-l--body .et_pb_row:has(.et_pb_post_content) {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#page-container .et-l--body .et_pb_column:has(.et_pb_post_content) {
  width: 100% !important;
  margin-bottom: 0 !important;
}
#page-container .et-l--body .et_pb_post_content,
#page-container .et-l--body .et_pb_post_content > .et-l,
#page-container .et-l--body .et_pb_post_content .et_builder_inner_content {
  width: 100%;
  max-width: none;
}


/* ---------------------------------------------------------------------------
   Surfaces
   Never two non-Ivory sections adjacent. Never more than one River Slate
   section in the first screen and a half. Audit against §4 of the spec.
   --------------------------------------------------------------------------- */
.surface-field,
#page-container .surface-field.et_pb_section { background-color: var(--surface-primary); }

.surface-linen,
#page-container .surface-linen.et_pb_section { background-color: var(--surface-secondary); }

.surface-slate,
#page-container .surface-slate.et_pb_section { background-color: var(--surface-contrast); }

.surface-footer,
#page-container .surface-footer.et_pb_section { background-color: var(--surface-footer); }


/* ---------------------------------------------------------------------------
   Vertical rhythm

   Divi writes section padding inline from the builder, so these utilities
   carry !important. Apply ONE of them per section and let it own the padding
   rather than setting padding in the builder — otherwise the two disagree at
   breakpoints and the builder wins on desktop only.
   --------------------------------------------------------------------------- */
#page-container .section-y.et_pb_section {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}
#page-container .section-y-tall.et_pb_section {
  padding-top: var(--section-y-tall) !important;
  padding-bottom: var(--section-y-tall) !important;
}
#page-container .section-y-top-0.et_pb_section { padding-top: 0 !important; }
#page-container .section-y-bottom-0.et_pb_section { padding-bottom: 0 !important; }

/* River Slate and statement sections default to the tall rhythm. */
#page-container .surface-slate.et_pb_section {
  padding-top: var(--section-y-tall);
  padding-bottom: var(--section-y-tall);
}


/* ---------------------------------------------------------------------------
   Rules and dividers
   --------------------------------------------------------------------------- */

/* Accent divider — 40px x 1px Antique Brass. Replaces .divider-gold. */
.rule-brass {
  display: block;
  width: 40px;
  height: var(--hairline);
  background: var(--rule-accent);
  border: 0;
  margin: var(--sp-6) 0;
}
.rule-brass.centered,
.text-center .rule-brass,
#page-container .et_pb_text_align_center .rule-brass {
  margin-left: auto;
  margin-right: auto;
}

/* Structural rule — full width, Light Walnut at 60%. */
.rule-structural {
  display: block;
  width: 100%;
  height: var(--hairline);
  background: var(--rule);
  opacity: 0.6;
  border: 0;
  margin: 0;
}
.surface-slate .rule-structural,
.on-contrast .rule-structural { opacity: 0.28; }

/* Divi's own divider module, brought into the system. */
#page-container .et_pb_divider:before {
  border-top-color: var(--rule) !important;
  border-top-width: var(--hairline) !important;
}


/* ---------------------------------------------------------------------------
   MULTI-COLUMN ROWS USE CSS GAP, NOT DIVI GUTTERS

   Divi spaces columns with a percentage margin-right driven by a gutter class
   on the row: .et_pb_gutters3 .et_pb_column { margin-right: 5.5% }. That is a
   DESCENDANT selector, so a gutter setting on any ancestor row silently
   rewrites the spacing of every column nested beneath it — including the card
   grids inside a page, when the wrapper is the Theme Builder body template.

   Owning the spacing here removes that whole class of failure. The gap values
   are the ones in the spec: 48px between cards, 96px across a split row.
   --------------------------------------------------------------------------- */
#page-container .card-grid.et_pb_row,
#page-container .split-row.et_pb_row,
#page-container .blenn-footer__grid.et_pb_row {
  display: flex;
  align-items: stretch;
}
#page-container .card-grid.et_pb_row > .et_pb_column,
#page-container .split-row.et_pb_row > .et_pb_column,
#page-container .blenn-footer__grid.et_pb_row > .et_pb_column {
  margin-right: 0 !important;
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}
#page-container .card-grid.et_pb_row { gap: var(--sp-7); }
#page-container .split-row.et_pb_row { gap: var(--sp-9); align-items: center; }
#page-container .blenn-footer__grid.et_pb_row { gap: var(--sp-8); }

/* The split row's two halves stay even; the footer's first column is wider. */
#page-container .blenn-footer__grid.et_pb_row > .et_pb_column:first-child { flex: 1.4 1 0; }

@media (max-width: 980px) {
  #page-container .card-grid.et_pb_row { flex-wrap: wrap; gap: var(--sp-6); }
  #page-container .card-grid.et_pb_row > .et_pb_column { flex: 1 1 45%; }
  #page-container .split-row.et_pb_row { flex-direction: column; gap: var(--sp-6); align-items: stretch; }
  #page-container .split-row.split-text-left.et_pb_row { flex-direction: column; }
  #page-container .blenn-footer__grid.et_pb_row { flex-wrap: wrap; }
  #page-container .blenn-footer__grid.et_pb_row > .et_pb_column { flex: 1 1 40%; }
}
@media (max-width: 767px) {
  #page-container .card-grid.et_pb_row { flex-direction: column; gap: var(--sp-8); }
  #page-container .card-grid.et_pb_row > .et_pb_column { flex: 1 1 auto; }
  #page-container .blenn-footer__grid.et_pb_row { flex-direction: column; gap: var(--sp-7); }
}


/* ---------------------------------------------------------------------------
   Grid gaps
   Divi columns have their own gutters; these are for CSS grid blocks that the
   theme renders itself (cards, proof bands).
   --------------------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (max-width: 767px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* ---------------------------------------------------------------------------
   Body clearance for the sticky mobile booking bar
   Without this the bar covers the last element on every page.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--stickybook-h) + env(safe-area-inset-bottom)); }
}