/* ============================================================
   Kaidana Gardens — booking engine
   The date bar, the calendar, the availability cards and the
   guest-details form. Companion to site.css: it reuses the tokens
   there and never restyles a site.css class.
   ============================================================ */

/* ---------- the date bar ---------- */
.kgb-bar{ position:relative; display:grid; grid-template-columns:1fr 1fr minmax(7.5rem,.7fr) auto;
  background:var(--paper); border:var(--hair); box-shadow:var(--shadow); margin:0 auto; text-align:left; }
.kgb-bar--home{ max-width:52rem; }
.kgb-bar__field{ min-width:0; padding:1rem 1.35rem; border-right:var(--hair); }
.kgb-bar__field .label{ display:block; margin-bottom:.35rem; }
.kgb-bar__field > input[type=date],
.kgb-bar__field > select{ display:block; width:100%; border:0; border-radius:0; background:transparent; padding:0;
  font-family:var(--body); font-weight:300; font-size:1.05rem; color:var(--ink); letter-spacing:.01em; line-height:1.5; }
.kgb-bar__field > select{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:1.4rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%, calc(100% - 6px) 55%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.kgb-bar__go{ border:0; background:transparent; cursor:pointer; padding:0 1.75rem; color:var(--ink);
  font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  transition:background .3s var(--ease), color .3s; }
.kgb-bar__go:hover{ background:var(--paper-2); }
.kgb-bar--home .kgb-bar__go{ background:var(--ink); color:var(--paper); }
.kgb-bar--home .kgb-bar__go:hover{ background:var(--gold); color:var(--ink); }

/* the button that stands in for the native date field once JS is on */
.kgcal-trigger{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%;
  border:0; background:none; padding:0; margin:0; text-align:left; cursor:pointer; color:var(--ink);
  font-family:var(--body); font-weight:300; font-size:1.05rem; letter-spacing:.01em; line-height:1.5; }
.kgcal-trigger__val{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kgcal-trigger--empty .kgcal-trigger__val{ color:color-mix(in srgb,var(--ink) 42%,transparent); }
.kgcal-trigger__ico{ width:1.05rem; height:1.05rem; flex:none; opacity:.45; transition:opacity .3s,color .3s; }
.kgcal-trigger:hover .kgcal-trigger__ico,
.kgcal-trigger[aria-expanded=true] .kgcal-trigger__ico{ opacity:1; color:var(--gold); }
.kgb-bar__field:has(.kgcal-trigger[aria-expanded=true]){ box-shadow:inset 0 -2px 0 var(--gold); }

@media (max-width:760px){
  .kgb-bar{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .kgb-bar__field{ padding:.9rem 1.1rem; border-bottom:var(--hair); }
  .kgb-bar__field:nth-child(2){ border-right:0; }
  .kgb-bar__field--guests{ order:2; border-bottom:0; }
  .kgb-bar__field > select,.kgcal-trigger{ font-size:1rem; }
  .kgb-bar__go{ order:2; padding:1rem .5rem; font-size:.66rem; letter-spacing:.14em; }
  .kgcal--inline{ order:1; }
}

/* ---------- the calendar ---------- */
.kgcal{ --cell:2.6rem; position:absolute; top:calc(100% + .6rem); left:0; z-index:60;
  background:var(--paper); border:var(--hair);
  box-shadow:0 1px 2px rgba(20,38,28,.04), 0 24px 60px rgba(20,38,28,.16);
  padding:1.4rem 1.6rem 1.1rem; width:max-content; max-width:calc(100vw - 2rem); text-align:left; }
.kgcal[hidden]{ display:none; }
.kgcal--inline{ position:static; grid-column:1/-1; width:auto; max-width:none; box-shadow:none; border:0;
  border-bottom:var(--hair); padding:1.25rem 1rem 1rem; }
.kgcal__head{ position:relative; }
.kgcal__months{ display:flex; gap:2.25rem; }
.kgcal__month{ width:calc(7 * var(--cell)); }
.kgcal__title{ font-family:var(--display); font-weight:300; font-size:1.45rem; letter-spacing:.01em; line-height:1;
  text-align:center; margin:0 0 .9rem; color:var(--ink); }
.kgcal__nav{ position:absolute; top:-.5rem; width:2.2rem; height:2.2rem; display:grid; place-items:center;
  border:0; background:none; color:var(--ink); cursor:pointer; opacity:.7; transition:opacity .2s,color .2s; }
.kgcal__nav:hover{ opacity:1; color:var(--gold); }
.kgcal__nav--prev{ left:-.6rem; }
.kgcal__nav--next{ right:-.6rem; }
.kgcal__nav[disabled]{ opacity:.2; cursor:default; color:var(--ink); }
.kgcal__row{ display:grid; grid-template-columns:repeat(7,var(--cell)); }
.kgcal__wd{ font-family:var(--body); font-size:.6rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 48%,transparent); text-align:center; padding:.2rem 0 .55rem; }
.kgcal__pad{ height:var(--cell); }
.kgcal__day{ position:relative; height:var(--cell); border:0; border-radius:0; background:none; padding:0; margin:0; cursor:pointer;
  font-family:var(--body); font-weight:300; font-size:.92rem; font-variant-numeric:tabular-nums; color:var(--ink);
  transition:background .15s, color .15s; }
/* :where() keeps the hover at (0,2,0) so a selected endpoint never loses its ink fill under the pointer;
   hover-capable devices only, so a tap on a phone leaves no stale highlight behind */
@media (hover:hover){ .kgcal__day:hover:where(:not([aria-disabled])){ background:color-mix(in srgb,var(--ink) 7%,transparent); } }
.kgcal__day.is-today{ box-shadow:inset 0 0 0 1px var(--gold); }
.kgcal__day.is-in{ background:color-mix(in srgb,var(--gold) 22%,transparent); }
.kgcal__day.is-in.is-preview{ background:color-mix(in srgb,var(--gold) 14%,transparent); box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--gold) 60%,transparent); }
.kgcal__day.is-start,.kgcal__day.is-end{ background:var(--ink); color:var(--paper); font-weight:400; box-shadow:none; }
.kgcal__day.is-end.is-preview{ background:color-mix(in srgb,var(--ink) 72%,transparent); }
.kgcal__day[aria-disabled]{ color:color-mix(in srgb,var(--ink) 28%,transparent); cursor:default; }
.kgcal__day.is-full::after{ content:''; position:absolute; left:50%; top:50%; width:1.35rem; height:1px;
  background:color-mix(in srgb,var(--ink) 48%,transparent); transform:translate(-50%,-50%) rotate(-45deg); }
