/* Layout 3, desktop only. Loaded by server.mjs for /d3. Shared scene and band rules live in style.css. */
@media(min-width:1101px){
  /* 3 · Low strip. Each band is one scene, close to a full screen tall. The calendar stands on the empty
     side of the scene and rests on the same baseline as the copy. The copy runs along the bottom on a
     blurred strip: headline, three short columns, then the chat line. The people stay sharp above it. */
  #how[data-layout="3"] .bs-band,#how[data-layout="3"] .bs-band.is-flip{
    --fig-w:460px;--strip:300px;--tint:rgba(248,250,252,.5);
    --soft-mask:linear-gradient(0deg,#000 0 var(--strip),transparent calc(var(--strip) + 140px));
    grid-template-columns:var(--fig-w) minmax(0,1fr);grid-template-areas:"fig copy";
    column-gap:64px;align-items:end;min-height:960px;padding:120px 0;box-sizing:border-box}
  #how[data-layout="3"] .bs-band.is-group,#how[data-layout="3"] .bs-band.is-client{
    grid-template-columns:minmax(0,1fr) var(--fig-w);grid-template-areas:"copy fig"}
  /* The blurred strip ends just above each band's copy. Bands keep 120px of scene above and below their
     content for the shared crossfade between sections. */
  #how[data-layout="3"] .bs-band.is-recruiter{--strip:320px}
  #how[data-layout="3"] .bs-band.is-group{--strip:370px;--fig-w:540px;--tint:rgba(248,250,252,.62);--soft-mask:linear-gradient(0deg,#000 0 var(--strip),transparent calc(var(--strip) + 90px))}
  #how[data-layout="3"] .bs-band.is-group .bs-copy h3{max-width:none}
  #how[data-layout="3"] .bs-band.is-trip{--strip:400px;--fig-w:460px}
  #how[data-layout="3"] .bs-band.is-client{--strip:370px;padding-top:118px}

  /* Frame each scene so its people stand above the copy and clear of the calendar. */
  #how[data-layout="3"] .bs-band.is-recruiter::after{background-position:100% 50%}
  #how[data-layout="3"] .bs-band.is-recruiter::before{background-position:0 0,100% 50%}
  #how[data-layout="3"] .bs-band.is-group::after{background-position:0 50%}
  #how[data-layout="3"] .bs-band.is-group::before{background-position:0 0,0 50%}
  #how[data-layout="3"] .bs-band.is-trip::after{background-size:auto 118%;background-position:100% 100%}
  #how[data-layout="3"] .bs-band.is-trip::before{background-size:auto,auto 118%;background-position:0 0,100% 100%}
  #how[data-layout="3"] .bs-band.is-client::after{background-position:0 50%}
  #how[data-layout="3"] .bs-band.is-client::before{background-position:0 0,0 50%}

  #how[data-layout="3"] .bs-copy,#how[data-layout="3"] .bs-band.is-flip .bs-copy{grid-area:copy;order:0;align-self:end;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:0}
  #how[data-layout="3"] .bs-copy h3{grid-column:1 / -1;margin:0 0 14px;font-size:28px;line-height:1.18;max-width:24ch}
  #how[data-layout="3"] .bs-lines{display:contents}
  #how[data-layout="3"] .bs-lines p{font-size:15.5px;line-height:1.55}
  #how[data-layout="3"] .bs-chat{grid-column:1 / -1;margin-top:20px;padding-left:0;grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}

  /* The calendar shows every day of its range at once (the app's one-week mode drops the 640px grid
     minimum), at a height where every open block keeps its time label and the whole hour range fits. */
  #how[data-layout="3"] .bs-fig,#how[data-layout="3"] .bs-band.is-flip .bs-fig{grid-area:fig;order:0;align-self:end;width:var(--fig-w)}
  #how[data-layout="3"] .bs-app{height:600px}
  #how[data-layout="3"] .bs-app .cal{min-width:0}
  /* The calendar title wraps instead of ending in an ellipsis. */
  #how[data-layout="3"] .bs-app .bar h1{white-space:normal;text-wrap:balance;line-height:1.3}

  /* Recruiter: the booking card sits on the late afternoon rows of Wednesday to Friday, under Thursday 11:00,
     and covers no open block. */
  #how[data-layout="3"] .is-recruiter .bs-done{width:262px;left:auto;right:-26px;top:auto;bottom:-24px}
  #how[data-layout="3"] .bs-done h2{text-wrap:balance}
  /* Client: the guest form covers Monday to Wednesday and the hour labels from under the day numbers to the last row, so no open block
     shows at its edges, and ends where the calendar ends. The confirmation hangs below it. Thursday's booking,
     Friday and the title stay in view. The calendar lifts so the confirmation ends on the copy baseline. */
  #how[data-layout="3"] .bs-band.is-client .bs-app{height:548px}
  #how[data-layout="3"] .bs-band.is-client .bs-fig{margin-bottom:137px}
  #how[data-layout="3"] .bs-band.is-client .bs-stack{width:311px;left:-23px;right:auto;top:128px;bottom:auto;gap:10px}
}

/* Default view (?seam=a or none). Each section shows its painting whole and sharp at the page width, from the
   top of the section. Below the people the painting dissolves into its own blur, and the text sits on that blur.
   The blur starts just above the headline (script.js measures it into --strip) and runs past the painting to the
   section's end, where it fades out to the page. Sections touch: each section's top blur fades in over the end of the one before. */
