/* ====================================================================
 * The process timeline of the IT security page (.ccsectl)
 *
 * The block is the site wide component, assets/ccx-timeline.css. What is
 * here are the values a step of THIS page needs, and a step here carries
 * four bullet lines under its sentence, which is more than the component
 * was measured against.
 * ==================================================================== */

.ccsectl {
  /* The section is boxed at 1416px and the grids of the page set the full
   * width of that box. The timeline stays inside it: at 1120px a step gets
   * 498px and four bullet lines of two rows each fit without the block
   * growing taller than the screen. */
  --cctl-max: 1120px;
  --cctl-text: 470px;

  /* A step is roughly twice as tall as one on the apps page, so the air
   * between two of them can come down without the steps running together. */
  --cctl-step: 52px;
}

.ccsectl.ccsectl {
  width: 100%;
}

/* The section pads its sides only on phones, so between 768 and 1160px the
 * block would run into both edges of the screen and the tiles would sit
 * half off it. 20px of air on each side, taken off the block rather than
 * added as padding: a padding on the block would move its padding box away
 * from its content box, and the line stands at 50 per cent of the first
 * while a step measures 50 per cent of the second. The two would drift
 * apart by exactly the padding.
 *
 * From 768px up only, below that the section already pads with 16px. */
@media (min-width: 768px) {
  .ccsectl.ccsectl {
    max-width: min(1120px, calc(100% - 40px));
  }
}

/* --------------------------------------------------------------------
 * READING DIRECTION
 *
 * The component sets the text of a step on the left of the line flush
 * right, which is the calm choice for a title and one sentence: the
 * straight edge faces the line and holds the two halves together.
 *
 * A bullet list cannot do that. Its markers sit at the start of a line
 * (padding-left: 19px, the dot at left: 2px, both from the page
 * stylesheet), so a right set list would leave every dot floating a
 * different distance from its words. So every step of this page reads
 * left to right, on both sides of the line.
 *
 * The block still hangs on the line: align-self and align-items stay as
 * the component set them, so the box of a step on the left still ends at
 * the line, only the words inside it start at the left edge of that box.
 * ----------------------------------------------------------------- */
.ccsectl .cctl-item:nth-of-type(odd) {
  text-align: left;
}

/* --------------------------------------------------------------------
 * THE BULLET LINES
 *
 * The list is a heading widget with html in it, so it is capped at
 * --cctl-text like every other widget in a step. It carries a top margin
 * of its own from the card it came out of, which is kept: it is the one
 * gap in a step that has to be bigger than the rest, because it separates
 * a sentence from a list rather than two lines of the same kind.
 *
 * Below 901px the component turns the block upright and a step gets the
 * full width of the section, which is more than a bullet line wants to
 * run; the same 470px cap is kept there so the lines stay readable.
 * ----------------------------------------------------------------- */
@media (max-width: 900px) {
  .ccsectl {
    --cctl-text: 100%;
    --cctl-step: 34px;
  }
}