/* ============================================================
   Balance Farm — Cabin modal (.bkflow--cabin)

   Full-bleed panel on the shared modal shell (modal-shell.css), so it
   grows out of the nav exactly like the booking flow.

   Desktop: 1fr copy / 2fr main photograph / 1fr the next two, which run
   past the panel edge so the set reads as a strip continuing off-screen.
   The title sits at the top of the copy column and the two disclosures at
   its foot; Book floats in the bottom-right.

   Mobile: one type size throughout, the disclosures directly under the
   title, and every photograph the same height in a swipeable strip.
   ============================================================ */

.bkflow--cabin .bkflow__panel { --bkflow-gutter: 20px; }

.cabin__body {
  display: grid;
  grid-template-columns: 1fr 1.75fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 0;
}

/* ---- copy column ---- */
.cabin__aside {
  display: flex;
  flex-direction: column;
  /* same clearance as the booking flow's left column (modal-shell.css) */
  padding: calc(var(--bkflow-topbar-h) + var(--bkflow-gutter, 16px) - 14px) var(--s-5) var(--s-5);
  min-width: 0;
  /* a grid item's implicit min-height is its content, which would let the open
     amenities stretch the row and clip past the panel — 0 lets the column
     scroll instead, title and all, once the content fills it */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cabin__title {
  margin: 0;
  font-size: var(--t-4xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-4xl-track);
  line-height: 0.95;
  color: var(--color-ink);
  text-wrap: balance;
}

/* the disclosures sit at the foot of the column */
.cabin__discs { margin-top: auto; padding-top: var(--s-10); }
.cabin__disc + .cabin__disc { margin-top: var(--s-1); }
.cabin__disc-q {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xl-track);
  line-height: 1.1;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .cabin__disc-q:hover { opacity: 0.55; }
}
.cabin__disc-chev {
  flex: 0 0 auto;
  width: 15px;
  height: 9px;
  transition: transform var(--d-base) var(--e-move);
}
.cabin__disc.is-open .cabin__disc-chev { transform: rotate(180deg); }

.cabin__disc-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 420ms var(--e-move);
}
.cabin__disc.is-open .cabin__disc-a { max-height: 4000px; }
.cabin__disc-a p {
  margin: 0;
  padding: var(--s-3) 0 var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 1.45;
  color: var(--color-ink);
  text-wrap: pretty;
}
.cabin__disc-a p + p { padding-top: 0; }
/* Amenities: a titled group per category, each a hairline row list
   (.bkflow__row, as the booking summary uses). Groups past Bedroom carry
   --more and are revealed by See all — adding or reordering a group is a
   markup edit in index.html, nothing here or in the logic changes. */
.cabin__ams {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) 0 var(--s-4);   /* 24px from the Amenities toggle */
}
.cabin__am-title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-lg-track);
  line-height: 1.1;
  color: var(--color-ink);
}
.cabin__rows { margin: 0; padding: 0; list-style: none; }
.cabin__rows .bkflow__row {
  justify-content: flex-start;
  padding: var(--s-2) 0;
  font-size: var(--t-xs);
  letter-spacing: var(--t-xs-track);
  line-height: 1.3;
}
.cabin__am--more { display: none; }
.cabin__ams.is-all .cabin__am--more { display: block; }
.cabin__seeall { align-self: flex-start; }
.cabin__ams.is-all .cabin__seeall { display: none; }

/* ---- main photograph ---- */
.cabin__main {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--fill-1);
  /* the whole carousel is one click target: the sideways cursor says the
     photographs advance rather than open */
  cursor: e-resize;
}
.cabin__main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
/* an instant switch: the arriving frame simply replaces the outgoing one */
.cabin__main-img.is-active { opacity: 1; z-index: 1; }

/* ---- the next two, running off the panel edge ---- */
/* both frames sit side by side across the column, so their height follows the
   column width rather than being fixed */
.cabin__next {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
.cabin__thumb {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: e-resize;
  overflow: hidden;
}
.cabin__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .cabin__thumb:hover img { opacity: 0.85; }
}

/* ---- Book: the primary CTA, same fill and shape as the nav's ---- */
.cabin__book {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 6;
  padding: 12px 20px;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xs-track);
  color: var(--paper);
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 200ms ease;
}
@media (hover: hover) {
  .cabin__book:hover { background: var(--accent-hover); }
}

/* the mobile strip is built by js/ui/cabin.js only when it is in play */
.cabin__strip { display: none; }

/* ============================================================
   Mobile + tablet
   ============================================================ */
@media (max-width: 1024px) {
  /* a column, so the strip can be pushed to the foot of the panel with the
     copy block staying at the top */
  .cabin__body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* one type size for the title and both disclosures; the block starts right
     under the topbar, the same clearance the booking flow uses */
  .cabin__aside {
    padding: var(--s-5) var(--s-5) var(--s-5);
    overflow: visible;
  }
  .cabin__title,
  .cabin__disc-q {
    font-size: var(--t-2xl);
    letter-spacing: var(--t-2xl-track);
  }
  .cabin__discs { margin-top: var(--s-6); padding-top: 0; }
  .cabin__disc-chev { width: 13px; height: 8px; }

  /* the carousel gives way to one swipeable strip, every frame the same height */
  .cabin__main,
  .cabin__next { display: none; }
  /* the 140px below Amenities is padding, not a margin, so it can collapse
     against the strip's auto margin when the panel runs short */
  .cabin__aside { flex: 0 0 auto; padding-bottom: 140px; }
  /* the strip takes whatever height is left below the copy, so the frames always
     end exactly on the panel foot rather than overflowing it */
  .cabin__strip {
    display: flex;
    /* a band on the foot of the panel, a little over half the screen; when an
       open disclosure leaves no room for it the body scrolls */
    flex: 0 0 auto;
    height: 56svh;
    margin-top: auto;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* the frames run to the foot of the panel and Book floats over them */
  }
  .cabin__strip img {
    flex: 0 0 85%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }
  .cabin__book {
    left: var(--s-5);
    right: auto;
    bottom: var(--s-5);
    box-shadow: 0 2px 12px rgba(23, 21, 18, 0.18);   /* legible over photography */
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabin__main-img,
  .cabin__disc-a,
  .cabin__disc-chev { transition-duration: 1ms !important; }
}