/* jdtheme26 — "WATERCOLOUR PAPER" IRREGULAR EDGE (2026-09-29)
   Operator spec: wiki sources/2026-09-29-paper-edge-and-member-block/operator-spec-paper-edge.txt

   WHAT IT IS
     Any element gets a flat, single-colour "paper" background whose edge runs in calm, wide waves (about 2–3 per side, no fine jitter) with four
     unequal rounded corners. The edge is crisp. Text, pictures and child elements are NOT touched: the wavy shape is the element's ::before layer,
     and only that layer is filtered.

   THE THREE NUMBERS (they live in the inline SVG printed by functions.php → jdtheme26_paper_edge_filters(), one <filter> per size)
     scale          how DEEP the waves are (px the edge moves in / out)          bigger = stronger curves
     baseFrequency  how MANY waves there are:  waves per side ≈ element width × baseFrequency      rule of thumb  baseFrequency ≈ 2.5 ÷ width(px)
     seed           the SHAPE — another seed gives another outline with the same character
     (stdDeviation 0.5 only takes the pixel steps off the edge; it does not blur it)

   FILTERS / CLASSES
     .paper-edge                      big block, about 1000–1200px wide      #paper-edge-lg      (0.002 / scale 44)
                                      on phones (≤767px, about 340–400px)    #paper-edge-mobile  (0.007 / scale 30)
     .paper-edge.paper-edge--sm       small card, about 300px                #paper-edge-sm      (0.008 / scale 34)   phones keep sm
     .paper-edge.paper-edge--md       panel, about 500–640px                 #paper-edge-md      (0.0043 / scale 38)  phones use mobile
                                      ↑ added 2026-09-29 for the home page's two-column member panels, by the spec's own rule
                                        (a width far from the three above gets its OWN filter + modifier; the existing ones are not changed)

     .paper-band                      FULL-WIDTH band: only its upper and lower edge are wavy (about 3 waves per edge on a 1440–1920px desktop);
                                      its left / right ends and corners lie outside the window       #paper-band         (0.0016 0.004 / scale 60)
                                      on phones (≤767px)                                             #paper-band-mobile  (0.006 0.01 / scale 36)
                                      baseFrequency has TWO values here: horizontal, vertical. The small horizontal one makes the few, wide waves
                                      along the width — to change the number of waves, change ONLY that one.
                                      Put the content in  <div class="paper-band__inner">  (max 1200px, centred).
     .paper-band.paper-band--b        the same band with ANOTHER outline (seed 17, about 4 flatter waves)      #paper-band-b / #paper-band-b-mobile
                                      — use it when two bands follow each other, so that their edges do not look copied

   USE
     <section class="paper-band"><div class="paper-band__inner"> … </div></section>
     <section class="paper-edge"> … </section>
     <div class="paper-edge paper-edge--sm"> … </div>
     another colour:   style="--paper-color:#fdf2f0"    (or set --paper-color in your own class)

   RULES
     • the filter belongs on ::before only — never on the element or its children
     • padding must be larger than half of the filter's scale (lg 22px, md 19px, sm 17px, mobile 15px), or content reaches past the waves
     • no ancestor may have overflow:hidden — the parts of the edge that are pushed outwards would be cut off
       (WPBakery "stretch row" rows have it: add  overflow: visible  for that row)
     • .paper-band cuts its own left / right overflow (overflow-x: clip) — do NOT use overflow: hidden on it (the waves above and below would be cut)
       and do not add overflow-x: hidden to body / html for it; keep a vertical margin of at least half the scale (30px desktop, 18px phones)
       around a band, so that its waves do not run into the neighbouring blocks
     • a browser that cannot apply the filter shows a plain rounded panel (a straight band) in the same colour */

.paper-edge {
  --paper-color: #fbf5e9;
  --paper-radius: 48px 40px 44px 52px / 40px 48px 52px 44px;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-width: 1200px;
  margin-inline: auto;
  padding: 56px 64px;
  background: transparent;
}
.paper-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--paper-radius);
  background: var(--paper-color);
  filter: url(#paper-edge-lg);
}

/* small element, about 300px wide */
.paper-edge.paper-edge--sm {
  --paper-radius: 32px 26px 30px 36px / 26px 32px 36px 30px;
  max-width: none;
  padding: 24px;
}
.paper-edge.paper-edge--sm::before { filter: url(#paper-edge-sm); }

/* panel, about 500–640px wide (half of a two-column row) */
.paper-edge.paper-edge--md {
  --paper-radius: 40px 34px 38px 44px / 34px 40px 44px 38px;
  max-width: none;
  padding: 36px 40px;
}
.paper-edge.paper-edge--md::before { filter: url(#paper-edge-md); }

/* ---- full-width band ---- */
.paper-band {
  --paper-color: #fbf5e9;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100vw;                              /* full window width, also from inside a container with a max-width */
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-block: 30px;                        /* ≥ scale ÷ 2 */
  padding: 96px 0;
  background: transparent;
  overflow-x: clip;                          /* cuts the left / right ends only; the waves above and below stay */
}
.paper-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;                               /* the distorted ends and corners lie outside the window */
  right: -80px;
  z-index: -1;
  pointer-events: none;
  border-radius: 0;
  background: var(--paper-color);
  filter: url(#paper-band);
}
.paper-band__inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;                      /* the site container's own gutter, so the content lines up with the rest of the page */
}

.paper-band.paper-band--b::before { filter: url(#paper-band-b); }

@media (max-width: 767px) {
  .paper-band { margin-block: 18px; padding: 64px 20px; }
  .paper-band::before { filter: url(#paper-band-mobile); }
  .paper-band.paper-band--b::before { filter: url(#paper-band-b-mobile); }
  .paper-band__inner { padding-inline: 0; }
  .paper-edge { padding: 40px 28px; }
  .paper-edge::before { filter: url(#paper-edge-mobile); }
  .paper-edge.paper-edge--sm { padding: 24px; }
  .paper-edge.paper-edge--sm::before { filter: url(#paper-edge-sm); }
  .paper-edge.paper-edge--md { padding: 32px 22px; }
  .paper-edge.paper-edge--md::before { filter: url(#paper-edge-mobile); }
}
@media print {
  .paper-edge::before, .paper-band::before { filter: none !important; }
}

/* ---- test page (/paper-edge-test/) ---- */
.paper-edge-test { max-width: 1200px; margin-inline: auto; }
.paper-edge-test > h2 { margin: 48px 0 8px; font-size: 20px; }
.paper-edge-test > p { margin: 0 0 28px; color: var(--jd-ink-700, #5c4a3c); }
.paper-edge-test__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 48px 40px; max-width: 1000px; margin: 0 auto 40px; }
.paper-edge-test__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-bottom: 40px; }
.paper-edge-test h3 { margin: 0 0 8px; font-size: 18px; }
.paper-edge-test .paper-edge p, .paper-edge-test .paper-band p { margin: 0 0 14px; }
.paper-edge-test .paper-edge p:last-child, .paper-edge-test .paper-band p:last-child { margin-bottom: 0; }
.paper-edge-test img { display: block; width: 120px; height: auto; margin-bottom: 12px; }
@media (max-width: 767px) { .paper-edge-test__two { grid-template-columns: minmax(0, 1fr); } }