/* ------------------------------------------------------------------------
 * ccx-bgbeams.css
 *
 * One thing only: where the canvas of assets/ccx-bgbeams.js sits inside the
 * block it belongs to. Everything the curtain looks like is drawn in the
 * script.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * 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. That order is the point
 * here, because these blocks carry a background picture of their own and
 * the light is meant to pass across it, not to sit under it.
 *
 * For the layer to stay inside the block, the block has to be a stacking
 * context of its own, otherwise a layer at -1 escapes upwards. isolation
 * is the quietest way to say it: unlike a z-index of its own it changes
 * neither the order the block is painted in nor its layout. The only thing
 * a new stacking context does change is how a blend mode inside it reaches
 * out, and the one blend mode in these pages was checked on the live site
 * first: it sits inside an svg icon, and an svg is a stacking context
 * already, so nothing about it can see this one.
 * -------------------------------------------------------------------- */
.ccbb-host {
  position: relative;
  isolation: isolate;
}

/* --------------------------------------------------------------------
 * THE BOX
 *
 * Top, left and width only. The height is deliberately not settled here:
 * the block is the whole article, more than three thousand pixels of it,
 * and the canvas is meant to cover the opening. Where the opening ends
 * differs on all three pages, because one headline runs to three lines,
 * so the script measures it on the page and writes the height onto the
 * element. The value below is what stands until it does, and what stands
 * if the element the script measures against is ever taken out.
 *
 * It is written out rather than left to the two insets for a second
 * reason as well: a canvas is a replaced element with an intrinsic size of
 * 300 by 150. Given height: auto it ignores the insets, takes the width
 * and applies that two to one ratio, and then looks stable ever after
 * because the bitmap the script sets keeps the same ratio.
 * -------------------------------------------------------------------- */
.ccbb-host > .ccbb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 660px;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* Under 1025 pixels the script does not build the curtain 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 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) {
  .ccbb-host > .ccbb-canvas { display: none; }
}

/* On paper a curtain of light is a grey wash that says nothing. */
@media print {
  .ccbb-host > .ccbb-canvas { display: none; }
}