/* Encore marketing site, KIT2: the one FAQ design, site-wide (Addendum 6 and 7).
   Josh: "this FAQ section is just beautiful. The spaciousness, the color treatment, the negative space" (home), and
   "Let's have it be a gradient. Let's have that be a consistent thing." Every page's FAQ uses this pattern.
   The look: a sky wash that starts on the column's left edge and runs off the right of the window, the heading on
   the left, the white question card on the right, and a lot of air. The accordion itself (.faq-card, .qa) and its
   behaviour ([data-faq]) stay in site.css / site.js.
   Link it after site.css:  <link rel="stylesheet" href="assets/faq.css">  (subfolder pages: ../assets/faq.css)
   Markup (KIT-APP.md, P7):
   <section class="pat-faq" id="faq">
     <div class="pat-faq-stage">
       <div class="pat-faq-in">
         <div class="pat-faq-head"><h2 class="h2">What people ask before they start.</h2></div>
         <div class="faq-card" data-faq data-open-first> …the .qa rows… </div>
       </div>
     </div>
   </section>
   Optional: a .small line under the heading (a link to more help). Add .pat-faq--l to run the wash off the LEFT. */

.pat-faq { padding-top: var(--sec); }
.pat-faq-stage {
  position: relative; overflow: clip;
  margin-left: max(var(--gut), calc((100% - var(--col)) / 2));
  border-radius: 32px 0 0 32px;
  background: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 45%, #EAF1FA 100%);
  padding: max(72px, calc(var(--vw) * 7.778)) 0 max(72px, calc(var(--vw) * 7.778)) max(32px, calc(var(--vw) * 5.556));
}
.pat-faq-in {
  width: min(calc(100% - 24px), calc(var(--col) - 80px));
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 80px; align-items: start;
}
.pat-faq-head .h2 { max-width: 340px; text-wrap: balance; }
.pat-faq-head .small { margin-top: 18px; max-width: 300px; }
.pat-faq .faq-card { min-width: 0; }

/* Mirror: the wash starts on the column's right edge and runs off the left. */
.pat-faq--l .pat-faq-stage {
  margin-left: 0; margin-right: max(var(--gut), calc((100% - var(--col)) / 2));
  border-radius: 0 32px 32px 0;
  padding: max(72px, calc(var(--vw) * 7.778)) max(32px, calc(var(--vw) * 5.556)) max(72px, calc(var(--vw) * 7.778)) 0;
}
.pat-faq--l .pat-faq-in { margin-left: auto; }

@media (max-width: 1180px) {
  .pat-faq-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pat-faq-head .h2, .pat-faq-head .small { max-width: 560px; }
}
@media (max-width: 600px) {
  .pat-faq-stage { margin-left: var(--gut); border-radius: 24px 0 0 24px; padding: 56px 16px 16px 20px; }
  .pat-faq--l .pat-faq-stage { margin-right: var(--gut); border-radius: 0 24px 24px 0; padding: 56px 20px 16px 16px; }
  .pat-faq-in { width: 100%; gap: 32px; }
}

/* R6b: the head column grows with the type, so a FAQ heading stays at three lines or fewer on big monitors
   (it was four at 1920 and 3440 when the column stayed 340px while the type grew). */
@media (min-width: 1181px) {
  .pat-faq-in { grid-template-columns: max(340px, calc(var(--vw) * 24.4)) minmax(0, 1fr); }
  .pat-faq-head .h2 { max-width: max(340px, calc(var(--vw) * 24.4)); }
}