/* The Personal injury law firms page (src\pages\personal-injury.mjs): only what its parts add to the components. */

/* the header: the attorney on her call at the photo's right, the notifications stacking in glass over the plant on
   its left, hanging a little past its edge on a computer */
.pi-media { overflow: visible; }
.pi-media > img { --pos: 4% 30%; border-radius: inherit; }
.pi-media > .pi-wyw { position: absolute; inset: 0; z-index: 2; } /* over the scene's own position: relative */
.pi-media > .stop { top: 12px; right: 12px; bottom: auto; z-index: 3; }

/* the moment: the photo mirrored, so the caller sits right of the words; every call answered in glass at the photo's
   right edge, clear of his face (about 55 to 70% across, low: 42 to 89% down); under 1100 px it stands over the photo's
   top, above his face. Its card grows with each call, so its box keeps the height of its tallest. */
.moment .chap__media > img { transform: scaleX(-1); }
.moment__card { position: relative; z-index: 2; }
.moment__scene { position: relative; min-height: 290px; }
.moment__card > .stop { top: -46px; right: 0; bottom: auto; }
@media (min-width: 1100px) {
  .moment__card { position: absolute; right: max(24px, calc(50vw - 690px)); top: 50%; width: clamp(300px, 25vw, 360px); transform: translateY(-50%); }
  .moment__card > .stop { top: auto; bottom: -46px; }
}
@media (max-width: 1099px) {
  .moment { display: flex; flex-direction: column; }
  .moment > .wrap { order: 1; }
  .moment__card { order: 2; width: min(400px, calc(100% - 2 * var(--gutter, 20px))); margin: 16px auto -306px; }
  .moment .chap__stage { order: 3; align-self: stretch; width: 100%; aspect-ratio: auto; height: 760px; }
  .moment .chap__media > img { --pos: 40% 50%; }
  .moment__card > .stop { top: auto; bottom: -46px; right: 0; }
}

/* the signature on the designed ground: three firms, one caller, the first to answer booked; the solutions behind it
   under the cards */
.first-part__head { max-width: 720px; margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; }
.first-part__stage { position: relative; max-width: 1160px; margin: 0 auto; }
.first-part__scene { position: relative; height: clamp(400px, 38vw, 460px); }
.first-part__stage > .stop { position: absolute; right: 0; top: -46px; }
@media (max-width: 759px) { .first-part__scene { height: 770px; } .first-part__head { margin-bottom: 60px; } } /* the stop icon sits in the gap, clear of the line */
.first-part__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; margin: clamp(24px, 3vw, 36px) auto 0; padding: 0; list-style: none; }
.first-part__links a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.first-part__links a:hover, .first-part__links a:focus-visible { border-color: var(--c-accent); box-shadow: var(--shadow-m); transform: translateY(-1px); }
.first-part__links b { font: 700 17px/1.3 var(--font-display); }
.first-part__links span { grid-column: 1; font: 400 15px/1.4 var(--font-ui); color: var(--c-ink-soft); }
.first-part__links svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--c-brand-text, var(--c-brand)); }
@media (max-width: 899px) { .first-part__links { grid-template-columns: minmax(0, 1fr); } }