/* ===========================================================================
   05 · UTILITIES
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Image ratios  ·  spec §8
   Applied to a Divi image module, a background wrapper, or a bare div.
   --------------------------------------------------------------------------- */
.img-ratio-45  { aspect-ratio: 4 / 5;   overflow: hidden; }   /* rooms and suites — the conversion image */
.img-ratio-32  { aspect-ratio: 3 / 2;   overflow: hidden; }   /* editorial split rows */
.img-ratio-169 { aspect-ratio: 16 / 9;  overflow: hidden; }   /* wide bands, video posters */
.img-ratio-11  { aspect-ratio: 1 / 1;   overflow: hidden; }   /* detail grids */

.img-ratio-45 img,  .img-ratio-32 img,
.img-ratio-169 img, .img-ratio-11 img,
#page-container .img-ratio-45 .et_pb_image_wrap img,
#page-container .img-ratio-32 .et_pb_image_wrap img,
#page-container .img-ratio-169 .et_pb_image_wrap img,
#page-container .img-ratio-11 .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#page-container .img-ratio-45 .et_pb_image_wrap,
#page-container .img-ratio-32 .et_pb_image_wrap,
#page-container .img-ratio-169 .et_pb_image_wrap,
#page-container .img-ratio-11 .et_pb_image_wrap { width: 100%; height: 100%; display: block; }


/* ---------------------------------------------------------------------------
   Matte  ·  24px Linen inset. Never a border.
   --------------------------------------------------------------------------- */
.matte-linen { background: var(--matte); padding: 24px; }
@media (max-width: 767px) { .matte-linen { padding: var(--sp-4); } }


/* ---------------------------------------------------------------------------
   Living accent  ·  Olive Leaf, trace use. One element per page maximum.
   4.05:1 — large text only, never body copy.
   --------------------------------------------------------------------------- */
.accent-living { color: var(--accent-living); }
.rule-living { display: block; width: 40px; height: var(--hairline);
               background: var(--accent-living); border: 0; margin: var(--sp-6) 0; }


/* ---------------------------------------------------------------------------
   Spacing utilities. Only scale values.
   --------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }        .mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }         .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }         .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }         .mb-6 { margin-bottom: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }         .mb-7 { margin-bottom: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }         .mb-8 { margin-bottom: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }         .mb-9 { margin-bottom: var(--sp-9); }


/* ---------------------------------------------------------------------------
   Alignment
   --------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }


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


/* ===========================================================================
   PLACEHOLDER FRAMES  —  DELETE AFTER THE SHOOT

   Every image slot in the eight page layouts ships as a labelled placeholder
   at its final aspect ratio, so the layouts can be judged before the
   Sept. 16-19 shoot. Each one is replaced by an et_pb_image module once
   selects land, and then this block and the .frame markup go away.

   The hero placeholder is a mid-tone gradient rather than a flat swatch: it
   makes the River Slate scrim and the Ivory Stone hero type legible enough to
   judge, which a flat Linen field would not.
   =========================================================================== */
.frame { position: relative; background: var(--matte); overflow: hidden; }
.frame::after {
  content: attr(data-frame);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--gv-walnut);
  background: rgba(244, 239, 230, 0.86);
  padding: 7px 10px;
}
.section-hero .frame,
#page-container .section-hero .frame {
  background: linear-gradient(150deg, #6E5B4A 0%, #4A4741 42%, #2A3A46 100%);
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.section-hero .frame::after { background: rgba(22, 36, 47, 0.72); color: var(--gv-field); }


/* ---------------------------------------------------------------------------
   Divi column plumbing for card grids
   Divi gives columns a bottom margin and floats them; cards need equal height
   and a bottom-anchored link.
   --------------------------------------------------------------------------- */
#page-container .card-grid .et_pb_column.card {
  display: flex;
  flex-direction: column;
}
#page-container .card-grid .et_pb_column.card .et_pb_module { margin-bottom: 0; }
#page-container .card-grid .et_pb_column.card .et_pb_text:not(:last-child) {
  margin-bottom: var(--sp-3);
}
@media (max-width: 767px) {
  #page-container .card-grid .et_pb_column.card { margin-bottom: var(--sp-8); }
  #page-container .card-grid .et_pb_column.card:last-child { margin-bottom: 0; }
}


/* ===========================================================================
   BRAND SWAP LAYER  ·  spec §12

   Three swap zones, one attribute. At Trademark Collection conversion, change
   BLENN_BRAND in functions.php from 'giovanni' to 'trademark'. Nothing
   structural moves.

     Header lockup   · wordmark and endorsement mark
     Footer legal    · franchise disclosure and Wyndham marks
     Booking module  · CRS endpoint, if it moves off reseze

   Wrap the Giovanni version of any element in .brand-giovanni-only and the
   Trademark version in .brand-trademark-only. Both live in the layout at all
   times; only one renders.
   =========================================================================== */
.brand-giovanni-only  { display: block; }
.brand-trademark-only { display: none; }

html[data-brand="trademark"] .brand-giovanni-only  { display: none; }
html[data-brand="trademark"] .brand-trademark-only { display: block; }

/* Inline variants, for a lockup subtitle or a run of text mid-sentence. */
.brand-giovanni-inline  { display: inline; }
.brand-trademark-inline { display: none; }
html[data-brand="trademark"] .brand-giovanni-inline  { display: none; }
html[data-brand="trademark"] .brand-trademark-inline { display: inline; }

/* Divi module variants — Divi sections and rows are block-level anyway, but
   this keeps the toggle from breaking flex and grid children. */
html[data-brand="trademark"] #page-container .brand-giovanni-only.et_pb_section,
html[data-brand="trademark"] #page-container .brand-giovanni-only.et_pb_row,
html[data-brand="trademark"] #page-container .brand-giovanni-only.et_pb_module { display: none !important; }
html[data-brand="giovanni"]  #page-container .brand-trademark-only.et_pb_section,
html[data-brand="giovanni"]  #page-container .brand-trademark-only.et_pb_row,
html[data-brand="giovanni"]  #page-container .brand-trademark-only.et_pb_module { display: none !important; }

/* If Wyndham mandates any colour override at conversion, it lands here and
   nowhere else. Empty by design. */
html[data-brand="trademark"] {
  /* --surface-contrast: ...; */
}


/* ===========================================================================
   PRINT
   Guests print directions, confirmations, and menus. Make it legible.
   =========================================================================== */
@media print {
  .blenn-header, .stickybook, .bookbar, .blenn-skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .surface-slate, .blenn-footer { background: #fff !important; color: #000 !important; }
  .surface-slate h2, .surface-slate p,
  .blenn-footer li, .blenn-footer p { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}