/* A single lodge (room.php, /lodges/<slug>). Shared partials live in style.css section 20, which
   carries the gallery and the services list.
   The booking card, date picker and mobile bar are driven by
   assets/js/room-book.js; every data-* hook and class it reads is kept. */

/* ---- Opening ---------------------------------------------------------- */
.room-hero { min-height: min(92svh, 940px); }
.room-hero h1 { font-size: clamp(2.4rem, 5.4vw, 5.1rem); line-height: .96; }
.room-hero__aside { display: grid; gap: 1.4rem; padding-bottom: .5rem; }
.room-hero__aside .phero__lede { padding-bottom: 0; }
.room-hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 0; }
.room-hero__facts li { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.room-hero__facts li + li::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: rgba(255,255,255,.5); vertical-align: middle; margin: 0 .9rem; }
@media (max-width: 640px) {
  .room-hero__facts { flex-direction: column; gap: .5rem; }
  .room-hero__facts li { display: flex; align-items: center; gap: .8rem; line-height: 1.5; }
  .room-hero__facts li::before, .room-hero__facts li + li::before { content: ""; flex: 0 0 1rem; width: 1rem; height: 1px; margin: 0; background: rgba(255,255,255,.5); }
}
/* A lodge without a photograph yet: forest instead of a picture. */
.room-hero--plain { background: var(--forest); min-height: min(62svh, 620px); }

/* ---- Body: the lodge on the left, the booking card on the right ------- */
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(3rem, 6vw, 6.5rem); align-items: start; }
.room-main { min-width: 0; }
.room-block + .room-block, .room-specs + .room-block { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.room-intro .eyebrow { margin-bottom: 1.8rem; }
.room-intro__lead {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.28;
  color: var(--forest); max-width: 30ch; letter-spacing: -.01em;
}
.room-intro__prose { margin-top: 2rem; max-width: 62ch; }

.room-specs { margin-top: clamp(2.5rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 1.6rem; }
.room-specs dd { font-size: 1.15rem; }

.room-subhead {
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--moss);
}
.room-subhead::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }

.room-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2rem, 4vw, 4rem); }
.room-lists .ticks li { padding-block: .1rem; }
@media (max-width: 640px) { .room-lists { grid-template-columns: 1fr; } }

/* ---- The booking card -------------------------------------------------- */
/* stretch, so the sticky card has the whole column to travel in. */
.room-aside { position: relative; align-self: stretch; }
.book-card {
  position: sticky; top: calc(76px + 1.5rem);
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  /* Never taller than the window: the card scrolls inside itself, so the
     calendar, extras and the details form are always reachable. */
  max-height: calc(100vh - 76px - 3rem); max-height: calc(100dvh - 76px - 3rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.book-card::-webkit-scrollbar { width: 6px; }
.book-card::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.book-card__head { margin-bottom: 1.6rem; }
.book-card__kicker { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--moss); margin-bottom: .9rem; }
.book-card__price > span { display: block; font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.1; color: var(--forest); }
.book-card__price em { display: block; margin-top: .35rem; font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.book-card__offer {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--moss);
}

/* the date range: two ruled fields side by side */
.dr { position: relative; }
.dr__fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); transition: border-color .25s var(--ease); }
.dr.is-open .dr__fields { border-color: var(--forest); }
.dr-field {
  display: grid; gap: .25rem; justify-items: start; text-align: left;
  padding: .75rem .9rem; background: var(--white); border: 0; border-radius: 0;
}
.dr-field + .dr-field { border-left: 1px solid var(--line); }
.dr-field:hover { background: var(--paper); }
.dr-field__label { font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); }
.dr-field__val { font-family: var(--serif); font-size: 1.02rem; color: var(--sage); }
.dr-field__val.is-set { color: var(--forest); }

/* The calendar opens inside the card, under the two fields, one month at a
   time — so it never hangs off the card and scrolls with it. */
