/* ==========================================================================
   SNLoc — Shared UI for Listings & Experiences
   - Coherent cards, navbar, spacing
   - iPhone/Android scroll-safe
   - Tablet fix (incl. 853×1280)
   ========================================================================== */

/* Global & scroll safety */
html, body { height: auto !important; }
html { scroll-behavior: smooth; }
body{
  min-height: 100svh;                 /* safe viewport on iOS/Android */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  overflow-x: hidden;
  background: #f7f9fc;
  color: #0f172a;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  text-rendering: optimizeLegibility;
}

/* Navbar coherence */
.navbar .navbar-toggler { border-color: rgba(0,0,0,.25); }
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,0.75)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.sticky-top, .navbar.sticky-top { top: env(safe-area-inset-top, 0); }
.navbar .nav-link{ color:#0f172a; }
.navbar .nav-link.active, .navbar .nav-link:hover{ color:#0ea5e9; }

/* Mobile comfort */
@media (max-width: 576px){
  .container{ padding-left: .9rem; padding-right: .9rem; }
  .row.g-4{ --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; }
  .btn{ padding: .6rem .9rem; }
}

/* Cards */
.listing-card{
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .listing-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(2,6,23,.08); }
}

/* Media ratio (shared) */
:root{ --media-ratio: 72%; }                  /* default ~1.39:1 */
.listing-ratio{ --bs-aspect-ratio: var(--media-ratio); }
.object-fit-cover{ object-fit: cover; }

/* Helpers */
.text-truncate-2{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.price { white-space: nowrap; }               /* keep “15 000 FCFA” on one line */
.pagination .page-link{ min-width: 2.25rem; text-align:center; border-radius:.6rem; }

/* Filters card look (if used on a page) */
form.card.border-0.shadow-sm.mb-4 {
  background:#fff; border:1px solid #dee2e6; border-radius:.75rem; padding:1rem;
}

/* ==========================================================================
   Aspect ratio tuning (controls card height → tidy rows on tablets)
   ========================================================================== */
@media (max-width: 575.98px){ :root{ --media-ratio: 70%; } }                  /* phones */
@media (min-width: 576px) and (max-width: 767.98px){ :root{ --media-ratio: 66%; } }
@media (min-width: 768px) and (max-width: 819.98px){ :root{ --media-ratio: 60%; } }
@media (min-width: 820px) and (max-width: 852.98px){ :root{ --media-ratio: 58%; } }
@media (min-width: 853px) and (max-width: 900.98px){ :root{ --media-ratio: 56%; } } /* 853×1280 */
@media (min-width: 901px) and (max-width: 991.98px){ :root{ --media-ratio: 56%; } }
@media (min-width: 992px) and (max-width: 1199.98px){ :root{ --media-ratio: 56.25%; } } /* ~16:9 */
@media (min-width: 1200px) and (max-width: 1399.98px){ :root{ --media-ratio: 54%; } }
@media (min-width: 1366px) and (max-width: 1439.98px){ :root{ --media-ratio: 50%; } }
@media (min-width: 1440px){ :root{ --media-ratio: 48%; } }