/* BoemBoost Theme — cards.css
   Property card — always vertical (image top, content below)
   LIST view: 1 card per row (full width)
   GRID view: 3 cards per row
   Matches the Suplusnis reference design exactly.
   ============================================================ */

/* ----------------------------------------
   Card base — LIST layout: horizontal 55% image / 45% content
---------------------------------------- */
.bb-card {
  background: #ffffff;
  border-radius: var(--bb-srl-card-radius, var(--bb-r-lg));
  overflow: hidden;
  display: grid;
  grid-template-columns: 55% 45%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* v3.9.511 — de kaart had in rust helemaal geen schaduw; alleen bij hover.
     Leeg laten in Design → Shadows houdt dat zo. */
  box-shadow: var(--bb-shadow-card-rest, none);
  cursor: pointer;
  text-decoration: none;
  color: var(--bb-text);
  min-height: var(--bb-card-min-height-list, auto); /* v3.9.210 — Resultaten lijst: card-hoogte (leeg = auto) */
}

.bb-card:hover {
  box-shadow: var(--bb-shadow-card-hover, var(--bb-shadow-lg));
  transform: translateY(-2px);
}

/* ----------------------------------------
   GRID layout — vertical stack (image top, content below)
---------------------------------------- */
.bb-results__list.is-grid .bb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--bb-card-min-height-grid, auto); /* v3.9.210 — Resultaten grid: card-hoogte (leeg = auto) */
}

/* ----------------------------------------
   v3.9.344 — Homepage carousel cards: ALWAYS vertical (image top, content below),
   mirroring the grid layout. These rules previously lived only in the
   front-page-only home.css, so if that stylesheet was deferred/optimised the
   carousel card fell back to the horizontal 55%/45% base .bb-card layout — whose
   taller/wider internal geometry overflowed the 420px slide and bled past the
   carousel mask on the left. Keeping them in the always-loaded cards.css makes
   the carousel card robust regardless of home.css timing.
---------------------------------------- */
.bb-hp-card-slide .bb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.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;
}

/* ----------------------------------------
   Photo — list view fills full card height
---------------------------------------- */
.bb-card__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-srl-photo-radius, 0);
  background: var(--bb-card-noimg-bg, var(--bb-dark));
  width: 100%;
  min-height: 300px;
  flex-shrink: 0;
}

/* Grid view: fixed aspect ratio */
.bb-results__list.is-grid .bb-card__photo {
  min-height: unset;
  aspect-ratio: 4 / 3;
}

.bb-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bb-card:hover .bb-card__photo img {
  transform: scale(1.04);
}

/* The clickable link overlay on the photo */
.bb-card__photo-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Placeholder when no thumbnail */
.bb-card__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: var(--bb-card-noimg-bg, var(--bb-dark));
  font-family: var(--bb-font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--bb-card-noimg-text, rgba(153, 255, 187, 0.5));
}

/* ── Card image slider ─────────────────────────── */
.bb-card__slider {
  position: absolute;
  inset: 0;
}

.bb-card__slide {
  display: none;
  position: absolute;
  inset: 0;
}

.bb-card__slide.bb-slide-active {
  display: block;
}

.bb-card__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bb-card:hover .bb-card__slide.bb-slide-active img {
  transform: scale(1.04);
}

