/* ===========================================================================
   components.css — additions used by the markdown compiler (Publisher/).
   style.css stays the source of truth for the existing design language;
   this file only adds components the hand-built pages never had.
   =========================================================================== */

/* ---- carousel ----------------------------------------------------------- */
.carousel{margin:26px 0 8px}
.carousel-head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.carousel-head h2{margin:0!important}
.carousel-nav{margin-left:auto;display:flex;gap:8px}
.cbtn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--gum-d);font-size:16px;font-weight:700;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.cbtn:hover{background:var(--sage-tint);border-color:var(--sage)}
.cbtn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--line)}

.carousel-track{display:grid;grid-auto-flow:column;gap:22px;margin:0;padding:4px 4px 18px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--sage) var(--cream)}
.carousel-track > .card{scroll-snap-align:start}
.carousel-track.peek-2{grid-auto-columns:calc((100% - 22px)/2)}
.carousel-track.peek-3{grid-auto-columns:calc((100% - 44px)/3)}
.carousel-track.peek-4{grid-auto-columns:calc((100% - 66px)/4)}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-track{background:var(--cream);border-radius:999px}
.carousel-track::-webkit-scrollbar-thumb{background:var(--sage);border-radius:999px}

@media(max-width:920px){
  .carousel-track.peek-3,.carousel-track.peek-4{grid-auto-columns:calc((100% - 22px)/2)}
}
@media(max-width:560px){
  .carousel-track.peek-2,.carousel-track.peek-3,.carousel-track.peek-4{grid-auto-columns:88%}
  .carousel-nav{display:none}
}

/* ---- image support inside fold-out rows (folds component) ---------------- */
.foldart img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foldart img.ph + ::after{z-index:2}

/* ---- team member role line ---------------------------------------------- */
.member p{margin:0 0 6px;font-size:14px;color:var(--muted)}

/* ---- band / split headings (replaces the inline styles in the hand-built pages) ---- */
.bandtitle{font-size:30px;margin:0 0 12px}
.band .bandtitle{color:#fff}
.band-cream .bandtitle{color:var(--gum-d)}
.bandbody{max-width:70ch}
.band .bandbody strong{color:#fff}
.bandactions{margin-top:22px}
.band .cards,.band-cream .cards{margin-top:26px}
.splittitle{font-size:30px;margin:0 0 14px;color:var(--gum-d)}

.band .steps{margin-top:26px}