/* ------------------------------------------------------------------------
 * ccx-bgterm.css
 *
 * One thing only: where the canvas of assets/ccx-bgterm.js sits inside the
 * block it belongs to. Everything the field looks like is drawn in the script,
 * because a stylesheet cannot draw a glyph.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * THE LAYER
 *
 * The canvas is put in as the first child of the block and has to end up
 * behind everything the block holds, without any element inside the block
 * knowing about it. A negative z-index does that: it is painted after the
 * background of the block and before its content, so the heading and the two
 * buttons keep the order they have today and neither of them needs a rule.
 *
 * For that layer to stay inside the block, the block has to be a stacking
 * context of its own. Otherwise a layer at -1 escapes upwards and lands next
 * to the two fixed canvases of inc/ccx-stickybg.php, which sit at -1 and -2 on
 * the body, and the field would end up behind the whole page instead of behind
 * one section. isolation is the quietest way to say it: unlike a z-index of
 * its own it changes neither the order the block itself is painted in nor its
 * layout.
 *
 * position: relative is written out although the block already carries it, so
 * the rule holds for whatever block this module is pointed at next.
 * -------------------------------------------------------------------- */
.ccte-host {
  position: relative;
  isolation: isolate;
}

/* width and height are both written out on purpose. A canvas is a replaced
 * element with a size of its own, 300 by 150, and it keeps that size when it
 * is only given edges to sit against: left and right alone leave a 300 pixel
 * canvas in a 1440 pixel block, and a height left to itself ignores top and
 * bottom entirely and takes the two to one of the default bitmap. */
.ccte-host > .ccte-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------
 * THE CLOSING BLOCK OF /it-security/
 *
 * The canvas is exactly the box of that block, which is the one arrangement
 * that needs no clipping: an absolutely positioned layer cannot leave its own
 * edges, and the block itself does not clip. Nothing here reaches into the
 * gap above the section, where the questions and answers end.
 *
 * Both ends of the field are taken back inside the drawing rather than here.
 * An alpha ramp over the rows lets the glyphs come up out of the ground under
 * the headline and settle back into it at the foot of the page; a css mask on
 * the element could not do that without also masking whatever the block holds.
 *
 * The class is written by the script and is here so a second mounting place
 * with a different box can be given one without touching the rule above.
 * -------------------------------------------------------------------- */
.ccte-host.ccte-cta > .ccte-canvas {
  top: 0;
  height: 100%;
}

/* Under 1025 pixels the script does not build the field at all, so there is
 * nothing to hide. This rule stands for the one case the script cannot catch
 * on its own: a wide window that is dragged narrow after the canvas was built.
 * measure() gives up the grid in the same breath, this takes the picture off
 * the screen. */
@media (max-width: 1024px) {
  .ccte-host > .ccte-canvas { display: none; }
}

/* On paper a page of half lit dots behind a call to action is a grey haze that
 * says nothing and costs ink. */
@media print {
  .ccte-host > .ccte-canvas { display: none; }
}