/* ============================================================================
   APERTO - STYLESHEET
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CSS VARIABLES (Custom Properties)
   ---------------------------------------------------------------------------- */
:root{
  --bg:#f4f7fb;                    /* Background color */
  --surface:#fff;                  /* Card/surface background */
  --surface-2:#f8fbff;            /* Secondary surface (lighter) */
  --text:#0f172a;                  /* Primary text color */
  --muted:#475569;                 /* Muted/secondary text */
  --line:#d8e2ee;                  /* Border/divider color */
  --brand:#2563eb;                 /* Primary brand color (blue) */
  --brand-2:#0ea5a4;               /* Secondary brand color (teal) */
  --ok:#22c55e;                    /* Success/green color */
  --danger:#ef4444;                /* Error/red color */
  --shadow:0 14px 30px rgba(15,23,42,.09);  /* Default shadow */
  --radius:16px;                   /* Border radius */
}

/* ----------------------------------------------------------------------------
   RESET & BASE STYLES
   ---------------------------------------------------------------------------- */
*{box-sizing:border-box}            /* Box-sizing for all elements */
html{scroll-behavior:smooth}        /* Smooth scrolling */

body{
  margin:0;
  font:16px/1.55 "Plus Jakarta Sans","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%,rgba(37,99,235,.08),transparent 40%),
    radial-gradient(circle at 90% 0,rgba(14,165,164,.08),transparent 35%),
    var(--bg);
}

a{color:inherit;text-decoration:none}  /* Links inherit color, no underline */
img{max-width:100%;display:block}       /* Responsive images */
.wrap{width:min(1140px,92%);margin:auto}  /* Container wrapper */

/* ----------------------------------------------------------------------------
   HEADER & NAVIGATION
   ---------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}

.bar,.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  flex-wrap:wrap
}

.brand{
  font-weight:800;
  letter-spacing:.09em;
  color:var(--brand);
  display:flex;
  align-items:center;
  gap:.45rem
}

.brand i{font-size:1.05rem}

.brand-logo{
  width:126px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.08)
}

.nav{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap
}

.nav a{
  padding:.5rem .8rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  transition:.2s
}

.nav a:hover,.nav a.active{
  background:#dbeafe;
  color:#1e3a8a
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  padding:.45rem .68rem;
  border-radius:10px;
  font:inherit;
  cursor:pointer
}

/* ----------------------------------------------------------------------------
   PAGE LAYOUT
   ---------------------------------------------------------------------------- */
.page{padding:1.2rem 0 2.5rem}
.section{margin-bottom:1rem}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 14px 30px rgba(15,23,42,.09);
  padding:1rem
}

/* ----------------------------------------------------------------------------
   HERO SECTION
   ---------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background-image:linear-gradient(130deg,rgba(15,23,42,.78),rgba(30,64,175,.66),rgba(15,118,110,.62));
  background-size:cover;
  background-position:center;
  min-height:380px;
  display:flex;
  align-items:center
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,6,23,.76),rgba(2,6,23,.48) 55%,rgba(2,6,23,.3) 82%)
}

.hero-grid{
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
  align-items:end
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.22rem .62rem;
  border-radius:999px;
  background:rgba(2,6,23,.62);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  color:#ffffff
}

.hero h1{
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.08;
  margin:.55rem 0
}

.hero p{color:#f8fbff;margin:0 0 .5rem}

.hero-meta{
  display:flex;
  gap:.95rem;
  flex-wrap:wrap;
  color:#f8fbff;
  font-weight:600;
  margin:.9rem 0
}

.hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:rgba(2,6,23,.54);
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  padding:.22rem .58rem
}

.hero-side{
  background:rgba(2,6,23,.58);
  border:1px solid rgba(255,255,255,.42);
  color:#ffffff;
  backdrop-filter:blur(8px);
  border-radius:14px;
  padding:1rem
}

.hero-side h2,.hero-side h3{margin:.1rem 0 .35rem;color:#ffffff}
.hero-side p{margin:0 0 .8rem;color:#f8fbff}

/* ----------------------------------------------------------------------------
   CAROUSEL CONTROLS
   ---------------------------------------------------------------------------- */
.carousel-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  margin-top:.75rem
}

