/* Real estate flyer and open house flyer pages. Built on channels/styles.css
   (hero, section headings, workflow, details) and listing-posts.css (the
   lp-example lightbox); this file adds the flyer stack, the gallery, the
   true-to-scale paper comparison, the checklist and the matching set. */
.fl-page figure { margin:0; }
.fl-page .lp-example { display:block; position:relative; }
.fl-page .lp-example img { display:block; width:100%; height:auto; }

/* Hero: three flyers fanned on a soft panel, the front one upright. */
.fl-hero-stack { display:grid; grid-template-areas:"stack"; place-items:center; padding:42px 20px 34px; border:1px solid #e3dcec; border-radius:24px; background:#eee9f6; overflow:hidden; }
.fl-hero-stack figure { grid-area:stack; width:46%; }
.fl-hero-stack figure:nth-child(1) { transform:translateX(-52%) rotate(-7deg) scale(.88); }
.fl-hero-stack figure:nth-child(2) { transform:translateX(52%) rotate(7deg) scale(.88); }
.fl-hero-stack figure:nth-child(3) { width:52%; position:relative; z-index:1; }
.fl-hero-stack .lp-example { border-radius:4px; overflow:hidden; box-shadow:0 22px 40px -22px #29213799, 0 2px 6px #2921371f; }
.fl-hero-stack figure:nth-child(3) .lp-example { box-shadow:0 30px 55px -24px #292137b3, 0 2px 8px #29213726; }
.fl-facts { display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:26px 0 0; }
.fl-facts li { display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; }
.fl-facts .icon { width:18px; height:18px; color:var(--purple); }

/* Gallery: four flyers a row on a tinted tile, two on phones. */
.fl-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 24px; }
.fl-gallery-art { padding:16px; border-radius:14px; background:#eae5f0; }
.fl-gallery-art .lp-example { border-radius:3px; overflow:hidden; box-shadow:0 14px 26px -20px #29213799; }
.fl-gallery figcaption { margin-top:14px; font-size:1rem; line-height:1.4; }
.fl-gallery figcaption strong { display:block; font-weight:600; }
.fl-gallery figcaption span { display:block; margin-top:3px; color:var(--muted); font-size:.8125rem; }
.fl-gallery-section { background:#f7f6fa; }

/* What fills in: the groups of fields, three columns. */
.fl-fill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.fl-fill-grid article { border-top:1px solid #dfd7eb; padding-top:25px; }
.fl-fill-grid article>.icon { color:var(--purple); width:26px; height:26px; margin-bottom:18px; }
.fl-fill-grid h3 { margin-bottom:13px; font-size:1.3rem; }
.fl-fill-grid p { font-size:1rem; line-height:1.8; }
.fl-fill-grid ul { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.fl-fill-grid li { font-size:.8125rem; line-height:1; padding:8px 11px; border:1px solid #e3dcec; border-radius:999px; background:#fff; }

/* Paper: A4 and US Letter drawn at their true relative size, bottoms aligned. */
.fl-paper { display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.fl-paper>div>p:not(.eyebrow) { margin-top:22px; font-size:1.0625rem; line-height:1.8; }
.fl-paper ul { list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:14px; }
.fl-paper li { display:flex; gap:12px; font-size:1rem; line-height:1.7; }
.fl-paper li>.icon { flex:none; width:19px; height:19px; margin-top:4px; color:var(--purple); }
.fl-paper-pair { display:flex; justify-content:center; align-items:flex-end; gap:5%; padding:34px 28px 26px; border-radius:24px; background:#eee9f6; }
.fl-paper-pair figure:first-child { width:41%; }
.fl-paper-pair figure:last-child { width:42.2%; }
.fl-paper-pair .lp-example { border-radius:2px; overflow:hidden; box-shadow:0 18px 32px -22px #29213799; }
.fl-paper-pair figcaption { margin-top:14px; font-size:.875rem; line-height:1.45; }
.fl-paper-pair figcaption strong { display:block; font-weight:600; }
.fl-paper-pair figcaption span { color:var(--muted); font-size:.8125rem; }

/* What to put on a flyer: a numbered checklist in two columns. */
.fl-checklist { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 50px; counter-reset:fl; }
.fl-checklist li { counter-increment:fl; display:grid; grid-template-columns:40px 1fr; align-content:start; gap:4px 14px; padding-top:22px; border-top:1px solid var(--line); }
.fl-checklist li::before { content:counter(fl,decimal-leading-zero); grid-row:span 2; color:var(--purple); font-size:.875rem; font-weight:600; padding-top:4px; }
.fl-checklist h3 { font-size:1.2rem; }
.fl-checklist p { font-size:1rem; line-height:1.75; }

/* The matching set: the flyer next to the post (and story) from one listing. */
.fl-match { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; }
.fl-match>div>p:not(.eyebrow) { margin:22px 0 26px; font-size:1.0625rem; line-height:1.8; }
.fl-match-set { display:flex; justify-content:center; align-items:flex-end; gap:4%; padding:34px 26px 26px; border-radius:24px; background:#f1ede6; }
.fl-match-set figure { flex:1 1 0; min-width:0; }
.fl-match-set .lp-example { border-radius:3px; overflow:hidden; box-shadow:0 18px 32px -22px #29213799; }
.fl-match-set figcaption { margin-top:12px; font-size:.8125rem; line-height:1.45; }
.fl-match-set figcaption strong { display:block; font-weight:600; font-size:.875rem; }
.fl-match-set figcaption span { color:var(--muted); }
.fl-match-pair figure { flex:none; width:42%; }

@media(max-width:1100px) { .fl-gallery { gap:24px 18px; } .fl-gallery-art { padding:12px; } .fl-paper,.fl-match { gap:40px; } }
@media(max-width:850px) {
  .fl-hero-stack { max-width:640px; margin:auto; }
  .fl-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fl-fill-grid { grid-template-columns:1fr; gap:26px; }
  .fl-paper,.fl-match { grid-template-columns:1fr; }
  .fl-checklist { gap:22px 30px; }
}
@media(max-width:600px) {
  .fl-hero-stack { padding:30px 12px 24px; border-radius:17px; }
  .fl-gallery { gap:22px 12px; }
  .fl-gallery-art { padding:9px; border-radius:10px; }
  .fl-gallery figcaption { font-size:.9375rem; }
  .fl-paper-pair,.fl-match-set { padding:24px 14px 18px; border-radius:17px; }
  .fl-checklist { grid-template-columns:1fr; }
}