/* styles/sections/faq-split.css
 * "What teams ask before a pilot" (frames: FAQ): the heading and "Talk to us" in a 405px rail
 * beside the shared accordion (accordion.css), first item open. 390 stacks them. The section
 * ends on the dither edge into the closing band. Heading: h1 role on 390, 48px on 1440 and
 * 1920 (h2 on 1440). */
@layer sections {
  .faq-split {
    padding-block: var(--section-xl);
    box-shadow: inset 0 1px 0 var(--line);
  }

  .faq-split__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .faq-split__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-14);
    padding-top: var(--space-24);
  }

  .faq-split__heading {
    margin: 0;
    font-size: var(--t-h1-size);
    line-height: var(--t-h1-lh);
    letter-spacing: var(--t-h1-ls);
    text-wrap: wrap;
  }

  .faq-split__list .accordion__panel p {
    margin: 0;
  }

  /* 390: the frame sets two-line questions on 26px lines */
  .faq-split__list .accordion__heading {
    line-height: 26px;
  }

  @media (width >= 900px) {
    /* Rail and list share a row; with less than about 950px of content the list wraps under */
    .faq-split__grid {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: var(--space-32);
    }


    .faq-split__list {
      flex: 1 1 520px;
      min-width: 0;
    }

    .faq-split__head {
      flex: 0 1 405px;
      gap: var(--space-24);
      padding-top: 0;
    }

    .faq-split__list .accordion__heading {
      line-height: 1.5;
    }

    .faq-split__heading {
      font-size: 48px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
  }

  @media (width >= 1680px) {
    .faq-split {
      --container-max: 1280px;
    }

    /* The 1920 frame keeps the accordion's 17px answer */
    .faq-split__list .accordion__panel {
      font-size: 17px;
    }
  }
}

/* Pencil sets every line on a whole pixel (88 x 0.95 = 84, 18 x 1.6 = 29, 17 x 1.6 = 27);
   these rounded line heights keep the page's text boxes the frames' size. */
@layer sections {
  .faq-split__heading {
    line-height: round(nearest, 1.05em, 1px);
  }

  .faq-split__list .accordion__panel {
    line-height: round(nearest, 1.6em, 1px);
  }

  /* The shared closing CTA, tuned through its custom properties */
  .closing-cta {
    --closing-heading-lh: round(nearest, 0.95em, 1px);
    --closing-deck-lh: round(nearest, 1.6em, 1px);
  }

  @media (width >= 900px) {
    .closing-cta {
      --closing-deck-lh: round(nearest, 1.5em, 1px);
    }
  }

  @media (width >= 1680px) {
    .closing-cta {
      --closing-heading-lh: round(nearest, 0.98em, 1px);
      --closing-deck-lh: round(nearest, 1.4em, 1px);
    }
  }
}