.dr-pop {
  margin-top: -1px; padding: 1.1rem 1rem 1rem;
  border: 1px solid var(--forest); border-top-color: var(--line);
  background: var(--white);
  animation: dr-in .28s var(--ease-out);
}
.dr-pop[hidden] { display: none; }
@keyframes dr-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dr-pop { animation: none; } }
.dr-pop__hint {
  margin-bottom: .9rem; font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss);
}
.dr-pop__hint b { font-weight: 500; color: var(--forest); }
.dr-cal { display: block; }
.dr-m { min-width: 0; }
.dr-m__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.dr-m__name { font-family: var(--serif); font-size: 1.15rem; color: var(--forest); }
.dr-nav {
  width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--forest);
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
}
.dr-nav:hover:not(:disabled) { background: var(--forest); border-color: var(--forest); color: var(--white); }
.dr-nav:disabled { opacity: .25; cursor: default; }
.dr-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .3rem; }
.dr-dow span { text-align: center; font-size: .58rem; font-weight: 500; letter-spacing: .12em; color: var(--sage); }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; }
.dr-cell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  font-size: .86rem; font-variant-numeric: tabular-nums;
  border: 0; border-radius: 50%; background: transparent; color: var(--forest);
  transition: background .12s, color .12s;
}
.dr-cell.is-empty { visibility: hidden; }
.dr-cell.is-free { cursor: pointer; }
.dr-cell.is-free:hover { background: var(--mist); }
.dr-cell:focus-visible { outline: 1.5px solid var(--forest); outline-offset: -2px; }
.dr-cell.is-today::after { content: ""; position: absolute; bottom: 16%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--moss); }
.dr-cell.is-inrange, .dr-cell.is-preview { background: var(--mist); border-radius: 0; }
.dr-cell.is-preview-end { background: var(--line); border-radius: 0 50% 50% 0; }
.dr-cell.is-start, .dr-cell.is-end { background: var(--forest); color: var(--white); font-weight: 500; }
.dr-cell.is-start::after, .dr-cell.is-end::after { background: var(--white); }
.dr-cell.is-start { border-radius: 50% 0 0 50%; }
.dr-cell.is-end { border-radius: 0 50% 50% 0; }
.dr-cell.is-start:not(.has-end) { border-radius: 50%; }
.dr-cell.is-start.is-end { border-radius: 50%; }
.dr-cell.is-booked { color: var(--lichen); text-decoration: line-through; cursor: not-allowed; }
.dr-cell.is-past { color: var(--lichen); opacity: .6; cursor: default; }
.dr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .9rem; font-size: .7rem; color: var(--ink-soft); }
.dr-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dr-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dr-key--free { border: 1px solid var(--line); }
.dr-key--booked { background: var(--paper); border: 1px solid var(--lichen); position: relative; overflow: hidden; }
.dr-key--booked::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1px; background: var(--lichen); transform: rotate(-45deg); }
.dr-key--sel { background: var(--forest); }
.dr-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.dr-clear { background: none; border: 0; padding: 0; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.dr-clear:hover { color: var(--forest); }
.dr-done { border: 0; border-radius: 0; background: var(--forest); color: var(--white); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: .65rem 1.3rem; }
.dr-done:hover { background: var(--moss); }
.dr-field.is-active { background: var(--paper); box-shadow: inset 0 -2px 0 var(--forest); }

.book-card__guests { display: grid; gap: .3rem; margin-top: 1.1rem; }
.book-card__guests > span, .book-step2 label {
  font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss);
}
.book-card select, .book-card input:not([type="checkbox"]):not([type="hidden"]), .book-card textarea {
  width: 100%; padding: .7rem 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-size: 1rem; color: var(--forest); text-transform: none; letter-spacing: 0;
  transition: border-color .25s;
}
.book-card select {
  appearance: none; -webkit-appearance: none; padding-right: 1.4rem; font-family: var(--serif); font-size: 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2350634F' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") no-repeat right .2rem center;
}
.book-card textarea { resize: vertical; line-height: 1.55; min-height: 5.5rem; }
.book-card select:focus, .book-card input:focus, .book-card textarea:focus { outline: none; border-color: var(--forest); }
.book-card input::placeholder, .book-card textarea::placeholder { color: var(--sage); }

.book-card__status { margin-top: 1.1rem; padding: .7rem .9rem; font-size: .84rem; line-height: 1.45; }
.book-card__status.is-ok { background: var(--mist); color: var(--forest); border-left: 2px solid var(--moss); }
.book-card__status.is-neutral { background: var(--paper); color: var(--ink-soft); border-left: 2px solid var(--lichen); }
.book-card__status.is-bad { background: #F7E9E5; color: #7D2E21; border-left: 2px solid #A3412F; }
.book-card__quote { margin-top: .9rem; font-size: .86rem; }
.book-card__lines { list-style: none; }
.book-card__lines li { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; color: var(--ink-soft); }
.book-card__total { display: flex; justify-content: space-between; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--line); color: var(--forest); }
.book-card__total strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.book-card__cta { margin-top: 1.4rem; }

