/* ==========================================================================
   Kanchipuram Estate — design system
   Signature: the tiered gopuram (temple gateway tower) skyline, used as a
   section divider, a hero backdrop and a small "verified" mark. Kanchipuram
   is "the city of a thousand temples" — the tiered silhouette is the one
   shape a visitor already recognises from the town itself.
   ========================================================================== */

:root{
  /* -- colour: named after what it actually is in Kanchipuram -- */
  --indigo:        #14324A;  /* dusk sky behind a gopuram */
  --indigo-deep:   #0B2233;  /* night version, footer/nav */
  --indigo-line:   #294A63;  /* hairlines on indigo */
  --gold:          #B8863E;  /* gold leaf on temple towers */
  --gold-soft:     #E9D4A6;  /* gold catching low light */
  --laterite:      #A54B32;  /* red laterite stone, used sparingly */
  --verdigris:     #3F6E62;  /* oxidised temple bronze — "verified" */
  --paper:         #F3E9D8;  /* sandalwood paper, section backgrounds */
  --paper-line:    #E4D5BA;  /* hairline on paper */
  --card:          #FFFDF8;  /* warm white, card surfaces */
  --ink:           #201B14;  /* warm near-black text */
  --ink-soft:      #6B6154;  /* secondary text on paper/card */
  --ink-on-indigo: #C9D6DE;  /* secondary text on indigo */
  --danger:        #A5402F;
  --radius:        4px;      /* small radius — this identity is architectural, not soft */
  --radius-lg:     6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  background:var(--card);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
h1,h2,h3,h4,.font-display{
  font-family:'Marcellus',serif;
  font-weight:700;
  letter-spacing:0;
  color:var(--ink);
}
.hero h1{color:var(--card);}
a{text-decoration:none; color:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.text-gold{color:var(--gold) !important;}
.bg-navy{background:var(--indigo) !important;}
.bg-grey{background:var(--paper) !important;}
.section{padding:76px 0;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}

/* ---------------------------------------------------------------- nav -- */
.navbar-custom{background:var(--card); border-bottom:1px solid var(--paper-line);}
.navbar-custom .navbar-brand{
  display:inline-flex; align-items:center; gap:10px;
  max-width:78vw; /* keeps the brand from ever colliding with the toggler on narrow phones */
}
.navbar-custom .navbar-brand .brand-mark{
  height:38px; width:38px; flex-shrink:0; object-fit:contain;
}
.navbar-custom .navbar-brand .brand-text{
  font-family:'Marcellus',serif;
  font-size:clamp(1rem, 4vw, 1.5rem);
  line-height:1.15; color:var(--indigo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.navbar-custom .navbar-brand .brand-text-accent{color:var(--gold);}
@media (max-width:360px){
  .navbar-custom .navbar-brand .brand-mark{height:32px; width:32px;}
}
.navbar-custom .nav-link{color:var(--ink); font-weight:600; font-size:.92rem; position:relative; padding:8px 4px !important; margin:0 12px;}
.navbar-custom .nav-link::after{
  content:""; position:absolute; left:4px; right:4px; bottom:2px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.navbar-custom .nav-link:hover{color:var(--indigo);}
.navbar-custom .nav-link:hover::after{transform:scaleX(1);}

.btn-gold{background:var(--gold); border-color:var(--gold); color:var(--card); font-weight:700; border-radius:var(--radius);}
.btn-gold:hover{background:#9a7020; border-color:#9a7020; color:var(--card);}
.btn-outline-navy{border:1.5px solid var(--indigo); color:var(--indigo); font-weight:700; border-radius:var(--radius);}
.btn-outline-navy:hover{background:var(--indigo); color:var(--card);}

/* -------------------------------------------------- signature divider -- */
/* A tiered skyline, stepping up to a finial — the gopuram silhouette,
   abstracted to three tiers. Used at every major section seam. */
.gopuram-divider{
  --tier: var(--gold);
  width:100%; height:30px; margin:0; position:relative;
  background-image:
    linear-gradient(var(--tier), var(--tier)),
    linear-gradient(var(--tier), var(--tier)),
    linear-gradient(var(--tier), var(--tier)),
    linear-gradient(var(--tier), var(--tier)),
    linear-gradient(var(--tier), var(--tier));
  background-repeat:no-repeat;
  background-position:
    center 22px, center 15px, center 8px, center 3px, center -3px;
  background-size:
    120px 4px, 84px 4px, 56px 4px, 28px 4px, 8px 8px;
  opacity:.9;
}
.gopuram-divider span{display:none;} /* legacy markup, superseded by the background steps above */

/* ------------------------------------------------------------- hero -- */
.hero{
  position:relative; overflow:hidden; padding:104px 0 152px;
  /* Photo shown as-is, no dark overlay. Text readability is handled via
     text-shadow on the headline/lead below instead of a tint layer. */
  /* Was a 2.4MB PNG (hero-bg.png) - the largest single asset on the page and
     the biggest hit to LCP/Core Web Vitals of anything on the site. Re-encoded
     as WebP (~155KB) with a JPEG fallback (~270KB) for browsers without WebP
     support - same visual, ~93% smaller download. */
  background-image: url('/assets/images/hero-bg.jpg');
  background-image: url('/assets/images/hero-bg.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color:#241C14; /* shows while the photo loads, or if the path is wrong */
}
.hero::before{
  /* kolam dot-grid, one corner only — a real Tamil household motif, not filler texture */
  content:""; position:absolute; top:0; right:0; width:340px; height:340px;
  background-image:radial-gradient(rgba(233,212,166,.35) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at top right, black, transparent 72%);
  mask-image:radial-gradient(circle at top right, black, transparent 72%);
  pointer-events:none;
}
.hero::after{
  /* gopuram skyline watermark, bottom-right — the hero's thesis image */
  content:""; position:absolute; right:-40px; bottom:-10px; width:420px; height:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 230'%3E%3Cg fill='%23E9D4A6' fill-opacity='0.14'%3E%3Crect x='150' y='150' width='120' height='80'/%3E%3Crect x='168' y='115' width='84' height='40'/%3E%3Crect x='183' y='88' width='54' height='32'/%3E%3Crect x='196' y='66' width='28' height='26'/%3E%3Ccircle cx='210' cy='56' r='9'/%3E%3Crect x='40' y='185' width='70' height='45'/%3E%3Crect x='52' y='160' width='46' height='28'/%3E%3Crect x='310' y='170' width='90' height='60'/%3E%3Crect x='326' y='140' width='58' height='34'/%3E%3Crect x='340' y='118' width='30' height='26'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; pointer-events:none;
}
.hero .container{position:relative; z-index:2;}
.hero h1{font-size:clamp(2.1rem,3.8vw,3.5rem); line-height:1.14; text-shadow:0 2px 18px rgba(0,0,0,.55);}
.hero p.lead{color:#F3E9D8; font-size:1.08rem; max-width:540px; font-weight:600; margin-bottom:0; text-shadow:0 1px 10px rgba(0,0,0,.6);}
.hero .eyebrow{color:var(--gold-soft); text-shadow:0 1px 10px rgba(0,0,0,.6);}
.hero .row{margin-bottom:120px;} /* guarantees clearance above the search card, however many lines the headline wraps to */

/* ---------------------------------------------------------- search -- */
.search-card{
  background:rgba(243,233,216,.14);
  border:1.5px solid rgba(184,134,62,.85);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 36px rgba(11,34,51,.3);
  padding:16px 20px; margin-top:-40px; position:relative; z-index:3;
}
.search-card .form-label{margin-bottom:3px; color:white; font-size:.78rem;}
.search-card .form-control,.search-card .form-select{padding:.45rem .7rem; font-size:.92rem;}
.search-tabs .nav-link{color:var(--ink-soft); font-weight:700; border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 18px;}
.search-tabs .nav-link.active{color:var(--indigo); border-bottom-color:var(--gold); background:none;}
.form-label{font-weight:700; font-size:.82rem; color:var(--ink); text-shadow:0 1px 6px rgba(255,255,255,.5);}
.form-control,.form-select{
  border:1px solid var(--ink-soft);
  border-radius:var(--radius);
  padding:.62rem .8rem;
  background-color:var(--card);
  color:var(--ink);
}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23201B14' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:12px 8px;
  -webkit-appearance:none;
  appearance:none;
  padding-right:2.2rem;
}
.form-control:focus,.form-select:focus{border-color:var(--gold); box-shadow:0 0 0 .18rem rgba(184,134,62,.18); outline:none;}
.form-control::placeholder{color:var(--ink-soft); opacity:.85;}

/* ------------------------------------------------------------- chips -- */
/* pillar chips: a small arch top, echoing a temple pillar capital */
.chip-location{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--paper-line);
  border-top:2px solid var(--gold);
  border-radius:2px 2px 100px 100px;
  padding:10px 18px 9px; font-weight:700; font-size:.88rem; color:var(--ink);
  transition:.15s ease;
}
.chip-location:hover{border-color:var(--gold); color:var(--indigo); background:var(--paper); transform:translateY(-2px);}
.chip-location i{color:var(--gold);}

/* --------------------------------------------------------- category -- */
.cat-card{
  background:var(--card); border:1px solid var(--paper-line); border-top:3px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius); padding:28px 18px; text-align:center; height:100%;
  transition:.18s ease;
}
.cat-card:hover{border-top-color:var(--laterite); transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,50,74,.12);}
.cat-icon{width:54px; height:54px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.4rem; color:var(--indigo);}
.cat-card:hover .cat-icon{background:var(--gold-soft); color:var(--laterite);}
.cat-card h6{font-weight:700; margin-bottom:2px; color:var(--ink); font-family:'Marcellus',serif; font-size:1.05rem;}
.cat-card small{color:var(--ink-soft);}

/* --------------------------------------------------------- property -- */
.prop-card{
  background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius);
  overflow:hidden; height:100%; transition:.18s ease;
}
.prop-card:hover{box-shadow:0 20px 42px rgba(20,50,74,.16); transform:translateY(-3px); border-color:var(--gold);}
.prop-img-wrap{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper);}
.prop-img-wrap img{width:100%; height:100%; object-fit:cover;}
/* badges: a clipped "seal" tag rather than a generic pill */
.badge-featured,.badge-premium,.badge-verified{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.68rem;
  letter-spacing:.03em; padding:.4em .7em .4em .55em; border-radius:2px;
  clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%);
}
.badge-featured{background:var(--gold); color:var(--indigo-deep);}
.badge-premium{background:var(--indigo); color:var(--gold-soft);}
.badge-verified{background:var(--verdigris); color:var(--card);}
.prop-fav{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(243,233,216,.94); display:flex; align-items:center; justify-content:center; color:var(--indigo);}
.prop-price{color:var(--indigo); font-weight:700; font-size:1.18rem; font-family:'IBM Plex Mono',monospace;}
.prop-meta{color:var(--ink-soft); font-size:.84rem;}
.prop-meta i{color:var(--gold); margin-right:3px;}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px;}
.section-head h2{font-size:1.7rem;}
.section-head .view-all{font-weight:700; color:var(--indigo); font-size:.88rem; font-family:'IBM Plex Mono',monospace;}
.section-head .view-all:hover{color:var(--laterite);}

