/* browse-cards.css — split from browse.css (lines 161-236), 2026-08-17.
   the card grid (.browse-section, .browse-grid, cards)
   LOAD ORDER IS LOAD-BEARING. Link in this exact sequence, after nothing and
   before the engine-*.css layer:
     browse-filterbar.css -> browse-datepicker.css -> browse-guests.css -> browse-map.css -> browse-cards.css -> browse-detail.css
   Slices are CONTIGUOUS: rule order is unchanged from browse.css, so the cascade is
   equivalent by construction. Some selectors are redefined in a later module on
   purpose — do not reorder, and do not "tidy" rules between files.
   browse.css itself is UNTOUCHED on disk and still serves the other 17 pages. */
.browse-section { padding:4.5rem 4vw 3.5rem; }
.browse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.9rem; }

/* CARD (an <a> link to the property's /stay page) */
.prop-card { background:var(--pine); cursor:pointer; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; position:relative; z-index:1; transition:transform 0.5s var(--ease-out), border-color 0.35s, box-shadow 0.5s var(--ease-out), filter 0.35s, opacity 0.35s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
/* grow REMOVED 2026-08-19 (Elec: cards grew past the screen edge on hover; "loose the grow.. leave the glow and brighten") */ .prop-card:hover { border-color:var(--gold); z-index:3; box-shadow: 0 0 28px rgba(201,169,110,0.18), 0 22px 58px rgba(5,29,64,0.65); }
.prop-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.prop-card.hidden { display:none; }
.card-img { aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--mist); flex-shrink:0; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.96) brightness(0.96); transition:filter 1.1s var(--ease-out); }
.prop-card:hover .card-img img { filter:saturate(1.06) brightness(1.07) contrast(1.03); }
.card-badges { position:absolute; top:0.6rem; left:0.6rem; display:flex; gap:0.3rem; flex-wrap:wrap; z-index:2; }
.card-badge { background:rgba(5,29,64,0.88); border:1px solid var(--gold-line); padding:0.24rem 0.6rem; font-size: 0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); border-radius:var(--radius-sm); }
.card-body { padding:1.5rem 1.65rem 1.75rem; flex:1; display:flex; flex-direction:column; }
/* Card redesign 2026-08-22 (Elec): the NAME wears the eyebrow's gold-caps
   dress (class card-location carries it; h3 semantics kept); the amenity line
   sits where the serif name lived - quiet, sage, one line. */
h3.card-name-up { margin:0; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
/* The card is display:grid - .card-body's min-width:AUTO let the nowrap name
   inflate its min-content past the card edge (body measured 422.6 in a 405
   card; rating and VIEW & BOOK pushed out). Same minmax(0) lesson as the B1
   filter-bar overflow: the min-width:0 chain must reach every level. */
.prop-card .card-body { min-width:0; }
.card-location-row { min-width:0; gap:0.5rem; }
.card-location-row .card-rating, .card-location-row [class*="rating"] { flex-shrink:0; }
.card-amen { font-family:var(--body); font-size:0.78rem; color:var(--sage); margin:0 0 0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.card-location-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; }
.card-location { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0; }
.card-rating { display:flex; align-items:center; gap:0.2rem; font-size:0.78rem; color:var(--parchment); font-weight:600; white-space:nowrap; }
.card-star { color:var(--gold); font-size:0.82rem; }
.card-review-count { color:var(--sage); font-weight:400; font-size: 0.75rem; margin-left:0.1rem; }
.card-desc { font-size:0.8rem; color:var(--sage); line-height:1.5; margin:0.4rem 0 0.7rem; display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; }
.card-name { font-family:var(--display); font-size:1.44rem; font-weight:600; color:var(--parchment); line-height:1.2; margin-bottom:0.6rem; }
.card-meta { display:flex; gap:0.75rem; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:0.65rem; flex-wrap:wrap; }
.card-meta strong { color:var(--parchment); }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:0.75rem; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; margin-top:auto; }
.card-book { font-size:0.77rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); transition:letter-spacing 0.2s; }
/* hover letter-spacing REMOVED 2026-08-19 (Elec: the size effect on View & Book "causes things to break and move around" - widening text reflows the flex footer). No substitute effect without his pick. */

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:2.5rem 4vw 4rem; }
.page-btn { width:44px; height:44px; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.82rem; cursor:pointer; transition:all 0.18s; font-family:var(--body); display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.page-btn:hover, .page-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.page-btn:disabled { opacity:0.3; cursor:default; }
.page-arrow { font-size:1rem; }

/* NO RESULTS */
.no-results { display:none; text-align:center; padding:5rem 2rem; }
.no-results.visible { display:block; }
.no-results p { font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--sage); }

