/* ==========================================================================
   Calls & messages — this page's tuning of the shared family sections
   ==========================================================================
   The shared sections (Features/shared) are written for the family and name no
   page. Where this page needs one of them to behave differently, the deviation
   is declared HERE — never back in the shared sheet, which would make one
   page's problem everybody's to read.

   Loaded by the page shell AFTER every section sheet, so these rules land last
   without needing weight of their own.

   Three things are tuned, and they are unrelated:
     1. horizontality — this page's headlines are sentences, not posters;
     2. the advice turntable — this page's renders are full-screen captures;
     3. the lede's in-page jump, which only this page's copy asks for.
   ========================================================================== */

/* --- 1. Horizontality ------------------------------------------------------ */

/* Scoped to this page's own i18n namespace, so a measure set for these
   headlines never reaches the other pages of the family.

   The shared caps are written for short poster statements ("L'appel est
   fini."); this page's sentences name a number and an option, so they need more
   measure. They keep the shared editorial scale and get the widest useful
   measure before wrapping naturally. */

/* The section heads carry a full sentence here, not a two-word title. */
[data-translate-section='features/voip/calls-messages'] .feat-section-head {
  max-width: 1000px;
}

/* One exception, and it is the reason this cap exists at all: the capabilities
   title is a sentence set one clause per line, and its longest clause needs the
   whole container to land on a single line. */
[data-translate-section='features/voip/calls-messages'] .feat-capabilities .feat-section-head {
  max-width: none;
}

[data-translate-section='features/voip/calls-messages'] .feat-lede {
  max-width: 74ch;
}

/* --- 2. The advice turntable ----------------------------------------------- */

/* This page ships full-screen phone captures (~969×1624), taller and narrower
   than the 3:4 screens the shared advice stage was calibrated for. The stage
   leaves both proportions open as variables; this is the page taking them up. */
.features-page .feat-advice {
  --advice-phone-cap: 30rem;
  --advice-phone-fit: 0.8;
}

/* The artwork itself carries especially fine interface type. Once a view
   reaches the front, centre it without a transform and release the persistent
   GPU hint, so Chrome paints it on the final pixel grid. The turntable on the
   coaching page keeps the shared geometry. */
@media (min-width: 961px) {
  [data-translate-section='features/voip/calls-messages'] .feat-advice__phone {
    inset: 0;
    height: fit-content;
    margin: auto;
    transform: translate3d(var(--pos-x), var(--pos-y), 0) rotate(var(--pos-rz)) scale(var(--pos-s));
    will-change: auto;
  }

  [data-translate-section='features/voip/calls-messages']
    .feat-advice__phone[data-position='front'] {
    transform: none;
  }

  /* The entrance has finished: remove the inner identity transform as well.
     This is the final handoff from motion to a native, sharp image paint. */
  [data-translate-section='features/voip/calls-messages']
    .feat-advice.is-seated
    .feat-advice__phone[data-position='front']
    .feat-advice__screen {
    transform: none;
  }
}

/* --- 3. The lede's in-page jump --------------------------------------------- */

/* A quiet jump for a section that is the appetizer of a fuller one further
   down: here, the capabilities lede sending the reader to the number-choice
   board. It ships INSIDE the lede's i18n string rather than as markup, because
   the section fragment is shared and only this page has somewhere to send
   anyone — which is also why the styling sits with the page and not in the
   family's shell. The arrow is drawn here, never typed into the copy. */
.feat-lede__jump {
  display: inline-block;
  border-bottom: 1px solid rgba(169, 144, 255, 0.42);
  color: var(--feat-text);
  font-weight: 560;
  text-decoration: none;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.feat-lede__jump::after {
  content: '↓';
  display: inline-block;
  margin-left: 0.4em;
  color: var(--feat-violet-soft);
  transition: transform 0.25s ease;
}

.feat-lede__jump:hover,
.feat-lede__jump:focus-visible {
  border-bottom-color: var(--feat-violet-soft);
  color: var(--feat-ink);
}

.feat-lede__jump:hover::after,
.feat-lede__jump:focus-visible::after {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .feat-lede__jump,
  .feat-lede__jump::after {
    transition: none;
  }

  .feat-lede__jump:hover::after,
  .feat-lede__jump:focus-visible::after {
    transform: none;
  }
}