/* Home — the "Four tools" bundle band: the bundle discount tiers, a featured
   Stays card (image hero + stay rows), and three mini pillar cards for
   Wheels / Vibes / Pros. Rendered on a light surface (see home.html.erb);
   the featured Stays card stays a .bx-dark island within it. */

.bido-home-bundle {
  background-image:
    radial-gradient(ellipse 50% 40% at 96% 8%, rgba(var(--bx-teal-rgb),0.08), transparent 62%);
}

/* ====== HEAD ====== */
.bido-home-bundle-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.bido-home-bundle-h {
  line-height: 1.06;
}
.bido-home-bundle-lead p {
  margin-top: 20px;
  max-width: 34rem;
  font-size: var(--bx-text-lg);
  line-height: 1.55;
  color: var(--bx-ink-2);
}

.bido-home-bundle-disc {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.bido-home-bundle-disc-l {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bx-ink-3);
}
.bido-home-bundle-disc-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bido-home-bd-cell {
  padding: 14px 8px;
  text-align: center;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r);
  background: var(--bx-fill);
}
.bido-home-bd-n {
  display: block;
  font-size: var(--bx-text-sm);
  font-weight: 600;
  color: var(--bx-ink-3);
}
.bido-home-bd-pct {
  display: block;
  margin-top: 4px;
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-lg);
  font-weight: 800;
  color: var(--bx-ink);
}
.bido-home-bd-2 {
  border-color: rgba(var(--bx-teal-rgb),0.32);
  background: rgba(var(--bx-teal-rgb),0.06);
}
.bido-home-bd-2 .bido-home-bd-pct { color: var(--bx-good-ink); }
.bido-home-bd-3 {
  border-color: rgba(var(--bx-accent-rgb),0.30);
  background: rgba(var(--bx-accent-rgb),0.06);
}
.bido-home-bd-3 .bido-home-bd-pct { color: var(--bx-accent-ink); }
.bido-home-bd-cell.active {
  border-color: rgba(var(--bx-accent-rgb),0.5);
  background: rgba(var(--bx-accent-rgb),0.12);
}
.bido-home-bd-cell.active .bido-home-bd-n { color: var(--bx-ink-2); }
.bido-home-bd-cell.active .bido-home-bd-pct { color: var(--bx-accent-ink); }
.bido-home-bundle-disc-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
}

