/* Book now (12 Oct 2026): the two-choice start page, the Places list and the full-page booking tool. Uses the site tokens in styles.css. */

/* ---------- Start page ---------- */
.bn-start{max-width:1160px; margin:0 auto; padding:56px 40px 88px; text-align:center;}
.bn-start h1{font-size:clamp(34px,5vw,54px);}
.bn-question{font-family:'Newsreader',serif; font-size:clamp(19px,2.2vw,24px); color:var(--text-soft); margin:10px 0 34px;}
.bn-choices{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px;}
.bn-or{font-family:'Newsreader',serif; font-style:italic; font-size:20px; color:var(--text-softer);}
.bn-choice{position:relative; display:block; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--ink); transition:transform .2s, box-shadow .2s;}
.bn-choice picture, .bn-choice img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.bn-choice::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,42,71,.15) 0%, rgba(11,42,71,.72) 100%);}
.bn-choice-text{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:26px 28px; text-align:left; color:#fff; font-family:'Newsreader',serif; font-size:clamp(28px,3.4vw,40px); line-height:1.1;}
.bn-choice-text::after{content:" \2192"; opacity:.85;}
.bn-choice:hover{box-shadow:0 22px 44px rgba(11,42,71,.22); transform:translateY(-3px);}
.bn-choice:hover img{transform:scale(1.04);}
.bn-choice:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
@media (max-width:780px){
  .bn-start{padding:32px 16px 56px;}
  .bn-choices{grid-template-columns:minmax(0,1fr); gap:12px;}
  .bn-choice{aspect-ratio:16/10;}
}

/* ---------- Places list ---------- */
.bn-selects{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:760px; width:100%; margin:0 auto;}
.bn-places .hub-toggles{justify-content:center;}
.bn-places .hub-toggles:not(:has(button:not([hidden]))){display:none;}
.bn-card .card-img{transition:box-shadow .15s;}
.bn-card:hover .card-img{box-shadow:0 16px 34px rgba(11,42,71,.16);}
.bn-card[hidden]{display:none;}
.bn-card-cta{display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--accent);}
.bn-card:hover .bn-card-cta{text-decoration:underline;}
.bn-places .hub-note a{text-decoration:underline;}
@media (max-width:640px){.bn-selects{grid-template-columns:minmax(0,1fr);}}

/* ---------- Full-page booking tool ---------- */
.bn-tool{display:flex; flex-direction:column; height:calc(100vh - 73px); height:calc(100dvh - 73px); min-height:560px;}
.bn-tool-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 40px; border-bottom:1px solid var(--line);}
.bn-tool-bar h1{font-size:clamp(17px,2.2vw,22px); text-align:center; flex:1; min-width:0;}
.bn-tool-back, .bn-tool-guide{font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap;}
.bn-tool-back:hover, .bn-tool-guide:hover{text-decoration:underline;}
.bn-tool-frame{flex:1; width:100%; border:0; display:block; background:var(--accent-soft);}
.bn-tool-note{font-size:12px; color:var(--text-softer); text-align:center; padding:6px 16px;}
.bn-tool-note a{text-decoration:underline;}
@media (max-width:780px){
  .bn-tool{height:calc(100vh - 65px); height:calc(100dvh - 65px);}
  .bn-tool-bar{padding:8px 16px; flex-wrap:wrap; gap:4px 12px;}
  .bn-tool-bar h1{order:3; flex-basis:100%; text-align:left;}
}