/* BoemBoost Theme — pages/home.css
   Homepage grid builder styles
   ===================================== */

/* Prevent horizontal page scroll (carousel track wider than viewport on mobile) */
.front-page-template,
body.home { overflow-x: hidden; }

/* Content Padding — Wide mode: full-width with 56px sides, falls back to 1rem on mobile */
@media (max-width: 640px) {
  .bb-cp-wide { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Block hover lift effects ── */
/* Rules are output inline in front-page.php with hardcoded px values to avoid WP Rocket CSS minifier issues */

/* ── Hero ── */
.bb-hp-hero {
  overflow: hidden;
  width: 100%;
}
.bb-hp-hero-inner {
  width: 100%;
}

/* ── Button hover states ── */
.bb-hp-btn-primary:hover { opacity: 0.88; }
.bb-hp-btn-outline:hover { opacity: 0.75; }

/* ── Grid rows ── */
.bb-hp-row {
  width: 100%;
}

/* ── Blocks ── */
.bb-hp-block {
  box-sizing: border-box;
  transition: none;
}

/* ── Text block ── */
.bb-hp-block--text h2 {
  font-family: var(--bb-font-heading);
}
.bb-hp-block--text p {
  margin: 0;
}

/* ── Cards grid mode — matches results page exactly ── */
.bb-hp-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (max-width: 1024px) { .bb-hp-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bb-hp-cards-grid { grid-template-columns: 1fr; } }

/* Grid cards: vertical layout identical to results page */
.bb-hp-cards-grid .bb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bb-hp-cards-grid .bb-card__photo {
  min-height: unset;
  aspect-ratio: 4 / 3;
}
.bb-hp-cards-grid .bb-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Carousel wrapper (auto-scroll + manual drag — same structure) ── */
.bb-hp-carousel-wrap {
  width: 100%;
  overflow: hidden;
}
.bb-hp-carousel-track {
  display: flex;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Card slides — match grid view card exactly ── */
.bb-hp-card-slide {
  flex-shrink: 0;
}

/* Carousel card responsive sizing — matches results page card widths at each breakpoint */
@media (max-width: 1024px) {
  .bb-hp-card-slide { width: min(420px, calc(50vw - 3rem)) !important; }
}
@media (max-width: 640px) {
  .bb-hp-card-slide { width: min(420px, calc(100vw - 4rem)) !important; }
}
.bb-hp-card-slide .bb-card {
  height: 100%;
  /* Grid-view card proportions */
  display: flex;
  flex-direction: column;
}
.bb-hp-card-slide .bb-card__photo {
  min-height: unset;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.bb-hp-card-slide .bb-card__photo img,
.bb-hp-card-slide .bb-card__photo .bb-card__photo-link {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bb-hp-card-slide .bb-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── Reviews ── */
.bb-hp-block--reviews {
  background: var(--bb-bg-subtle, #edf2ee);
}

/* ── Calculator block: remove outer padding from bb-calc-sectie ── */
.bb-hp-block--calculator .bb-calc-sectie {
  padding: 0;
}
.bb-hp-block--calculator .bb-calc-inner {
  max-width: 100%;
  padding: 3rem clamp(16px, 4vw, 56px);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .bb-hp-row {
    flex-direction: column !important;
  }
  .bb-hp-block {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .bb-hp-block--text [style*="padding:3rem 3.5rem"] {
    padding: 2rem 1.25rem !important;
    min-height: 240px !important;
  }
  .bb-hp-hero-inner {
    min-height: calc(100svh - 52px) !important;
    padding: 3rem 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .bb-hp-hero-inner {
    padding: 2.5rem 1rem !important;
  }
}

/* ── Review block — header (title + badge) ── */
/* On mobile: stack vertically so badge sits below the title text */
@media (max-width: 640px) {
  .bb-hp-rev-header {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }
}

/* ── Review cards grid — responsive ── */
/* On tablet: single column */
@media (max-width: 1024px) {
  .bb-hp-reviews-grid {
    grid-template-columns: 1fr !important;
  }
}
/* On mobile: single column (already covered by 1024px but explicit for clarity) */
@media (max-width: 640px) {
  .bb-hp-reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* v3.9.332 — Single source of truth for the homepage carousel nav arrows'
   spacing. Both render spots (property-cards carousel + slider blocks) share
   this; the inline styles no longer hardcode margins so they can't drift. */
.bb-hp-carousel-arrows {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* v3.9.355 — Section title fixes on mobile.
   (1) In-block titles ("Titel in blok-kolom") sit inside a flex row that also
       holds a full-bleed carousel. On mobile the row becomes a column and the
       carousel child overflows the viewport; the title's max-width:1280px +
       margin:auto then centred against the blown-out width and slid out of the
       overflow:hidden row, so the title vanished. Cap it to the viewport and
       drop the auto-centring on mobile so it renders like a standalone title. */
@media (max-width: 768px) {
  .bb-hp-ibtitle {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}