/* /ai use-case hub, all five language editions: the first-screen workflow
   illustration and the visual on each of the 11 task cards. Loaded after
   /site-ia.css and keeps its tokens (--cue-ink, --cue-muted, --cue-label,
   --cue-line, --cue-blue, --cue-band, --r-md, --r-lg). */

/* First screen: the question on the left, one playable illustration on the right. */
.site-usecases .hero.aitm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 100%;
  padding: clamp(32px, 1rem + 3vw, 72px) 0 clamp(28px, 1rem + 2vw, 48px);
  text-align: left;
}
.aitm-hero > * { min-width: 0; }
.site-usecases .aitm-hero h1 { max-width: 13ch; margin: 0 0 16px; }
.site-usecases .aitm-hero .lede { max-width: 34em; margin: 0; }
.site-usecases .aitm-hero .hero-actions { justify-content: flex-start; margin-top: 24px; }
.site-usecases .aitm-hero .hero-actions .btn { min-height: 48px; padding: 0 22px; border-radius: var(--r-pill, 999px); }
:is(html[lang="ja"], html[lang="ko"], html[lang^="zh"]) .site-usecases .aitm-hero h1 { max-width: 16em; }
@media (min-width: 960px) {
  .site-usecases .hero.aitm-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: clamp(40px, 5vw, 72px); align-items: center; }
}

/* The illustration: native controls, nothing plays or loads until asked. */
.aitm-demo { margin: 0; width: 100%; max-width: 560px; }
@media (min-width: 960px) { .aitm-demo { max-width: none; } }
.aitm-player { overflow: hidden; aspect-ratio: 1 / 1; background: #f7f6f3; border-radius: var(--r-lg, 20px); box-shadow: 0 1px 2px rgb(29 26 26 / .06), 0 24px 56px -32px rgb(29 26 26 / .4); }
.aitm-player video { display: block; width: 100%; height: 100%; object-fit: cover; background: #f7f6f3; }
.aitm-player video:focus-visible { outline: 3px solid var(--cue-blue, #2563eb); outline-offset: -3px; }
.aitm-demo figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 2px 0; color: var(--cue-muted, #555); font-size: 14px; line-height: 1.5; }
.aitm-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 2px 10px; color: var(--cue-ink, #1d1a1a); background: #fff; border: 1px solid var(--cue-line-strong, #dfe1e6); border-radius: 999px; font-size: 13px; font-weight: 600; }
.aitm-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cue-blue, #2563eb); }
.aitm-demo figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cue-ink, #1d1a1a); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--cue-ink, #1d1a1a) 30%, transparent); }
.aitm-demo figcaption a:hover { text-decoration-color: currentColor; }
.aitm-demo figcaption a:focus-visible, .aitm-transcript summary:focus-visible { outline: 3px solid var(--cue-blue, #2563eb); outline-offset: 2px; border-radius: 6px; }
.aitm-note { flex-basis: 100%; color: var(--cue-label, #6e6e6e); font-size: 13px; }

/* Text version of the film: readable without video, captions or JavaScript. */
.aitm-transcript { margin-top: 10px; border-top: 1px solid var(--cue-line, #ecedf0); }
.aitm-transcript summary { display: flex; align-items: center; min-height: 44px; color: var(--cue-ink, #1d1a1a); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.aitm-transcript summary::-webkit-details-marker { display: none; }
.aitm-transcript summary::after { content: '+'; margin-left: 8px; color: var(--cue-label, #6e6e6e); font-weight: 400; }
.aitm-transcript[open] summary::after { content: '−'; }
.aitm-transcript ol { margin: 0 0 12px; padding-left: 1.3em; color: var(--cue-muted, #555); font-size: 14px; line-height: 1.6; }
.aitm-transcript ol > li { margin: 0 0 10px; }
.aitm-transcript ul { margin: 4px 0 0; padding-left: 1.1em; }
.aitm-transcript strong { color: var(--cue-ink, #1d1a1a); font-weight: 600; }
.aitm-transcript p { margin: 0 0 12px; color: var(--cue-label, #6e6e6e); font-size: 13px; line-height: 1.6; }

/* Task cards: one picture of the result, one line about it, one action. */
.ia-task-card.aitm-card { padding: 12px 12px 18px; }
.aitm-thumb { display: block; overflow: hidden; margin: 0 0 16px; aspect-ratio: 2 / 1; background: var(--cue-band, #f4f3f1); border-radius: 10px; }
.aitm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ia-task-card.aitm-card h3 { margin: 0 10px 6px; }
.aitm-outcome { margin: 0 10px 14px; color: var(--cue-muted, #555); font-size: 15px; line-height: 1.55; }
.ia-task-card.aitm-card > .ia-action { width: auto; margin: auto 10px 0; }
@media (max-width: 560px) {
  .ia-task-card.aitm-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 12px; }
  .aitm-card .aitm-thumb { grid-row: 1 / span 3; margin: 0; aspect-ratio: 4 / 3; }
  .ia-task-card.aitm-card h3 { margin: 2px 0 4px; font-size: 18px; }
  .aitm-outcome { margin: 0 0 6px; font-size: 14px; }
  .ia-task-card.aitm-card > .ia-action { grid-column: 2; margin: 0; padding-top: 4px; min-height: 36px; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-task-card.aitm-card, .ia-task-card.aitm-card:hover { transition: none; transform: none; }
}

/* The closing links keep a 44px target on every edition. */
.site-usecases .section .links a { display: inline-flex; align-items: center; min-height: 44px; }