/* ================================================================
   Kyma Living — Region page styles
   Shared across /crete/heraklion/, /crete/chania/, etc.
================================================================ */

:root {
  --navy:   #1D3461;
  --navy-d: #12254a;
  --gold:   #C9913D;
  --gold-l: #e6b86a;
  --cream:  #FAFAF7;
  --off:    #F3F0EB;
  --text:   #1a1a1a;
  --muted:  #666;
  --border: #E0DAD0;
  --white:  #ffffff;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { font-family:'Inter',sans-serif; color:var(--text); background:var(--cream); }
a     { color:inherit; }
img   { max-width:100%; height:auto; display:block; }

/* ── Navigation ─────────────────────────────────────────────── */
.kl-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 2.5rem; height:72px;
  display:flex; align-items:center; gap:2rem;
}
.kl-nav-logo {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:700; color:var(--navy);
  text-decoration:none; white-space:nowrap;
  margin-right:1rem;
}
.kl-nav-links {
  display:flex; align-items:center; gap:1.5rem;
  list-style:none; flex:1;
}
.kl-nav-links a {
  font-size:13px; font-weight:500; color:#444; text-decoration:none;
  padding:4px 0; border-bottom:2px solid transparent; transition:all .2s;
}
.kl-nav-links a:hover,
.kl-nav-links a[aria-current="page"] { color:var(--navy); border-bottom-color:var(--gold); }
.kl-nav-cta {
  background:var(--navy); color:#fff; text-decoration:none;
  border-radius:8px; padding:9px 20px;
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:background .2s;
}
.kl-nav-cta:hover { background:var(--navy-d); }

/* ── Hero ─────────────────────────────────────────────────── */
.kl-hero {
  background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 60%,#2a4a80 100%);
  color:#fff; padding:5rem 2.5rem 4rem; position:relative; overflow:hidden;
}
.kl-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(201,145,61,.12) 0%, transparent 70%);
}
.kl-hero-inner { max-width:900px; margin:0 auto; position:relative; z-index:1; }
.kl-hero-eyebrow {
  font-size:.7rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold-l); font-weight:600; margin-bottom:1rem;
}
.kl-hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; line-height:1.1;
  margin-bottom:1.1rem; letter-spacing:-.02em;
}
.kl-hero h1 em { color:var(--gold); font-style:italic; font-weight:400; }
.kl-hero-sub {
  font-size:1.1rem; color:rgba(255,255,255,.75); max-width:600px;
  line-height:1.65; margin-bottom:2.5rem;
}
.kl-hero-stats {
  display:flex; gap:2rem; flex-wrap:wrap;
}
.kl-stat { text-align:center; }
.kl-stat-num {
  font-family:'Playfair Display',serif;
  font-size:2rem; font-weight:700; color:#fff; line-height:1;
}
.kl-stat-num.gold { color:var(--gold); }
.kl-stat-label { font-size:11px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* ── Main layout ─────────────────────────────────────────── */
.kl-main   { max-width:1100px; margin:0 auto; padding:4rem 2rem; }
.kl-section { margin-bottom:4rem; }
.kl-slabel {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  font-weight:700; color:var(--gold); margin-bottom:.6rem;
}
.kl-stitle {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,3vw,2.4rem); color:var(--navy);
  font-weight:700; line-height:1.2; margin-bottom:1rem;
}
.kl-lead { font-size:1.05rem; color:var(--muted); line-height:1.7; max-width:760px; }
p { margin-bottom:1rem; line-height:1.7; color:#333; }

/* ── Listings grid ───────────────────────────────────────── */
.kl-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem; margin-top:2rem;
}

/* ── Listing card ─────────────────────────────────────────── */
.kl-card {
  border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:#fff;
  text-decoration:none; display:block;
  transition:transform .2s, box-shadow .2s;
}
.kl-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.09); }
.kl-card-media { position:relative; height:200px; overflow:hidden; background:#f0ece6; }
.kl-card-img   { width:100%; height:100%; object-fit:cover; }
.kl-card-placeholder {
  display:flex; align-items:center; justify-content:center;
  height:100%; font-size:3rem; opacity:.3;
}
.kl-badge {
  position:absolute; top:12px; left:12px;
  background:var(--navy); color:#fff;
  font-size:10px; font-weight:700; padding:4px 10px;
  border-radius:100px; text-transform:uppercase; letter-spacing:.6px;
}
.kl-badge--featured { background:var(--gold); }
.kl-card-body  { padding:1.2rem; }
.kl-card-price {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; color:var(--navy); font-weight:700; margin-bottom:4px;
}
.kl-card-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; }
.kl-card-loc   { font-size:12px; color:var(--muted); margin-bottom:.75rem; }
.kl-card-specs { display:flex; gap:1rem; flex-wrap:wrap; }
.kl-spec       { font-size:12px; color:var(--muted); }