.kgcal__day.is-full.is-end::after{ background:color-mix(in srgb,var(--paper) 55%,transparent); }
.kgcal__day.is-part::before{ content:''; position:absolute; left:50%; bottom:.3rem; width:4px; height:4px; border-radius:50%;
  background:var(--gold); transform:translateX(-50%); }
.kgcal__day.is-start.is-part::before,.kgcal__day.is-end.is-part::before{ background:var(--gold-soft); }
.kgcal__day:focus-visible{ outline:1.5px solid var(--gold); outline-offset:-2px; z-index:1; }
.kgcal__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; margin-top:1.1rem; padding-top:.9rem;
  border-top:var(--hair); font-size:.88rem; }
.kgcal__sum{ flex:1 1 14rem; margin:0; max-width:none; line-height:1.4; }
.kgcal__sum b{ font-family:var(--display); font-weight:400; font-size:1.3rem; margin-right:.45rem; }
.kgcal__legend{ list-style:none; margin:0; padding:0; display:flex; gap:1.1rem; font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 55%,transparent); }
.kgcal__lg{ display:inline-flex; align-items:center; gap:.45rem; }
.kgcal__lg::before{ content:''; width:.9rem; height:1px; background:color-mix(in srgb,var(--ink) 48%,transparent); transform:rotate(-45deg); }
.kgcal__lg--part::before{ width:4px; height:4px; border-radius:50%; background:var(--gold); transform:none; }
.kgcal__clear{ border:0; background:none; padding:0; cursor:pointer; color:var(--ink);
  font-family:var(--body); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold); }
.kgcal__clear[hidden]{ display:none; }
.kgcal--inline .kgcal__months{ display:block; }
.kgcal--inline .kgcal__month{ width:100%; }
.kgcal--inline .kgcal__row{ grid-template-columns:repeat(7,1fr); }
.kgcal--inline .kgcal__day,.kgcal--inline .kgcal__pad{ height:2.8rem; }
.kgcal--inline .kgcal__nav--prev{ left:-.3rem; }
.kgcal--inline .kgcal__nav--next{ right:-.3rem; }

/* ---------- the booking screen ---------- */
.kgb{ padding:clamp(3.5rem,7vw,6rem) var(--gutter) clamp(4.5rem,9vw,8rem); }
.kgb__wrap{ max-width:64rem; margin:0 auto; }
.kgb__intro{ max-width:40rem; margin-bottom:clamp(2rem,4vw,3rem); }
.kgb__intro h1{ font-size:clamp(2.3rem,1.6rem + 2.6vw,3.8rem); margin-bottom:1rem; letter-spacing:.01em; }
.kgb__intro p{ margin:0; color:color-mix(in srgb,var(--ink) 78%,transparent); }
.kgb .notice{ margin:0 0 1.5rem; }
.kgb-results{ margin-top:clamp(2rem,4vw,3rem); }
.kgb-results:empty{ margin-top:0; }

