/* Shared "duo" layout for the side-by-side landing styles (Trust Side by Side, Clarity, Coastal, Graphite, Sunrise).
   Headline on top, centered; under it the booking card (left), a vertical OR, and the quote form (right).
   Layout only: colors come from each style's own sheet and the --bk-* tokens in booking.css.
   Markup: section.duo-hero > .wrap.duo-head (eyebrow, h1, .duo-lede) + .wrap.duo-row (#quote.duo-quote, then
   landing_booking_card(): .bk-wrap > .bk-or + .bk-card). The .bk-wrap box is dissolved (display: contents) so the
   OR and the card are placed on the row's grid directly. Loaded after style.css, before the style's sheet. */

.duo-hero .duo-head { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.duo-hero .duo-head h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); text-wrap: balance; }
.duo-hero .duo-head .duo-lede { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Phones and tablets: one column in the desktop order, booking card, OR, quote form. */
.duo-hero .duo-row { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1140px; margin-top: 28px; }
.duo-row > .bk-wrap { display: contents; }
.duo-hero .duo-row > .bk-wrap[hidden] { display: none; }
.duo-row > .bk-wrap > .bk-card { order: 1; min-width: 0; }
.duo-row > .bk-wrap > .bk-or { order: 2; margin: 18px 0; }
.duo-row > #quote { order: 3; min-width: 0; }

/* No booking card on show: the quote form alone, centered. */
.duo-hero .duo-row:not(:has(> .bk-wrap:not([hidden]))) { grid-template-columns: minmax(0, 640px); justify-content: center; }
.duo-hero .duo-row:not(:has(> .bk-wrap:not([hidden]))) > #quote { grid-column: 1; }

/* The OR reads as a badge: the word in a ring, between the two lines (both layouts). */
.duo-row > .bk-wrap > .bk-or { font-size: .95rem; letter-spacing: .08em; }
.duo-row > .bk-wrap > .bk-or > span { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 2px solid var(--bk-or); border-radius: 50%; padding-left: .08em; }

@media (min-width: 900px) {
  .duo-hero .duo-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: start; margin-top: 36px; }
  .duo-row > .bk-wrap > .bk-card { grid-column: 1; grid-row: 1; }
  .duo-row > #quote { grid-column: 3; grid-row: 1; }
  /* Vertical OR: a short line, the word, then a line down to the bottom of the taller card. */
  .duo-row > .bk-wrap > .bk-or { grid-column: 2; grid-row: 1; align-self: stretch; flex-direction: column; margin: 0; padding: 8px 20px; gap: 12px; }
  .duo-row > .bk-wrap > .bk-or::before, .duo-row > .bk-wrap > .bk-or::after { width: 1px; height: auto; }
  .duo-row > .bk-wrap > .bk-or::before { flex: 0 0 48px; }
  .duo-row > .bk-wrap > .bk-or::after { flex: 1 1 auto; }
}