
/* =========================================================
   NesaVilla shared component system v26
   One property-card scale and one CTA language across active pages.
   Loaded after page-level styles to prevent visual drift.
   ========================================================= */

:root{
  --nv-card-gap:18px;
  --nv-card-height:480px;
  --nv-card-image-height:270px;
  --nv-cta-ink:#111c26;
  --nv-cta-gold:#d5a35f;
}

/* ---------- Shared property-card proportions ---------- */
.properties-section .property-rail,
.all-list .all-grid{
  gap:var(--nv-card-gap)!important;
}

@media (min-width:1051px){
  .properties-section .property-card,
  .all-list .property-card{
    box-sizing:border-box!important;
    width:auto!important;
    height:var(--nv-card-height)!important;
    min-height:var(--nv-card-height)!important;
    max-height:var(--nv-card-height)!important;
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
    overflow:hidden!important;
    padding:0!important;
    background:#fff!important;
    transform:none!important;
  }

  .properties-section .property-card{
    flex:0 0 calc((100% - (3 * var(--nv-card-gap)))/4)!important;
    min-width:calc((100% - (3 * var(--nv-card-gap)))/4)!important;
  }

  .all-list .all-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .properties-section .property-image,
  .all-list .property-image{
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--nv-card-image-height)!important;
    min-height:var(--nv-card-image-height)!important;
    max-height:var(--nv-card-image-height)!important;
    flex:0 0 var(--nv-card-image-height)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#e9e4da;
  }

  .properties-section .property-image img,
  .all-list .property-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}

.properties-section .property-content,
.all-list .property-content{
  box-sizing:border-box!important;
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  padding:18px 20px 18px!important;
}

.properties-section .property-type,
.all-list .property-type{
  margin:0 0 7px!important;
  font-size:12px!important;
  line-height:1.3!important;
  font-weight:750!important;
  letter-spacing:.1em!important;
}

.properties-section .property-content h3,
.all-list .property-content h3{
  margin:0 0 8px!important;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:24px!important;
  font-weight:500!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}

.properties-section .property-title-link,
.all-list .property-title-link,
.properties-section .property-content h3 > .property-title-link,
.all-list .property-content h3 > .property-title-link{
  display:inline-block!important;
  color:var(--nv-cta-ink)!important;
  font:inherit!important;
  font-size:24px!important;
  font-weight:500!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  text-decoration:none!important;
}

.properties-section .property-title-link:hover,
.properties-section .property-title-link:focus-visible,
.all-list .property-title-link:hover,
.all-list .property-title-link:focus-visible{
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:4px!important;
}

.properties-section .property-content > strong,
.all-list .property-content > strong{
  display:block!important;
  margin:0!important;
  font-size:28px!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}

.properties-section .property-content > p:not(.property-type),
.all-list .property-content > p:not(.property-type){
  margin:8px 0 12px!important;
  font-size:14px!important;
  line-height:1.45!important;
}

/* ---------- Shared CTA system ---------- */
.nv-cta{
  box-sizing:border-box!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:42px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  padding:10px 15px!important;
  border:1px solid var(--nv-cta-ink)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--nv-cta-ink)!important;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:normal!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease!important;
}

.nv-cta::after{
  content:"→"!important;
  display:inline-block!important;
  flex:0 0 auto!important;
  margin-left:11px!important;
  transform:translateX(0)!important;
  transition:transform .22s ease!important;
}

.nv-cta:hover,
.nv-cta:focus-visible{
  border-color:var(--nv-cta-ink)!important;
  background:var(--nv-cta-ink)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(10,23,34,.12)!important;
  outline:none!important;
}

.nv-cta:hover::after,
.nv-cta:focus-visible::after{
  transform:translateX(4px)!important;
}

.nv-cta--inverse{
  border-color:rgba(255,255,255,.82)!important;
  color:#fff!important;
}

.nv-cta--inverse:hover,
.nv-cta--inverse:focus-visible{
  border-color:#fff!important;
  background:#fff!important;
  color:var(--nv-cta-ink)!important;
}

