/* ==========================================================================
   Use cases — card accordions and a live chat (site/src/components/UseCases.astro, 22.10.2026).
   Requires: tokens.css, card-accordion.css, chat-card.css.

   Live bir.ch/ai «Every answer sits on top of your data» (embed/ai-promo-acc-embed.html), values measured
   there: from 992 a coloured box, the accordion in the left 45.59 %, the open case's chat centred on the right;
   up to 991 a row of coloured slides that swipe, a bar per slide under them.
   ========================================================================== */

.use-cases__box {
  --uc-pad: var(--space-md);
  border-radius: var(--radius-lg);
}
.use-cases__item { --uc-ink: var(--color-text-inverted); }
.use-cases__item--dark { --uc-ink: var(--color-text); }
.use-cases__eyebrow,
.use-cases__slide-eyebrow { margin: 0; color: var(--color-text-inverted); }
.use-cases__soon { margin: 0; color: var(--color-text-grey); }
.use-cases__text { margin: 0; }
/* the bar follows the block's own clock (it pauses while held and off screen), not the accordion's CSS timer */
.use-cases .card-accordion__bar-fill { animation: none; }
.use-cases__hint { margin: var(--space-sm) 0 0; text-align: center; }
.use-cases .chat-card { font-size: 4.55cqi; } /* live: 18 px at a 395 px card (the design-system chat is 10 % smaller) */

/* ---------- from 992: the accordion and one chat ---------- */
@media (min-width: 62rem) {
  .use-cases__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-main);
    min-height: calc(min(70vh, 45rem) + 2 * var(--uc-pad));
    padding: var(--uc-pad);
    background-color: var(--uc-fill);
    transition: background-color var(--duration-toggle) var(--ease-toggle); /* the Toggle character: the case's fill changes in place */
    user-select: none;
  }
  .use-cases__eyebrow,
  .use-cases__list { width: 45.59%; }
  .use-cases__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }
  /* the card is the flex item (card-accordion.css: open fills, closed hugs); the chat leaves the flow */
  .use-cases .use-cases__item { display: contents; } /* the slide's .card (phones) is not drawn here */
  /* on the coloured box the cards are the page's own black, as live (a grey card would sit on grey, not on colour) */
  .use-cases .card-accordion { --acc-color: var(--uc-fill); background: var(--color-bg); }
  .use-cases__slide-eyebrow { display: none; }

  .use-cases__chat {
    position: absolute;
    inset: var(--uc-pad) var(--uc-pad) var(--uc-pad) calc(var(--uc-pad) + (100% - 2 * var(--uc-pad) - var(--gap-main)) * 0.4559 + var(--gap-main));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-toggle) var(--ease-toggle), visibility 0s linear var(--duration-toggle);
  }
  .use-cases__item.is-open .use-cases__chat { opacity: 1; visibility: visible; transition-delay: 0s; }
  .use-cases .chat-card-wrap { height: min(70vh, 45rem); max-width: 100%; }
}

/* ---------- up to 991: slides (Gallery: upTo tablet, centred, rows 2) ----------
   Each slide spans the gallery's two rows: the head (eyebrow, title, «Coming soon») and the chat — so every chat starts
   on one line and is as tall as the tallest; inside the head the spacing is its own (a one-line title does not take
   a two-line neighbour's height). */
@media (max-width: 61.9375rem) {
  .use-cases__eyebrow { display: none; }
  /* a slide is a .card in its case's colour; .card--bleed runs the chat into its bottom edge, so the chat is cut
     there — the field under the answer is not shown, the window is as tall as the longest answer */
  .use-cases .use-cases__item { background: var(--uc-color); }
  /* the accordion card is the slide's head (row 1): eyebrow, title, «Coming soon»; its body and inner dissolve into it */
  .use-cases .card-accordion { display: flex; flex-direction: column; justify-content: flex-start; padding: 0; background: none; }
  .use-cases .card-accordion__body,
  .use-cases .card-accordion__inner { display: contents; }
  .use-cases .card-accordion__toggle { cursor: auto; pointer-events: none; } /* not a control here (the script marks it aria-disabled): a tap goes to the slide */
  .use-cases .card-accordion__toggle::after { content: none; }
  .use-cases__slide-eyebrow { color: var(--uc-ink); margin-bottom: var(--space-sm); }
  /* the head reads as one group: eyebrow 16 over the title, «Coming soon» 8 under it (a status of the title), the chat
     32 under the group */
  .use-cases .card-accordion__title { color: var(--uc-ink); margin-bottom: 0; }
  .use-cases__text,
  .use-cases .card-accordion__bar { display: none; }
  .use-cases__soon { color: var(--color-text); margin-top: var(--space-xs); }
  .use-cases__chat { display: flex; margin-top: var(--space-md); }

  /* the whole conversation shows; the window fills its row, so all are as tall as the fullest */
  .use-cases .chat-card-wrap { width: min(100%, 22rem); height: auto; aspect-ratio: auto; margin-inline: auto; display: flex; } /* the answer sets the height, not the card's 400 × 600 */
  .use-cases .chat-card { height: auto; flex: 1; }
  .use-cases .chat-card__body { flex: 1; overflow: visible; }
  .use-cases .chat-card__input-area { display: none; }
  .use-cases .chat-card__feed { padding-bottom: 1.5em; } /* the longest answer ends with air before the cut, as between the messages */
  .use-cases .chat-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .use-cases .gallery__dots { color: var(--color-text); }
}