/* This page wears the theme's .lx family (views/themes/app-theme/theme.css); below, only its own layout. */

/* 1 · Sunday: one column as wide as the screen (the 320 px phone may not widen it); on a desktop the copy,
   then the phone with Lucrux standing at its right before it jumps in */
[data-cmp="parents"] .lx-sun__in, [data-cmp="parents"].lx-sun__in { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  [data-cmp="parents"] .lx-sun__in, [data-cmp="parents"].lx-sun__in { grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr); }
  [data-cmp="parents"] .lx-sun .lx-phone-fig, [data-cmp="parents"].lx-sun .lx-phone-fig { justify-self: start; }
  [data-cmp="parents"] .lx-sun .lx-bot-spot--phone, [data-cmp="parents"].lx-sun .lx-bot-spot--phone { left: calc(100% + 26px); top: 120px; }}

/* 3 · the board: the four proofs, one line each — beside the board on a desktop, under it on a phone */
[data-cmp="parents"] .par-proofs, [data-cmp="parents"].par-proofs { display: grid; gap: 12px; padding-top: 18px; }
[data-cmp="parents"] .par-proofs li, [data-cmp="parents"].par-proofs li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; }
[data-cmp="parents"] .par-proofs .ic, [data-cmp="parents"].par-proofs .ic { flex: none; margin-top: 3px; font-size: 16px; color: var(--lx-s-gold-ink); }
@media (min-width: 1024px) {
  [data-cmp="parents"] .par-boardrow, [data-cmp="parents"].par-boardrow { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; }
  [data-cmp="parents"] .par-boardrow .lx-board-stage, [data-cmp="parents"].par-boardrow .lx-board-stage { max-width: none; margin: 24px 0 0; }
  [data-cmp="parents"] .par-proofs, [data-cmp="parents"].par-proofs { gap: 18px; margin-top: 24px; padding-top: 0; padding-right: 20px; }
  [data-cmp="parents"] .par-proofs li, [data-cmp="parents"].par-proofs li { font-size: 15px; }
  [data-cmp="parents"] .par-boardrow + .lx-board-foot, [data-cmp="parents"].par-boardrow + .lx-board-foot { padding-left: 254px; padding-right: 252px; }}
/* beside the proofs the board is shorter than Lucrux below 1280 px: the gap above it holds his cap and his line */
@media (min-width: 1024px) and (max-width: 1279px) { [data-cmp="parents"] .par-boardrow .lx-board-stage, [data-cmp="parents"].par-boardrow .lx-board-stage { margin-top: 110px; }}
@media (min-width: 1280px) {
  [data-cmp="parents"] .par-boardrow, [data-cmp="parents"].par-boardrow { grid-template-columns: minmax(0, 1fr) 250px; gap: 44px; }
  [data-cmp="parents"] .par-proofs li, [data-cmp="parents"].par-proofs li { font-size: 16px; }
  [data-cmp="parents"] .par-boardrow + .lx-board-foot, [data-cmp="parents"].par-boardrow + .lx-board-foot { padding-right: 294px; }}

/* 4 · the tutor: Lucrux stands at the card's top-right corner, clear of the scene dots — stacked below 1280 px */
@media (min-width: 1024px) { [data-cmp="parents"] .lx-tutor__in .lx-bot-spot--card, [data-cmp="parents"].lx-tutor__in .lx-bot-spot--card { top: 0; bottom: auto; }}
@media (min-width: 1024px) and (max-width: 1279px) {
  [data-cmp="parents"] .lx-tutor__in, [data-cmp="parents"].lx-tutor__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  [data-cmp="parents"] .lx-tutor__in .lx-pcard, [data-cmp="parents"].lx-tutor__in .lx-pcard { justify-self: start; }}
@media (min-width: 1280px) {
  [data-cmp="parents"] .lx-tutor__in, [data-cmp="parents"].lx-tutor__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); padding-right: calc(var(--lx-gutter) + 194px); }}

/* 5 · questions: Lucrux stands by the heading on a desktop */
[data-cmp="parents"] .par-spot--faq, [data-cmp="parents"].par-spot--faq { left: calc(100% + 30px); bottom: 0; width: 110px; height: 132px; }
@media (min-width: 1024px) {
  [data-cmp="parents"] .par-faqhead, [data-cmp="parents"].par-faqhead { position: relative; width: fit-content; max-width: min(900px, calc(100% - 180px)); }}