/* ===========================================================================
   SolutionsSales -- HERO, part 1/3: layout, copy column, film frame,
   step bar. Scenes: sales-hero-2.css. Motion: sales-hero-3.css.
   Film state lives on .sa-hero-film[data-at="0..3"] (current scene) and
   [data-prev] (outgoing scene, keeps its end frame while it fades).
   .is-live = JS autoplay (only with html.sa-motion); .is-held = frozen
   (off-screen / tab hidden). Without .is-live every scene is its final frame.
   =========================================================================== */

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

/* ---- copy column (sizes as the DataHub hero) ------------------------------ */
.sa-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sa-hero-copy .eyebrow { margin-bottom: 20px; }
.sa-hero-tag { margin: 0 0 14px; display: inline-flex; align-items: center; padding: 4px 14px; border: 1px solid var(--sa-acc); border-radius: 999px; font: 700 13px/20px 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; letter-spacing: 0.08em; color: var(--sa-acc); }
.sa-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(--sa-acc); }
.sa-hero-sub { margin: 0 0 24px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; font-weight: 700; color: var(--navy); }
.sa-hero-lead { margin: 0 0 28px; line-height: 2.1; max-width: 36em; }
.sa-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.sa-hero-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none; }
.sa-hero-link > span { padding-bottom: 3px; border-bottom: 2px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .sa-hero-link:hover { color: var(--blue); } }
.sa-hero-link:active { color: var(--blue); }
.sa-hero a:focus-visible, .sa-hero button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- film frame ------------------------------------------------------------ */
.sa-hero-film { margin: 0; min-width: 0; }
/* one plain line per scene, above the film (explain-screens-for-non-tech-end-users):
   all 4 lines stack in one grid cell so the film never moves when the scene
   changes; shown line follows data-at on .sa-hero-film, same latch the scenes
   themselves use. aria-hidden: .sa-sr below already tells the whole story. */
.sa-hero-say { display: grid; margin: 0 0 10px; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--navy); }
.sa-hero-say > span { grid-area: 1 / 1; align-self: start; display: flex; gap: 6px; padding: 1px 0 1px 14px; border-left: 3px solid var(--sa-acc); visibility: hidden; opacity: 0; }
.sa-hero-say b { flex: none; font-weight: 700; color: var(--sa-acc-ink); }
.sa-hero-film[data-at="0"] [data-say="0"], .sa-hero-film[data-at="1"] [data-say="1"],
.sa-hero-film[data-at="2"] [data-say="2"], .sa-hero-film[data-at="3"] [data-say="3"] { visibility: visible; opacity: 1; }
.sa-hero-stage { position: relative; padding: 22px 22px 12px; border-radius: 16px; background: var(--sa-stage); }
.sa-hero-win { position: relative; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 42, 67, 0.08), 0 24px 48px -24px rgba(16, 42, 67, 0.45); }
.sa-hero-win .sa-top { height: 36px; }
.sa-hero-status { display: grid; margin-left: auto; }
.sa-hero-status > .sa-ai { grid-area: 1 / 1; justify-self: end; opacity: 0; }
.sa-hero-film[data-at="0"] [data-s="0"], .sa-hero-film[data-at="1"] [data-s="1"],
.sa-hero-film[data-at="2"] [data-s="2"], .sa-hero-film[data-at="3"] [data-s="3"] { opacity: 1; }

