/* Lane-owned styles that are not yet folded into main.css (the final-pages lane, 2026-10-03:
   attraction and sight page layouts and the desktop booking rail). Loaded after main.css. */

/* Desktop booking rail (macros/rail.njk). Hidden below 1200 px, where the phone bookbar and the
   fold buttons carry the booking. From 1200 px the sections leave a right column for the card, and
   the card stays in view while the page scrolls past the tables. */
.rail {
  display: none;
}
@media (min-width: 1200px) {
  .rail-layout {
    --rail-width: 300px;
    --rail-gap: 48px;
    position: relative;
  }
  .rail {
    display: block;
    position: absolute;
    top: calc(-1 * var(--rail-lift, 0px));
    bottom: 0;
    right: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
    width: var(--rail-width);
    z-index: 2;
    pointer-events: none;
  }
  .rail-card {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-photo);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    pointer-events: auto;
  }
  .rail-layout > .section > .wrap {
    padding-right: calc(var(--gutter) + var(--rail-width) + var(--rail-gap));
  }
  /* Offer rows keep two per row in the narrower content column beside the rail. */
  .rail-layout .offer-rows > * {
    flex-basis: calc((100% - 20px) / 2);
  }
  /* Place cards beside the rail: three per row instead of four, so names keep to one or two lines. */
  .rail-layout .place-cards:not(.place-cards--compact) > li {
    flex-basis: calc((100% - 40px) / 3);
  }
}
.rail-card p {
  margin: 0;
}
.rail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.rail-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.rail-price .amount {
  font-family: var(--font-display);
  font-weight: 760;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}
.rail-price .per,
.rail-note,
.rail-pick-meta {
  font-size: 0.875rem;
  color: var(--ink-2);
}
.rail-pick {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rail-pick-title {
  font-weight: 650;
  line-height: 1.3;
}
.rail-card .btn-book,
.rail-card .btn-quiet {
  width: 100%;
  justify-content: center;
}

/* Photo-led bands: a photo beside a short answer, with the full table folded into details. */
.photo-band {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 768px) {
  .photo-band {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}
.photo-band > * {
  min-width: 0;
}
.photo-band-body {
  display: grid;
  gap: 16px;
}
.more-table > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 600;
}
.more-table > summary::-webkit-details-marker {
  display: none;
}
.more-table[open] > summary {
  margin-bottom: 12px;
}

/* Timetables: equal columns so a long row of times never leaves one time alone on a line. */
@media (min-width: 768px) {
  .timetable dd {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, max-content));
    justify-content: start;
  }
}

/* A text link beside a button gets its own line and room. */
.action-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* In a half-width column a spec list stacks its label over the text, so the text keeps its measure. */
.offers .spec-list > div,
.photo-band .spec-list > div,
.rail-layout .spec-list > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

/* Beside the booking rail, a table and its notes stack instead of sharing the narrower column. */
@media (min-width: 1200px) {
  .rail-layout .offers:has(.table-wrap) {
    grid-template-columns: minmax(0, 1fr);
  }
}