/* ------------------------------------------------------------ filter -- */
.filter-panel{background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius); padding:20px; position:sticky; top:88px;}
.filter-panel h6{font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--indigo); margin-bottom:10px; font-family:'IBM Plex Mono',monospace;}
.filter-group{border-bottom:1px solid var(--paper-line); padding-bottom:16px; margin-bottom:16px;}
.filter-group:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}

.pagination .page-link{color:var(--indigo); border-color:var(--paper-line);}
.pagination .page-item.active .page-link{background:var(--indigo); border-color:var(--indigo);}
.pagination .page-link:hover{color:var(--gold);}

/* ------------------------------------------------------------ detail -- */
.gallery{border-radius:var(--radius); overflow:hidden;}
.gallery-main{aspect-ratio:16/10; background:var(--paper);}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:6px;}
.gallery-thumbs img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px; cursor:pointer; border:2px solid transparent;}
.gallery-thumbs img.active{border-color:var(--gold);}
.price-tag{color:var(--indigo); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:2rem;}
.spec-card{background:var(--paper); border-radius:var(--radius); padding:16px; text-align:center;}
.spec-card i{color:var(--gold); font-size:1.3rem;}
.spec-card .val{font-weight:700; color:var(--indigo); font-family:'IBM Plex Mono',monospace;}
.spec-card .lbl{font-size:.78rem; color:var(--ink-soft);}
.section-title{font-size:1.15rem; font-weight:700; color:var(--indigo); margin-bottom:14px; font-family:'Marcellus',serif;}
.amenity-pill{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border-radius:100px; padding:8px 16px; font-size:.88rem; font-weight:600;}
.amenity-pill i{color:var(--gold);}
.map-placeholder{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 10px,#ECE0CB 10px,#ECE0CB 20px); border-radius:var(--radius); aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); border:1px solid var(--paper-line);}
.contact-card{background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius); padding:20px; position:sticky; top:88px;}
.owner-avatar{width:52px; height:52px; border-radius:50%; background:var(--indigo); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Marcellus',serif;}

.panel{background:var(--card); border:1px solid var(--paper-line); border-radius:var(--radius);}

/* --------------------------------------------------------------- auth -- */
.auth-shell{background:var(--paper); min-height:calc(100vh - 400px); padding:64px 0; display:flex; align-items:center;}
.auth-card{
  background:var(--card); border:1px solid var(--paper-line); border-top:3px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius); max-width:440px; margin:0 auto; padding:36px 34px;
  box-shadow:0 18px 40px rgba(20,50,74,.08);
}
.auth-card .auth-icon{width:46px; height:46px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--gold); font-size:1.2rem;}
.auth-card h1{font-size:1.7rem; margin-bottom:4px;}
.auth-card .auth-sub{color:var(--ink-soft); font-size:.92rem; margin-bottom:24px;}
.auth-card label{font-weight:700; font-size:.82rem; color:var(--ink); display:block; margin-bottom:6px;}
.auth-card .field{margin-bottom:16px;}
.auth-card .btn-gold{width:100%; padding:.65rem; font-size:.96rem;}
.auth-alert{border-radius:var(--radius); padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:18px;}
.auth-alert-error{background:#F5E2DC; color:var(--laterite); border:1px solid #E7BFAF;}
.auth-alert-success{background:#E1EBE7; color:var(--verdigris); border:1px solid #BFD6CC;}
.auth-divider{display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin:22px 0; font-family:'IBM Plex Mono',monospace;}
.auth-divider::before,.auth-divider::after{content:""; flex:1; height:1px; background:var(--paper-line);}
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid var(--paper-line); border-radius:var(--radius); padding:.62rem; font-weight:700;
  color:var(--ink); background:var(--card); transition:.15s ease;
}
.btn-google:hover{border-color:var(--indigo); background:var(--paper);}
.auth-foot{text-align:center; margin-top:22px; font-size:.9rem; color:var(--ink-soft);}
.auth-foot a{color:var(--indigo); font-weight:700;}
.auth-foot a:hover{color:var(--gold);}

/* ------------------------------------------------------------ footer -- */
footer{background:var(--indigo-deep); color:var(--ink-on-indigo);}
footer h6{color:var(--card); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem; font-family:'IBM Plex Mono',monospace;}
footer a{color:#9FB0BC;}
footer a:hover{color:var(--gold-soft);}
.footer-bottom{border-top:1px solid rgba(233,212,166,.12); font-size:.85rem; font-family:'IBM Plex Mono',monospace;}

@media (max-width:767px){
  .hero{padding:64px 0 32px;}
  .hero::after{width:280px; height:160px;}
  .hero .row{margin-bottom:28px;}
  .search-card{margin-top:8px;}
  .section{padding:56px 0;}
}