/* Home marketing — shared primitives for the rebuilt homepage.
 *
 * The homepage is a .bx-dark page built from a hero plus six bands (compare,
 * bundle, live, reviews, cases, send) and a footer, each owning its own file.
 * The bundle + reviews bands flip to a light surface via .bido-home-band-light
 * + .bx-light-surface. This file holds only what every section reuses:
 * the band shell + centered inner wrap, section-heading sizing, the
 * cyan text accent, the dotted eyebrow, the avatar stack, the
 * star rating, the trip builder bar, and the scroll-reveal animation.
 *
 * Section padding and headings interpolate with the viewport via clamp()
 * so the page needs almost no width breakpoints.
 */

.bido-home-page {
  background: var(--bido-navy);
}

/* ====== BAND SHELL ====== */
.bido-home-band {
  position: relative;
  padding: clamp(64px, 8vw, 108px) clamp(16px, 5vw, 56px);
}
.bido-home-hero + .bido-home-band,
.bido-home-band + .bido-home-band {
  border-top: 1px solid var(--bx-line);
}
/* Light bands pair this with .bx-light-surface (see home.html.erb) so their
   token set flips to the light values; each light band layers its own
   decorative gradient on top via background-image. */
.bido-home-band-light {
  background-color: var(--bx-paper);
}
.bido-home-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-inline: auto;
}

/* ====== HEADINGS ====== */
.bido-home-page .bido-home-band h2 {
  font-family: var(--bx-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bx-ink);
}

.bido-home-accent { color: var(--bido-cyan); }
/* On a light band the bright-cyan accent drops below readable contrast —
   swap to the theme-aware accent ink (a deeper blue on light surfaces). */
.bx-light-surface .bido-home-accent { color: var(--bx-accent-ink); }

/* ====== EYEBROW ====== */
.bido-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bido-cyan);
}
.bido-home-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--bx-r-pill);
  background: var(--bido-cyan);
  box-shadow: 0 0 10px rgba(var(--bx-accent-rgb),0.8);
}

/* ====== AVATAR STACK ====== */
.bido-home-avatars {
  display: flex;
  flex: 0 0 auto;
}
.bido-home-ava {
  width: 36px;
  height: 36px;
  border-radius: var(--bx-r-pill);
  border: 2px solid var(--bido-navy);
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bx-font-display);
  font-weight: 800;
  font-size: var(--bx-text-2xs);
  color: rgb(var(--bx-white-rgb));
}
.bido-home-ava:first-child { margin-left: 0; }
.bido-home-ava-sm { width: 30px; height: 30px; }
.bido-home-ava.av1 { background: var(--bido-cyan); }
.bido-home-ava.av2 { background: var(--bido-amber); }
.bido-home-ava.av3 { background: var(--bx-pros); }
.bido-home-ava.av4 { background: var(--bido-coral); }
.bido-home-ava.av5 { background: var(--bido-teal); }

/* ====== STAR RATING ====== */
.bido-home-stars {
  color: var(--bido-amber);
  letter-spacing: 1px;
  white-space: nowrap;
}
.bido-home-star-dim { opacity: 0.4; }

.bido-home-brand-svg { display: block; }

/* ====== TRIP BUILDER BAR ====== */
.bido-home-builder {
  display: grid;
  /* Track floors mirror the sibling .bido-trip-form (catalog.css) so no zone
     collapses below its content; the floors are sized up here because the home
     bar's values run at --bx-text-lg/800 (vs the catalog form's --bx-text-md).
     The Occasion track in particular needs ~12rem so its "Choose an occasion"
     prompt isn't clipped, and the Group track shrinks since its input is capped
     at 4.5rem. The fr shares distribute the slack; the @media rules below fold
     the bar to 2-up / 1-up before the floors could overflow. */
  grid-template-columns:
    minmax(9rem, 1fr)
    minmax(10rem, 1.05fr)
    minmax(5rem, 0.5fr)
    minmax(12rem, 1.2fr)
    minmax(7.5rem, auto);
  align-items: stretch;
  margin-top: clamp(36px, 5vw, 56px);
  padding: 12px;
  background: var(--bido-dark);
  border: 1px solid var(--bx-line-2);
  border-radius: var(--bx-r-xl);
  box-shadow:
    0 30px 60px -28px rgba(var(--bx-navy-rgb),0.7),
    0 0 40px -16px rgba(var(--bx-accent-rgb),0.22);
}
/* The hero builder carries .bx-light-surface (home.html.erb passes light: true)
   so it reads the light token set and pops as a bright card off the dark hero.
   Repaint the surface from the dark-bar navy to light paper to match the flipped
   tokens; the borderless cell values, separators, group input and select all
   already read --bx-* tokens, so they invert with no further rules. The
   closing-CTA builder omits the class and keeps the dark treatment above. */