.book-card__trust { list-style: none; margin-top: 1.5rem; display: grid; gap: .5rem; }
.book-card__trust li { position: relative; padding-left: 1.5rem; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.book-card__trust li::before { content: ""; position: absolute; left: 0; top: .75em; width: .8rem; height: 1px; background: var(--moss); }

.book-card__contact {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.book-card__wa, .book-card__tel { font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--forest); }
.book-card__tel { letter-spacing: .08em; color: var(--ink-soft); }
.book-card__wa:hover, .book-card__tel:hover { color: var(--moss); }

/* steps 2–4 */
.book-step__back {
  display: inline-flex; align-items: center; gap: .6rem; background: none; border: 0; padding: 0;
  font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.book-step__back::before { content: ""; width: 1.4rem; height: 1px; background: currentColor; transition: width .35s var(--ease-out); }
.book-step__back:hover { color: var(--forest); }
.book-step__back:hover::before { width: 2.2rem; }
.book-step__summary { margin: 1.2rem 0 .4rem; padding: .9rem 1rem; background: var(--paper); display: grid; gap: .2rem; }
.book-step__summary strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--forest); }
.book-step__summary span { font-size: .82rem; color: var(--ink-soft); }
.book-step2 label { display: block; margin-top: 1.1rem; }
.book-step2 label > input, .book-step2 label > textarea { display: block; margin-top: .1rem; }
.book-step2 .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--sage); }
.book-step2 [data-submit] { margin-top: 1.6rem; }
.book-step__err { margin-top: 1rem; font-size: .86rem; }
.book-step__fine { margin-top: 1rem; font-size: .76rem; color: var(--ink-soft); text-align: center; }

.book-extras__title { margin: 1.2rem 0 .5rem; font-size: 1.7rem; }
.book-extras__intro { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.book-extras__group + .book-extras__group { margin-top: 1.3rem; }
.book-extras__eyebrow { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); margin-bottom: .5rem; }
.book-extras__list { list-style: none; border-top: 1px solid var(--line); }
.book-extra { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s var(--ease); }
.book-extra:hover { background: var(--paper); }
.book-extra:has(.book-extra__ck:checked) { background: var(--mist); }
.book-extra__ck { flex: 0 0 auto; margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--forest); }
.book-extra__body { flex: 1 1 auto; display: grid; gap: .1rem; min-width: 0; }
.book-extra__name { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.25; color: var(--forest); }
.book-extra__route, .book-extra__cap { font-size: .76rem; color: var(--ink-soft); }
.book-extra__price { flex: 0 0 auto; font-size: .78rem; color: var(--moss); text-align: right; padding-top: .15rem; }
.book-extras__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
.book-extras__actions .btn { padding-inline: 1rem; }

.book-done { text-align: center; padding: .6rem 0 0; }
.book-done__mark { width: 56px; height: 56px; margin: 0 auto 1.2rem; border-radius: 50%; border: 1px solid var(--moss); display: grid; place-items: center; color: var(--forest); }
.book-done__mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.book-done h3 { font-size: 2rem; margin-bottom: .8rem; }
.book-done p { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.1rem; }
.book-done p strong { color: var(--forest); }
.book-done__wa-note { font-size: .8rem !important; margin-bottom: .6rem !important; }
.book-upsell { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); text-align: left; }
.book-upsell__eyebrow { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); margin-bottom: .9rem; }
.book-upsell__list { display: grid; gap: .2rem; margin-bottom: 1.2rem; }
.book-upsell__item { display: flex; align-items: center; gap: .9rem; padding: .45rem 0; }
.book-upsell__item img { width: 56px; height: 56px; object-fit: cover; flex: 0 0 auto; }
.book-upsell__txt { min-width: 0; display: grid; gap: .1rem; }
.book-upsell__txt strong { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.2; color: var(--forest); }
.book-upsell__txt em { font-style: normal; font-size: .76rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-upsell__item:hover strong { color: var(--moss); }

/* ---- The phone's bottom bar ------------------------------------------- */
.room-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
}
.room-mobilebar[hidden] { display: none; }
.room-mobilebar__price { min-width: 0; display: grid; }
.room-mobilebar__price strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--forest); }
.room-mobilebar__price > span { font-size: .7rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-mobilebar .btn { flex: 0 0 auto; }
@media (min-width: 901px) { .room-mobilebar { display: none !important; } }

@media (max-width: 900px) {
  .room-layout { grid-template-columns: 1fr; }
  .book-card { position: static; max-height: none; overflow: visible; }
  .room-body { padding-bottom: calc(var(--section) + 3rem); }
}

/* ---- Around the lodge -------------------------------------------------- */
.room-around__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.room-around__card:nth-child(2) { margin-top: clamp(0rem, 5vw, 4.5rem); }
@media (max-width: 760px) {
  .room-around__grid { grid-template-columns: 1fr; }
  .room-around__card:nth-child(2) { margin-top: 0; }
}

/* ---- Other lodges ------------------------------------------------------ */
.room-others .rail { --rail-card: clamp(260px, 25vw, 360px); }