/* ── Empty state ─────────────────────────────────────────── */
.kl-empty {
  background:var(--off); border:1px solid var(--border);
  border-radius:16px; padding:3rem 2rem; text-align:center; margin-top:2rem;
}
.kl-empty h3 { font-family:'Playfair Display',serif; color:var(--navy); margin-bottom:.75rem; }
.kl-empty p  { color:var(--muted); font-size:.95rem; }
.kl-empty-btn {
  display:inline-block; margin-top:1.5rem;
  background:var(--navy); color:#fff; text-decoration:none;
  border-radius:10px; padding:12px 28px; font-size:14px; font-weight:600;
  transition:background .2s;
}
.kl-empty-btn:hover { background:var(--navy-d); }

/* ── Key facts box ───────────────────────────────────────── */
.kl-facts {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem; margin:2rem 0; padding:2rem;
  background:#fff; border:1px solid var(--border); border-radius:16px;
}
.kl-fact-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-weight:700; margin-bottom:.3rem; }
.kl-fact-value { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); font-weight:700; }
.kl-fact-sub   { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── CTA banner ──────────────────────────────────────────── */
.kl-cta {
  background:linear-gradient(135deg,var(--navy-d),var(--navy));
  color:#fff; border-radius:20px; padding:3rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:2rem; margin:3rem 0;
}
.kl-cta h2 { font-family:'Playfair Display',serif; font-size:1.9rem; margin-bottom:.5rem; }
.kl-cta p  { color:rgba(255,255,255,.7); font-size:.95rem; max-width:480px; margin:0; }
.kl-cta-btn {
  background:var(--gold); color:#fff; text-decoration:none;
  border-radius:10px; padding:14px 30px;
  font-size:15px; font-weight:700; white-space:nowrap;
  transition:background .2s; flex-shrink:0;
}
.kl-cta-btn:hover { background:#b5802a; }

/* ── FAQ ─────────────────────────────────────────────────── */
.kl-faq   { margin:2rem 0; }
details   { border-bottom:1px solid var(--border); padding:1.1rem 0; }
details:first-of-type { border-top:1px solid var(--border); }
summary   {
  font-family:'Playfair Display',serif; font-size:1.05rem;
  font-weight:600; color:var(--navy); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; color:var(--gold); font-size:1.4rem; font-weight:300; transition:transform .2s; }
details[open] summary::after { transform:rotate(45deg); }
details > p   { margin-top:.75rem; color:#444; font-size:.95rem; padding-left:.25rem; }

/* ── Footer ──────────────────────────────────────────────── */
.kl-footer { background:var(--navy-d); color:rgba(255,255,255,.6); padding:3.5rem 2.5rem 2rem; }
.kl-footer-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem;
}
.kl-footer-name { font-family:'Playfair Display',serif; font-size:1.25rem; color:#fff; margin-bottom:.5rem; }
.kl-footer p    { font-size:13px; line-height:1.7; }
.kl-footer-links { display:flex; flex-direction:column; gap:8px; }
.kl-footer-links strong { color:var(--gold); font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.kl-footer-links a { font-size:13px; text-decoration:none; color:rgba(255,255,255,.45); transition:color .2s; }
.kl-footer-links a:hover { color:#fff; }
.kl-footer-copy {
  max-width:1100px; margin:0 auto; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.kl-footer-copy a { color:var(--gold-l); text-decoration:none; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kl-nav { padding:0 1.25rem; height:60px; }
  .kl-nav-links { display:none; }
  .kl-hero { padding:3rem 1.25rem 2.5rem; }
  .kl-hero-stats { gap:1.25rem; }
  .kl-stat-num { font-size:1.5rem; }
  .kl-main { padding:2.5rem 1.25rem; }
  .kl-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .kl-facts { grid-template-columns:repeat(2,1fr); }
  .kl-cta { text-align:center; flex-direction:column; align-items:center; }
  .kl-footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .kl-grid { grid-template-columns:1fr; }
  .kl-facts { grid-template-columns:1fr 1fr; }
  .kl-hero h1 { font-size:2rem; }
  .kl-footer-inner { grid-template-columns:1fr; gap:2rem; }
  .kl-footer-copy { flex-direction:column; }
}