/* ==========================================================================
   Component: datpro_solution_journey   (page: /giai-phap/)

   This page must NOT read like a second Products page. /san-pham/ answers
   "what DATPRO has" and leads with product screenshots; this page answers
   "what problem DATPRO solves" and leads with the customer's pain, then names
   the product that fits. No screenshots live here — only line icons, a simple
   directional flow, and restrained white / var(--dp-surface) band tinting.

   Structure, top to bottom:
     .dp-solutions-head   short intro above the four solution rows
     .dp-solution-row     one full-bleed row per solution (own bg tint)
       .dp-solution          BÀI TOÁN → connector → GIẢI PHÁP + GIÁ TRỊ
       .dp-solution--reverse flips the two sides on alternating rows so the
                              four rows read as a left-right-left-right
                              sequence rather than four stamped-out copies
     .dp-process           compact wrapper around the shared .dp-flow strip
                            (targets .dp-flow from here; blocks.css itself is
                            never edited) — adds a connecting line + directional
                            arrows between PLAN → EXECUTE → CONTROL → ANALYZE →
                            IMPROVE so the strip reads as one process, not five
                            unrelated tiles.

   Spacing is intentionally NOT var(--section-py): the four solution rows are
   the page's main content and get generous room (72–96px), the process strip
   is a closing summary and stays compact (40–64px). Neither tokens.css nor
   base.css is touched to get this — it is all page-scoped classes here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro head above the four rows
   -------------------------------------------------------------------------- */

.dp-solutions-head {
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
}

/* --------------------------------------------------------------------------
   .dp-solution-row — one full-bleed band per solution
   -------------------------------------------------------------------------- */

.dp-solution-row {
  padding-block: clamp(4.5rem, 7vw, 6rem);
}

.dp-solution-row--tint {
  background: var(--dp-surface);
}

/* --------------------------------------------------------------------------
   .dp-solution — BÀI TOÁN | connector | GIẢI PHÁP + GIÁ TRỊ
   -------------------------------------------------------------------------- */

.dp-solution {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.dp-solution__problem,
.dp-solution__answer {
  min-width: 0;
}

/* ---------- Left: the problem --------------------------------------------- */

.dp-solution__id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-5);
}

.dp-solution__step {
  color: var(--dp-text-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-eyebrow);
}

.dp-solution__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--dp-blue-50);
  color: var(--dp-blue);
}

.dp-solution__icon svg {
  width: 20px;
  height: 20px;
}

.dp-solution__category {
  color: var(--dp-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.dp-solution__pain {
  margin-top: var(--sp-3);
  max-width: 36rem;
  color: var(--dp-text-body);
  font-size: var(--fs-lead);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- Middle: the connector ------------------------------------------ */

.dp-solution__connector {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--dp-blue-50);
  color: var(--dp-blue);
}

.dp-solution__connector svg {
  width: 20px;
  height: 20px;
  transition: transform var(--dur) var(--ease);
}

/* ---------- Right: the solution -------------------------------------------- */

.dp-solution__product {
  margin-top: var(--sp-2);
}

.dp-solution__value-label {
  display: block;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.dp-solution .dp-tags {
  row-gap: var(--sp-2);
}

.dp-solution .dp-tag svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--dp-blue);
}

.dp-solution__cta {
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Layout — alternating left/right composition from 900px up
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .dp-solution {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2rem, 3.4vw, 3.5rem);
  }

  .dp-solution__problem,
  .dp-solution__answer {
    flex: 1 1 0;
    padding-top: var(--sp-2);
  }

  .dp-solution__connector {
    align-self: center;
  }

  /* Odd rows: problem left → solution right (source order, no override).
     Even rows carry .dp-solution--reverse and flip visually only — the DOM
     keeps bài toán before giải pháp for screen readers and CSS-off reading. */
  .dp-solution--reverse .dp-solution__problem {
    order: 3;
  }

  .dp-solution--reverse .dp-solution__connector {
    order: 2;
  }

  .dp-solution--reverse .dp-solution__answer {
    order: 1;
  }

  /* The connector always points from bài toán toward giải pháp, so it flips
     with the layout instead of always pointing the same screen direction. */
  .dp-solution--reverse .dp-solution__connector svg {
    transform: scaleX(-1);
  }
}

/* Below 900px every row stacks bài toán → connector → giải pháp in that
   fixed, logical order regardless of the desktop variant. */
@media (max-width: 899px) {
  .dp-solution__connector {
    rotate: 90deg;
  }
}

/* --------------------------------------------------------------------------
   .dp-process — compact wrapper around the shared .dp-flow strip
   Combined-class selector (.dp-process.dp-section) beats the plain
   .dp-section rule on specificity, so --section-py is overridden here
   without editing base.css.
   -------------------------------------------------------------------------- */

.dp-process.dp-section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dp-process .dp-flow {
  position: relative;
}

/* A continuous line behind the steps. Steps keep their opaque .dp-flow__step
   background from blocks.css, so the line only shows through the gaps —
   exactly like a thread strung through five beads. */
.dp-process .dp-flow::before {
  content: "";
  display: none;
  position: absolute;
  left: 9%;
  right: 9%;
  top: 2.35rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--dp-blue-200) 0%,
    var(--dp-blue-500) 50%,
    var(--dp-blue-200) 100%
  );
}

.dp-process .dp-flow__step {
  position: relative;
  z-index: 1;
}

/* Numbered step markers become small solid nodes sitting on the line instead
   of plain corner text — the strip reads as stations on a route. */
.dp-process .dp-flow__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--dp-blue);
  color: #fff;
  font-size: 0.6875rem;
}

/* Directional arrow between steps, replacing the plain corner chevron from
   blocks.css with an explicit right-pointing arrow (higher specificity wins
   without touching the shared file). */
.dp-process .dp-flow__step:not(:last-child)::after {
  content: "";
  display: none;
  position: absolute;
  top: 2.35rem;
  right: calc(var(--flow-gap, 1rem) / -2);
  width: 16px;
  height: 16px;
  background-color: var(--dp-blue-500);
  border: none;
  transform: translate(50%, -50%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (min-width: 1024px) {
  .dp-process .dp-flow::before,
  .dp-process .dp-flow__step:not(:last-child)::after {
    display: block;
  }
}