/* Ceylon Retreat Villa — lightweight, mobile-first styles */

:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, .12);

  --brand: #0B3D91;     /* deep ocean */
  --brand2:#00A6B2;     /* sea glass */
  --sand: #F7E7CE;      /* warm sand */
  --good:#16a34a;
  --warn:#f59e0b;

  --radius: 18px;
  --shadow: 0 14px 40px rgba(2,6,23,.10);

  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--max), 92vw); margin-inline:auto}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.85rem 1.05rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,.10); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:white;
}
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: white;
}
.btn--dark{
  border-color: transparent;
  background: rgba(15,23,42,.90);
  color: white;
}

/* Header / nav */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
}

.brand{display:flex; align-items:center; gap:.75rem}
.brand__logo{border-radius:999px; box-shadow:0 6px 18px rgba(2,6,23,.10)}
.brand__text{display:flex; flex-direction:column}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{font-size:.86rem; color:var(--muted)}

.nav{display:flex; align-items:center; gap:1rem}
.nav__link{
  font-weight:800;
  color: rgba(15,23,42,.80);
  padding:.6rem .65rem;
  border-radius:999px;
}
.nav__link[aria-current="page"]{background:rgba(11,61,145,.10); color:var(--brand)}
.nav__link:hover{text-decoration:none; background:rgba(2,6,23,.05)}
.nav__cta{margin-left:.35rem}

.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav__toggle span{
  display:block;
  width:20px; height:2px;
  background:rgba(15,23,42,.70);
  border-radius:10px;
}

@media (max-width: 860px){
  .nav__toggle{display:flex}
  .nav{
    position:fixed;
    inset:64px 0 auto 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
    display:grid;
    gap:.35rem;
    padding: .75rem min(4vw, 18px) 1rem;
    transform: translateY(-120%);
    transition: transform .18s ease;
  }
  .nav.is-open{transform: translateY(0)}
  .nav__link{padding:.85rem .9rem; border-radius:14px}
  .nav__cta{justify-self:start; margin-left:0; margin-top:.35rem}
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1100px 600px at 20% 10%, rgba(0,166,178,.18), transparent 55%),
              radial-gradient(900px 500px at 80% 15%, rgba(11,61,145,.18), transparent 60%),
              linear-gradient(180deg, rgba(247,231,206,.50) 0%, rgba(255,255,255,1) 70%);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:2rem;
  padding: 3.4rem 0 2.2rem;
  align-items:center;
}
.hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-weight:900;
  color:var(--brand);
  background: rgba(11,61,145,.08);
  border:1px solid rgba(11,61,145,.18);
  padding:.4rem .7rem;
  border-radius:999px;
  width:max-content;
}
.hero h1{
  font-size: clamp(2.0rem, 3.3vw, 3.2rem);
  line-height:1.05;
  margin:.9rem 0 .8rem;
  letter-spacing:-.6px;
}
.hero p{
  color:var(--muted);
  font-size:1.08rem;
  margin:0 0 1.25rem;
  max-width: 56ch;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.1rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.7);
  font-weight:800;
  color: rgba(15,23,42,.80);
  font-size:.92rem;
}
.hero__card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  background: white;
  border:1px solid rgba(2,6,23,.08);
}
.hero__img img{width:100%; height:auto}
.hero__cardfoot{
  padding:.9rem 1.1rem 1rem;
  border-top:1px solid var(--line);
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  justify-content:space-between;
}
.hero__cardfoot strong{display:block}
.hero__cardfoot small{color:var(--muted)}
.hero__cardfoot .btn{padding:.65rem .9rem}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; padding:2.2rem 0 1.4rem}
}

/* Sections */
.section{padding: 3rem 0}
.section--tight{padding: 2.2rem 0}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem;
  margin-bottom:1.2rem;
}
.section__title{
  margin:0;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  letter-spacing:-.4px;
}
.section__sub{
  margin:.35rem 0 0;
  color:var(--muted);
  max-width: 70ch;
}

/* Cards / grids */
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
@media(max-width: 980px){.grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}}

.card{
  border:1px solid rgba(2,6,23,.10);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
  overflow:hidden;
}
.card__body{padding:1.05rem 1.1rem 1.1rem}
.card__title{margin:.1rem 0 .4rem; font-weight:900}
.card__text{margin:0; color:var(--muted)}
.card__list{margin:.75rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem}
.card__list li{display:flex; gap:.5rem; align-items:flex-start; color:rgba(15,23,42,.82)}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:900;
  font-size:.86rem;
  padding:.32rem .55rem;
  border-radius:999px;
  background: rgba(0,166,178,.10);
  border:1px solid rgba(0,166,178,.25);
  color: rgba(15,23,42,.85);
}

/* Room cards */
.room__media img{aspect-ratio: 16 / 10; object-fit: cover}
.room__price{color:var(--muted); font-weight:800}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:.85rem;
}
.gi{border-radius: 16px; overflow:hidden; border:1px solid rgba(2,6,23,.10); background:white; cursor:pointer}
.gi img{width:100%; height:100%; object-fit:cover; transition: transform .18s ease}
.gi:hover img{transform: scale(1.03)}
.gi--6{grid-column: span 6}
.gi--4{grid-column: span 4}
.gi--8{grid-column: span 8}
.gi--12{grid-column: span 12}
@media(max-width: 980px){.gi--6,.gi--4,.gi--8{grid-column: span 12}}

.lightbox{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 4vw;
  z-index: 80;
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width: min(1100px, 94vw);
  max-height: 84vh;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.lightbox__close{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 22px;
  cursor:pointer;
}
.lightbox__close:hover{background: rgba(255,255,255,.12)}

/* Map */
.map{
  border:1px solid rgba(2,6,23,.12);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(2,6,23,.08);
}
.map iframe{width:100%; height:360px; border:0}
@media(max-width: 700px){.map iframe{height:300px}}

/* Callout */
.callout{
  background: linear-gradient(135deg, rgba(11,61,145,.10) 0%, rgba(0,166,178,.12) 60%, rgba(247,231,206,.28) 100%);
  border:1px solid rgba(2,6,23,.10);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}
.callout p{margin:0; color:rgba(15,23,42,.80)}
.callout strong{display:block}
@media(max-width: 820px){.callout{flex-direction:column; align-items:flex-start}}

/* Footer */
.footer{
  margin-top: 2.5rem;
  background: rgba(2,6,23,.95);
  color: rgba(255,255,255,.88);
  padding: 2.2rem 0 1.1rem;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap:1.4rem;
}
@media(max-width: 980px){.footer__grid{grid-template-columns:1fr}}
.footer__brand{display:flex; align-items:center; gap:.75rem}
.footer__name{font-weight:950; letter-spacing:.2px}
.footer__meta{color: rgba(255,255,255,.68); font-size:.92rem}
.footer__text{color: rgba(255,255,255,.70); margin:.85rem 0 0; max-width: 55ch}
.footer__title{margin:0 0 .6rem; font-size:1.02rem}
.footer__links{list-style:none; padding:0; margin:0; display:grid; gap:.42rem}
.footer__links a{color: rgba(255,255,255,.80)}
.footer__links a:hover{text-decoration:underline}
.footer__btn{margin-top:.9rem}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top: 1.6rem;
  padding-top: 1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer__note{color: rgba(255,255,255,.60)}

/* Accessibility */
:focus-visible{outline: 3px solid rgba(0,166,178,.45); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn, .gi img, .nav{transition:none}
}

/* Photo credits list */
.credits{margin:0; padding-left:1.1rem;}
.credits li{margin:.55rem 0; line-height:1.5;}
.credits a{white-space:nowrap;}