/* Public hero background presets — server twin of frontend/src/lib/headerBg.ts
   HEADER_BGS. PARITY CONTRACT: these gradients must match the preview's values
   exactly (guarded by tests/test_hero_bg_parity.py + the visual twin). The dark
   darkening overlay is supplied by the page's .nl-header element, NEVER here. */
.nl-hero--confetti{
  background-image:
    radial-gradient(circle at 8% 18%, oklch(0.85 0.18 85) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 18% 34%, oklch(0.72 0.2 25) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 14%, oklch(0.7 0.2 320) 0 3px, transparent 4px),
    radial-gradient(circle at 36% 46%, oklch(0.78 0.18 160) 0 4px, transparent 5px),
    radial-gradient(circle at 44% 22%, oklch(0.8 0.16 200) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 52% 38%, oklch(0.85 0.18 85) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 16%, oklch(0.72 0.2 25) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 44%, oklch(0.7 0.2 320) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 76% 24%, oklch(0.78 0.18 160) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 40%, oklch(0.8 0.16 200) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 20%, oklch(0.85 0.18 85) 0 4px, transparent 5px),
    radial-gradient(circle at 14% 58%, oklch(0.72 0.2 25) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 40% 64%, oklch(0.7 0.2 320) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 62%, oklch(0.78 0.18 160) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 60%, oklch(0.8 0.16 200) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 74%, oklch(0.85 0.18 85) 0 3.5px, transparent 4.5px),
    linear-gradient(135deg, oklch(0.56 0.13 250), oklch(0.66 0.13 285));
}
.nl-hero--fireworks{
  background-image:
    conic-gradient(from 0deg at 26% 34%, transparent 0deg, rgba(255,220,120,.7) 5deg, transparent 11deg, transparent 30deg, rgba(255,220,120,.6) 35deg, transparent 41deg, transparent 60deg, rgba(255,220,120,.6) 65deg, transparent 71deg, transparent 90deg, rgba(255,220,120,.6) 95deg, transparent 101deg, transparent 120deg, rgba(255,220,120,.6) 125deg, transparent 131deg, transparent 150deg, rgba(255,220,120,.6) 155deg, transparent 161deg, transparent 180deg, rgba(255,220,120,.6) 185deg, transparent 191deg, transparent 210deg, rgba(255,220,120,.6) 215deg, transparent 221deg, transparent 240deg, rgba(255,220,120,.6) 245deg, transparent 251deg, transparent 270deg, rgba(255,220,120,.6) 275deg, transparent 281deg, transparent 300deg, rgba(255,220,120,.6) 305deg, transparent 311deg, transparent 330deg, rgba(255,220,120,.6) 335deg, transparent 341deg),
    conic-gradient(from 18deg at 74% 58%, transparent 0deg, rgba(130,205,255,.6) 5deg, transparent 11deg, transparent 45deg, rgba(130,205,255,.6) 50deg, transparent 56deg, transparent 90deg, rgba(130,205,255,.6) 95deg, transparent 101deg, transparent 135deg, rgba(130,205,255,.6) 140deg, transparent 146deg, transparent 180deg, rgba(130,205,255,.6) 185deg, transparent 191deg, transparent 225deg, rgba(130,205,255,.6) 230deg, transparent 236deg, transparent 270deg, rgba(130,205,255,.6) 275deg, transparent 281deg, transparent 315deg, rgba(130,205,255,.6) 320deg, transparent 326deg),
    radial-gradient(circle at 26% 34%, rgba(255,235,170,1) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 58%, rgba(190,230,255,1) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 12% 64%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    linear-gradient(160deg, oklch(0.24 0.07 270), oklch(0.34 0.1 290));
}
.nl-hero--sunburst{
  background-image:
    repeating-conic-gradient(from 0deg at 50% 134%, rgba(255,255,255,.17) 0deg 6deg, transparent 6deg 16deg),
    linear-gradient(160deg, oklch(0.64 0.16 48), oklch(0.7 0.15 22));
}
.nl-hero--sky{
  background-image:
    radial-gradient(closest-side at 22% 70%, rgba(255,255,255,.95) 0 58%, transparent),
    radial-gradient(closest-side at 33% 66%, rgba(255,255,255,.9) 0 52%, transparent),
    radial-gradient(closest-side at 28% 80%, rgba(255,255,255,.85) 0 70%, transparent),
    radial-gradient(closest-side at 78% 32%, rgba(255,255,255,.8) 0 52%, transparent),
    radial-gradient(closest-side at 87% 30%, rgba(255,255,255,.72) 0 46%, transparent),
    radial-gradient(circle at 64% 16%, rgba(255,250,225,.85) 0 12px, transparent 16px),
    linear-gradient(180deg, oklch(0.64 0.13 235), oklch(0.8 0.08 218));
}
.nl-hero--polka{
  background-image:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.32) 0 6px, transparent 7px),
    linear-gradient(135deg, oklch(0.58 0.16 2), oklch(0.66 0.15 32));
}
.nl-hero--candy{
  background-image:
    repeating-linear-gradient(48deg, rgba(255,255,255,.22) 0 13px, transparent 13px 30px),
    linear-gradient(135deg, oklch(0.62 0.16 350), oklch(0.72 0.15 32));
}
.nl-hero--plaid{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 11px, transparent 11px 36px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 11px, transparent 11px 36px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 18px),
    linear-gradient(135deg, oklch(0.48 0.12 152), oklch(0.57 0.12 176));
}
.nl-hero--pinwheel{
  background-image:
    repeating-conic-gradient(from 0deg at 50% 26%, rgba(255,255,255,.16) 0deg 11deg, transparent 11deg 22deg),
    linear-gradient(135deg, oklch(0.58 0.14 252), oklch(0.66 0.14 300));
}
.nl-hero--chevron{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(135deg, oklch(0.54 0.14 30), oklch(0.64 0.14 60));
}
.nl-hero--topo{
  background-image:
    repeating-radial-gradient(circle at 28% 130%, transparent 0 15px, rgba(255,255,255,.14) 15px 17px, transparent 17px 33px),
    repeating-radial-gradient(circle at 86% 8%, transparent 0 13px, rgba(255,255,255,.1) 13px 15px, transparent 15px 30px),
    linear-gradient(135deg, oklch(0.46 0.1 200), oklch(0.56 0.1 232));
}
.nl-hero--blueprint{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6.5px),
    linear-gradient(135deg, oklch(0.4 0.09 250), oklch(0.5 0.1 238));
}
/* Brand-tinted variants — same overlay TEXTURE as the matching preset above, but
   the base gradient is built from var(--banner-art-color, var(--brand-primary))
   (2026-07-31 fix-wave: a dedicated art-only var, header-scoped, so a picked
   banner color can never repaint the title-card pills, which read
   --brand-primary directly and must stay the school color -- see
   newsletter.css's .nl-header--card rules). --brand-primary itself (set on
   <body>) is the fallback: no picked color -> the -brand art still tints from
   the school's own brand color, unchanged. PARITY CONTRACT: the base gradient
   formula + the overlay + the layer order must match heroBgStyle("<key>-brand",
   color) in frontend/src/lib/headerBg.ts (the client twin bakes the resolved
   color directly, so it needs no equivalent var). The dark overlay is still
   the page's job. */
