/* ==========================================================================
   LP02 · UNIT 6 · LONG-TERM COMMERCIAL VALUE — value over time
   --------------------------------------------------------------------------
   One wide white card on a cloud surface:
   • Header: title + sentence beside a warm advisor portrait.
   • Chart (no figures, no percentages — per the copy's approval note):
       – a dashed grey spike: "first introduction" only
       – teal bars building under a rising curve: "recurring value" across
         the client relationship, ending in a circular handshake photo
       – small cycle glyphs along the axis for the recurring periods
   Labels are HTML placed in chart space (--x / --y as % of the viewBox),
   so they stay crisp and readable at every size.
   Entrance (value.js, once on view): spike draws → bars rise in turn →
   curve draws → end photo + labels appear. Static = finished chart.
   ========================================================================== */

.value {
  background: linear-gradient(180deg, var(--c-cloud) 0%, #EEF4F7 100%);
}

.value__decor {
  background:
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(0, 169, 182, 0.14), transparent 70%),
    radial-gradient(ellipse 35% 35% at 0% 0%, rgba(1, 62, 106, 0.06), transparent 70%);
}

[dir="rtl"] .value__decor {
  scale: -1 1;
}

.value__card {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.value__head {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .value__head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  }
}

.value__copy {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .value__copy {
    justify-items: start;
    text-align: start;
  }
}

.value__copy .t-lead {
  max-inline-size: 36rem;
}

.value__portrait {
  justify-self: center;
  inline-size: min(100%, 15rem);
  overflow: hidden;
  border-radius: var(--r-card);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

@media (min-width: 48rem) {
  .value__portrait {
    justify-self: end;
  }
}

.value__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Chart
   --------------------------------------------------------------------------- */
.vchart {
  position: relative;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, #F7FAFB 0%, var(--c-white) 100%);
  border: 1px solid var(--c-ink-a10);
  direction: ltr;                /* a timeline reads left → right in every language */
}

/* Charts read in time order left → right in every language */
.vchart svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.vchart__axis {
  stroke: var(--c-ink-a20);
  stroke-width: 1.5;
}

.vchart__spike {
  fill: none;
  stroke: var(--c-mist);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
}

.vchart__area {
  fill: url(#vchartArea);
}

.vchart__bar {
  fill: url(#vchartBar);
}

.vchart__line {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 4;
  stroke-linecap: round;
}

.vchart__cycle {
  fill: none;
  stroke: var(--c-deep-teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Labels are positioned in chart space with % offsets; the chart itself
   is forced LTR (set on .vchart above) so time always runs the same way. */
.vchart__label {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.35rem;
  padding-inline: 0.625rem;
  border-radius: var(--r-pill);
  font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.vchart__label svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex-shrink: 0;
}

.vchart__label--spike {
  translate: -10% -150%;
  background-color: var(--c-white);
  border: 1px solid var(--c-ink-a20);
  color: var(--c-slate);
}

.vchart__label--end {
  translate: -100% -260%;
  background-color: var(--c-navy);
  color: var(--c-white);
}

.vchart__label--end svg {
  color: var(--c-teal);
}

/* End-of-line portrait */
.vchart__end {
  position: absolute;
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
  inline-size: clamp(2.5rem, 2rem + 3vw, 4.25rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--c-white);
  box-shadow: 0 0 0 4px rgba(0, 169, 182, 0.35), var(--shadow-md);
}

.vchart__end img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Narrow phones: smaller pills */
@media (max-width: 29.99rem) {
  .vchart__label {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    gap: 0.25rem;
  }

  .vchart__label--end {
    translate: -100% -220%;
  }
}