/* ====== FEATURED STAYS CARD ====== */
.bido-home-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  overflow: hidden;
  background: var(--bido-dark);
  box-shadow: 0 30px 60px -32px rgba(var(--bx-navy-rgb),0.7);
}
.bido-home-featured-hero {
  position: relative;
  display: flex;
  min-height: 26rem;
}
.bido-home-featured-hero > .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bido-home-featured-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(var(--bx-navy-rgb),0.30) 0%, rgba(var(--bx-navy-rgb),0.92) 76%);
}
.bido-home-featured-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--bx-line-2);
  border-radius: var(--bx-r-pill);
  background: var(--bido-navy);
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-ink);
}
.bido-home-featured-badge svg { color: var(--bido-cyan); }
.bido-home-page .bido-home-featured-text h3 {
  font-family: var(--bx-font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.12;
  color: rgb(var(--bx-white-rgb));
  margin-bottom: 10px;
}
.bido-home-featured-text p {
  max-width: 30rem;
  margin-bottom: 18px;
  font-size: var(--bx-text);
  line-height: 1.5;
  color: var(--bx-ink-2);
}
.bido-home-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.bido-home-ft-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bido-home-ft-ic {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--bx-r-sm);
  background: rgba(var(--bx-accent-rgb),0.16);
  color: var(--bx-stays-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bido-home-ft-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.bido-home-ft-copy strong {
  font-size: var(--bx-text-md);
  font-weight: 700;
  color: var(--bx-ink);
}
.bido-home-ft-copy em {
  margin-top: 2px;
  font-style: normal;
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

.bido-home-featured-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
.bido-home-featured-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bido-home-fp-row {
  display: grid;
  grid-template-columns: 64px 1fr auto 18px;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: var(--bx-fill);
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.bido-home-fp-thumb {
  width: 64px;
  height: 56px;
  border-radius: var(--bx-r-sm);
  overflow: hidden;
}
.bido-home-fp-thumb .photo {
  width: 100%;
  height: 100%;
}
.bido-home-fp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bido-home-fp-nm {
  font-size: var(--bx-text);
  font-weight: 700;
  color: var(--bx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bido-home-fp-mt {
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
}
.bido-home-fp-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
}
.bido-home-fp-price {
  text-align: right;
}
.bido-home-fp-price strong {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-lg);
  font-weight: 800;
  color: var(--bx-ink);
}
.bido-home-fp-price em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-3xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
}
.bido-home-fp-arr {
  display: inline-flex;
  color: var(--bx-ink-3);
}
.bido-home-fp-viewall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding: 15px 18px;
  border-radius: var(--bx-r-lg);
  background: var(--bido-cyan);
  color: var(--bido-navy);
  font-family: var(--bx-font-display);
  font-weight: 800;
  font-size: var(--bx-text);
}

/* ====== MINI PILLARS ====== */
/* Mini pillars reflow 3→2→1 on container width (Rule 7) — no breakpoint. */
.bido-home-mini-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  margin-top: 20px;
}
.bido-home-mini-pillar {
  display: grid;
  grid-template-columns: 52px 1fr 18px;
  gap: 15px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: var(--bx-fill);
  color: inherit;
  transition: transform .14s ease, border-color .15s ease;
}
.bido-home-mp-ico {
  width: 52px;
  height: 52px;
  border-radius: var(--bx-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--bx-white-rgb));
}
.bido-home-mp-wheels .bido-home-mp-ico { background: var(--bido-teal); }
.bido-home-mp-vibes  .bido-home-mp-ico { background: var(--bido-amber); }
.bido-home-mp-pros   .bido-home-mp-ico { background: var(--bx-pros); }
.bido-home-mp-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bido-home-mp-lbl {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-ink);
}
.bido-home-mp-t {
  font-size: var(--bx-text-md);
  line-height: 1.35;
  color: var(--bx-ink-2);
}
.bido-home-mp-arr {
  display: inline-flex;
  color: var(--bx-ink-3);
}

/* Hover affordances — pointer only (Rule 7). */
@media (any-hover: hover) {
  .bido-home-fp-row:hover {
    border-color: var(--bx-accent-line);
    background: rgba(var(--bx-accent-rgb),0.06);
  }
  .bido-home-fp-row:hover .bido-home-fp-arr { color: var(--bido-cyan); }
  .bido-home-fp-viewall:hover { background: var(--bido-blue); }
  .bido-home-mini-pillar:hover {
    transform: translateY(-2px);
    border-color: var(--bx-line-2);
  }
  .bido-home-mini-pillar:hover .bido-home-mp-arr { color: var(--bido-cyan); }
}

/* === Responsive — bundle === */
@media (max-width: 64rem) {
  .bido-home-bundle-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bido-home-featured {
    grid-template-columns: 1fr;
  }
  .bido-home-featured-hero {
    min-height: 22rem;
  }
}
/* Mobile tier — the discount tiers and the featured stay rows become
   horizontal scroll-snap carousels so each item stays full-size and tappable
   instead of shrinking into an unreadable grid. */
@media (max-width: 48rem) {
  .bido-home-bundle-disc-row {
    grid-auto-flow: column;
    grid-auto-columns: 7rem;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .bido-home-bundle-disc-row::-webkit-scrollbar { display: none; }
  .bido-home-bd-cell { scroll-snap-align: start; }

  .bido-home-featured-rows {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bido-home-featured-rows::-webkit-scrollbar { display: none; }
  .bido-home-fp-row {
    scroll-snap-align: start;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .bido-home-fp-thumb {
    width: 100%;
    height: 8rem;
  }
  .bido-home-fp-price { text-align: left; }
  .bido-home-fp-arr { display: none; }
}

@media (max-width: 40rem) {
  .bido-home-bundle-disc-row {
    grid-auto-columns: 6.5rem;
  }
}