/* ==========================================================================
   assets/pages/investitori.css: page "Investitori" (prefix pg-investitori-)
   The investor page, told as one story (owner 2026-10-19: "there is no story line throughout out investitori"):
   the opening, then six chapters (I Originea ... VI Prezentarea), each ending with a hand-over to the next
   (.pg-investitori-bridge). UNLISTED: in no menu, robots noindex, nofollow (also after launch).
   Copy and facts: the page's box (dv-content/inc/pages-investitori.php), content/facts.yaml; data-fact names the
   fact id, data-ledger the open owner or lawyer decision (never shown). No amounts, equity, valuation, returns,
   company or market figures (INVESTOR_TERMS). Photos: img/investitori/ (real photos of the Răzeni winery).
   Layout only: kit tokens.

   The story line (CSS only, no JS):
   - from 1200 px a sticky chapter rail beside the text: the chapter under the reading line is marked (ink text,
     leaf dot) and a leaf line fills down the rail as the story is read;
   - below 1200 px the same list opens the story, and a 3 px leaf line under the header fills across.
   Scroll-driven animations (@supports animation-timeline). The two filling lines are motion: they run for everyone,
   reduced motion included (owner policy 2026-10-17), and never when the visitor chose html[data-motion="off"]. The
   current-chapter mark is a state, not motion: it shows in every mode. Without scroll timelines the rail and the list
   are plain links.
   ========================================================================== */
.pg-investitori-ch { padding-block: var(--section) var(--sp-8); }   /* the hand-over closes a chapter: less air before the next */
.pg-investitori-ch--band { background: var(--band); }
.pg-investitori-request { padding-bottom: var(--section); }
.pg-investitori-head { display: grid; gap: var(--sp-3); max-width: 46rem; margin-bottom: var(--sp-7); }
.pg-investitori-head h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-investitori-sub { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--sp-5); }
.pg-investitori-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
.pg-investitori-frame { position: relative; margin: 0; overflow: clip; border-radius: var(--radius-media); background: var(--band); }
.pg-investitori-frame > img { width: 100%; height: 100%; object-fit: cover; }

/* the opening: title, who we are, why now and the working-document notice beside the winery's main building */
.pg-investitori-intro { padding-block: var(--sp-7); }
.pg-investitori-intro__grid { display: grid; gap: var(--sp-6); }
.pg-investitori-intro__text > * + * { margin-top: var(--sp-3); }
.pg-investitori-intro__text > .dvh-notice { margin-top: var(--sp-5); }
.pg-investitori-intro .pg-investitori-frame { aspect-ratio: 5 / 4; }
.pg-investitori-now {
  max-width: var(--text-measure); padding-left: var(--sp-4); border-left: 3px solid var(--leaf);
  font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty;
}
.pg-investitori-intro__text > .pg-investitori-now { margin-top: var(--sp-4); }
.pg-investitori-notice__title { font-weight: var(--fw-strong); }

/* ---- the story line ------------------------------------------------------------------------------- */
.pg-investitori-story { position: relative; }
.pg-investitori-rail {
  width: 100%; max-width: calc(var(--container) + 2 * var(--page-gutter)); margin-inline: auto;
  padding: 0 var(--page-gutter) var(--sp-7);
}
.pg-investitori-thread { --pg-inv-spine: 6px; position: relative; max-width: 22rem; }
/* one segment of the line per chapter, from its dot to the next dot (two-line names keep it on the dots) */
.pg-investitori-thread li { position: relative; }
.pg-investitori-thread li:not(:last-child)::before,
.pg-investitori-thread li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--tap) / 2); bottom: calc(var(--tap) / -2);
  left: calc(var(--pg-inv-spine) - .5px); width: 1px; background: var(--line); pointer-events: none;
}
.pg-investitori-thread li:not(:last-child)::after { left: calc(var(--pg-inv-spine) - 1px); width: 2px; background: var(--leaf); transform-origin: 50% 0; scale: 1 0; }
.pg-investitori-thread a {
  position: relative; z-index: 1; display: flex; align-items: baseline; gap: var(--sp-3);
  min-height: var(--tap); padding-block: 10px; padding-left: calc(2 * var(--pg-inv-spine) + var(--sp-4));
  color: var(--muted); text-decoration: none; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui);
}
.pg-investitori-thread a::before {
  content: ""; position: absolute; left: 0; top: calc(var(--tap) / 2 - 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pg-inv-dot, var(--ground)); border: 1px solid var(--pg-inv-ring, var(--control));
}
.pg-investitori-thread a:hover { color: var(--ink); }
.pg-investitori-thread a:hover .pg-investitori-thread__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pg-investitori-thread__num {
  min-width: 1.75em; font-family: var(--font-display); font-size: var(--fs-card); line-height: 1;
  font-variant-numeric: lining-nums;
}
.pg-investitori-progress { display: none; }