/* Arrow buttons */
.bb-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--bb-card-slidenav-bg, rgba(0,0,0,0.35));
  color: var(--bb-card-slidenav-arrow, #fff);
  border: none;
  width: var(--bb-card-slidenav-size, 26px);
  height: var(--bb-card-slidenav-size, 26px);
  border-radius: var(--bb-card-slidenav-radius, 50%);
  font-size: var(--bb-card-slidenav-arrow-size, 16px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: 0;
}

.bb-card__photo:hover .bb-slide-btn {
  opacity: 1;
}

.bb-slide-prev { left: 8px; }
.bb-slide-next { right: 8px; }

.bb-slide-btn:hover {
  background: var(--bb-card-slidenav-hover-bg, rgba(0,0,0,0.6));
}

/* ----------------------------------------
   Badges — top-left on photo
---------------------------------------- */
.bb-card__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.bb-card__badge {
  background: var(--bb-dark);
  color: var(--bb-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}

/* ----------------------------------------
   Heart / wishlist — top-right on photo
---------------------------------------- */
.bb-card__heart {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: var(--bb-card-heart-bg, var(--bb-dark));
  border-radius: var(--bb-card-heart-radius, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, background 0.2s;
  z-index: 2;
}
.bb-card__heart.is-active {
  background: var(--bb-card-heart-bg-active, var(--bb-card-heart-bg, var(--bb-dark)));
}

.bb-card__heart svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--bb-card-heart-passive, var(--bb-card-heart, var(--bb-heart, rgba(153, 255, 187, 0.6))));
  stroke-width: 2;
  transition: all 0.2s;
}

.bb-card__heart.is-active svg {
  fill: var(--bb-card-heart-active, var(--bb-heart-active, var(--bb-accent)));
  stroke: var(--bb-card-heart-active, var(--bb-heart-active, var(--bb-accent)));
}

.bb-card__heart:hover {
  transform: scale(1.1);
}

/* ----------------------------------------
   Body — always below the photo
---------------------------------------- */
.bb-card__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

/* Location */
.bb-card__locatie {
  font-family: var(--bb-role-pc-locatie-font, inherit);
  font-size: var(--bb-role-pc-locatie-size, 12px);
  color: var(--bb-role-pc-locatie-color, var(--bb-dark-light));
  font-weight: var(--bb-role-pc-locatie-weight, 600);
  line-height: var(--bb-role-pc-locatie-lh, normal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* Title */
.bb-card__naam {
  font-family: var(--bb-role-pc-naam-font, var(--bb-font-heading));
  font-size: var(--bb-role-pc-naam-size, 1.7rem);
  font-weight: var(--bb-role-pc-naam-weight, 600);
  color: var(--bb-role-pc-naam-color, var(--bb-dark));
  margin-bottom: 0.6rem;
  line-height: var(--bb-role-pc-naam-lh, 1.3);
  letter-spacing: -0.01em;
}

.bb-card__naam a {
  color: inherit;
  text-decoration: none;
}

.bb-card__naam a:hover { color: var(--bb-role-pc-naam-hover-color, var(--bb-dark-mid)); }

/* Availability pill */
.bb-card__beschikbaar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--bb-srl-besch-radius, 20px);
  margin-bottom: 1rem;
}

.bb-card__beschikbaar--groen {
  background: var(--bb-srl-besch-groen-bg, rgba(153, 255, 187, 0.2));
  color: var(--bb-srl-besch-groen-text, #004040);
}
.bb-card__beschikbaar--groen .bb-card__check { stroke: var(--bb-srl-besch-groen-check, currentColor); }

.bb-card__beschikbaar--oranje {
  background: var(--bb-srl-besch-oranje-bg, rgba(255, 200, 100, 0.2));
  color: var(--bb-srl-besch-oranje-text, #7a4500);
}

.bb-card__check { width: 12px; height: 12px; }

/* Description — 2 line clamp */
.bb-card__desc {
  font-family: var(--bb-role-pc-desc-font, inherit);
  font-size: var(--bb-role-pc-desc-size, 0.94rem);
  color: var(--bb-role-pc-desc-color, var(--bb-text-muted));
  line-height: var(--bb-role-pc-desc-lh, 1.7);
  font-weight: var(--bb-role-pc-desc-weight, 300);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta pills */
.bb-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.bb-card__meta-pill {
  /* v3.9.509 — maat en gewicht komen uit Typography (rol pc-metapill, per
     kaartsoort instelbaar); kleur, achtergrond, radius en padding blijven in
     Property card design. De oude vaste 10px/500 zijn nu de terugval. */
  font-size: var(--bb-role-pc-metapill-size, 10px);
  font-weight: var(--bb-role-pc-metapill-weight, 500);
  line-height: var(--bb-role-pc-metapill-lh, 1.5);
  font-family: var(--bb-role-pc-metapill-font, inherit);
  color: var(--bb-role-pc-metapill-color, var(--bb-srl-pill-text, var(--bb-dark)));
  background: var(--bb-srl-pill-bg, var(--bb-bg-subtle));
  padding: var(--bb-card-pill-pad-card, var(--bb-card-pill-pad, 3px 8px));
  border-radius: var(--bb-srl-pill-radius, 20px);
}

/* ----------------------------------------
   Footer: price + CTA
---------------------------------------- */
.bb-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid var(--bb-border);
  padding-top: 1.4rem;
  margin-top: 0.5rem;
  gap: var(--bb-s3);
}

.bb-card__prijs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bb-card__prijs-label {
  font-family: var(--bb-role-pc-price-label-font, inherit);
  font-size: var(--bb-role-pc-price-label-size, 10px);
  color: var(--bb-role-pc-price-label-color, var(--bb-srl-price-label, var(--bb-text-muted)));
  font-weight: var(--bb-role-pc-price-label-weight, 300);
  line-height: var(--bb-role-pc-price-label-lh, normal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bb-card__prijs-bedrag {
  font-family: var(--bb-role-pc-price-bedrag-font, var(--bb-font-heading));
  font-size: var(--bb-role-pc-price-bedrag-size, 1.05rem);
  font-weight: var(--bb-role-pc-price-bedrag-weight, 600);
  color: var(--bb-role-pc-price-bedrag-color, var(--bb-srl-price-amount, var(--bb-dark)));
  line-height: var(--bb-role-pc-price-bedrag-lh, 1.2);
  white-space: nowrap;
}

.bb-card__prijs-note {
  font-family: var(--bb-role-pc-price-note-font, inherit);
  font-size: var(--bb-role-pc-price-note-size, 9px);
  color: var(--bb-role-pc-price-note-color, var(--bb-srl-price-note, var(--bb-text-muted)));
  font-weight: var(--bb-role-pc-price-note-weight, normal);
  line-height: var(--bb-role-pc-price-note-lh, normal);
  font-style: italic;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bb-card__prijs-note::before {
  content: '✓';
  font-style: normal;
  font-weight: 700;
  color: var(--bb-dark-light);
  font-size: 8px;
}

/* CTA pill */
.bb-card__cta {
  font-size: 9px;
  font-weight: 700;
  color: var(--bb-srl-card-cta-text, var(--bb-accent));
  background: var(--bb-srl-card-cta-bg, var(--bb-dark));
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--bb-srl-card-cta-radius, 20px);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.bb-card__cta:hover {
  background: var(--bb-srl-card-cta-hover-bg, var(--bb-dark-mid));
  color: var(--bb-srl-card-cta-hover-text, var(--bb-srl-card-cta-text, var(--bb-accent)));
}

/* ----------------------------------------
   Post card (blog/news)
---------------------------------------- */
.bb-post-card {
  background: var(--bb-bg-white);
  border-radius: var(--bb-r-lg);
  overflow: hidden;
  box-shadow: var(--bb-shadow-post-rest, var(--bb-shadow-card));
  transition: box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
  color: var(--bb-text);
  display: flex;
  flex-direction: column;
}

.bb-post-card:hover {
  box-shadow: var(--bb-shadow-post-hover, var(--bb-shadow-lg));
  transform: translateY(-2px);
}

.bb-post-card__image { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.bb-post-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.bb-post-card:hover .bb-post-card__image img { transform: scale(1.04); }
.bb-post-card__content { display: flex; flex-direction: column; flex: 1; padding: var(--bb-s5); gap: var(--bb-s3); }
.bb-post-card__cat { font-weight: 700; color: var(--bb-accent-dark); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; }
.bb-post-card__title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--bb-text); flex: 1; }
.bb-post-card__excerpt { font-size: 0.875rem; color: var(--bb-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ----------------------------------------
   Responsive
---------------------------------------- */
@media (max-width: 768px) {
  .bb-card__naam { font-size: var(--bb-role-pc-naam-size, 1.3rem); }
  .bb-card__body { padding: 1.25rem; }

  /* List view on mobile: switch from horizontal grid to vertical stack */
  .bb-card {
    display: flex;
    flex-direction: column;
  }
  .bb-card__photo {
    min-height: unset;
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

/* ============================================================
   Banner Shout-Out
============================================================ */
.bb-shoutout {
    border-radius: 14px;
    margin: 2rem 0;
    overflow: hidden;
}

.bb-shoutout__inner {
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}

.bb-shoutout__image img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    object-fit: cover;
}

.bb-shoutout__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 640px;
}

.bb-shoutout__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bb-shoutout__eyebrow::before,
.bb-shoutout__eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.bb-shoutout__heading {
    font-family: var(--bb-font-heading);
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
}

.bb-shoutout__body {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.7;
    font-weight: 300;
}

.bb-shoutout__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1.8rem;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid currentColor;
    opacity: 0.9;
    transition: opacity 0.2s;
    margin-top: 0.5rem;
}

.bb-shoutout__cta:hover { opacity: 1; }

.bb-shoutout__card {
    width: 100%;
    max-width: 500px;
}

/* ============================================================
   Shout-Out 50/50 Split layout
============================================================ */
.bb-shoutout-split {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    margin: 2rem 0;
}

.bb-shoutout-split__half {
    flex: 1;
    display: flex;
    align-items: center;
}

.bb-shoutout-split__half .bb-shoutout__inner {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.bb-shoutout-split__half .bb-shoutout__image img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .bb-shoutout-split {
        flex-direction: column;
    }
    .bb-shoutout-split--right-top .bb-shoutout-split__half:last-child {
        order: -1;
    }
}

/* Show slider arrows on touch devices — always visible, no hover needed */
@media (max-width: 768px) {
  .bb-slide-btn { display: flex; }
  .bb-card__photo .bb-slide-btn { opacity: 1; }
}

/* ============================================================
   v3.9.302 — "X beschikbaar" pill on the card image.
   Shape (bg/radius/padding) → Property card design (--bb-card-availpill-*).
   Typography (font/size/weight/lh/color) → Typography → Property cards
   (--bb-role-pc-availpill-*). Fallbacks keep the current look (leeg = std).
============================================================ */
.bb-card .bb-prop-similar-pill {
  background: var(--bb-card-availpill-bg, var(--bb-prop-sim-pill-bg, rgba(0,59,59,0.85)));
  border-radius: var(--bb-card-availpill-radius, 10px);
  padding: var(--bb-card-availpill-padding, 3px 8px);
  font-family: var(--bb-role-pc-availpill-font, inherit);
  font-size: var(--bb-role-pc-availpill-size, 10px);
  font-weight: var(--bb-role-pc-availpill-weight, 700);
  line-height: var(--bb-role-pc-availpill-lh, normal);
  color: var(--bb-role-pc-availpill-color, var(--bb-prop-sim-pill-text, var(--bb-accent)));
}


/* v3.9.509 — Slider card: eigen pil-padding. De kaart is daar smaller dan in de
   zoekresultaten, dus dezelfde padding oogt er te ruim. Valt terug op de
   algemene waarde zolang je niets invult. */
.bb-hp-card-slide .bb-card__meta-pill {
  padding: var(--bb-card-pill-pad-slider, var(--bb-card-pill-pad, 3px 8px));
}


/* v3.9.511 — Slider card: eigen schaduw, los van de zoekresultaten. De kaart is
   daar kleiner, dus dezelfde diepte oogt er zwaarder. Leeg = volgt de gewone
   kaart-instelling. */
.bb-hp-card-slide .bb-card {
  box-shadow: var(--bb-shadow-slider-rest, var(--bb-shadow-card-rest, none));
}
.bb-hp-card-slide .bb-card:hover {
  box-shadow: var(--bb-shadow-slider-hover, var(--bb-shadow-card-hover, var(--bb-shadow-lg)));
}