/* ============================================================
   AKORA — booking engine (search + results)
   Built on akora.css tokens. Same fonts, palette, radii.
   Fonts: Marcellus (URW Classico) display · Mulish (Avenir) body
   ============================================================ */

:root{ --bkw: 1320px; }   /* matches --maxw on the property + marketing pages */

/* ---------- compact booking header (mark only — no wordmark) ---------- */
.bk-header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.bk-header__in{
  max-width:var(--bkw);margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.bk-brand{display:inline-flex;align-items:center;}
.bk-brand img{height:50px;width:auto;display:block;}
.bk-nav{display:flex;align-items:center;gap:26px;}
.bk-nav a{
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--navy);
}
.bk-nav a:hover{color:var(--teal);}
.bk-nav .btn{padding:10px 22px;font-size:13px;letter-spacing:.03em;white-space:nowrap;}
.bk-nav a{white-space:nowrap;}

/* ---------- hero ---------- */
.bk-hero{
  position:relative;
  min-height:500px;                 /* shorter than original, with a touch more presence */
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;
}
.bk-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bk-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,22,.34) 0%,rgba(24,24,22,.30) 40%,rgba(24,24,22,.46) 100%);}
.bk-hero__in{position:relative;width:100%;max-width:1040px;padding:54px 32px;}
.bk-hero h1{
  font-family:var(--font-display);font-weight:400;color:#fff;
  font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:.005em;margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.32);
}
.bk-hero p.sub{
  color:rgba(255,255,255,.92);font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  margin:18px auto 0;max-width:60ch;text-shadow:0 1px 14px rgba(0,0,0,.34);
}

/* ---------- search bar — flat floating capsule, NO outer box ---------- */
.bk-search{
  display:flex;align-items:center;background:#fff;border:none;
  border-radius:999px;max-width:880px;margin:30px auto 0;
  padding:0 7px 0 5px;height:64px;
  box-shadow:0 22px 48px -20px rgba(24,30,58,.5),0 6px 18px -10px rgba(24,30,58,.32);
}
.bk-seg{
  flex:1;text-align:left;background:none;border:none;cursor:pointer;
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:0 24px;height:50px;margin:0 1px;border-radius:999px;transition:background .15s;font-family:var(--font-body);
  min-width:0;
}
.bk-seg:hover{background:var(--cream);}
.bk-seg + .bk-seg::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:var(--line-2);}
.bk-seg .lbl{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);}
.bk-seg .val{font-size:13.5px;color:var(--navy);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-seg .val.ph{color:#9a9684;font-weight:400;}
.bk-search__btn{
  flex:none;align-self:center;display:grid;place-items:center;width:50px;height:50px;border-radius:999px;
  background:var(--teal);color:#fff;border:none;cursor:pointer;transition:background .15s;margin-left:4px;
}
.bk-search__btn:hover{background:var(--teal-700);}
.bk-search__btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- keyword magnifier + worded CTA (Option 1) ---------- */
.bk-kw{position:relative;flex:0 0 auto;display:flex;align-items:center;cursor:pointer;padding:0 6px;}
.bk-kw::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line-2);}
.bk-kw__mag{display:grid;place-items:center;width:42px;height:42px;color:var(--teal);transition:color .15s;}
.bk-kw__mag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bk-kw:hover .bk-kw__mag{color:var(--teal-700);}
.bk-kw__exp{display:none;flex-direction:column;gap:2px;width:100%;}
.bk-kw__exp .lbl{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--teal);}
.bk-kw__iw{display:flex;align-items:center;gap:8px;}
.bk-kw__iw input{border:none;background:none;outline:none;font-family:var(--font-body);font-size:15px;color:var(--navy);width:100%;padding:0;}
.bk-kw__iw input::placeholder{color:#9a9684;}
.bk-kw__x{flex:none;border:none;background:none;cursor:pointer;color:var(--ink-soft);width:22px;height:22px;border-radius:999px;display:grid;place-items:center;transition:background .15s,color .15s;}
.bk-kw__x:hover{background:var(--cream-3);color:var(--navy);}
.bk-kw__x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.bk-search.kw-open .bk-kw{flex:1.3;cursor:default;padding:0;}
.bk-search.kw-open .bk-kw__mag{display:none;}
.bk-search.kw-open .bk-kw__exp{display:flex;}

/* worded CTA — matches Homepage v3 hero “Find your home” (gold, navy text), ak-go proportions */
.bk-cta{flex:none;align-self:center;background:var(--gold);color:var(--navy);border:none;border-radius:999px;height:44px;
  padding:0 18px;margin-left:4px;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.01em;
  box-shadow:0 6px 16px -8px rgba(24,30,58,.34);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.bk-cta:hover{background:#EAC400;}
.bk-cta svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* search bar docked in a band (results page) */
.bk-searchband{background:var(--cream);border-bottom:1px solid var(--line);}
.bk-searchband .bk-search{
  margin:0 auto;max-width:880px;
  box-shadow:0 10px 28px -18px rgba(24,30,58,.4);
}
.bk-searchband__in{max-width:var(--bkw);margin:0 auto;padding:18px 40px;}

/* ---------- section heading ---------- */
.bk-shell{max-width:var(--bkw);margin:0 auto;padding:0 40px;}
.bk-feat{padding:clamp(40px,4.4vw,60px) 0 clamp(48px,5vw,72px);}
.bk-feat__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 clamp(28px,3vw,40px);}
.bk-feat__head h2{
  font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:clamp(28px,3.1vw,42px);line-height:1.1;margin:0;
}
.bk-feat__head .eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.18em;}

/* ---------- listing grid ---------- */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 32px;}
.lgrid--results{grid-template-columns:repeat(3,1fr);gap:40px 26px;}