.bido-home-builder.bx-light-surface {
  background: var(--bx-paper);
}
.bido-home-builder-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 20px;
}
.bido-home-builder-cell + .bido-home-builder-cell {
  border-left: 1px solid var(--bx-line);
}
.bido-home-builder-cell .eyebrow {
  font-size: var(--bx-text-3xs);
  color: var(--bx-ink-3);
}
.bido-home-builder-cell .input,
.bido-home-builder-cell .select,
.bido-home-builder-static-val,
.bido-home-builder .bido-date-range-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bx-ink);
  font-family: var(--bx-font-sans);
  font-size: var(--bx-text-lg);
  font-weight: 800;
  padding: 0;
  min-height: 0;
  width: 100%;
}
.bido-home-builder-cell .input:focus,
.bido-home-builder-cell .select:focus {
  box-shadow: none;
}
/* The closed select stays borderless/transparent on the bar, but its native
   open list would inherit that transparent background and read invisible —
   pin the options to a readable surface + ink (resolves on dark and light). */
.bido-home-builder-cell .select option {
  background-color: var(--bx-paper-2);
  color: var(--bx-ink);
}
/* The closed vibe select is borderless (per #42 scope); without a caret it
   reads as static text like the Destination value. Hang a chevron off the cell
   holding the select — only the vibe cell has a direct .select child — so it
   signals a dropdown. currentColor/--bx-ink-3 track the dark bar + light cell,
   matching the Dates caret family (date-picker.css). */
.bido-home-builder-cell:has(> .select) {
  position: relative;
}
.bido-home-builder-cell:has(> .select)::after {
  content: "";
  position: absolute;
  inset-inline-end: 20px;
  inset-block-end: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--bx-ink-3);
  opacity: 0.75;
  pointer-events: none;
}
.bido-home-builder-cell:has(> .select) .select {
  padding-inline-end: 22px;
  /* The widened track fits the prompt + most options; the single longest value
     ("Adventure & Outdoor Expeditions") can still exceed it, so truncate the
     selected value cleanly rather than hard-clipping mid-glyph. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The group field is a real editable control, not a borderless cell value —
   it carries the bordered .bido-group-input affordance like the catalog
   trip-form's group cell, so the native number spinner reads as editable. */
.bido-home-builder-cell .bido-group-input {
  width: 100%;
  max-width: 4.5rem;
  border: 1px solid var(--bx-line-2);
  background: var(--bx-fill);
  border-radius: var(--bx-r-sm);
  padding: 6px 8px;
  font-size: var(--bx-text-lg);
}
.bido-home-builder-static-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bido-home-builder .bido-home-builder-go {
  align-self: stretch;
  justify-content: center;
  margin: 0;
  padding-inline: 28px;
  border-radius: var(--bx-r-lg);
  font-weight: 800;
}

/* ====== SCROLL REVEAL — progressive enhancement, content shows without it.
   The range END is keyed to the entry phase (not cover) so it always completes
   once a band is fully scrolled into view. The terminal band (.bido-home-send)
   has only the footer below it, so a cover-phase end could never be reached at
   max scroll, leaving that section frozen at opacity < 1 — entry-bounded fixes
   it for any last-in-page band. */
@media (prefers-reduced-motion: no-preference) {
  .bido-home-page .bido-reveal {
    animation: bido-home-reveal both linear;
    animation-timeline: view();
    animation-range: entry 3% entry 30%;
  }
}
@keyframes bido-home-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ====== RESPONSIVE — builder bar ======
   Five tracks only while the viewport is wide enough to show every zone's
   value in full at the bar's 16px/800 type; the five 16px zones need ~1080px
   of bar width, so below xl (80rem) we fold to a 2-up grid with self-contained
   cells (no border-alignment math), then to a single column. Folding at lg
   (64rem) left the bar five-up but cramped on common laptop widths, clipping
   the Occasion value. */
@media (max-width: 80rem) {
  .bido-home-builder {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .bido-home-builder-cell {
    /* Theme-aware fill so the folded cells read a subtle separation on both the
       dark closing bar and the light hero card (--bx-fill flips per surface). */
    background: var(--bx-fill);
    border-radius: var(--bx-r);
  }
  .bido-home-builder-cell + .bido-home-builder-cell {
    border-left: 0;
  }
  .bido-home-builder .bido-home-builder-go {
    grid-column: 1 / -1;
    min-height: var(--bx-control-h-lg);
  }
}
@media (max-width: 40rem) {
  .bido-home-builder {
    grid-template-columns: 1fr;
  }
}