/* ===========================================================================
   SolutionsDataHub -- 選ばれる理由. Every class .dh-why-*.
   Photo band + ruled spec-sheet rows (micro-UI crop | title | text): the same
   structure as the SALES / CHATOPS 選ばれる理由 (sales-why.css), drawn in the
   DATA HUB product language (datahub-ui.css: .dh-win, --dh-stage-bg).
   Motion: datahub-motion.js latch. Start states live ONLY under
   html.dh-motion [data-dh-latch]:not(.dh-seen), so no JS / reduced motion =
   final state. Contrast: --dh-acc-ink on #FFF 7.1 · --muted on #FFF 5.53 ·
   #237A4C on #FFF 5.3, on #E2F3EA 4.61 · #FFF on --navy 14.7.
   =========================================================================== */

.dh-why-lead { margin: 16px 0 0; max-width: 860px; word-break: auto-phrase; }
.dh-why { --dh-ok: #237A4C; margin-top: clamp(28px, 3vw, 40px); word-break: auto-phrase; }

/* ---- photo band: wide on desktop, 4:3 on phones --------------------------- */
.dh-why-band { margin: 0 0 clamp(32px, 3.4vw, 48px); }
.dh-why-frame { overflow: hidden; aspect-ratio: 2400 / 974; border-radius: 16px; background: var(--dh-rail); }
.dh-why-frame > picture { display: block; height: 100%; }
.dh-why-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 599.98px) { .dh-why-frame { aspect-ratio: 4 / 3; } }

/* ---- spec-sheet rows ---------------------------------------------------------- */
.dh-why-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.dh-why-item { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 24px 0 28px; border-bottom: 1px solid var(--dh-rule); }
.dh-why-h { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--navy); }
/* Titles are phrase spans, so lines break between 文節 in every browser. */
.dh-why-h > span { display: inline-block; }
.dh-why-h > .dh-why-n { display: block; margin: 0 0 4px; font-size: 13px; line-height: 20px; letter-spacing: 0.18em; color: var(--dh-acc-ink); font-variant-numeric: tabular-nums; }
.dh-why-p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2; color: var(--muted); overflow-wrap: break-word; }
@media (min-width: 600px) {
  .dh-why-item { grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; row-gap: 8px; }
  .dh-why-ui { grid-row: 1 / span 2; }
}
/* Desktop: crop | title | text on one line per reason; text starts level
   with the title line, under the number. */
@media (min-width: 1024px) {
  .dh-why-item { grid-template-columns: 232px minmax(0, 17em) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); align-items: start; padding: 32px 0; }
  .dh-why-ui { grid-row: auto; }
  .dh-why-p { padding-top: 24px; }
}

/* ---- micro-UI crop, 232x112: grid stage with a bleeding window ------------
   Round 7 (design-qa-gate §7): every crop text is 13px, the Japanese floor, at
   every width. The crop keeps its size; spacing inside was tightened so each
   window still ends inside the 112px crop. */
.dh-why-ui { width: 232px; height: 112px; padding: 10px 0 0 10px; overflow: hidden; border-radius: 10px; background: var(--dh-stage-bg); }
/* Phones: the crop spans the column (no zoom: the text is 13px already). */
@media (max-width: 599.98px) { .dh-why-ui { width: 100%; max-width: 352px; } }
.dh-why-ui > .dh-win { height: 100%; border-radius: 6px 0 0 0; box-shadow: 0 1px 2px rgba(16, 42, 67, 0.08), 0 12px 24px -16px rgba(16, 42, 67, 0.4); font-size: 13px; line-height: 1.5; }
.dh-why-ui svg { width: 12px; height: 12px; stroke-width: 2; }
.dh-why-head { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--dh-hair); white-space: nowrap; }
.dh-why-head b { color: var(--navy); }
.dh-why-mut { margin-left: auto; color: var(--muted); }

/* 01: the systems people use today, each untouched. */
.dh-why-ui .dh-why-sys { display: grid; padding: 3px 10px 0; }
.dh-why-sys li { display: flex; align-items: center; height: 22px; border-bottom: 1px dashed var(--dh-hair); color: var(--ink); white-space: nowrap; }
.dh-why-sys em { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-style: normal; font-weight: 700; color: var(--dh-ok); }

/* 02: what you would normally build first, crossed out; connecting is all. */
.dh-why-ui .dh-why-prep { display: grid; gap: 2px; padding: 5px 10px 0; }
.dh-why-prep li { display: flex; align-items: center; gap: 6px; height: 20px; color: var(--muted); white-space: nowrap; }
.dh-why-prep em { margin-left: auto; padding: 0 5px; border-radius: 3px; background: var(--dh-flat); font-style: normal; font-weight: 700; line-height: 18px; color: var(--muted); }
.dh-why-prep .dh-why-do { gap: 4px; margin-top: 2px; padding: 0 7px; border-radius: 4px; background: #E2F3EA; font-weight: 700; color: var(--dh-ok); }

/* 03: start in the cloud, one department, then company-wide (the next step).
   The middle step has the longest label (6 characters), so its column is wider;
   the columns stay symmetric, so the rule still runs dot centre to dot centre. */
.dh-why-ui .dh-why-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); padding: 10px 4px 0; }
.dh-why-track::before { content: ""; position: absolute; top: 15px; left: 17%; right: 17%; height: 2px; background: linear-gradient(90deg, var(--dh-ok) 0 50%, var(--dh-rule) 50% 100%); }
.dh-why-track li { position: relative; display: grid; justify-items: center; gap: 4px; color: var(--ink); white-space: nowrap; }
.dh-why-track i { width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--dh-rule); }
.dh-why-track .is-done i { background: var(--dh-ok); box-shadow: none; }
.dh-why-track .is-next i { box-shadow: inset 0 0 0 2px var(--dh-acc); }
.dh-why-track .is-next span { font-weight: 700; color: var(--dh-acc-ink); }
.dh-why-ui .dh-why-note { margin: 7px 10px 0; color: var(--muted); }

/* 04: a short exchange with the Japan team, in Japanese. The window bar names
   who you are talking to (as chat apps do), so the bubble holds only the reply. */
.dh-why-chat { display: grid; gap: 4px; padding: 5px 10px 0; }
.dh-why-ui .dh-why-msg { justify-self: start; max-width: 100%; padding: 3px 7px; border: 1px solid var(--dh-hair); border-radius: 2px 8px 8px 8px; background: var(--dh-rail); color: var(--ink); }
.dh-why-ui .dh-why-msg.dh-why-me { justify-self: end; border-color: var(--navy); border-radius: 8px 8px 2px 8px; background: var(--navy); color: var(--white); }

/* ---- motion: plays once per crop / photo ------------------------------------ */
html.dh-motion .dh-seen :is(.dh-why-step, .dh-why-img) { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); transition-delay: var(--t, 0ms); }
html.dh-motion .dh-seen .dh-why-img { transition-duration: var(--dur-2); }
html.dh-motion [data-dh-latch]:not(.dh-seen) .dh-why-step { opacity: 0; transform: translateY(5px); }
html.dh-motion [data-dh-latch]:not(.dh-seen) .dh-why-img { opacity: 0; transform: scale(1.04); }
/* Photo drift while the band crosses the viewport (scroll-driven, transform
   only); no view timelines or reduced motion = a still photo. */
@supports (animation-timeline: view()) {
  html.dh-motion .dh-why-frame > picture { animation: dh-why-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes dh-why-drift { from { transform: translateY(-3%) scale(1.08); } to { transform: translateY(3%) scale(1.08); } }
}