.nv-cta--gold{
  border-color:var(--nv-cta-gold)!important;
  color:var(--nv-cta-gold)!important;
}

.nv-cta--gold:hover,
.nv-cta--gold:focus-visible{
  border-color:var(--nv-cta-gold)!important;
  background:var(--nv-cta-gold)!important;
  color:var(--nv-cta-ink)!important;
}

.property-content > .nv-cta{
  margin-top:auto!important;
}


.properties-section .property-content > a.nv-cta,
.all-list .property-content > a.nv-cta{
  display:inline-flex!important;
  font-size:14px!important;
}

/* Ensure old page-level CTA rules cannot re-shrink the shared component. */
.property-content a.nv-cta,
.rail-actions > a.nv-cta,
.stay-button.nv-cta,
.about-hero-link.nv-cta,
.zio-text-link.nv-cta,
.zio-location-cta.nv-cta,
.zio-gallery-meta button.nv-cta{
  font-size:14px!important;
  min-height:42px!important;
  padding:10px 15px!important;
}

/* Nearby-place card remains a card link, but its micro action is visibly interactive. */
.zio-nearby-content > .nv-micro-cta{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  align-items:center!important;
  margin-top:auto!important;
  padding:8px 0 5px!important;
  border-bottom:1px solid currentColor!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1.2!important;
}
.zio-nearby-content > .nv-micro-cta b{
  margin-left:9px!important;
  transition:transform .22s ease!important;
}
.zio-nearby-card:hover .nv-micro-cta b,
.zio-nearby-card:focus-visible .nv-micro-cta b{
  transform:translateX(4px)!important;
}

/* ---------- Responsive shared scale ---------- */
@media (min-width:1051px) and (max-height:800px){
  :root{
    --nv-card-height:420px;
    --nv-card-image-height:235px;
  }
  .properties-section .property-content,
  .all-list .property-content{
    padding:14px 18px!important;
  }
  .properties-section .property-content h3,
  .all-list .property-content h3,
  .properties-section .property-title-link,
  .all-list .property-title-link,
  .properties-section .property-content h3 > .property-title-link,
  .all-list .property-content h3 > .property-title-link{
    font-size:24px!important;
  }
  .properties-section .property-content > strong,
  .all-list .property-content > strong{
    font-size:26px!important;
  }
  .properties-section .property-content > p:not(.property-type),
  .all-list .property-content > p:not(.property-type){
    margin:6px 0 9px!important;
    font-size:13px!important;
  }
  .property-content > .nv-cta{
    min-height:38px!important;
    padding:8px 13px!important;
    font-size:13px!important;
  }
}

@media (max-width:1050px) and (min-width:761px){
  .properties-section .property-card,
  .all-list .property-card{
    height:470px!important;
    min-height:470px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .properties-section .property-image,
  .all-list .property-image{
    height:255px!important;
    min-height:255px!important;
    flex:0 0 255px!important;
  }
  .all-list .all-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }
}

@media (max-width:760px){
  .properties-section .property-card,
  .all-list .property-card{
    height:480px!important;
    min-height:480px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .properties-section .property-image,
  .all-list .property-image{
    height:265px!important;
    min-height:265px!important;
    flex:0 0 265px!important;
  }
  .properties-section .property-content,
  .all-list .property-content{
    padding:17px 18px!important;
  }
  .properties-section .property-content h3,
  .all-list .property-content h3,
  .properties-section .property-title-link,
  .all-list .property-title-link,
  .properties-section .property-content h3 > .property-title-link,
  .all-list .property-content h3 > .property-title-link{
    font-size:22px!important;
  }
  .all-list .all-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:88vw!important;
    max-width:88vw!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .nv-cta{
    min-height:42px!important;
    padding:10px 14px!important;
    font-size:14px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .nv-cta,
  .nv-cta::after,
  .nv-micro-cta b{
    transition:none!important;
  }
}

/* Filter visibility guard v27.2 — must remain after property-card display rules. */
.all-list .property-card[hidden],
.all-list .all-card[hidden]{
  display:none!important;
}
