/* cb-video — responsive video section */
.cb-video__intro{margin-bottom:36px;max-width:60ch}
.cb-video__h{max-width:20ch;margin-bottom:14px}
.cb-video{margin:0 auto}
.cb-video--narrow{max-width:760px}
.cb-video--wide{max-width:1000px}
.cb-video--full{max-width:100%}
/* 16:9 frame; the iframe fills it regardless of the provider's own width/height */
.cb-video__frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--c-black);border-radius:var(--radius);overflow:hidden}
.cb-video__frame iframe,.cb-video__frame > *{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.cb-video__file{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--c-black);border-radius:var(--radius)}
.cb-video__caption{margin-top:14px;font-size:13px;color:var(--c-ink-soft);max-width:70ch}
.cb-video__empty{color:var(--c-ink-soft);font-size:15px}
.cb-sec--dark .cb-video__caption{color:var(--c-dark-text)}

/* Video grid. The theme's pattern is that a module owns its own columns rather
   than relying on dnd columns, which would double up the section padding and
   gutters. "Auto" resolves to the video count (capped at three) in module.html,
   so a two-up stays two-up and anything larger wraps into rows. */
.cb-video__grid{display:grid;gap:32px}
@media (min-width:768px){
  .cb-video__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Three across is too tight below 1000px, so it goes two-up first */
  .cb-video__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .cb-video__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 28px}
}
.cb-video__item{margin:0;display:flex;flex-direction:column}

/* The title leads the card, above the player; the caption follows it.
   Spacing sits on the title rather than the wrapper, so a card with no title
   contributes no height and the row still lines up. */
.cb-video__head{display:block}
.cb-video__eyebrow{font-family:var(--f-acc);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-teal-deep);display:block;margin:0 0 7px}
.cb-sec--dark .cb-video__eyebrow{color:var(--c-teal)}
/* Body face, not the condensed display one. These are customer and business
   names at card size, where condensed uppercase is hard work - the display
   face earns its keep at section-heading scale, not here. Public Sans loads
   at 400 and 700 only, so 700 rather than a synthesised 600. */
.cb-video__t{display:block;font-family:var(--f-body);font-weight:700;
  font-size:clamp(19px,1.9vw,23px);line-height:1.25;letter-spacing:-.01em;
  margin:0 0 14px;color:var(--c-ink);text-wrap:balance}
.cb-sec--dark .cb-video__t{color:#fff}
.cb-video__cap{display:block;font-size:14px;color:var(--c-ink-soft);margin-top:14px;line-height:1.5}
.cb-sec--dark .cb-video__cap{color:var(--c-dark-text)}

/* Card treatment. Padding wraps the player as well as the label so the card
   reads as one object; the frame keeps its own radius inside. */
.cb-video__item--card{padding:20px;border-radius:var(--radius)}
.cb-video__item--card .cb-video__eyebrow,
.cb-video__item--card .cb-video__t{margin-top:20px}
.cb-video__item--card .cb-video__eyebrow + .cb-video__t{margin-top:0}
.cb-video__item--box{border:1px solid var(--c-line)}
.cb-video__item--fill{background:var(--c-off)}
.cb-sec--dark .cb-video__item--box{border-color:var(--c-dark-line)}
.cb-sec--dark .cb-video__item--fill{background:#0A0A0A}
.cb-sec--off .cb-video__item--fill{background:var(--c-white)}

/* With the title above the player, a two-line title used to push its video
   about 30px below its neighbours. Subgrid gives every card in a row the same
   three tracks - title, player, caption - so the players line up whatever the
   titles do. Browsers without subgrid keep the old flex behaviour. */
@supports (grid-template-rows: subgrid){
  .cb-video__item{display:grid;grid-template-rows:subgrid;grid-row:span 3}
}