.carousel-dots{display:flex;gap:.45rem;flex-wrap:wrap}

.dot{
  width:11px;
  height:11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
  cursor:pointer;
  transition:.2s
}

.dot.on{background:#fff;transform:scale(1.15)}

.arrows{display:flex;gap:.45rem}

.arrow{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.15);
  color:#fff;
  cursor:pointer
}

.arrow:hover{background:rgba(255,255,255,.28)}

/* ----------------------------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------------------------- */
h1,h2,h3{line-height:1.2;margin:.2rem 0 .6rem}
p{margin:.35rem 0;color:var(--muted)}

.split{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem}

/* ----------------------------------------------------------------------------
   LISTING CARDS
   ---------------------------------------------------------------------------- */
.listing-card{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  display:grid;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition:transform .25s,box-shadow .25s,border-color .25s
}

.listing-card:hover{
  transform:translateY(-4px);
  border-color:#bfd3ef;
  box-shadow:0 18px 30px rgba(15,23,42,.11)
}

.listing-media{position:relative;overflow:hidden}

.listing-media::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40%;
  background:linear-gradient(to top,rgba(15,23,42,.2),transparent);
  pointer-events:none
}

.listing-media img{
  height:180px;
  width:100%;
  object-fit:cover;
  transition:transform .35s
}

.listing-card:hover .listing-media img{transform:scale(1.06)}

.favorite{
  position:absolute;
  top:.6rem;
  right:.6rem;
  width:33px;
  height:33px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  color:#ef4444;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.15)
}

.favorite:hover{transform:scale(1.04)}
.favorite i{pointer-events:none}
.favorite.saved{background:#fee2e2;color:#dc2626}

.listing-body{padding:.85rem;display:grid;gap:.35rem}
.listing-head{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}
.city{font-weight:700}

.meta{
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.35rem
}

.meta i{color:#f59e0b}
.price{font-weight:800;color:var(--brand)}

.badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.15rem}
.badge{
  font-size:.78rem;
  font-weight:700;
  padding:.2rem .5rem;
  border-radius:999px;
  background:#dbeafe;
  color:#1e3a8a
}

/* ----------------------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.52rem .85rem;
  border:1px solid var(--line);
  border-radius:10px;
  font-weight:700;
  color:var(--brand);
  background:#fff;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(15,23,42,.1)
}

.btn-primary{
  background:var(--brand);
  color:#fff
}

.btn-primary:hover{background:#1d4ed8}

.btn-ghost{
  background:rgba(2,6,23,.44);
  color:#fff;
  border-color:rgba(255,255,255,.72)
}

.btn-ghost:hover{background:rgba(2,6,23,.62)}
.actions,.links{display:flex;gap:.55rem;flex-wrap:wrap}
.btn:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}

/* ----------------------------------------------------------------------------
   FEATURE CARDS
   ---------------------------------------------------------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem}
.feature{
  padding:.85rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2)
}

.feature i{color:var(--brand);font-size:1rem}

/* ----------------------------------------------------------------------------
   REVIEW CARDS
   ---------------------------------------------------------------------------- */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}
.review{
  padding:.95rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  display:grid;
  gap:.45rem
}

.review-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem}
.review-name{font-weight:700}
.review-city{font-size:.86rem;color:#334155}
.review-stars{color:#92400e;font-size:.86rem;font-weight:700;letter-spacing:.06em}

/* ----------------------------------------------------------------------------
   FILTER CHIPS
   ---------------------------------------------------------------------------- */
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:.6rem 0}
.chip{
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  padding:.38rem .68rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600
}

.chip.on{
  background:#eaf1ff;
  color:var(--brand);
  border-color:#bad2f6
}

/* ----------------------------------------------------------------------------
   LIGHTBOX (IMAGE MODAL)
   ---------------------------------------------------------------------------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.75);
  display:grid;
  place-items:center;
  padding:1rem;
  z-index:50
}

.lightbox[hidden]{display:none}

.lightbox-card{
  position:relative;
  max-width:min(820px,95vw);
  background:#fff;
  border-radius:14px;
  padding:.65rem
}

.lightbox-card img{max-height:72vh;object-fit:cover;border-radius:10px}

.lightbox-close{
  position:absolute;
  top:.35rem;
  right:.35rem;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer
}

.lightbox-nav{
  position:absolute;
  left:.6rem;
  right:.6rem;
  bottom:.7rem;
  display:flex;
  justify-content:space-between;
  pointer-events:none
}

.lightbox-arrow{
  border-color:#fff;
  background:rgba(15,23,42,.58);
  color:#fff
}

.lightbox-arrow:hover{background:rgba(15,23,42,.8)}

/* ----------------------------------------------------------------------------
   DETAIL PAGE (APARTMENT DETAILS)
   ---------------------------------------------------------------------------- */
.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:.85rem}
.hero-media{
  height:330px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line)
}

.thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.5rem;
  margin-top:.55rem
}

.thumb{
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  background:#fff;
  overflow:hidden;
  transition:.2s
}

.thumb img{height:84px;width:100%;object-fit:cover}
.thumb.on{border-color:#9ec0ef;box-shadow:0 0 0 2px #e4efff inset}
.thumb:hover{transform:translateY(-1px)}
.list{padding-left:1.05rem;margin:.2rem 0}

/* ----------------------------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}
.contact-card{
  padding:.85rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2)
}

.contact-card i{color:var(--brand)}

/* ----------------------------------------------------------------------------
   FORMS
   ---------------------------------------------------------------------------- */
.form{display:grid;gap:.7rem}
.form label{display:grid;gap:.28rem;font-weight:600}

input,textarea{
  width:100%;
  font:inherit;
  padding:.58rem .65rem;
  border:1px solid var(--line);
  border-radius:10px
}

select{
  font:inherit;
  padding:.45rem .58rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text)
}

input,textarea,select{transition:border-color .2s,box-shadow .2s}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#9bbcf1;
  box-shadow:0 0 0 3px rgba(37,99,235,.14)
}

textarea{min-height:120px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}
.map-frame{width:100%;height:280px;border:1px solid var(--line);border-radius:12px}

/* ----------------------------------------------------------------------------
   FORM NOTES & MODAL
   ---------------------------------------------------------------------------- */
.note{
  padding:.58rem .72rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fbff;
  color:var(--muted)
}

.note.ok{
  background:#e9f9f0;
  border-color:#bdeacf;
  color:#1d603d
}

.note.error{
  background:#fdeeee;
  border-color:#f8cccc;
  color:#7f2424
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.7);
  display:grid;
  place-items:center;
  padding:1rem;
  z-index:60
}

.modal[hidden]{display:none}

.modal-card{
  width:min(430px,95vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 38px rgba(15,23,42,.2);
  padding:1rem;
  animation:pop .24s ease
}

.modal-top{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.modal-close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer
}

/* ----------------------------------------------------------------------------
   FOCUS VISIBLE (ACCESSIBILITY)
   ---------------------------------------------------------------------------- */
.btn:focus-visible,.chip:focus-visible,.arrow:focus-visible,.modal-close:focus-visible,.lightbox-close:focus-visible,.favorite:focus-visible,.nav a:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px
}

/* ----------------------------------------------------------------------------
   STATS SECTION
   ---------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem}
.stat{
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
  text-align:center
}

.stat strong{font-size:1.45rem;color:var(--brand)}

/* ----------------------------------------------------------------------------
   SCROLL REVEAL ANIMATION
   ---------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s,transform .45s
}

.reveal.show{opacity:1;transform:none}

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */
.site-footer{background:#fff;border-top:1px solid var(--line)}
.footer p{margin:0;color:var(--muted)}
.social{display:flex;gap:.55rem}
.social a{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--brand)
}

.social a:hover{background:#eff5ff}

/* ----------------------------------------------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid,.detail-grid{grid-template-columns:1fr}
}

@media (max-width:780px){
  .brand-logo{width:108px}
  .nav-toggle{display:block}
  .nav{display:none;width:100%}
  .nav.open{display:flex}
}

/* ----------------------------------------------------------------------------
   ACCESSIBILITY - REDUCED MOTION
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ----------------------------------------------------------------------------
   ANIMATIONS
   ---------------------------------------------------------------------------- */
@keyframes pop{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}