@media(min-width:1101px){
  #how.bs[data-layout="3"][data-seam="a"]{padding-bottom:120px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-list{gap:0}
  /* The painting is never covered: the text and the calendar start below it. Only the calendar's top edge
     (--overlap) rises into the painting's bottom, and the text starts at the painting's bottom edge. */
  #how.bs[data-layout="3"][data-seam="a"] .bs-band,#how.bs[data-layout="3"][data-seam="a"] .bs-band.is-flip{
    --art-h:calc((100vw + 2 * var(--bleed)) * 821 / 1916);--overlap:120px;
    min-height:0;align-items:start;padding-top:120px;padding-bottom:240px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-copy,#how.bs[data-layout="3"][data-seam="a"] .bs-band.is-flip .bs-copy{align-self:end;margin-top:0}
  /* The calendar starts high in the section, 120px from its top, on the side of the painting away from the people. */
  #how.bs[data-layout="3"][data-seam="a"] .bs-fig,#how.bs[data-layout="3"][data-seam="a"] .bs-band.is-flip .bs-fig{align-self:start;margin-bottom:0;margin-top:0}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band.is-client .bs-fig{margin-bottom:150px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band::after,#how.bs[data-layout="3"][data-seam="a"] .bs-band:first-child::after{
    background-size:100% auto;background-position:50% var(--bleed);
    -webkit-mask:linear-gradient(180deg,transparent var(--bleed),#000 calc(var(--bleed) + 72px)),linear-gradient(0deg,transparent calc(var(--strip) - 64px),#000 calc(var(--strip) + 72px));
    -webkit-mask-composite:source-in;
    mask:linear-gradient(180deg,transparent var(--bleed),#000 calc(var(--bleed) + 72px)),linear-gradient(0deg,transparent calc(var(--strip) - 64px),#000 calc(var(--strip) + 72px));
    mask-composite:intersect}
  /* The blur shows under the text to the section's end, and in a short band across the section's top. That top
     band fades in over the bottom of the section before, so one section's blur hands over to the next painting. */
  #how.bs[data-layout="3"][data-seam="a"] .bs-band{
    --blur-top:linear-gradient(180deg,transparent 0,#000 var(--bleed),#000 calc(var(--bleed) + 72px),transparent calc(var(--bleed) + 150px));
    --blur-bottom:linear-gradient(0deg,#000 0,#000 var(--strip),transparent calc(var(--strip) + 120px))}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band:last-child{
    --blur-bottom:linear-gradient(0deg,transparent var(--bleed),#000 calc(var(--bleed) + 96px),#000 var(--strip),transparent calc(var(--strip) + 120px))}
  /* The blur layer is not clipped at the band's top and bottom, so its top fade (the 160px of --bleed) runs
     over the end of the section before instead of stopping at a hard line. */
  #how.bs[data-layout="3"][data-seam="a"] .bs-band{--bleed:160px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band::before,#how.bs[data-layout="3"][data-seam="a"] .bs-band:first-child::before{
    clip-path:inset(0 var(--bleed));
    -webkit-mask:var(--blur-top),var(--blur-bottom);-webkit-mask-composite:source-over;
    mask:var(--blur-top),var(--blur-bottom);mask-composite:add}
}

@media(min-width:1101px){
  /* Hang each step so it covers no open block: the group's and trip's steps sit almost wholly below their
     calendars; the recruiter's starts under Thursday's 11:00 booking. */
  #how.bs[data-layout="3"][data-seam="a"] .is-group .bs-stack,#how.bs[data-layout="3"][data-seam="a"] .is-trip .bs-stack{top:calc(100% - 56px);bottom:auto}
  #how.bs[data-layout="3"][data-seam="a"] .is-recruiter .bs-stack{top:58%;bottom:auto}
  /* The class group's text was squeezed into narrow columns; its calendar takes the common width. */
  #how.bs[data-layout="3"][data-seam="a"] .bs-band.is-group{--fig-w:500px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-bubble,#how.bs[data-layout="3"][data-seam="a"] .bs-who{white-space:nowrap}
}

/* Recruiter: keep both cards inside the Mon–Wed side, 12px apart.
   The outcome hangs at the calendar foot; Thursday's booked slot stays clear. */
@media(min-width:1101px){
  #how.bs[data-layout="3"][data-seam="a"] .is-recruiter .bs-stack{
    top:342px;bottom:auto;left:-23px;right:auto;width:311px;gap:12px;
    min-height:448px;box-sizing:border-box;align-content:start}
  #how.bs[data-layout="3"][data-seam="a"] .is-recruiter .bs-fig{--reserve-hang:204px}
  #how.bs[data-layout="3"][data-seam="a"] .is-recruiter .bs-stack .bs-done{
    position:absolute;top:238px;bottom:auto;left:0;right:auto;width:100%;box-sizing:border-box}
}

/* Three quiet prose columns share a clear baseline below the heading. */
#how[data-layout="3"] .bs-lines{display:grid;grid-column:1 / -1;gap:24px}
#how[data-layout="3"] .bs-lines p{margin:0;padding:0;line-height:1.6;text-wrap:pretty}
@media(min-width:1101px){
  #how[data-layout="3"] .bs-copy h3{margin-bottom:22px}
  #how[data-layout="3"] .bs-lines{grid-template-columns:repeat(3,minmax(0,1fr))}
  #how[data-layout="3"] .bs-lines p{font-size:15px}
}
@media(max-width:1100px){
  #how[data-layout="3"] .bs-lines{grid-template-columns:minmax(0,1fr);gap:14px}
}

@media(min-width:1101px){
  #how.bs[data-layout="3"][data-seam="a"]{padding-bottom:0}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band:last-child{padding-bottom:152px}
}
@media(max-width:1100px){
  #how.bs[data-layout="3"][data-seam="a"]{padding-bottom:24px}
  #how.bs[data-layout="3"][data-seam="a"] .bs-band:last-child{padding-bottom:64px}
}
#how.bs + .lp-rule{display:none}
#how.bs ~ #calendars{padding-top:48px}