.nl-hero--confetti-brand{
  background-image:
    radial-gradient(circle at 8% 18%, oklch(0.85 0.18 85) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 18% 34%, oklch(0.72 0.2 25) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 14%, oklch(0.7 0.2 320) 0 3px, transparent 4px),
    radial-gradient(circle at 36% 46%, oklch(0.78 0.18 160) 0 4px, transparent 5px),
    radial-gradient(circle at 44% 22%, oklch(0.8 0.16 200) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 52% 38%, oklch(0.85 0.18 85) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 16%, oklch(0.72 0.2 25) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 44%, oklch(0.7 0.2 320) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 76% 24%, oklch(0.78 0.18 160) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 40%, oklch(0.8 0.16 200) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 20%, oklch(0.85 0.18 85) 0 4px, transparent 5px),
    radial-gradient(circle at 14% 58%, oklch(0.72 0.2 25) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 40% 64%, oklch(0.7 0.2 320) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 62%, oklch(0.78 0.18 160) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 60%, oklch(0.8 0.16 200) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 74%, oklch(0.85 0.18 85) 0 3.5px, transparent 4.5px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--fireworks-brand{
  background-image:
    conic-gradient(from 0deg at 26% 34%, transparent 0deg, rgba(255,220,120,.7) 5deg, transparent 11deg, transparent 30deg, rgba(255,220,120,.6) 35deg, transparent 41deg, transparent 60deg, rgba(255,220,120,.6) 65deg, transparent 71deg, transparent 90deg, rgba(255,220,120,.6) 95deg, transparent 101deg, transparent 120deg, rgba(255,220,120,.6) 125deg, transparent 131deg, transparent 150deg, rgba(255,220,120,.6) 155deg, transparent 161deg, transparent 180deg, rgba(255,220,120,.6) 185deg, transparent 191deg, transparent 210deg, rgba(255,220,120,.6) 215deg, transparent 221deg, transparent 240deg, rgba(255,220,120,.6) 245deg, transparent 251deg, transparent 270deg, rgba(255,220,120,.6) 275deg, transparent 281deg, transparent 300deg, rgba(255,220,120,.6) 305deg, transparent 311deg, transparent 330deg, rgba(255,220,120,.6) 335deg, transparent 341deg),
    conic-gradient(from 18deg at 74% 58%, transparent 0deg, rgba(130,205,255,.6) 5deg, transparent 11deg, transparent 45deg, rgba(130,205,255,.6) 50deg, transparent 56deg, transparent 90deg, rgba(130,205,255,.6) 95deg, transparent 101deg, transparent 135deg, rgba(130,205,255,.6) 140deg, transparent 146deg, transparent 180deg, rgba(130,205,255,.6) 185deg, transparent 191deg, transparent 225deg, rgba(130,205,255,.6) 230deg, transparent 236deg, transparent 270deg, rgba(130,205,255,.6) 275deg, transparent 281deg, transparent 315deg, rgba(130,205,255,.6) 320deg, transparent 326deg),
    radial-gradient(circle at 26% 34%, rgba(255,235,170,1) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 58%, rgba(190,230,255,1) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 12% 64%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--sunburst-brand{
  background-image:
    repeating-conic-gradient(from 0deg at 50% 134%, rgba(255,255,255,.17) 0deg 6deg, transparent 6deg 16deg),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--sky-brand{
  background-image:
    radial-gradient(closest-side at 22% 70%, rgba(255,255,255,.95) 0 58%, transparent),
    radial-gradient(closest-side at 33% 66%, rgba(255,255,255,.9) 0 52%, transparent),
    radial-gradient(closest-side at 28% 80%, rgba(255,255,255,.85) 0 70%, transparent),
    radial-gradient(closest-side at 78% 32%, rgba(255,255,255,.8) 0 52%, transparent),
    radial-gradient(closest-side at 87% 30%, rgba(255,255,255,.72) 0 46%, transparent),
    radial-gradient(circle at 64% 16%, rgba(255,250,225,.85) 0 12px, transparent 16px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--polka-brand{
  background-image:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.32) 0 6px, transparent 7px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--candy-brand{
  background-image:
    repeating-linear-gradient(48deg, rgba(255,255,255,.22) 0 13px, transparent 13px 30px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--plaid-brand{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 11px, transparent 11px 36px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 11px, transparent 11px 36px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 18px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--pinwheel-brand{
  background-image:
    repeating-conic-gradient(from 0deg at 50% 26%, rgba(255,255,255,.16) 0deg 11deg, transparent 11deg 22deg),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--chevron-brand{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--topo-brand{
  background-image:
    repeating-radial-gradient(circle at 28% 130%, transparent 0 15px, rgba(255,255,255,.14) 15px 17px, transparent 17px 33px),
    repeating-radial-gradient(circle at 86% 8%, transparent 0 13px, rgba(255,255,255,.1) 13px 15px, transparent 15px 30px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero--blueprint-brand{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6.5px),
    linear-gradient(135deg, var(--banner-art-color, var(--brand-primary)), color-mix(in srgb, var(--banner-art-color, var(--brand-primary)) 60%, #fff));
}
.nl-hero[class*="nl-hero--"]{background-size:cover;background-position:center}
/* Tiled patterns need an explicit per-layer size/position. Double-class selectors
   match the generic rule's specificity and win on source order (they come later).
   These mirror the size/position fields in headerBg.ts. */
.nl-hero.nl-hero--polka,
.nl-hero.nl-hero--polka-brand{
  background-size: 44px 44px, cover;
  background-position: center, center;
}
.nl-hero.nl-hero--chevron,
.nl-hero.nl-hero--chevron-brand{
  background-size: 26px 26px, 26px 26px, 26px 26px, 26px 26px, cover;
  background-position: -13px 0, -13px 0, 0 0, 0 0, center;
}