/* Background pattern "Kanavat": hairlines that fan out in every section and
   merge into one accent dot at its bottom edge (many traffic sources -> one
   correctly channelled link). Brief: docs/mockups/kanavoi-tausta/TAUSTAKUVIO.md.
   Pure CSS + inline SVG from templates/partials/kanava.html; no JavaScript. */

/* A page section that carries the pattern. Vertical padding only (the .wrap
   inside handles the sides) and never margins, so the chain of lines is
   unbroken from one section to the next. */
.band {
  position: relative;
  overflow: hidden;
  padding: 112px 0 96px;
}
.band--hero { padding: 56px 0 88px; }

/* Content sits above the lines. */
.band > :not(.kanava) { position: relative; }

/* The node where this section's lines merge, 12 px above its bottom edge.
   The next section's lines start right under it. */
.band::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The lines, stretched to the section height. Strokes stay hairlines because
   every path has vector-effect="non-scaling-stroke". */
.kanava {
  position: absolute;
  inset: 0 0 12px 0;
  width: 100%;
  height: calc(100% - 12px);
  pointer-events: none;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
}

/* Hero: fade the lines in below the headline so the header and H1 stay clean. */
.kanava--hero {
  -webkit-mask-image: linear-gradient(to bottom, transparent 110px, #000 360px);
          mask-image: linear-gradient(to bottom, transparent 110px, #000 360px);
}

/* Phones: 6 lines instead of 12, slightly thinner, shorter fade. */
@media (max-width: 640px) {
  .band { padding: 80px 0 64px; }
  .band--hero { padding: 32px 0 64px; }
  .kanava { stroke-width: 1.25; }
  .kanava .inner { display: none; }
  .kanava--hero {
    -webkit-mask-image: linear-gradient(to bottom, transparent 90px, #000 300px);
            mask-image: linear-gradient(to bottom, transparent 90px, #000 300px);
  }
}

/* Escape hatch and print. */
html[data-pattern="off"] .kanava,
html[data-pattern="off"] .band::after { display: none; }
@media print { .kanava, .band::after { display: none; } }