/* ---------- listing card ---------- */
.lcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.lcard__media{
  position:relative;aspect-ratio:4/3;border-radius:5px;       /* 5pt corners */
  overflow:hidden;background:var(--cream-3);
}
.lcard__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease;
}
.lcard__media img.is-active{opacity:1;}
.lcard__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--navy);
  display:grid;place-items:center;opacity:0;transition:opacity .18s,background .15s;
  box-shadow:0 3px 10px -3px rgba(24,30,58,.4);z-index:2;
}
.lcard__media:hover .lcard__nav{opacity:1;}
.lcard__nav:hover{background:#fff;}
.lcard__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lcard__nav.prev{left:10px;}
.lcard__nav.next{right:10px;}
.lcard__dots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:5px;justify-content:center;z-index:2;}
.lcard__dots i{width:5px;height:5px;border-radius:999px;background:rgba(255,255,255,.6);transition:background .2s,transform .2s;}
.lcard__dots i.is-active{background:#fff;transform:scale(1.25);}

/* Card hierarchy: NAME is the anchor, META recedes (quiet support),
   PRICE is distinct and lighter-weight than the name so the two don't compete. */
.lcard__body{padding:14px 2px 0;display:flex;flex-direction:column;}
.lcard__name{
  font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:22px;line-height:1.08;
}
/* META — tertiary: soft ink, small, recessive. Sits tight under the name as one unit. */
.lcard__feat{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 15px;
  color:var(--ink-soft);font-size:13px;margin-top:6px;
}
.lcard__feat span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.lcard__feat svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.lcard__feat--text{flex-wrap:nowrap;gap:0 8px;}
.lcard__feat--text span{color:var(--ink-soft);}
.lcard__sep{font-style:normal;color:var(--ink-soft);opacity:.4;}
/* PRICE — set apart from the name/meta group, and lighter than the name. */
.lcard__price{
  display:flex;align-items:baseline;gap:5px;
  margin-top:11px;
  color:var(--ink-soft);font-size:12.5px;
}
.lcard__price .from{color:var(--ink-soft);}
.lcard__price b{
  font-family:var(--font-display);font-weight:400;color:var(--navy);   /* NOT yellow */
  font-size:18px;line-height:1;
}

/* ---------- view all (matches home-page button: 4–5px radius) ---------- */
.bk-viewall{display:flex;justify-content:center;margin-top:48px;}
.bk-viewall .btn{padding:0 34px;font-size:15px;letter-spacing:.01em;}

/* ============================================================
   RESULTS PAGE — listings + map split
   ============================================================ */
.bk-results{max-width:var(--bkw);margin:0 auto;padding:30px 40px 64px;
  display:grid;grid-template-columns:1fr 0.46fr;gap:40px;align-items:start;}
.bk-results__list{min-width:0;}
.bk-results__count{font-size:14px;color:var(--ink-soft);margin:0 0 22px;}
.bk-results__count b{font-family:var(--font-display);font-weight:400;color:var(--navy);font-size:18px;}

/* map column (sticky) */
.bk-map{
  position:sticky;top:150px;height:calc(100vh - 180px);min-height:560px;
  border-radius:5px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:#EDEAE2;
}
.bk-map__canvas{position:absolute;inset:0;
  background:
    /* parks / blocks */
    radial-gradient(120px 90px at 22% 30%, rgba(70,129,134,.16), transparent 70%),
    radial-gradient(150px 120px at 78% 68%, rgba(70,129,134,.13), transparent 72%),
    radial-gradient(90px 70px at 60% 18%, rgba(70,129,134,.10), transparent 70%),
    /* water hint */
    linear-gradient(115deg, transparent 60%, rgba(120,150,170,.10) 61%, rgba(120,150,170,.10) 67%, transparent 68%),
    /* roads */
    repeating-linear-gradient(28deg, transparent 0 46px, rgba(255,255,255,.7) 46px 49px),
    repeating-linear-gradient(118deg, transparent 0 64px, rgba(255,255,255,.55) 64px 66px),
    #E7E3DA;
}
.bk-map__pin{
  position:absolute;transform:translate(-50%,-50%);
  background:#fff;color:var(--navy);border:1px solid var(--line);
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;white-space:nowrap;cursor:pointer;
  box-shadow:0 4px 12px -4px rgba(24,30,58,.4);transition:transform .15s,background .15s,color .15s;z-index:1;
}
.bk-map__pin:hover{transform:translate(-50%,-50%) scale(1.07);z-index:3;}
.bk-map__pin.is-active{background:var(--teal);color:#fff;border-color:var(--teal);z-index:4;}
.bk-map__note{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:var(--font-body);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(255,255,255,.82);padding:5px 12px;border-radius:999px;
}

/* ---------- footer (compact, matches site) ---------- */
.bk-footer{background:var(--cream-2);border-top:1px solid var(--line);margin-top:0;}
.bk-footer__in{max-width:var(--bkw);margin:0 auto;padding:40px 40px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.bk-footer__brand{display:flex;align-items:center;gap:16px;max-width:520px;}
.bk-footer__brand img{height:48px;}
.bk-footer__brand p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0;}
.bk-footer__links{display:flex;gap:24px;font-size:13px;font-weight:600;color:var(--navy);}
.bk-footer__links a{color:var(--navy);}
.bk-footer__links a:hover{color:var(--teal);}
.bk-footer__meta{font-size:13px;color:var(--ink-soft);text-align:right;line-height:1.9;width:100%;
  border-top:1px solid var(--line);padding-top:18px;margin-top:6px;}
.bk-footer__meta a{color:var(--ink-soft);}
.bk-footer__meta a:hover{color:var(--teal);}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .bk-results{grid-template-columns:1fr;}
  .bk-map{position:relative;top:0;height:420px;min-height:0;}
}
@media(max-width:860px){
  .lgrid,.lgrid--results{grid-template-columns:repeat(2,1fr);}
  .bk-feat__head{flex-direction:column;}
}
@media(max-width:620px){
  .lgrid,.lgrid--results{grid-template-columns:1fr;}
  .bk-search{flex-wrap:wrap;border-radius:5px;padding:8px;}
  .bk-seg{flex:1 1 100%;}
  .bk-seg + .bk-seg::before{display:none;}
  .bk-search__btn{width:100%;border-radius:999px;height:46px;margin:6px 0 0;}
  .bk-kw{flex:1 1 100%;padding:13px 18px;}
  .bk-kw::before{display:none;}
  .bk-kw{border-top:1px solid var(--line-2);}
  .bk-cta{width:100%;justify-content:center;margin:6px 0 0;}
  .bk-header__in{padding:14px 20px;}
  .bk-nav{gap:14px;}
}
