/* book — page-specific styles.
   Loaded after /static/css/site.css, which holds everything shared.
   The page is a Sanity page at path "book": a hero, then a Form section
   set to "booking", which pulls in scripts/templates/forms/booking.html.
   The calendar is a Cal.com inline embed started by index.js, which also
   sets the embed's colors to the brand palette. */

/* Tighter than the shared form section: the picker and calendar sit close
   under the hero rather than a full section gap below it. */
#route-book .phero{padding-bottom:var(--s4)}
#route-book .field-blush > .section{padding-top:var(--s4)}
#route-book .field-blush .grid{row-gap:var(--s3)}

/* Two columns: the section intro and the meeting types on the left, the
   calendar on the right running the full height of both. The calendar gets
   nine of twelve columns because Cal.com's booker (details, month, times)
   needs roughly a thousand pixels before it starts to squeeze. */
#route-book .signup__intro{grid-column:1 / 4}
#route-book .signup__intro p{padding-top:var(--s2)}
#route-book .bk__side{grid-column:1 / 4;grid-row:2}
#route-book .bk__cal{grid-column:4 / 13;grid-row:1 / span 2;align-self:start}
/* Rows size to the intro and the list, never to the calendar beside them,
   so fitting the calendar to their height cannot feed back into it. */
#route-book .field-blush .grid{align-content:start;grid-template-rows:auto 1fr}
#route-book .signup__intro,#route-book .bk__side{align-self:start}

#route-book .bk__label{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--sand);
}

/* Meeting-type picker.
   Every row has the same padding and the same 3px left bar in every state,
   so nothing shifts on hover. The bar is transparent at rest, Sand on
   hover, and Ink when selected; the selected row also takes the Bone field.
   Widths are literal on purpose: --rule is redefined as a color inside
   .field-blush, so var(--rule) cannot be used as a border width here. */
#route-book .bk__types{list-style:none;margin:0;padding:0;border-top:1px solid var(--sand)}
#route-book .bk__types li{border-bottom:1px solid var(--sand)}
#route-book .bk__type{
  display:grid;grid-template-columns:1fr auto;column-gap:var(--s2);row-gap:4px;
  width:100%;padding:12px var(--s2) 12px 13px;
  background:transparent;border:0;border-left:3px solid transparent;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
#route-book .bk__type:hover{background:rgba(243,239,228,.55);border-left-color:var(--sand)}
#route-book .bk__type[aria-pressed="true"],
#route-book .bk__type[aria-pressed="true"]:hover{background:var(--bone);border-left-color:var(--ink)}
#route-book .bk__type:focus-visible{outline:3px solid var(--rose);outline-offset:-3px}
#route-book .bk__name{
  font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;
  font-size:clamp(17px,1.2vw,21px);line-height:1.1;
}
#route-book .bk__meta{font-size:13px;font-weight:600;color:var(--stone);white-space:nowrap;align-self:center}
#route-book .bk__type[aria-pressed="true"] .bk__meta{color:var(--ink)}
#route-book .bk__desc{grid-column:1 / -1;font-size:13px;line-height:1.45;color:var(--stone);max-width:44ch}

/* "Before you book" sits under the calendar, in two columns on wide
   screens, so the left column is only the intro and the list and the
   calendar can match its length. */
#route-book .bk__note{padding-top:var(--s3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
#route-book .bk__note .bk__label{grid-column:1 / -1}
#route-book .bk__note p{padding-top:var(--s2);font-size:14px;line-height:1.6;max-width:56ch}
#route-book .bk__note a{text-decoration:none;border-bottom:1px solid var(--sand)}
#route-book .bk__note a:hover,#route-book .bk__note a:focus-visible{border-bottom-color:var(--ink)}

/* The booker draws its own Bone card with a Sand border (index.js), so the
   frame adds no box of its own. Cal.com sizes the iframe height; the frame
   only sets a floor so the page does not jump while it loads. */
#route-book .bk__frame{position:relative;min-height:560px;width:100%}
#route-book .bk__frame iframe{width:100% !important;min-height:540px;border:0}
/* Wide screens: index.js sets the frame to the height of the intro and the
   list, and the iframe fills it (overriding the height Cal.com reports). */
#route-book .bk__frame--fit .bk__pane{display:flex;flex-direction:column}
#route-book .bk__frame--fit .bk__pane > *{flex:1 1 auto;height:100% !important}
#route-book .bk__frame--fit iframe{height:100% !important}

/* One pane per meeting type (index.js). Inactive panes stay laid out at
   full size so they are ready to show, but are invisible, inert, and out of
   the flow. On wide screens every pane fills the fitted frame; when stacked,
   the active pane is in the flow and sets the frame's height. */
#route-book .bk__frame{overflow:hidden}
#route-book .bk__pane{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none}
#route-book .bk__pane.is-active{position:relative;visibility:visible;pointer-events:auto}
#route-book .bk__frame--fit .bk__pane{position:absolute;inset:0}
#route-book .bk__loading{position:absolute;top:0;left:0;z-index:1}
#route-book .bk__frame:not(.is-loading) .bk__loading{display:none}
#route-book .bk__loading{padding:var(--s4) 0;font-size:15px;color:var(--stone)}
#route-book .bk__fallback{padding-top:var(--s3);font-size:15px;line-height:1.6}
#route-book .bk__fallback a{border-bottom:1px solid var(--ink);text-decoration:none}

@media (max-width:1340px){
  #route-book .signup__intro,
  #route-book .bk__side{grid-column:1 / 5}
  #route-book .bk__cal{grid-column:5 / 13}
}
@media (max-width:1180px){
  #route-book .signup__intro,
  #route-book .bk__side,
  #route-book .bk__cal{grid-column:1 / -1;grid-row:auto}
  #route-book .bk__types{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:var(--gutter)}
}
@media (max-width:680px){
  #route-book .bk__types{grid-template-columns:1fr}
  #route-book .bk__note{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  #route-book .bk__type{transition:none}
}