/* =========================================================
     TOKENS
     ========================================================= */
  :root{
    --bl-green:#2f9772;
    --bl-green-dark:#3d6a08;
    --bl-green-light:#3db98d;

    --bl-ink:#161f2b;
    --bl-ink-soft:#374151;
    --bl-muted:#6b7280;
    --bl-line:#e7ecf2;
    --bl-surface:#ffffff;
    --bl-surface-2:#eafaf4;
    --bl-surface-3:#fbfcfa;
    --bl-page:#f5f7f9;
    --bl-skeleton:#e9edf2;
    /* green that stays readable on whatever the current surface is */
    --bl-accent-text:var(--bl-green-dark);

    --bl-radius:22px;
    --bl-radius-sm:12px;
    --bl-shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 28px -22px rgba(16,24,40,.35);
    --bl-shadow-hi:0 22px 48px -20px rgba(61,106,8,.42);
    --bl-ring:0 0 0 3px color-mix(in srgb,var(--bl-green) 35%,transparent);

    --bl-ease:cubic-bezier(.22,1,.36,1);
    --bl-gutter:clamp(.85rem, 1.6vw, 1.5rem);
  }

  /* Dark theme: follows the OS, but the toggle always wins */
  @media (prefers-color-scheme:dark){
    :root[data-theme="auto"]{
      --bl-ink:#eef2f7; --bl-ink-soft:#c6cfda; --bl-muted:#93a0b1;
      --bl-line:#26303d; --bl-surface:#121a24; --bl-surface-2:#172230;
      --bl-surface-3:#101821; --bl-page:#0b1119; --bl-skeleton:#1b2532; --bl-accent-text:#a9e552;
      --bl-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 34px -24px rgba(0,0,0,.9);
      --bl-shadow-hi:0 26px 54px -22px rgba(0,0,0,.85);
    }
  }
  :root[data-theme="dark"]{
    --bl-ink:#eef2f7; --bl-ink-soft:#c6cfda; --bl-muted:#93a0b1;
    --bl-line:#26303d; --bl-surface:#121a24; --bl-surface-2:#172230;
    --bl-surface-3:#101821; --bl-page:#0b1119; --bl-skeleton:#1b2532; --bl-accent-text:#a9e552;
    --bl-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 34px -24px rgba(0,0,0,.9);
    --bl-shadow-hi:0 26px 54px -22px rgba(0,0,0,.85);
  }

  *{-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  .visually-hidden{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  :where(a,button,select,input):focus-visible{outline:none;box-shadow:var(--bl-ring);border-radius:10px}

  /* =========================================================
     GRID — three columns is the design target
     ========================================================= */
  .bl-grid{
    display:grid;
    gap:var(--bl-gutter);
    grid-template-columns:1fr;
    align-items:stretch;
  }
  @media (min-width:600px){ .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (min-width:992px){ .bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  /* List view: one full-width column, cards re-flow via container queries */
  .bl-grid.is-list{grid-template-columns:minmax(0,1fr)}

  /* staggered entrance */
  .bl-cell{opacity:0;transform:translateY(14px)}
  .bl-cell.is-in{
    opacity:1;transform:none;
    transition:opacity .5s var(--bl-ease), transform .55s var(--bl-ease);
    transition-delay:calc(var(--i,0) * 70ms);
  }

  /* =========================================================
     CARD
     ========================================================= */
  .bl-card{
    container-type:inline-size;
    container-name:card;
    position:relative;
    display:flex;flex-direction:column;
    height:100%;
    background:var(--bl-surface);
    border:1px solid var(--bl-line);
    border-radius:var(--bl-radius);
    box-shadow:var(--bl-shadow);
    overflow:hidden;
    isolation:isolate;
    transition:transform .35s var(--bl-ease), box-shadow .35s ease, border-color .35s ease;
  }
  /* gradient hairline that reveals on hover */
  .bl-card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,var(--bl-green-light),var(--bl-green),transparent 65%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:4;
  }
  /* pointer-tracking spotlight — the card lights up under the cursor */
  .bl-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
    background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,0%),
      color-mix(in srgb,var(--bl-green) 16%,transparent), transparent 70%);
    opacity:0;transition:opacity .4s ease;
  }
  @media (hover:hover){
    .bl-card:hover{transform:translateY(-6px);box-shadow:var(--bl-shadow-hi);border-color:transparent}
    .bl-card:hover::before,.bl-card:hover::after{opacity:1}
    .bl-card:hover .bl-slide.is-active{transform:scale(1.06)}
    .bl-card:hover .bl-cta{display:inline-grid;opacity:1;transform:translateY(0)}
    .bl-card:hover .bl-nav{opacity:1}
  }
  .bl-card:focus-within{box-shadow:var(--bl-shadow-hi);border-color:var(--bl-green)}
  .bl-card:focus-within::before{opacity:1}
  .bl-card.is-rented{opacity:.92}

  /* .bl-main is the axis the whole card pivots on: column normally, row when wide */
  .bl-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
  .bl-link{display:flex;min-width:0;text-decoration:none;color:inherit}

  /* =========================================================
     MEDIA + MINI GALLERY
     ========================================================= */
  .bl-media{
    position:relative;width:100%;aspect-ratio:4/3;background:var(--bl-skeleton);
    overflow:hidden;flex:1 1 auto;
  }
  .bl-media.is-loading::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,#fff 45%,transparent) 40%,transparent 60%);
    background-size:220% 100%;
    animation:shimmer 1.3s linear infinite;
  }
  @keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

  .bl-slide{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
    opacity:0;transform:scale(1.02);
    transition:opacity .5s ease, transform .7s var(--bl-ease);
  }
  .bl-slide.is-active{opacity:1}
  .is-rented .bl-slide{filter:grayscale(.55)}
  .bl-media::after{
    content:"";position:absolute;inset:auto 0 0 0;height:58%;z-index:1;
    background:linear-gradient(to top,rgba(8,14,8,.72),rgba(8,14,8,.15) 55%,transparent);
    pointer-events:none;
  }

  .bl-badges{position:absolute;z-index:3;top:.7rem;left:.7rem;right:.7rem;display:flex;gap:.35rem;flex-wrap:wrap}
  .bl-chip{
    display:inline-flex;align-items:center;gap:.35rem;
    background:var(--color-green);backdrop-filter:blur(8px);
    color:var(--bs-white);
    font-size:.72rem;font-weight:800;line-height:1.2;
    padding:.32rem .62rem;border-radius:999px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.45);
  }
  .bl-chip i{color:#fff}
  .bl-chip--new{
    margin-inline-start:auto;color:var(--color-green);
    background:color-mix(in srgb,var(--bl-surface) 92%,transparent);
  }
  .bl-chip--new i{color:#fff}

  .bl-price{
    position:absolute;z-index:3;left:.9rem;bottom:-1px;color:var(--color-green);
    display:flex;align-items:baseline;gap:.3rem;padding:.55rem;
    text-shadow:0 1px 12px rgba(0,0,0,.05);background:#ffffff;border-radius:4px 4px 0 0;
  }
  .bl-price b{font-size:clamp(1.05rem,.9rem + 1.1vw,1.35rem);font-weight:800;line-height:1;letter-spacing:-.02em}
  .bl-price small{font-size:.7rem;font-weight:600;opacity:.92}
  .bl-chip--new .dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--color-green)}
  .bl-card:not(.is-rented) .bl-chip--new .dot{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,151,114,.8)}50%{box-shadow:0 0 0 .3rem rgba(47,151,114,0)}}

  /* gallery controls */
  .bl-nav{
    position:absolute;z-index:3;top:50%;translate:0 -50%;
    display:grid;place-items:center;width:1.9rem;height:1.9rem;
    border:0;border-radius:50%;cursor:pointer;
    background:color-mix(in srgb,var(--bl-surface) 88%,transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--bl-ink);font-size:.75rem;
    opacity:0;transition:opacity .25s ease, background .2s ease;
  }
  .bl-nav:hover{background:var(--bl-surface)}
  .bl-nav--prev{left:.55rem}
  .bl-nav--next{right:.55rem}
  .bl-nav:focus-visible{opacity:1}
  @media (hover:none){ .bl-nav{display:none} }

  .bl-dots{
    position:absolute;z-index:3;left:0;right:0;bottom:.35rem;
    display:flex;justify-content:center;gap:.28rem;
  }
  .bl-dots button{
    width:.35rem;height:.35rem;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.5);transition:width .25s var(--bl-ease),background .25s ease;
  }
  .bl-dots button[aria-current="true"]{width:1.1rem;background:#fff}

  /* =========================================================
     BODY
     ========================================================= */
  .bl-body{
    --bl-pad:1.05rem;
    container-type:inline-size;container-name:body;
    display:flex;flex-direction:column;gap:.7rem;
    padding:.95rem var(--bl-pad) 0;flex:1 1 auto;min-width:0;
  }
  .bl-title{
    font-size:1rem;font-weight:800;letter-spacing:-.015em;margin:0;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }
  .bl-sub{
    margin: 0.25rem 0 0;
    font-size: .78rem;
    color: var(--bl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bl-specs{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
    gap:.4rem;margin:0;padding:0;list-style:none;
  }
  .bl-specs li{
    display:flex;align-items:center;gap:.42rem;min-width:0;
    font-size:.8rem;color:var(--bl-ink-soft);
    background:var(--bl-surface-2);border:1px solid var(--bl-line);
    border-radius:var(--bl-radius-sm);padding:.36rem .55rem;
    transition:border-color .2s ease,background .2s ease;
  }
  .bl-card:hover .bl-specs li{border-color:color-mix(in srgb,var(--bl-green) 25%,var(--bl-line))}
  .bl-specs i{color:var(--color-green);flex:0 0 auto;width:.9rem;text-align:center;font-size:.8rem}
  .bl-specs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Every spec carries a full and an abbreviated label. Narrow cards get the
     short one, so a spec chip never ends in an ellipsis. */
  .bl-specs .full{display:none}
  .bl-specs .abbr{display:inline}


  /* =========================================================
     FOOTER
     ========================================================= */
  /* lives inside .bl-body, but bleeds to the card edges */
  .bl-foot{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;
    margin:auto calc(var(--bl-pad) * -1) 0;
    padding:.6rem var(--bl-pad);
    border-top:1px solid var(--bl-line);background:var(--bl-surface-3);
    font-size:.78rem;color:var(--bl-muted);
  }
  .bl-views{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
  .bl-views .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bl-views i{color:var(--color-green)}
  .bl-views strong{color:var(--bl-ink)}
  .bl-actions{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto}
  .bl-fav{
    display:inline-flex;align-items:center;gap:.35rem;
    border:1px solid var(--bl-line);background:var(--bl-surface);border-radius:999px;
    padding:.32rem .62rem;font-size:.78rem;font-weight:700;color:var(--bl-ink);
    cursor:pointer;transition:.2s ease;
  }
  .bl-fav:hover{border-color:var(--bl-green);color:var(--bl-accent-text)}
  .bl-fav[aria-pressed="true"]{border-color:#b5ebd7;background:color-mix(in srgb,var(--color-green) 8%,var(--bl-surface))}
  .bl-fav[aria-pressed="true"] i{color:var(--color-green);animation:pop .35s var(--bl-ease)}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
  .bl-cta{
    display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;
    background:linear-gradient(135deg,var(--bl-green-light),var(--color-green));
    color:#fff;text-decoration:none;font-size:.8rem;
    opacity:0;transform:translateY(4px);transition:.3s ease;
  }
  .bl-cta:hover{color:#fff;filter:brightness(1.05)}
  @media (hover:none){ .bl-cta{opacity:1;transform:none} }

  /* =========================================================
     CONTAINER QUERIES — the card adapts to its column, not the screen
     ========================================================= */
  /* Roomy text column: full labels + an even two-up spec grid.
     Keyed to the body, not the card — in the horizontal layout the text column
     is only ~60% of the card, and that is what the labels have to fit into. */
  @container body (min-width:20rem){
    .bl-title{font-size:1.08rem}
    .bl-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bl-specs .full{display:inline}
    .bl-specs .abbr{display:none}
  }
  /* Wide card (list view on tablet/desktop): image beside content */
  @container card (min-width:34rem){
    .bl-main{flex-direction:row;align-items:stretch}
    .bl-media{aspect-ratio:auto;min-height:13rem}
    .bl-body{--bl-pad:1.25rem;padding-top:1.15rem;gap:.8rem}
    .bl-title{font-size:1.2rem}
    .bl-specs{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
  }
  @container card (min-width:52rem){
    .bl-media{min-height:15rem}
    .bl-title{font-size:1.32rem}
  }

  /* landscape phones / small tablets keep the vertical card but tighter */
  @media (min-width:600px) and (max-width:991.98px){
    .bl-media{aspect-ratio:16/11}
  }
  /* big screens: three generous columns, image gets more height */
  @media (min-width:1400px){
    .bl-grid:not(.is-list) .bl-media{aspect-ratio:16/11}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .bl-cell{opacity:1;transform:none}
  }
  @media print{
    .bl-nav,.bl-dots,.bl-cta{display:none!important}
    .bl-grid{grid-template-columns:repeat(3,1fr)!important}
    /* cards below the fold never got their reveal — force them visible */
    .bl-cell{opacity:1!important;transform:none!important}
    .bl-card{box-shadow:none;break-inside:avoid}
  }

/* =========================================================
   GALLERY FIX — controls outside the anchor
   =========================================================
   The original stylesheet assumed .bl-link WRAPPED .bl-media and
   acted as the flex item in .bl-main. The markup now puts an empty
   .bl-link INSIDE .bl-media as an absolute overlay, so .bl-media
   inherits the flex-item role and .bl-link becomes a click surface
   layered beneath the arrows and dots.
   ========================================================= */

/* .bl-media takes over the flex-item role .bl-link used to have */
.bl-main > .bl-media{
  position:relative;
  overflow:hidden;
  isolation:isolate;          /* own stacking context, keeps z-index local */
}

/* Empty anchor stretched over the media box.
   z-index 2 → above slides (1), below controls (5). */
.bl-media > .bl-link{
  position:absolute;
  inset:0;
  display:block;
  z-index:2;
  text-decoration:none;
}

/* Slides sit at the bottom */
.bl-media > .bl-slide{z-index:1;}

/* Decorative overlays — never intercept a click */
.bl-badges,
.bl-price,
.bl-more{
  z-index:3;
  pointer-events:none;
}

/* Interactive controls — above the link */
.bl-nav,
.bl-dots{
  z-index:5;
  pointer-events:auto;
}

/* Arrows must stay usable on touch (original hid them) */
@media (hover:none){
  .bl-media .bl-nav{display:grid;opacity:1;}
}


/* Enlarge the hit target without changing the visual size */
.bl-dots button{
  position:relative;
}
.bl-dots button::after{
  content:"";
  position:absolute;
  inset:-.45rem;
}

/* "+N" counter for images beyond the 5-image cap */
.bl-more{
  position:absolute;
  right:.55rem;
  bottom:.35rem;
  padding:.22rem .5rem;
  background:rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:.64rem;
  font-weight:600;
  border-radius:999px;
  line-height:1;
}

/* Wide/list layouts: .bl-media inherits the sizing .bl-link had */
@container card (min-width:34rem){
  .bl-main > .bl-media{flex:0 0 clamp(13rem,32%,20rem);aspect-ratio:auto;min-height:13rem;}
}
@container card (min-width:52rem){
  .bl-main > .bl-media{flex:0 0 22rem;min-height:15rem;}
}