/* LOADING */
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6rem 2rem; gap:1.5rem; grid-column:1/-1; }
.loading-spinner { width:36px; height:36px; border:2px solid var(--gold-line); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:var(--display); font-style:italic; font-size:1rem; color:var(--sage); }

/* RESPONSIVE */
@media(max-width:1024px) { .browse-grid { grid-template-columns:repeat(2,1fr); } }  /* NOTE 2026-08-21: engine-base.css redefines this per band and loads LATER - band overrides live in engine-responsive.css (the tablet single-column lives there). */
@media(max-width:768px) {
  .browse-grid { grid-template-columns:1fr; }
  .filter-bar { padding:0.85rem 4vw; gap:0.4rem; }
  .filter-btn { font-size:0.68rem; padding:0.32rem 0.65rem; }
  /* Date-search variant stacks to a single column on mobile (same as the
     vacation-rentals original): label, date box, chip label+count, chips. */
  .filter-bar.has-dates { row-gap:0.45rem; column-gap:0; grid-template-columns:1fr; }
  .filter-bar.has-dates .fb-datelabel { grid-column:1; grid-row:1; }
  .filter-bar.has-dates .fb-datecell { grid-column:1; grid-row:2; }
  .filter-bar.has-dates .fb-labelrow { grid-column:1; grid-row:3; }
  .filter-bar.has-dates .fb-chips { grid-column:1; grid-row:4; gap:0.4rem; }
}

/* ── ROUND 4 mirror (2026-08-15): appended AFTER the earlier map/split rules so
   these WIN by cascade (the earlier .map-pill pill-shape block above is
   superseded here, kept for history). vacation-rentals.html's inline copy wins
   on that page; this keeps book-home / future adopters in step. ── */
.map-pill { position:relative; border-radius:9px 9px 9px 2px; transform:rotate(-4deg); transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.map-pill::after { content:""; position:absolute; left:2px; bottom:-7px; width:0; height:0; border-style:solid; border-width:8px 7px 0 0; border-color:#0A2247 transparent transparent transparent; }
/* group 1 (Elec 2026-08-15): hovering a property card makes its pin "pulse
   and glow a little" — gold halo breathing on top of the tilt-swell. */
.map-pill.swell { transform:rotate(-11deg) scale(1.32); animation:pillGlow 1.5s ease-in-out infinite; }
@keyframes pillGlow {
  0%, 100% { box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 3px rgba(200,171,123,0.35), 0 0 14px 3px rgba(200,171,123,0.4); }
  50%      { box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 5px rgba(200,171,123,0.5),  0 0 24px 7px rgba(200,171,123,0.62); }
}
.map-pill.bounce { animation:tagTilt 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes tagTilt { 0% { transform:rotate(-4deg) scale(1); } 30% { transform:rotate(-14deg) scale(1.26) translateY(-3px); } 65% { transform:rotate(3deg) scale(1.12); } 100% { transform:rotate(-4deg) scale(1); } }

/* Elec 2026-08-19: while one card brightens, its neighbours step back a touch */
#propGrid:has(.prop-card:hover) .prop-card:not(:hover){ filter:brightness(0.86) saturate(0.96); }