/* ===========================================================================
   SolutionsDataHub -- HERO: layout, copy column, film stage, step bar and
   play button. The film itself (window, source rail, the five answer charts,
   motion) lives in datahub-film.css / -2 / -3. Same film pattern as
   SolutionsSales / SolutionsChatops, with this page's names (.dh-hero-*,
   data-dh-*).
   State lives on .dh-hero-film: [data-at="0..4"] = shown scene, [data-prev] =
   outgoing scene (keeps its end frame while it fades). .is-live = autoplay
   (datahub-hero.js, only with html.dh-hero-motion), .is-held = frozen. EVERY rule
   outside .is-live is a final frame: no JS and reduced motion show scene ⑤
   (data-at="4") as one still picture, with a plain-text step list.
   Never use .dc-ui-*, [data-io] or [data-go] here: home-motion.js looks
   those up document-wide.
   =========================================================================== */

.dh-hero { --pt: clamp(28px, 3.4vw, 48px); --pb: clamp(44px, 4.8vw, 72px); overflow-x: clip; }
.dh-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .dh-hero-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); column-gap: clamp(40px, 4.4vw, 68px); }
}

/* ---- copy column (same sizes as the SALES / CHATOPS heroes) --------------- */
.dh-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dh-hero-copy .eyebrow { margin-bottom: 20px; }
.dh-hero-h1 { margin: 0 0 14px; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.4; font-weight: 900; letter-spacing: 0.03em; color: var(--dh-acc); }
.dh-hero-sub { margin: 0 0 24px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; font-weight: 700; color: var(--navy); }
.dh-hero-lead { margin: 0 0 28px; line-height: 2.1; max-width: 36em; }
.dh-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.dh-hero a:focus-visible, .dh-hero button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- film frame ------------------------------------------------------------ */
.dh-hero-film { margin: 0; min-width: 0; }
/* what this window is (round 7, non-tech visitors): the green dot = data the answer used;
   the 2nd sentence only once the step buttons exist (datahub-hero.js sets .is-ready) */
.dh-hero-say { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--dh-acc); font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.75; color: var(--ink); word-break: auto-phrase; }
.dh-hero-say-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.dh-f:not(.is-ready) .dh-hero-say-go { display: none; }
.dh-hero-stage { position: relative; padding: 22px 22px 12px; border-radius: 16px; background: var(--dh-stage-bg); }

/* ---- step bar: plain list without JS, <button>s once datahub-hero.js runs.
   Labels never truncate: each column is at least its label's width. -------- */
.dh-hero-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.dh-hero-steps { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.dh-hero-steps li { display: flex; min-width: 0; }
.dh-hero-go { position: relative; flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; align-items: center; margin: 0; padding: 6px 10px 9px; border: 0; border-radius: 8px; background: transparent; font: 700 13px/1.35 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--navy); text-align: left; white-space: nowrap; }
button.dh-hero-go { background: rgba(255, 255, 255, 0.42); cursor: pointer; transition: background-color var(--dur-3) var(--ease-soft); }
button.dh-hero-go:hover { background: rgba(255, 255, 255, 0.78); }
span.dh-hero-go { min-height: 32px; font-weight: 500; }   /* navy on the stage >= 12:1 */
li[aria-current] > span.dh-hero-go { font-weight: 700; } /* no JS: names the step the still frame shows */
.dh-hero-lb { white-space: nowrap; }
.dh-hero-prog { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--dh-acc); transform: scaleX(0); transform-origin: left center; }
/* the shown step: white chip + full line (datahub-film-3.css animates the line) */
button.dh-hero-go[aria-current="true"] { background: var(--white); box-shadow: 0 1px 3px rgba(16, 42, 67, 0.12); }
button.dh-hero-go[aria-current="true"] .dh-hero-prog { transform: none; }

/* 一時停止 / 再生: both labels share one grid cell, so the button never changes width */
.dh-hero-play { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 48px; min-height: 48px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 8px; background: var(--white); font: 700 13px/1 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; color: var(--navy); cursor: pointer; }
.dh-hero-play[hidden] { display: none; }
.dh-hero-play:hover { border-color: var(--navy); }
.dh-hero-play-tx { display: grid; }
.dh-hero-play-tx > span { grid-area: 1 / 1; }
.dh-hero-play[data-state="playing"] [data-l="play"], .dh-hero-play[data-state="paused"] [data-l="pause"] { visibility: hidden; }
.dh-hero-ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.dh-hero-play[data-state="paused"] .dh-hero-ico { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dh-hero-film .dh-cap { margin-top: 12px; }

/* narrow film (phone, and the 2-column layout below 1200px): button = icon only */
@media (max-width: 759px), (min-width: 1024px) and (max-width: 1199px) {
  .dh-hero-play { padding: 0; width: 48px; }
  .dh-hero-play-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 2-column layout below 1200px: slimmer stage */
@media (min-width: 1024px) and (max-width: 1199px) {
  .dh-hero-stage { padding: 16px 16px 10px; }
}
/* phone: film under the copy */
@media (max-width: 759px) {
  .dh-hero-stage { padding: 8px 8px 6px; border-radius: 12px; }
  .dh-hero-bar { gap: 4px; margin-top: 6px; }
  .dh-hero-steps { gap: 2px; }
  .dh-hero-go { padding: 6px 5px 9px; font-size: 13px; }
  .dh-hero-prog { left: 5px; right: 5px; }
  .dh-hero-play { width: 44px; min-width: 44px; }
}