/* ============================================================
   King Slayer Sportfishing: /book/ page layout only
   Requires tokens.css then base.css.
   Minimal-chrome conversion page: COMPACT photo band, a two
   sentence terms strip, four calendar chips, the Acuity
   iframe, and a fallback link. No cta-band; the calendar is
   the CTA, so the band above it stays deliberately short.
   ============================================================ */

/* ============ 1. Compact page hero ============
   Page-scoped override of the shared .page-hero band. Every
   other interior page gets the full clamp(420px,56vh,640px)
   photo band; here the calendar is the point, so the band is
   cut back to headline height and the copy padding shrinks
   with it. Loaded after base.css, so equal-specificity
   selectors win on source order. */
.page-hero{min-height:clamp(280px,32vh,380px)}
.page-hero-inner{
  padding:clamp(2.75rem,7vw,4rem) var(--gutter) clamp(1.75rem,3vw,2.25rem);
}
.page-hero .crumbs{padding-top:0;padding-bottom:1.1rem}
@media (min-width:641px){
  .page-hero h1{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:.9rem}
}
.page-hero-cta{margin-top:1.3rem;padding-top:1.1rem}

/* ============ 2. Terms strip ============ */
.book-terms{
  padding:clamp(1.5rem,3.5vw,2.25rem) 0;
  background:var(--deep-700);
  border-bottom:1px solid var(--line);
}
.book-reassure{
  max-width:52rem;
  color:var(--dim);
  font-size:1rem;
}

/* ============ 3. Calendar cards ============ */
.cal-head{margin-bottom:1.5rem}
.cal-head h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.5rem;
}
.cal-head p{color:var(--dim);max-width:36rem;font-size:.96rem}

.cal-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.5rem);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.cal-card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.5rem 1.4rem;
}
.cal-card:hover{border-color:var(--blue-bright)}
.cal-card h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1rem;
  color:var(--ice);
  margin-bottom:.6rem;
}
/* chips carry the facts now, so the old prose paragraph rule is gone.
   .chips already sets margin-top:auto in base.css, which pins the chip
   row to the bottom of the card and keeps the four buttons aligned. */
.cal-card .chips{margin-bottom:1.25rem}
.cal-card .btn{align-self:flex-start;text-align:center}

/* ============ 4. Acuity embed ============ */
.book-embed-wrap{margin-bottom:1.5rem}
.book-embed-wrap iframe{
  display:block;
  width:100%;
  border:1px solid var(--line);
  background:var(--ice);
  min-height:min(1200px,160vh);
}
@media (min-width:880px){
  .book-embed-wrap iframe{min-height:1100px}
}

/* ============ 5. Fallback + phone ============ */
.book-fallback{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:.95rem;
}
.book-fallback a{color:var(--blue-bright)}

/* ============ Responsive ============ */
@media (max-width:960px){
  .cal-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* base.css floors the shared band at 420px on mobile. The book band is
     still the short one, so it is re-floored here inside a matching query. */
  .page-hero{min-height:260px}
  .page-hero-inner{padding:clamp(2.25rem,9vw,3.25rem) var(--gutter) 1.75rem}
  .page-hero-cta{margin-top:1.1rem;padding-top:1rem}
}
@media (max-width:560px){
  .cal-cards{grid-template-columns:1fr}
  .book-fallback{flex-direction:column;align-items:flex-start;gap:.6rem}
}