/* "Get my video" band under the agentic workflow video: the teaser leaves the copy column
   for a centred card below the copy | video stage; it opens the stack picker inside the
   same card, which then widens to the content width. Loaded after workflow-stack.css and
   scoped to .mcp-section--band, so the section without that class doesn't change.
   The card keeps the teaser's colours, type and button; js/workflow-stack.js is unchanged
   (it still fills #ws-teaser-thumb, which this layout hides). */

.mcp-section--band .ws-band {
  max-width: 836px; margin: var(--l-section-gap) auto 0;
  background: rgba(201, 254, 255, .05); border: 1px solid rgba(201, 254, 255, .22); border-radius: 12px;
  transition: max-width .5s cubic-bezier(.2, .8, .2, 1), background .2s ease, border-color .2s ease;
}
/* No script: the teaser and picker stay hidden, so drop the empty card too. */
.mcp-section--band .ws-band:not(:has(> :not([hidden]))) { display: none; }
/* Open: the picker needs the full content width. */
.mcp-section--band .ws-band:has(.ws-section:not([hidden])) { max-width: 100%; }
/* Closed, the whole card is the button. */
.mcp-section--band .ws-band:not(:has(.ws-section:not([hidden]))):has(.ws-teaser:hover) {
  background: rgba(201, 254, 255, .09); border-color: rgba(255, 250, 102, .6);
}

/* ---------- Teaser: copy | button ---------- */
.mcp-section--band .ws-teaser {
  justify-content: center; gap: 24px 64px; max-width: 836px; margin: 0 auto; padding: 48px;
  background: none; border: 0;
}
.mcp-section--band .ws-teaser:hover { background: none; }
.mcp-section--band .ws-teaser-thumb { display: none; }
.mcp-section--band .ws-teaser-copy { flex: 0 1 380px; gap: 10px; }
.mcp-section--band .ws-teaser .ws-teaser-cta { flex: none; margin-top: 0; }

/* ---------- Picker inside the card ---------- */
.mcp-section--band .ws-band .ws-section { margin-top: 0; padding: 0 48px 48px; }

@media (max-width: 1023.98px) {
  .mcp-section--band .ws-teaser { padding: 32px; }
  .mcp-section--band .ws-band .ws-section { padding: 0 32px 32px; }
}
/* Phones: copy over the button, both left-aligned. */
@media (max-width: 599.98px) {
  .mcp-section--band .ws-teaser { justify-content: flex-start; gap: 20px; padding: 24px 20px; }
  .mcp-section--band .ws-teaser-copy { flex-basis: 100%; }
  .mcp-section--band .ws-band .ws-section { padding: 0 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcp-section--band .ws-band { transition: none; }
}