/* fixed body height = fixed film height: switching scenes never moves the page */
/* menu = the same 8 items as the 画面イメージ window (sales-mock) */
.sa-hero-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); height: 344px; }
.sa-hero-rail { padding: 10px 6px; background: var(--sa-rail); border-right: 1px solid var(--sa-hair); display: flex; flex-direction: column; gap: 1px; }
.sa-hero-rail li { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 5px; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.sa-hero-rail li.sa-hero-rail-h { margin-bottom: 3px; padding-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.sa-hero-rail svg { flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
/* scene -> menu item lit in the film (see sales-hero.js) */
.sa-hero-film[data-at="0"] [data-r="0"], .sa-hero-film[data-at="1"] [data-r="1"],
.sa-hero-film[data-at="2"] [data-r="2"], .sa-hero-film[data-at="3"] [data-r="3"] { background: var(--white); color: var(--navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--sa-acc), 0 1px 2px rgba(16, 42, 67, 0.06); }

.sa-hero-view { position: relative; min-width: 0; overflow: hidden; }
.sa-hero-scene { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 18px; opacity: 0; visibility: hidden; }
.sa-hero-film[data-at="0"] .sa-hero-scene--0, .sa-hero-film[data-at="1"] .sa-hero-scene--1,
.sa-hero-film[data-at="2"] .sa-hero-scene--2, .sa-hero-film[data-at="3"] .sa-hero-scene--3 { opacity: 1; visibility: visible; }

/* ---- step bar: plain caption without JS, <button>s once sales-hero.js runs --
   Labels never truncate: each column is at least its label's width. */
.sa-hero-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.sa-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; }
.sa-hero-steps li { display: flex; min-width: 0; }
.sa-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.sa-hero-go { background: rgba(255, 255, 255, 0.42); cursor: pointer; transition: background-color var(--dur-3) var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { button.sa-hero-go:hover { background: rgba(255, 255, 255, 0.78); } }
button.sa-hero-go:active { background: rgba(255, 255, 255, 0.78); }
span.sa-hero-go { min-height: 32px; font-weight: 500; } /* navy on --sa-stage >= 9:1 (--muted would be 4.2:1) */
.sa-hero-lb { white-space: nowrap; }
/* "press here" dot, same recipe as the 画面イメージ hotspots (sales-mock.css
   .sa-mock-dot): amber fill, dark rim, white halo. Stands still; drops for
   good the first time any scene button is pressed (sales-hero.js). */
.sa-hero-dot { position: absolute; top: 2px; right: 2px; z-index: 2; display: block; width: 9px; height: 9px; box-sizing: border-box; border: 1px solid #9A7000; border-radius: 50%; background: #F2B705; box-shadow: 0 0 0 2px var(--white); pointer-events: none; }
.sa-hero-prog { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--sa-acc); transform: scaleX(0); transform-origin: left center; }
/* current step (buttons only, so the no-JS caption never looks like a tab):
   white chip + full progress line (sales-hero-3.css animates it) */
.sa-hero-film[data-at="0"] [data-go="0"] button.sa-hero-go, .sa-hero-film[data-at="1"] [data-go="1"] button.sa-hero-go,
.sa-hero-film[data-at="2"] [data-go="2"] button.sa-hero-go, .sa-hero-film[data-at="3"] [data-go="3"] button.sa-hero-go { background: var(--white); box-shadow: 0 1px 3px rgba(16, 42, 67, 0.12); }
.sa-hero-film[data-at="0"] [data-go="0"] button .sa-hero-prog, .sa-hero-film[data-at="1"] [data-go="1"] button .sa-hero-prog,
.sa-hero-film[data-at="2"] [data-go="2"] button .sa-hero-prog, .sa-hero-film[data-at="3"] [data-go="3"] button .sa-hero-prog { transform: none; }

.sa-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; }
.sa-hero-play[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .sa-hero-play:hover { border-color: var(--navy); } }
.sa-hero-play:active { border-color: var(--navy); }
.sa-hero-ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.sa-hero-play[data-state="paused"] .sa-hero-ico { border: 0; width: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sa-hero-film .sa-cap { margin-top: 12px; }
/* narrow film (phone, 2-column layout below 1200px): 一時停止/再生 = icon only (aria-label kept) */
@media (max-width: 759px), (min-width: 1024px) and (max-width: 1199px) {
  .sa-hero-play { padding: 0; width: 48px; }
  .sa-hero-play-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- phone: film under the copy, rail + secondary columns dropped ---------- */
@media (max-width: 759px) {
  .sa-hero-stage { padding: 8px 8px 6px; border-radius: 12px; }
  .sa-hero-win .sa-find { display: none; }
  .sa-hero-body { grid-template-columns: minmax(0, 1fr); height: 368px; }
  .sa-hero-rail { display: none; }
  .sa-hero-scene { padding: 12px 12px; }
  .sa-hero-bar { gap: 4px; margin-top: 6px; }
  .sa-hero-steps { gap: 2px; }
  .sa-hero-go { padding: 6px 5px 9px; font-size: 13px; }
  .sa-hero-prog { left: 5px; right: 5px; }
  .sa-hero-play { width: 44px; min-width: 44px; }
}