/* 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(3.2rem, 8vw, 7.2rem); 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; } }

/* Availability, two months, quiet. */
.room-calendar__note { font-size: .88rem; color: var(--ink-soft); margin: -.4rem 0 1.6rem; max-width: 52ch; }
.avail { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.avail__month { flex: 1 1 240px; }
.avail__mname { font-family: var(--serif); font-size: 1.25rem; color: var(--forest); margin-bottom: .8rem; }
.avail__dow, .avail__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.avail__dow { margin-bottom: .4rem; }
.avail__dow span { text-align: center; font-size: .6rem; letter-spacing: .16em; color: var(--sage); }
.avail__grid { border-top: 1px solid var(--line); padding-top: .4rem; gap: 2px 0; }
.avail__cell { aspect-ratio: 1; display: grid; place-items: center; font-size: .8rem; color: var(--forest); }
.avail__cell.is-empty { visibility: hidden; }
.avail__cell.is-booked { color: var(--sage); text-decoration: line-through; background: var(--paper); }
.avail__cell.is-past { color: var(--lichen); }
.avail__legend { display: flex; gap: 1.6rem; margin-top: 1.2rem; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.avail__legend .dot { display: inline-block; width: 10px; height: 10px; margin-right: .5rem; vertical-align: -1px; }
.dot--free { border: 1px solid var(--line); }
.dot--booked { background: var(--paper); border: 1px solid var(--lichen); }

/* ---- 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);
}
.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: a forest panel, like the booking bar's */
.dr-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(620px, 84vw); padding: 1.3rem 1.3rem 1.1rem;
  background: var(--forest); color: var(--white);
  box-shadow: 0 30px 70px -28px rgba(18,26,18,.75);
}
.dr-pop[hidden] { display: none; }
.dr-cal { display: flex; flex-wrap: wrap; gap: 1.8rem; }
.dr-m { flex: 1 1 230px; min-width: 0; }
.dr-m__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.dr-m__name { font-family: var(--serif); font-size: 1.12rem; }
.dr-nav {
  width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--white);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.dr-nav:hover:not(:disabled) { background: var(--white); color: var(--forest); }
.dr-nav:disabled { opacity: 0; pointer-events: none; }
.dr-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .35rem; }
.dr-dow span { text-align: center; font-size: .6rem; letter-spacing: .1em; color: var(--lichen); }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.dr-cell {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  font-size: .82rem; border: 0; border-radius: 50%; background: transparent; color: var(--white);
  transition: background .12s;
}
.dr-cell.is-empty { visibility: hidden; }
.dr-cell.is-free:hover { background: rgba(255,255,255,.14); }
.dr-cell:focus-visible { outline: 1.5px solid var(--white); outline-offset: -2px; }
.dr-cell.is-inrange, .dr-cell.is-preview { background: rgba(255,255,255,.16); border-radius: 0; }
.dr-cell.is-preview-end { background: rgba(255,255,255,.28); border-radius: 0 50% 50% 0; }
.dr-cell.is-start, .dr-cell.is-end { background: var(--white); color: var(--forest); font-weight: 600; }
.dr-cell.is-start { border-radius: 50% 0 0 50%; }
.dr-cell.is-end { border-radius: 0 50% 50% 0; }
.dr-cell.is-start.is-end { border-radius: 50%; }
.dr-cell.is-booked { color: rgba(255,255,255,.3); text-decoration: line-through; cursor: not-allowed; }
.dr-cell.is-past { color: rgba(255,255,255,.22); cursor: default; }
.dr-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-dark); }
.dr-clear { background: none; border: 0; padding: 0; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lichen); text-decoration: underline; text-underline-offset: 4px; }
.dr-clear:hover { color: var(--white); }
.dr-done { border: 0; border-radius: 0; background: var(--white); color: var(--forest); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: .6rem 1.2rem; }
.dr-done:hover { background: var(--paper); }
@media (max-width: 1100px) { .dr-pop { width: min(300px, 84vw); } }
@media (max-width: 900px)  { .dr-pop { left: 0; right: 0; width: auto; } }

.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; }
  .room-body { padding-bottom: calc(var(--section) + 3rem); }
}

/* The services list brings its own small line; under the section label it
   would say the same thing twice. */
.room-extras .avail-svc__head .eyebrow { display: none; }

/* ---- 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); }