/* ============================================================================
   JNZ Insurance — Insurance Policy Review page styles
   ============================================================================
   Loaded only on /insurance-review/. Depends on /styles.css being loaded first.

   The scheduler is a cross-origin Microsoft Bookings page, so the browser will
   not let us read its height and size the frame to fit. It is sized by hand
   instead, from measurements taken against the live booking page:

     frame >= 1024px wide : side-by-side layout, 2022px tall, and it stays
                            2022px whichever date is picked (the time-slot
                            column is a fixed height)
     frame <  1024px wide : stacked layout — 2272px tall on a day with a single
                            open slot, 2434px on a day with several

   Those are FRAME widths, not viewport widths. Inside .container the frame is
   the viewport (capped at 1200px) minus the 32px gutters minus this wrapper's
   two 1px borders, so it only reaches 1024px once the viewport reaches 1090px.
   The breakpoint below sits at 1092px to keep a cushion: guessing high costs a
   little unused grey at the foot of the frame, guessing low puts a second
   scrollbar inside it. Same reasoning for the heights, which carry headroom
   over the measurements — if Bookings ever outgrows them the frame scrolls
   internally rather than clipping the booking form.

   Below 600px the frame goes full-bleed. Bookings itself overflows sideways
   once the frame drops under ~350px wide, which a 390px phone would otherwise
   hit (390 - 40 gutters - 2 borders = 348).
============================================================================ */

/* ============ Compact hero ============ */
/* The marketing pages run a full-viewport hero. This page exists to get the
   visitor into the scheduler, so the hero is sized to its content instead. */
.hero--compact { min-height: auto; }
.hero--compact .hero-inner { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 820px) {
  .hero--compact .hero-inner { padding-top: 0; padding-bottom: 0; }
}

/* ============ Intro copy above the scheduler ============ */
.booking-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}
.booking-intro p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Scheduler frame ============ */
.booking-embed {
  position: relative;
  /* Same canvas colour as the Bookings page itself, so any spare height at the
     foot of the frame reads as part of the scheduler and not as an empty box. */
  background: #F4F4F4;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.booking-embed iframe {
  display: block;
  width: 100%;
  height: 2480px;
  border: 0;
}
@media (min-width: 1092px) {
  .booking-embed iframe { height: 2100px; }
}

/* ============ Fallback line under the frame ============ */
.booking-fallback {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--jnz-slate);
}
.booking-fallback a {
  color: var(--link);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.booking-fallback a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============ Responsive ============ */
@media (max-width: 820px) {
  .booking-intro { margin-bottom: 32px; }
  .booking-intro p { font-size: 16px; }
}
@media (max-width: 600px) {
  .booking-intro { margin-bottom: 24px; }
  .booking-fallback { font-size: 14px; }
  /* Full-bleed: cancel the 20px .container gutters so the scheduler gets the
     whole viewport width, and drop the side borders and rounding with them. */
  .booking-embed {
    margin-left: -20px;
    margin-right: -20px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
@media (max-width: 380px) {
  /* .container drops to 14px gutters at this width */
  .booking-embed { margin-left: -14px; margin-right: -14px; }
}