/* ---- I. Originea: head beside the dated timeline (each date with its source), then the cellar ------- */
.pg-investitori-company { display: grid; gap: var(--sp-6); }
.pg-investitori-company .pg-investitori-head { margin-bottom: 0; }
.pg-investitori-timeline { border-bottom: 1px solid var(--line); }
.pg-investitori-event { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.pg-investitori-event__when { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums lining-nums; }
.pg-investitori-event__body > * + * { margin-top: var(--sp-2); }
.pg-investitori-event__body p { max-width: var(--text-measure); }
.pg-investitori-event__src { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-investitori-fig--wide { margin-top: var(--sp-7); }
.pg-investitori-wide { aspect-ratio: 3 / 2; }

/* ---- II. Astăzi and IV. Ce construim: short cards ------------------------------------------------- */
.pg-investitori-cards { display: grid; gap: var(--col-gap); }
.pg-investitori-card { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border-radius: var(--radius-media); }
.pg-investitori-card h3 { font-size: var(--fs-card); line-height: var(--lh-card); }
.pg-investitori-card p { font-size: var(--fs-ui); line-height: 1.55; text-wrap: pretty; }

/* ---- III. Dovezile: totals, scores with their source, the press ---------------------------------- */
.pg-investitori-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
.pg-investitori-figures > div { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.pg-investitori-figures dt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); }
.pg-investitori-figures dd { font-size: var(--fs-ui); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.pg-investitori-num { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-numeral); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-investitori-unit { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--muted); white-space: nowrap; }
.pg-investitori-figures + .pg-investitori-sub,
.pg-investitori-proof + .pg-investitori-press,
.pg-investitori-figures + .pg-investitori-press { margin-top: var(--sp-8); }
.pg-investitori-proof { display: grid; gap: var(--sp-6) var(--col-gap); }
.pg-investitori-proof > li { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink); }
.pg-investitori-proof__fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); }
.pg-investitori-proof__label { font-size: var(--fs-ui); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.pg-investitori-src {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap);
  font-size: var(--fs-ui); font-weight: var(--fw-ui);
}
.pg-investitori-press > p { max-width: var(--text-measure); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }

/* ---- IV: the ODA grant, one quiet note under the works ------------------------------------------- */
.pg-investitori-recognition { max-width: var(--text-measure); margin-top: var(--sp-7); }

/* ---- V. Oamenii: two people, text only (PORTRAIT_CONSENT) ----------------------------------------- */
.pg-investitori-team { display: grid; gap: var(--sp-6) var(--col-gap); }
.pg-investitori-member { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--ink); }
.pg-investitori-member p:last-child { max-width: var(--text-measure); text-wrap: pretty; }

/* ---- VI. Prezentarea: the tasting hall beside the one filled action (an e-mail; no form) ---------- */
.pg-investitori-request .dvh-visitstrip__media { aspect-ratio: 4 / 3; }
.pg-investitori-request h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.pg-investitori-request .dvh-visitstrip__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.pg-investitori-request .dvh-visitstrip__body > .pg-investitori-aviz-link { margin-top: var(--sp-5); }
.pg-investitori-aviz-link a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---- the hand-over at the end of each chapter ----------------------------------------------------- */
.pg-investitori-bridge {
  display: grid; gap: var(--sp-3); max-width: 46rem;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.pg-investitori-bridge__text { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); text-wrap: pretty; }
.pg-investitori-bridge__next {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: var(--tap); color: var(--link); text-decoration: none;
}
.pg-investitori-bridge__next .dvh-eyebrow { color: var(--muted); }
.pg-investitori-bridge__to {
  font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.pg-investitori-bridge__next:hover .pg-investitori-bridge__to { text-decoration-thickness: 2px; }
.pg-investitori-bridge__num { font-variant-numeric: lining-nums; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pg-investitori-bridge__next > .dvh-icon { transition: translate var(--dur-hover) var(--ease-out); }
  .pg-investitori-bridge__next:hover > .dvh-icon { translate: 0 3px; }
}

/* ---- breakpoints ---------------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .pg-investitori-figures--5 > div:first-child { grid-column: 1 / -1; }   /* the total leads, the four kinds pair up */
}
@media (min-width: 600px) {
  .pg-investitori-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-investitori-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-investitori-wide { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .pg-investitori-intro { padding-block: var(--sp-7) var(--sp-8); }
  .pg-investitori-intro__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .pg-investitori-company { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
  .pg-investitori-event { grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-5); }
  .pg-investitori-event__when { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .pg-investitori-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--col-gap); }
  .pg-investitori-figures--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-investitori-figures--5 .pg-investitori-num { font-size: var(--fs-h2); }
  .pg-investitori-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-investitori-wide { aspect-ratio: 21 / 9; }
}

