/* ============================================================
   SUNDIAL ACCOUNTING — SCHEDULE PAGE STYLESHEET

     1. Header: the choice and the alternative
     2. Embed
     3. Responsive

   Loads on is_page('schedule'), after style.css.

   The booking widget is a cross-origin iframe from Zoom Scheduler.
   Nothing inside it can be styled and its scrollbars cannot be reached
   from here — the only lever this stylesheet has is how much room the
   frame gets. The embed takes the full container width. On desktop,
   Zoom vertically centres its booking panel, so excess iframe height
   creates space above it. Narrower screens retain the taller frame.
   ============================================================ */


/* ---------- 1. HEADER ------------------------------------- */
.schedule-head{ max-inline-size:46rem; }

/* The lede is a single sentence that measures 56ch, against the global
   54ch cap — so it wrapped by two characters and left an orphan. 62ch
   holds it on one line with room to spare, and is still well inside a
   comfortable measure for one short sentence.

   It still wraps below about 690px of viewport, where there is simply
   not the width; text-wrap:balance evens the two lines there instead
   of leaving a long line above a short one. Unsupported browsers just
   wrap normally. */
.schedule-head .page-header__lede{
  max-inline-size:62ch;
  text-wrap:balance;
}

.schedule-row{
  margin-top:var(--space-md);
  padding-top:var(--space-md);
  border-top:1px solid var(--color-rule);
  display:grid;
  gap:var(--space-md) var(--space-lg);
}

/* Side by side once there is room: the grouped choice takes the free
   space, the alternative sizes to its content and is set off by a
   gutter rather than a border. */
@media (min-width:62rem){
  .schedule-row{ grid-template-columns:1fr auto; align-items:center; }
  .schedule-alt{ padding-left:var(--space-lg); }
}

/* The two ways to meet are one decision, so they are grouped inside a
   single tinted panel with "or" between them. The alternative then
   sits outside that group, which is what it is — not a third way of
   meeting. Nothing here is bordered or filled except the button: the
   selection is made inside the iframe, so these must not read as
   controls. */
.schedule-choice{
  padding:var(--space-md) var(--space-lg);
  background:rgba(251,250,244,.04);
  border-radius:var(--radius-sm);
}
.schedule-choice__label{
  font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass);
  margin-bottom:var(--space-md);
}
.schedule-choice__pair{ display:grid; gap:var(--space-md); align-items:center; }

@media (min-width:48rem){
  .schedule-choice__pair{ grid-template-columns:1fr auto 1fr; column-gap:var(--space-lg); }
}

.schedule-choice__or{
  font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,250,244,.6);
  text-align:center;
}

/* Icon spans both rows so the label and note share one left edge. */
.schedule-way{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .875rem; }
.schedule-way svg{
  grid-row:1 / span 2;
  inline-size:1.4rem; block-size:1.4rem; margin-top:.25rem;
  color:var(--color-accent-text);
}
.schedule-way__label{
  font-family:var(--font-display); font-size:var(--step-2); line-height:1.25;
}
.schedule-way__note{
  font-size:var(--step--1); color:var(--color-muted); max-inline-size:28ch;
}

/* The alternative is named by its heading rather than asked as a
   question, so the action is clear before the explanation. */
.schedule-alt__label{
  font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.schedule-alt__title{
  font-family:var(--font-display); font-size:var(--step-2);
  color:var(--white); line-height:1.25; margin-top:.4rem;
}
.schedule-alt__text{
  margin-top:.3rem; font-size:var(--step--1);
  color:rgba(251,250,244,.72); max-inline-size:30ch;
}
.schedule-alt__actions{ margin-top:.875rem; }

/* Stacked, the alternative sits under a full-width panel. Left aligned
   it reads as pushed into the corner, and splitting it across the row
   strands the button at the far edge, a long way from the words that
   explain it.

   Centred instead: the block sits under the middle of the panel it
   follows, and the button stays directly beneath its own copy. This is
   the same shape the homepage's closing band uses, so it is already
   part of the vocabulary. */
@media (max-width:61.999rem){
  .schedule-alt{
    padding-top:var(--space-md);
    border-top:1px solid var(--color-rule);
    text-align:center;
  }
  .schedule-alt__text{
    margin-inline:auto;
    max-inline-size:42ch;
  }
  .schedule-alt__actions{ margin-top:1.125rem; }
}


/* ---------- 2. EMBED -------------------------------------- */
.schedule-embed{
  background:var(--color-surface);
  border:1px solid var(--color-rule);
  border-radius:var(--radius);
  padding:clamp(.75rem,.4rem + 1.4vw,1.25rem);
}

/* One quiet line of instruction above the calendar. */
.schedule-embed__line{
  padding:.25rem .5rem var(--space-md);
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent-text);
}
.schedule-embed__line::before{
  content:""; flex:none; inline-size:26px; block-size:1px; background:currentColor;
}

/* Default height for narrower layouts; desktop height is set below.
   Internal scrolling remains available if a booking step needs it. */
.schedule-embed iframe{
  display:block;
  inline-size:100%;
  block-size:clamp(46rem, 40rem + 14vw, 52rem);
  border:0;
  border-radius:var(--radius-sm);
}

/* Shown only if the frame is blocked — by a tracking blocker, a strict
   corporate network, or a browser with third-party frames switched
   off. Without it those visitors get an empty box. */
.schedule-fallback{
  margin-top:var(--space-md);
  padding-top:var(--space-md);
  border-top:1px solid var(--color-rule);
  font-size:var(--step--1);
  color:var(--color-muted);
  text-align:center;
}
.schedule-fallback a{ color:var(--color-accent-text); }


/* ---------- 3. RESPONSIVE --------------------------------- */
/* Zoom's desktop panel is vertically centred within the iframe.
   A 44rem frame reduces the space above it without cropping or
   shifting the embedded page. Keep narrower layouts taller. */
@media (min-width:64rem){
  .schedule-embed iframe{ block-size:44rem; }
}

/* Below about 1024px the frame is narrower than Zoom's layout however
   it is arranged, so it scrolls internally regardless. Going edge to
   edge buys back the container's gutters, which is the most width
   available short of sending people off the page. */
@media (max-width:63.999rem){
  .schedule-embed{
    margin-inline:calc(-1 * var(--gutter));
    border-inline:0;
    border-radius:0;
    padding-inline:0;
  }
  .schedule-embed__line{ padding-inline:var(--gutter); }
  .schedule-embed iframe{ border-radius:0; }
  .schedule-fallback{ margin-inline:var(--gutter); }
}

/* Phones keep the desktop widget inside the frame rather than a mobile
   layout, so it needs the height instead of the width. */
@media (max-width:35rem){
  .schedule-choice{ padding:var(--space-md); }
  .schedule-embed iframe{ block-size:clamp(50rem, 44rem + 22vw, 60rem); }
}