.kgb-stay{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.1rem; padding-bottom:1rem; margin:0 0 1.5rem;
  border-bottom:var(--hair-gold); max-width:none; }
.kgb-stay__n{ font-family:var(--display); font-weight:300; font-size:1.9rem; line-height:1; }
.kgb-stay__d{ font-size:.95rem; color:color-mix(in srgb,var(--ink) 75%,transparent); }
.kgb-stay__change{ margin-left:auto; border:0; background:none; cursor:pointer; padding:0; color:var(--ink);
  font-family:var(--body); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold); }

/* an apartment: photograph beside the facts, the price and the choice */
.kgb-card{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); border:var(--hair); background:var(--paper);
  margin-bottom:1.25rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.kgb-card:not(.kgb-card--out){ cursor:pointer; }
.kgb-card:not(.kgb-card--out):hover{ border-color:color-mix(in srgb,var(--gold) 70%,transparent); }
.kgb-card.is-selected{ border-color:var(--gold); box-shadow:var(--shadow); }
.kgb-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--stone); }
.kgb-card__media picture,.kgb-card__media img,.kgb-card__media .ph{ width:100%; height:100%; object-fit:cover; display:block; min-height:0; }
.kgb-card__body{ display:flex; flex-direction:column; gap:1rem; padding:1.75rem 2rem; min-width:0; }
.kgb-card__name{ font-family:var(--display); font-weight:300; font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem); line-height:1.05; margin:0; }
.kgb-card__tag{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.12rem; line-height:1.35;
  color:color-mix(in srgb,var(--ink) 72%,transparent); margin:.35rem 0 0; max-width:none; }
.kgb-facts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem 1.5rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 55%,transparent); }
.kgb-card__foot{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem;
  padding-top:1.1rem; border-top:var(--hair); }
.kgb-price{ display:flex; flex-direction:column; gap:.3rem; }
.kgb-price__total{ font-family:var(--display); font-weight:300; font-size:2rem; line-height:1; letter-spacing:.01em; }
.kgb-price__total--text{ font-size:1.35rem; font-style:italic; font-weight:400; }
.kgb-price__note{ font-size:.82rem; color:color-mix(in srgb,var(--ink) 62%,transparent); }
.kgb-price .price{ font-variant-numeric:tabular-nums; }
.kgb-reason{ font-family:var(--display); font-style:italic; font-weight:400; font-size:1.1rem; color:color-mix(in srgb,var(--ink) 70%,transparent); }
.kgb-card__select{ min-width:9rem; text-align:center; }
.kgb-card.is-selected .kgb-card__select{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.kgb-card--out .kgb-card__media{ filter:grayscale(1); opacity:.5; }
.kgb-card--out .kgb-card__body{ opacity:.62; }

/* the whole property: one wide photograph over an ink band */
.kgb-card--whole{ grid-template-columns:1fr; border-color:var(--ink); background:var(--ink); color:var(--paper); }
.kgb-card--whole:not(.kgb-card--out):hover{ border-color:var(--gold); }
.kgb-card--whole .kgb-card__media{ aspect-ratio:21/9; }
.kgb-card--whole .kgb-card__body{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto;
  column-gap:3rem; row-gap:1rem; align-items:end; padding:2rem 2.25rem; }
.kgb-card--whole .kgb-card__name{ color:var(--paper); }
.kgb-card--whole .kgb-card__tag{ color:color-mix(in srgb,var(--paper) 78%,transparent); }
.kgb-card--whole .kgb-facts{ color:color-mix(in srgb,var(--paper) 62%,transparent); }
.kgb-card--whole .kgb-card__foot{ grid-column:2; grid-row:1 / span 2; flex-direction:column; align-items:flex-end;
  justify-content:flex-end; border-top:0; padding-top:0; text-align:right; }
.kgb-card--whole .kgb-price{ align-items:flex-end; }
.kgb-card--whole .kgb-price__note{ color:color-mix(in srgb,var(--paper) 65%,transparent); }
.kgb-card--whole .kgb-reason{ color:color-mix(in srgb,var(--paper) 75%,transparent); }
.kgb-card--whole .btn{ border-color:color-mix(in srgb,var(--paper) 60%,transparent); color:var(--paper); }
.kgb-card--whole .btn:hover,
.kgb-card--whole.is-selected .kgb-card__select{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.kgb-card--whole.kgb-card--out{ background:var(--paper); color:var(--ink); border-color:color-mix(in srgb,var(--ink) 14%,transparent); }
.kgb-card--whole.kgb-card--out .kgb-card__name{ color:var(--ink); }
.kgb-card--whole.kgb-card--out .kgb-card__tag{ color:color-mix(in srgb,var(--ink) 72%,transparent); }
.kgb-card--whole.kgb-card--out .kgb-facts{ color:color-mix(in srgb,var(--ink) 55%,transparent); }
.kgb-card--whole.kgb-card--out .kgb-reason{ color:color-mix(in srgb,var(--ink) 70%,transparent); }
/* the compact line used when the whole property is simply not free */
.kgb-card--row{ grid-template-columns:1fr; }
.kgb-card--row .kgb-card__body{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; padding:1.25rem 2rem; }
.kgb-card--row .kgb-card__foot{ margin:0; padding:0; border:0; }
.kgb-card--row .kgb-card__name{ font-size:1.45rem; }

/* the skeleton shown while availability loads */
.kgb-skel{ pointer-events:none; cursor:default; }
.kgb-skel .kgb-card__media{ background:var(--paper-2); }
.kgb-skel__line{ height:.9rem; background:var(--paper-2); margin-bottom:.85rem; width:70%; }
.kgb-skel__line--lg{ height:1.8rem; width:55%; }
.kgb-skel__line--sm{ width:35%; }
.kgb-shimmer{ position:relative; overflow:hidden; }
.kgb-shimmer::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:kgb-shimmer 1.6s infinite; }
@keyframes kgb-shimmer{ to{ transform:translateX(100%); } }

/* nothing free, or the lookup failed */
.kgb-empty{ border:var(--hair); padding:clamp(2rem,4vw,3rem); text-align:center; margin-bottom:1.25rem; }
.kgb-empty h3{ font-weight:300; margin:0 auto .6rem; max-width:28ch; }
.kgb-empty p{ margin:0 auto 1.5rem; color:color-mix(in srgb,var(--ink) 72%,transparent); }

/* the guest's details */
.kgb-request{ margin-top:clamp(2.5rem,5vw,4rem); }
.kgb-request .slat-rule{ margin-bottom:clamp(2rem,4vw,3rem); }
.kgb-request__head{ margin-bottom:1.5rem; }
.kgb-request__head h2{ font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem); }
.kgb-chosen{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 1.5rem;
  margin:0 0 2rem; padding:1.1rem 1.35rem; border:var(--hair-gold); background:color-mix(in srgb,var(--gold) 7%,transparent); max-width:none; }