/* from 1200 px the chapter list becomes the rail: a column beside every chapter, its list sticky under the header */
@media (min-width: 1200px) {
  .pg-investitori-story { --pg-inv-rail: 200px; --pg-inv-rail-gap: 48px; }
  .pg-investitori-rail {
    position: absolute; z-index: var(--z-raised); inset-block: 0;
    left: max(var(--page-gutter), calc((100% - var(--container)) / 2));
    width: var(--pg-inv-rail); max-width: none; margin: 0; padding: var(--section) 0;
  }
  .pg-investitori-thread { position: sticky; top: calc(var(--header-h) + var(--sp-7)); }
  .pg-investitori-ch > .dvh-container { padding-left: calc(var(--page-gutter) + var(--pg-inv-rail) + var(--pg-inv-rail-gap)); }
}

/* ---- the story line, scroll-driven --------------------------------------------------------------- */
@supports (animation-timeline: view()) and (timeline-scope: --pg-inv-1) {
  /* the whole story: 0 when its top meets the header, 1 when its end reaches the bottom of the screen */
  .pg-investitori-story {
    view-timeline: --pg-inv-story block; view-timeline-inset: var(--header-h) 0;
    timeline-scope: --pg-inv-1, --pg-inv-2, --pg-inv-3, --pg-inv-4, --pg-inv-5, --pg-inv-6;
  }
  /* each chapter is "current" while it crosses a reading line about 40% down the screen */
  .pg-investitori-ch { view-timeline-inset: 40% 59%; }
  #originea { view-timeline-name: --pg-inv-1; }
  #astazi { view-timeline-name: --pg-inv-2; }
  #dovezi { view-timeline-name: --pg-inv-3; }
  #constructie { view-timeline-name: --pg-inv-4; }
  #oameni { view-timeline-name: --pg-inv-5; }
  #prezentarea { view-timeline-name: --pg-inv-6; }
  .pg-investitori-ch { view-timeline-axis: block; }

  .pg-investitori-thread li > a { animation: pg-inv-here linear none; animation-range: cover 0% cover 100%; }
  .pg-investitori-thread li:nth-child(1) > a { animation-timeline: --pg-inv-1; }
  .pg-investitori-thread li:nth-child(2) > a { animation-timeline: --pg-inv-2; }
  .pg-investitori-thread li:nth-child(3) > a { animation-timeline: --pg-inv-3; }
  .pg-investitori-thread li:nth-child(4) > a { animation-timeline: --pg-inv-4; }
  .pg-investitori-thread li:nth-child(5) > a { animation-timeline: --pg-inv-5; }
  .pg-investitori-thread li:nth-child(6) > a { animation-timeline: --pg-inv-6; }

  /* the filling lines: motion, so never with motion "off". Rail: the segment after a chapter's dot fills while that
     chapter crosses the reading line, so it reaches the next dot as the next chapter begins. */
  @media (min-width: 1200px) {
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:not(:last-child)::after { animation: pg-inv-fill-y linear both; animation-range: cover 0% cover 100%; }
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:nth-child(1)::after { animation-timeline: --pg-inv-1; }
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:nth-child(2)::after { animation-timeline: --pg-inv-2; }
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:nth-child(3)::after { animation-timeline: --pg-inv-3; }
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:nth-child(4)::after { animation-timeline: --pg-inv-4; }
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:nth-child(5)::after { animation-timeline: --pg-inv-5; }
  }
  /* below 1200 px the list sits above chapter I: a 3 px line under the header follows the whole story instead */
  @media (max-width: 1199.98px) {
    html.dv-js:not([data-motion="off"]) .pg-investitori-progress {
      display: block; position: sticky; top: var(--header-h); z-index: calc(var(--z-header) - 1);
      height: 3px; margin-bottom: -3px; pointer-events: none;
    }
    html.dv-js:not([data-motion="off"]) .pg-investitori-progress > span {
      display: block; height: 100%; background: var(--leaf); transform-origin: 0 50%;
      animation: pg-inv-fill-x linear both;
      animation-timeline: --pg-inv-story;
      animation-range: contain 0% contain 100%;
    }
  }

  /* base.css cuts every animation to .01ms under reduced motion; these follow the scroll, so they keep its length */
  @media (prefers-reduced-motion: reduce) {
    .pg-investitori-thread li > a,
    html.dv-js:not([data-motion="off"]) .pg-investitori-thread li:not(:last-child)::after,
    html.dv-js:not([data-motion="off"]) .pg-investitori-progress > span { animation-duration: auto !important; }
  }
}
@keyframes pg-inv-here { from, to { color: var(--ink); --pg-inv-dot: var(--leaf); --pg-inv-ring: var(--leaf); } }
@keyframes pg-inv-fill-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes pg-inv-fill-x { from { scale: 0 1; } to { scale: 1 1; } }