/* ===========================================================================
   SolutionsDataHub -- brand images (Phong 2026-10-04: "chỗ nào cần ảnh thương
   hiệu thì bổ sung vào cho đẹp thị giác").
   1) 対応データソース・連携: official logos in white tiles, same build as
      SolutionsCoding .cd-eco__chips (logo rule: Coding refine D15-D16).
      - MySQL and SQLite tiles show their lockup (mark + wordmark) alone, no
        extra text. Oracle reserves the original MySQL logo for parties with a
        written agreement; Phong 2026-10-04: "logo cứ dùng, bị yêu cầu gỡ thì
        tính sau" -> if asked, turn that tile back into the plain name.
      - A symbol followed by its name gets alt="" (the name is the text).
   2) 導入フロー: a NAL photo (a member walking the room through a chart)
      beside the heading. Source NAL-picture/20240506_104810.jpg, not used on
      any other page (checked against every page's assets on 2026-10-04).
   Contrast: --navy on #FFF 14.64 · --muted on #FFF 5.48 · --muted on --dh-tint
   (flow lead) 5.13.
   =========================================================================== */

/* 1 -- logo tiles; the dt drops 10px so it reads level with the first tile row */
.dh-eco__dl dt { padding-top: 10px; }
/* Tiles need room: the band stays stacked until 1024px (datahub-eco.css splits
   it at 900px, which left the text column 203px wide), and a 3-tile row goes
   3 across only when the row itself is 380px+ (「MCPサーバー」 overflowed at 350px).
   The row is measured, not the screen, because the band split squeezes it. */
@media (min-width: 900px) and (max-width: 1023.98px) { .dh-eco { grid-template-columns: minmax(0, 1fr); } }
.dh-eco__dl dd { container-type: inline-size; }
.dh-eco__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 480px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 380px) { .dh-eco__chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dh-eco__chips li { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--navy); white-space: nowrap; }
.dh-eco__chips .dh-eco__wide { grid-column: 1 / -1; }
/* the listed sources are examples: an open, dashed row says there are more
   (same device as SolutionsCoding .cd-eco__more) */
.dh-eco__chips .dh-eco__more { grid-column: 1 / -1; gap: 6px; height: auto; min-height: 44px; padding: 8px 12px; border-style: dashed; border-color: #B7C4D1; background: none; box-shadow: none; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: normal; text-align: center; }
/* 「クラウドストレージ」 is the longest label: the label column grows from 7em
   and the list from 34em so the tile column keeps its width */
@media (min-width: 600px) {
  .dh-eco__dl { max-width: 36.5em; }
  .dh-eco__dl > div { grid-template-columns: 9.5em minmax(0, 1fr); }
}
.dh-eco__chips img { display: block; flex: none; width: auto; max-width: 100%; height: var(--h, 20px); object-fit: contain; }
@media (max-width: 599.98px) { .dh-eco__dl dt { padding-top: 0; } }

/* 1b -- 仕組み map (gen-map.py v5): the source cards carry their logo on a white
   tile, so the colours read on the navy stage. Same tile size as the old icon. */
.dh-map-tile--brand { fill: #FFFFFF; }

/* 2 -- 導入フロー head: copy left, photo right (stacked under 900px) */
.dh-flow-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-bottom: clamp(32px, 3.4vw, 48px); }
.dh-flow-head .dh-rest-h2 { margin-bottom: 16px; }
.dh-flow-lead { margin: 0; max-width: 30em; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.dh-flow-fig { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--dh-rail); }
.dh-flow-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .dh-flow-head { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: clamp(40px, 5vw, 80px); align-items: end; }
}
html.dh-motion .dh-flow-head :is(.dh-flow-copy, .dh-flow-fig img) { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
html.dh-motion .dh-flow-head[data-dh-latch]:not(.dh-seen) .dh-flow-copy { opacity: 0; transform: translateY(12px); }
html.dh-motion .dh-flow-head[data-dh-latch]:not(.dh-seen) .dh-flow-fig img { opacity: 0; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .dh-flow-head * { transition: none !important; }
}