/* Shared image-first cards on the homepage, listings and related properties. */
.listing-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--ivory-line); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-card); font-family:var(--sans); transition:transform var(--motion-ui) var(--ease),box-shadow var(--motion-ui) var(--ease); }
.listing-card__image { position:relative; display:block; flex:none; height:clamp(325px,25vw,350px); overflow:hidden; background:var(--ivory-deep); }
.listing-card__image img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-image) var(--ease),opacity var(--motion-ui) var(--ease); }
.listing-card__image .listing-card__image-secondary { position:absolute; inset:0; opacity:0; pointer-events:none; }
.listing-card__image img.listing-card__placeholder { object-fit:contain; padding:8%; }
.listing-card__badge { position:absolute; z-index:2; top:14px; left:0; width:max-content; max-width:calc(100% - 28px); padding:6px 10px; border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--brick-tint); color:var(--brick); font:var(--weight-label) var(--type-caption)/var(--line-caption) var(--sans); letter-spacing:var(--tracking-body); text-transform:uppercase; }
.listing-card__badge--rent { background:var(--ink-tint); color:var(--ink); }
.listing-card__body { display:grid; grid-template-rows:calc(var(--type-h3) * var(--line-h3) * 2) auto auto minmax(0,1fr); gap:5px; flex:none; min-width:0; height:calc(3 * var(--type-h3) * var(--line-h3) + 3 * var(--type-metadata) * var(--line-metadata) + 64px); padding:14px 16px; align-content:start; font-size:var(--type-body); }
.listing-card h2 { grid-row:1; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:var(--ink); font:var(--heading-weight,var(--weight-heading)) var(--heading-size,var(--type-h2-editorial))/var(--heading-line,var(--line-h2-editorial)) var(--heading-family,var(--sans)); letter-spacing:var(--heading-tracking,var(--tracking-editorial)); }
.listing-card h2 a:hover { color:var(--ink); }
/* Preserve native link navigation across the whole card, including empty space. */
.listing-card h2 a::after { content:""; position:absolute; inset:0; z-index:3; }
.listing-card h2 a:focus-visible { outline:none; }
.listing-card h2 a:focus-visible::after { outline:2px solid var(--ink); outline-offset:-3px; border-radius:7px; }
.listing-card__location { grid-row:2; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink-70); font:var(--weight-body) var(--type-metadata)/var(--line-metadata) var(--sans); }
.listing-card__price { grid-row:3; color:var(--ink); font:var(--weight-heading) var(--type-h3)/var(--line-h3) var(--sans); letter-spacing:var(--tracking-heading); font-variant-numeric:tabular-nums; }
.listing-card__facts { grid-row:4; display:flex; align-items:center; flex-wrap:wrap; align-self:end; gap:5px 12px; margin-top:4px; padding-top:8px; border-top:1px solid var(--ivory-line); }
.listing-card__facts li { display:inline-flex; align-items:center; gap:4px; color:var(--ink-70); font:var(--weight-body) var(--type-metadata)/var(--line-metadata) var(--sans); white-space:nowrap; }
.listing-card__facts svg { width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.listing-card__fact--energy { margin-left:auto; }
.listing-card__energy { display:inline-grid; place-items:center; min-width:23px; height:23px; padding-inline:4px; border:1px solid var(--ivory-line); border-radius:var(--r-sm); background:var(--ivory); color:var(--ink); font:var(--weight-body) var(--type-metadata)/var(--line-metadata) var(--sans); }
/* A clean corner ribbon and a compact canton / area row for sold properties. */
.listing-card__badge--sold { top:28px; left:-52px; width:190px; max-width:none; padding:11px 0; border-radius:0; background:var(--brick); color:#fff; font-size:var(--type-metadata); font-weight:var(--weight-bold); letter-spacing:var(--tracking-body); text-align:center; transform:rotate(-45deg); }
.listing-card--sold .listing-card__body { display:flex; flex-direction:column; justify-content:center; gap:8px; height:calc(var(--type-h3) * var(--line-h3) + var(--type-metadata) * var(--line-metadata) + 36px); }
.listing-card--sold h2 { -webkit-line-clamp:1; }
.listing-card--sold .listing-card__facts { width:100%; flex-wrap:nowrap; margin:0; padding:0; border:0; gap:14px; }
.listing-card__fact--canton { min-width:0; }
.listing-card__fact--canton span { overflow:hidden; text-overflow:ellipsis; }
.preview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
@media(hover:hover) and (pointer:fine) {
 .listing-card:hover { z-index:1; transform:translateY(-2px) scale(1.006); box-shadow:var(--shadow-card-hover); }
 .listing-card:hover .listing-card__image img { transform:scale(1.025); }
 .listing-card:hover .listing-card__image-secondary.is-ready { opacity:1; }
}
.listing-card__image:focus-visible .listing-card__image-secondary.is-ready { opacity:1; }
@media(max-width:1100px) { .listing-card__facts { gap:5px 9px; } }
@media(max-width:1000px) { .preview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .preview { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) {
 .listing-card,.listing-card:hover { transform:none; transition:none; }
 .listing-card__image img { transition:none; }
 .listing-card:hover .listing-card__image img { transform:none; }
}

/* Phones: the home page's listings swipe like the team rail, with the next card peeking in.
   The Properties page keeps a vertical list for browsing. */
@media(max-width:720px) {
 .preview {
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 12px; margin-inline:-2px;
  scroll-snap-type:x mandatory; scroll-padding-inline:2px; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; scrollbar-width:none;
 }
 .preview::-webkit-scrollbar { display:none; }
 .preview > .listing-card { flex:0 0 min(80%,340px); scroll-snap-align:start; }
}
@media(max-width:720px) and (prefers-reduced-motion:reduce) {
 .preview { scroll-behavior:auto; scroll-snap-type:x proximity; }
}

/* ---------------------------------------------------------------- card refresh
   The photo leads: a 4:3 image (the shape of most listing photos) above a compact
   text block — one-line title, town, price, then facts pinned to the bottom so
   cards in a row line up. */
.listing-card__image { height:auto; aspect-ratio:4/3; }
.listing-card__body { display:flex; flex-direction:column; flex:1 1 auto; height:auto; gap:2px; padding:12px 14px 12px; }
.listing-card h2 { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-line-clamp:unset; font:var(--weight-medium) var(--type-body)/var(--line-body) var(--sans); letter-spacing:var(--tracking-body); }
.listing-card__location { color:var(--ink-55); }
.listing-card__price { margin-top:4px; font:var(--weight-heading) var(--type-h4)/var(--line-h4) var(--sans); }
.listing-card__facts { align-self:stretch; flex-wrap:nowrap; gap:9px; margin-top:auto; padding-top:10px; border-top:0; }
/* Sold cards keep their compact body. */
.listing-card--sold .listing-card__body { height:auto; padding:12px 14px; }
.listing-card--sold h2 { font:var(--weight-heading) var(--type-h4)/var(--line-h4) var(--sans); }
@media(hover:hover) and (pointer:fine) {
 .listing-card:hover { transform:translateY(-3px); }
 .listing-card:hover .listing-card__image img { transform:scale(1.03); }
}

/* ---------------------------------------------------------------- homepage row
   Three full cards inside the page column and a fourth that runs off the right
   edge of the screen. The fourth is a doorway to all listings, not a carousel. */
@media(min-width:721px) {
 .preview {
  --preview-gap:20px;
  --preview-content:calc(min(100vw, var(--wrap)) - 2 * var(--gut));
  --preview-card:calc((var(--preview-content) - 2 * var(--preview-gap)) / 3 * .94);
  display:grid; grid-template-columns:repeat(3,var(--preview-card)) var(--preview-card); gap:var(--preview-gap);
  /* Run to the viewport's right edge so the fourth card peeks in from outside the column. */
  margin-right:calc((100% - 100vw) / 2); overflow:hidden; padding:4px 0 6px; margin-block:-4px -6px;
 }
 .preview > .listing-card:nth-child(n+5) { display:none; }
 .preview > .listing-card--more { -webkit-mask-image:linear-gradient(to right,#000 30%,transparent 92%); mask-image:linear-gradient(to right,#000 30%,transparent 92%); }
}
/* The doorway card: one link over the whole card, revealed on hover or focus. */
.listing-card--more { position:relative; }
.listing-card__more { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:0 22px; background:rgba(9,35,77,0); color:#fff; font:var(--weight-medium) var(--type-ui)/var(--line-ui) var(--sans); transition:background var(--motion-ui) var(--ease); }
.listing-card__more span { opacity:0; transform:translateX(-6px); transition:opacity var(--motion-ui) var(--ease),transform var(--motion-ui) var(--ease); }
.listing-card__more svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.listing-card__more:hover,.listing-card__more:focus-visible { background:rgba(9,35,77,.62); }
.listing-card__more:hover span,.listing-card__more:focus-visible span { opacity:1; transform:none; }
.listing-card__more:focus-visible { outline:2px solid var(--brick); outline-offset:-2px; }
@media(max-width:720px) {
 /* Phones have no hover: the last card of the rail always says where it leads. */
 .listing-card__more { background:rgba(9,35,77,.62); justify-content:center; }
 .listing-card__more span { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) { .listing-card__more,.listing-card__more span { transition:none; } }

/* Sold cards: when it sold, in quiet text under the type. */