/* ==========================================================================
   Agenți AI (/agenti-ai/) · page-only styles. Every selector starts with
   .page-agenti-ai; tokens only. Shared components: docs/site-v3/COMPONENTS.md.
    1. Hero: the window on the real call ends on Aria's greeting; the next lines of the same
       transcript (.ag-call, real cut-outs) sit at their real place in the screen's transcript
       column, lifted 8% towards the viewer. agenti-ai.js lets them arrive as you scroll.
    2. Plate: a crisp plate in the AI channel colour behind a screen (.ag-plate); it slides
       out once the screen has landed.
    3. Splits: wide screens take the full width below 1100px; portrait screens a narrow column.
    4. Chat: Aria's next reply goes on below the thread (.ag-reply).
    5. Campaign agent on the violet band: a white rail, the approval step in mint.
   ========================================================================== */


/* 1. Hero ------------------------------------------------------------------------ */
/* Top-anchored windows that end between Aria's greeting and the next line:
   app 1440 x 744 (desktop), app-crop 1192 x 680 (tablet), mobile 585 x 1128 (phone). */
.page-agenti-ai .phero .frame__view { --ar: 1.9355; }
@media (max-width: 1099.98px) { .page-agenti-ai .phero .frame__view { --ar: 1.7529; } }
.page-agenti-ai .phero .frame--adapt { --ar-phone: .5186; }
/* Two lines from 1024px up: „Agenți AI care sună, răspund” / „și pregătesc campanii” */
.page-agenti-ai .phero__title { max-width: 17em; }

/* --x / --w: each line's left edge and width in the screenshot (1x px); --vw / --ox: the width
   and x origin of the image shown in the frame (full app ≥ 1100px, app-crop below). */
.page-agenti-ai .ag-call {
  --vw: 1440; --ox: 0; --k: 1.08;
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: -18px;                       /* the first line straddles the screen's lower edge */
  pointer-events: none;
}
.page-agenti-ai .ag-call__line {
  display: block; max-width: none; height: auto;
  width: calc(var(--w) * var(--k) / var(--vw) * 100%);
  margin-left: calc((var(--x) - var(--ox) - var(--w) * (var(--k) - 1) / 2) / var(--vw) * 100%);
  filter: var(--sh-float);
}
.page-agenti-ai .ag-call__line + .ag-call__line { margin-top: calc(12 / var(--vw) * 100%); }
.page-agenti-ai .phero__cap { margin-top: clamp(24px, 2.6vw, 40px); }
/* Desktop: the caption takes the free space right of the transcript (lines end at 70%) */
@media (min-width: 1100px) {
  .page-agenti-ai .phero__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25%); }
  .page-agenti-ai .phero__stage { grid-column: 1 / -1; grid-row: 1; }
  .page-agenti-ai .ag-call { grid-column: 1 / -1; grid-row: 2; }
  .page-agenti-ai .phero__cap { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
}
@media (max-width: 1099.98px) {
  .page-agenti-ai .ag-call { --vw: 1192; --ox: 249; margin-top: -14px; }
}
/* Phones: under the phone, Andrei on the left and Aria on the right, at one shared scale */
@media (max-width: 759.98px) {
  .page-agenti-ai .ag-call { width: min(100%, 360px); margin: -22px auto 0; }
  .page-agenti-ai .ag-call__line { width: calc(var(--w) / 420 * 100%); margin-left: 0; }
  .page-agenti-ai .ag-call__line--agent { align-self: flex-end; }
  .page-agenti-ai .ag-call__line + .ag-call__line { margin-top: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.mo:not(.mo-ready) .page-agenti-ai .ag-call__line { opacity: 0; }
}


/* 2. Plate ----------------------------------------------------------------------- */
.page-agenti-ai .ag-plate { --px: 22px; --py: 22px; position: relative; isolation: isolate; }
.page-agenti-ai .ag-plate--left { --px: -22px; }
.page-agenti-ai .ag-plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-lg);
  background: var(--pink);
  transform: translate(var(--px), var(--py));
}
@media (max-width: 759.98px) {
  .page-agenti-ai .ag-plate { --px: 10px; --py: 12px; }
  .page-agenti-ai .ag-plate--left { --px: -10px; }
}
/* While motion.js holds the screen hidden or rises it (inline opacity), the plate waits behind it */
@media (prefers-reduced-motion: no-preference) {
  .page-agenti-ai .ag-plate::before { transition: transform .9s var(--ease-out) .05s; }
  .page-agenti-ai .ag-plate[style*="opacity"]::before { transform: none; transition: none; }
}
.page-agenti-ai .ag-plate + .caption { margin-top: calc(var(--s4) + 22px); }


/* 3. Splits ---------------------------------------------------------------------- */
/* Wide windows (voice, chat): below 1100px the screenshot gets the full width */
@media (max-width: 1099.98px) {
  .page-agenti-ai .split--stack-md { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .page-agenti-ai .split--stack-md.split--flip .split__text { order: 0; }
  .page-agenti-ai .split--stack-md .split__text { max-width: 46rem; }
  .page-agenti-ai .split--stack-md .split__media { max-width: 800px; }
}
/* Portrait windows (AI Copywriter): a narrow media column */
@media (min-width: 900px) {
  .page-agenti-ai .ag-camp__split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .page-agenti-ai .ag-voice { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .page-agenti-ai .ag-camp__split { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: var(--s9); }
  .page-agenti-ai .ag-voice { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: var(--s9); }
}
@media (max-width: 899.98px) {
  .page-agenti-ai :is(.ag-camp__split, .ag-voice) .split__media { width: min(100%, 480px); }
}


/* 4. Chat: Aria's next reply, at its place under the thread (52% = 402 px of the 829 px
   window, lifted 8%), drifting on its own layer while the page scrolls */
.page-agenti-ai .ag-reply {
  position: relative; z-index: 3;
  width: 52.4%; margin: -14px 2% 0 auto;
  pointer-events: none;
}
.page-agenti-ai .ag-reply img { display: block; width: 100%; height: auto; filter: var(--sh-float); }
.page-agenti-ai .ag-reply + .caption { margin-top: var(--s4); }
@media (max-width: 759.98px) {
  .page-agenti-ai .ag-reply { display: none; }   /* phones see the conversation list, not the thread */
}


/* 5. Campaign agent on the violet band ---------------------------------------------- */
.page-agenti-ai .ag-steps { margin-top: var(--s6); }
.page-agenti-ai .ag-camp .step__n { box-shadow: 0 10px 22px -10px rgb(20 13 51 / .55); }
.page-agenti-ai .ag-camp .step:not(:last-child)::after { background: #fff; }
.page-agenti-ai .ag-steps__you .step__n { background: var(--mint); color: var(--ink); }
.page-agenti-ai .ag-camp .frame {
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 2px 4px rgb(20 13 51 / .14), 0 40px 80px -32px rgb(20 13 51 / .6);
}