/* ==========================================================================
   Component: datpro_product_story
   Premium visual treatment + a couple of layout primitives for a narrative
   product page (currently /san-pham/datpro-enterprise/). Built to sit beside
   .dp-text-image, .dp-values, .dp-split — never replaces them.

     .dp-story-visual        wrapper around a product <img> — radius, shadow,
                              thin border, optional glow, gentle hover lift
     .dp-section--dark       navy/blue gradient section, text flipped to
                              on-dark tokens (Analytics)
     .dp-section--ecosystem  lighter premium gradient, full-bleed visual
                              (Connected Enterprise)
     .dp-architecture        root → 6 leaf nodes diagram, pure CSS
   ========================================================================== */

/* ---------- Visual treatment ---------------------------------------------- */

.dp-story-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-lg);
  background: var(--dp-surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dp-story-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.dp-story-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 40, 104, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .dp-story-visual:hover {
    transform: none;
  }
}

/* Soft blue glow behind the visual — a pseudo-element so it never affects
   layout or gets clipped by the image's own overflow:hidden. */
.dp-story-visual--glow::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(26, 114, 212, 0.28), transparent 70%);
  filter: blur(24px);
}

.dp-story-visual--on-dark {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Soft green/mint glow — alternate to --glow's blue, for products whose
   brand accent is green (e.g. DATCARE+) rather than DATPRO blue. */
.dp-story-visual--glow-mint::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, rgba(18, 160, 92, 0.24), transparent 70%);
  filter: blur(24px);
}

/* Very slow reveal zoom — image starts at 1.04 scale and settles to 1.00 as
   its .dp-reveal ancestor becomes visible, echoing a mask-reveal without a
   second element. Independent of :hover (mobile has no hover to depend on). */
.dp-story-visual--zoom img {
  transform: scale(1.045);
  transition: transform 1100ms var(--ease);
}

.dp-reveal.is-visible .dp-story-visual--zoom img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .dp-story-visual--zoom img {
    transform: none;
    transition: none;
  }
}

/* ---------- "Premium" emphasis section -------------------------------------
   Was a dark navy band (.dp-section--dark). 2026-10-09 client review: the
   whole site goes light and glossy, no dark navy blocks — so the class keeps
   its name (markup unchanged) but now renders as a bright blue aurora wash
   with normal dark ink. Still the page's one "feature" band by contrast of
   colour, not of darkness. */

.dp-section--dark {
  position: relative;
  isolation: isolate;
  color: var(--dp-text);
  background:
    radial-gradient(45% 70% at 10% 15%, rgba(147, 197, 253, 0.55), transparent 70%),
    radial-gradient(45% 70% at 90% 85%, rgba(196, 181, 253, 0.42), transparent 70%),
    linear-gradient(180deg, #f3f8ff 0%, #eef3ff 100%);
}

.dp-section--dark .dp-eyebrow--muted {
  color: var(--dp-blue);
}

.dp-section--dark .dp-section-head__desc,
.dp-section--dark .dp-text-image__desc,
.dp-section--dark .dp-text-image__desc p {
  color: var(--dp-text-body);
}

.dp-section--dark h1,
.dp-section--dark h2,
.dp-section--dark h3 {
  color: var(--dp-text);
}

.dp-section--ecosystem {
  background: linear-gradient(180deg, var(--dp-blue-50) 0%, var(--dp-surface) 55%, var(--dp-bg) 100%);
}

/* ---------- Full-bleed visual (Connected Enterprise) ------------------------ */

.dp-story-feature {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
}

.dp-story-feature__visual {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.dp-story-feature__badges {
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Architecture diagram ------------------------------------------- */

.dp-architecture {
  max-width: 56rem;
  margin-inline: auto;
}

.dp-architecture__root {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #0b56b8, #1d6fe0 55%, #4f9dff);
  box-shadow: 0 14px 30px -14px rgba(29, 94, 232, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.dp-architecture__root-wrap {
  display: flex;
  justify-content: center;
}

.dp-architecture__trunk {
  width: 2px;
  height: clamp(1.5rem, 3vw, 2.25rem);
  margin-inline: auto;
  background: var(--dp-blue-200);
}

.dp-architecture__branches {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.dp-architecture__node {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--dp-border);
  border-radius: var(--r-md);
  background: var(--dp-bg);
  box-shadow: var(--shadow-xs);
  text-align: center;
  font-weight: var(--fw-medium);
  color: var(--dp-text);
}

.dp-architecture__node::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--sp-4));
  left: 50%;
  width: 2px;
  height: var(--sp-4);
  background: var(--dp-blue-200);
}

@media (min-width: 640px) {
  .dp-architecture__branches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dp-architecture__branches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}