/* =====================================================================
   LooseMap — horizontal slider at the end of State / City blogs
   (cities slider on a State blog, areas slider on a City blog).
   Uses :root tokens from layouts/app.blade.php (--eh-ink, --eh-gold).
   ===================================================================== */
.bsl-section { padding: 3rem 0; background: #fff; border-top: 1px solid rgba(20,32,43,.08); border-bottom: 1px solid rgba(20,32,43,.08); }
.bsl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.bsl-eyebrow { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #b07d1a; font-weight: 700; margin-bottom: .3rem; }
.bsl-head h3 { margin: 0; font-weight: 700; }

.bsl-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.bsl-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(20,32,43,.18);
    background: #fff; color: var(--eh-ink); display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s ease; cursor: pointer;
}
.bsl-btn:hover:not(:disabled) { background: var(--eh-ink); color: var(--eh-gold); border-color: var(--eh-ink); }
.bsl-btn:disabled { opacity: .35; cursor: default; }

.bsl-track {
    display: flex; gap: 18px; overflow-x: auto; padding: .25rem .25rem 1rem;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(20,32,43,.28) transparent;
}
.bsl-track::-webkit-scrollbar { height: 6px; }
.bsl-track::-webkit-scrollbar-thumb { background: rgba(20,32,43,.28); border-radius: 6px; }
.bsl-track::-webkit-scrollbar-track { background: transparent; }

.bsl-card {
    position: relative; flex: 0 0 240px; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden;
    scroll-snap-align: start; color: #fff; text-decoration: none; background: #2d4739;
    box-shadow: 0 4px 18px rgba(20,32,43,.12); transition: transform .25s ease, box-shadow .25s ease;
}
.bsl-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(20,32,43,.22); color: #fff; }
.bsl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bsl-card:hover img { transform: scale(1.07); }
.bsl-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,15,20,.88) 0%, rgba(10,15,20,.05) 62%); }
.bsl-body { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; }
.bsl-body small { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--eh-gold); font-weight: 700; margin-bottom: .15rem; }
.bsl-body h4 { margin: 0; font-size: 1.2rem; color: #fff; line-height: 1.25; }
.bsl-go { display: inline-block; margin-top: .45rem; font-size: .78rem; font-weight: 600; opacity: .9; }
.bsl-go i { display: inline-block; transition: transform .2s ease; }
.bsl-card:hover .bsl-go i { transform: translateX(4px); }

@media (max-width: 575.98px) {
    .bsl-section { padding: 2.25rem 0; }
    .bsl-card { flex-basis: 70vw; }
    .bsl-nav { display: none; }
}