.kgb-chosen__what{ font-family:var(--display); font-size:1.4rem; font-weight:400; }
.kgb-chosen__when{ font-size:.9rem; color:color-mix(in srgb,var(--ink) 70%,transparent); flex:1 1 auto; }
.kgb-chosen__total{ font-family:var(--display); font-size:1.4rem; font-weight:400; }
.kgb-request__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; margin-top:.5rem; }
.kgb-request__actions .label{ margin:0; }

@media (max-width:760px){
  .kgb-card{ grid-template-columns:1fr; }
  .kgb-card__media{ aspect-ratio:3/2; }
  .kgb-card__body{ padding:1.35rem 1.4rem; gap:.85rem; }
  .kgb-card__foot{ align-items:center; }
  .kgb-card__select{ min-width:0; flex:1 1 auto; }
  .kgb-card--whole .kgb-card__media{ aspect-ratio:16/9; }
  .kgb-card--whole .kgb-card__body{ display:flex; flex-direction:column; align-items:stretch; padding:1.5rem 1.4rem; }
  .kgb-card--whole .kgb-card__foot{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left;
    border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent); padding-top:1.1rem; }
  .kgb-card--whole .kgb-price{ align-items:flex-start; }
  .kgb-card--row .kgb-card__body{ padding:1.25rem 1.4rem; }
  .kgb-stay__change{ margin-left:0; flex-basis:100%; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  .kgcal__day,.kgcal__nav,.kgcal-trigger__ico,.kgb-card,.kgb-bar__go{ transition:none; }
  .kgb-shimmer::after{ animation:none; }
}

/* ---------- home page: a pre-existing phone overflow ----------
   site.css gives #map `aspect-ratio:4/3; min-height:320px`, which transfers a 427px automatic
   minimum width into the `.location` grid's 1fr track, so every phone narrower than ~466px
   scrolls sideways. minmax(0,1fr) lets the track shrink; the map keeps its 320px minimum height.
   The lasting fix belongs in site.css. */
@media (max-width:820px){ .location{ grid-template-columns:minmax(0,1fr); } }