/* ics-band (2026-11-04): reusable torn-band modifier .ics-band-torn for full-width yellow sections.
   Yellow + halftone dots live on section::before, masked by two 140px torn pieces (top, bottom) cut from the
   Figma hero silhouette (band-torn.svg, fill #FFEF6B) and a solid middle layer. The mask sits only on this
   background layer; section content is untouched. section::after is never touched (tear-guard last-child spacer and footer tear use it).
   Dots are phase-aligned to the document grid (6px cell, layers 0 and 3px) via --ics-band-dy set by ics-band.php. */
html body section.ics-band-torn {
  position: relative !important;
  isolation: isolate !important;
}
html body section.ics-band-torn > img[id$="-bg"] {
  display: none !important;
}
html body section.ics-band-torn::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 100% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-color: #FFEF6B !important;
  background-image: radial-gradient(circle at center, rgba(40, 30, 10, 0.10) 0 0.9px, transparent 1.2px), radial-gradient(circle at center, rgba(40, 30, 10, 0.10) 0 0.9px, transparent 1.2px) !important;
  background-size: 6px 6px !important;
  background-position: 0 var(--ics-band-dy, 0px), 3px calc(3px + var(--ics-band-dy, 0px)) !important;
  background-repeat: repeat !important;
  -webkit-mask-image: url("/wp-content/uploads/ics-hero/band-torn-top.svg"), url("/wp-content/uploads/ics-hero/band-torn-bottom.svg"), linear-gradient(#000, #000) !important;
  mask-image: url("/wp-content/uploads/ics-hero/band-torn-top.svg"), url("/wp-content/uploads/ics-hero/band-torn-bottom.svg"), linear-gradient(#000, #000) !important;
  -webkit-mask-size: 100% 140px, 100% 140px, 100% calc(100% - 280px) !important;
  mask-size: 100% 140px, 100% 140px, 100% calc(100% - 280px) !important;
  -webkit-mask-position: 0 0, 0 100%, 0 140px !important;
  mask-position: 0 0, 0 100%, 0 140px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* ics-band (2026-11-04): the section's own yellow (ics-bg-yellow) moves to the masked ::before layer so the torn edge is the only yellow silhouette. */
html body section.ics-band-torn {
  background-color: transparent !important;
  background-image: none !important;
}
/* .ics-band-torn--bottom: top edge hidden under the fixed header (hero at top 0), only the torn BOTTOM edge is painted. */
html body section.ics-band-torn--bottom::before {
  -webkit-mask-image: url("/wp-content/uploads/ics-hero/band-torn-bottom.svg"), linear-gradient(#000, #000) !important;
  mask-image: url("/wp-content/uploads/ics-hero/band-torn-bottom.svg"), linear-gradient(#000, #000) !important;
  -webkit-mask-size: 100% 140px, 100% calc(100% - 140px) !important;
  mask-size: 100% 140px, 100% calc(100% - 140px) !important;
  -webkit-mask-position: 0 100%, 0 0 !important;
  mask-position: 0 100%, 0 0 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}