/* Ocean Jet Ski v4 - css/book.css
   The booking page. Tino, 2 September: booking is its own page, not a box on the home page.
   Paper ground, hairlines, square corners, one red action. The table itself is styled in hero.css
   so the two pages can never drift apart. */
.book-page{ background:var(--paper); }

.book-head{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px 32px; background:var(--paper); border-bottom:1px solid var(--rule);
}
.book-head img{ height:40px; display:block; }
.book-head__back{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
@media (hover:hover){ .book-head__back:hover{ color:var(--red); } }

.book-intro{ padding:72px 32px 32px; }
.book-intro h1{
  margin:10px 0 0; font-size:clamp(30px,3.4vw,46px); font-weight:600;
  text-transform:uppercase; line-height:.92; letter-spacing:-.015em;
}
.book-intro__lead{ margin:20px 0 0; max-width:52ch; font-size:17px; line-height:1.65; color:var(--ink-soft); }

/* the table shows on every canvas here, and stacks on the phone */
.book-page .bookbar-band{ display:block; padding:8px 32px 40px; }
@media (max-width:1023.98px){
  .book-page .bookbar{ grid-template-columns:1fr; }
  .book-page .bookbar__cell + .bookbar__cell{ border-left:0; border-top:1px solid var(--rule); }
  .book-page .bookbar__cta{ min-width:0; width:100%; min-height:60px; }
}

.book-rides{
  display:grid; gap:32px; padding:56px 32px 24px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  border-top:1px solid var(--rule);
}
.book-ride h2{ margin:16px 0 0; font-size:21px; font-weight:600; text-transform:uppercase; letter-spacing:-.01em; }
.book-ride__frame{ aspect-ratio:4/3; }
.book-ride__blurb{ margin:8px 0 0; font-size:17px; line-height:1.6; color:var(--ink-soft); }
.book-ride__price{ margin:14px 0 0; font-size:13px; color:var(--ink-soft); }
.book-ride__price strong{ font-size:30px; font-weight:600; color:var(--red); }
.book-ride__pick{
  margin-top:16px; width:100%; min-height:56px; border:1px solid var(--ink); background:transparent;
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover){ .book-ride__pick:hover{ background:var(--ink); color:var(--paper); } }

.book-know{
  display:grid; gap:32px 64px; padding:56px 32px 96px; border-top:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
}
.book-know h2{ margin:0 0 14px; font-size:13px; font-weight:500; letter-spacing:.12em;
               text-transform:uppercase; color:var(--ink-faint); }
.book-know ul{ margin:0; padding:0; list-style:none; }
.book-know li{ font-size:18px; line-height:1.65; padding:12px 0; border-bottom:1px solid var(--rule); }
.book-know__note{ grid-column:1/-1; margin:8px 0 0; font-size:17px; color:var(--ink-soft); }
.book-know__note a{ text-decoration:underline; text-underline-offset:4px; }

/* ============ the voucher ============ */
.book-gift{
  display:grid; gap:40px; align-items:center; padding:72px 32px;
  border-top:1px solid var(--rule); background:var(--paper-warm);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .book-gift{ grid-template-columns:1fr 1fr; gap:72px; } }
.book-gift__media{ aspect-ratio:4/3; }
.book-gift__body h2{ margin:10px 0 0; font-size:clamp(28px,3vw,40px); font-weight:600;
                     text-transform:uppercase; line-height:.92; letter-spacing:-.015em; }
.book-gift__body > p{ margin:18px 0 0; font-size:18px; line-height:1.65; color:var(--ink-soft); max-width:44ch; }
.book-gift__steps{ margin:24px 0 0; padding:0; list-style:none; }
.book-gift__steps li{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule);
                      font-size:17px; line-height:1.6; }
.book-gift__steps span{ color:var(--ink-faint); font-weight:500; flex:none; }
.book-gift__cta{ display:inline-flex; align-items:center; justify-content:center; margin-top:24px;
                 min-height:56px; padding:0 32px; border:1px solid var(--ink); color:var(--ink);
                 font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
                 transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover:hover){ .book-gift__cta:hover{ background:var(--ink); color:var(--paper); } }

/* ============ shared page tail (every page except the home page) ============ */
.page-cta{ padding:24px 32px 96px; display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; }
.page-cta__book{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 30px;
                 background:var(--red); color:#fff; font-size:14px; font-weight:500; letter-spacing:.16em;
                 text-transform:uppercase; text-decoration:none; }
@media (hover:hover){ .page-cta__book:hover{ background:var(--red-deep); color:#fff; } }
.page-cta p{ margin:0; font-size:16px; line-height:1.55; color:var(--ink-soft); }
.page-cta p a{ color:var(--ink); text-decoration:underline; }
.page-foot{ background:var(--paper-deep); color:#fff; padding:56px 32px 120px; }
.page-foot__in{ max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.page-foot nav{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; }
.page-foot nav a{ color:rgba(255,255,255,.85); text-decoration:none; }
@media (hover:hover){ .page-foot nav a:hover{ color:#fff; text-decoration:underline; } }
.page-foot p{ margin:0; font-size:14px; line-height:1.7; color:rgba(255,255,255,.7); }
.page-foot p a{ color:#fff; text-decoration:none; }
@media (max-width:1023.98px){ .page-cta{ padding:16px 24px 80px; } .page-foot{ padding:48px 24px 120px; } }

/* ============ legal text ============ */
.legal{ padding:8px 32px 96px; max-width:72ch; }
.legal h2{ margin:40px 0 12px; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.legal p, .legal li{ font-size:17px; line-height:1.65; color:var(--ink-soft); }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:22px; }
.legal li{ margin:6px 0; }
.legal a{ color:var(--ink); text-decoration:underline; }
@media (max-width:1023.98px){ .legal{ padding:8px 24px 72px; } }

/* ============ pages that carry the site header ============ */
/* the header is fixed, so the page starts under it; and it looks compact even before site.js runs */
.page-sitehead main{ padding-top:64px; }
.page-sitehead .hero-head{ background:var(--paper); border-bottom:1px solid var(--rule); }
.page-sitehead .hero-head .hero-cluster{ border-color:var(--rule); }
.page-sitehead .hero-head .hero-cluster__btn{ color:var(--ink); border-color:var(--rule); }