/* ====================================================================
 * The process timeline of the Why CartCraft section (.ccwhy-tl)
 *
 * The block itself is the site wide component, assets/ccx-timeline.css.
 * Only the values this section needs differently are here.
 *
 * The section is built on two widths: the three glass pillars above the
 * block set 1140px, the heading pair above them 760px. The strip that used
 * to stand here set 1000px, and the timeline keeps that number, so the
 * block reads as the narrower, quieter element between the pillars and the
 * call to action rather than as a third width nobody chose.
 *
 * At 1000px each half is 500px, a step gives up 62px of it to the tile and
 * the air beside it, and 430px of text is left, which is exactly the width
 * the component asks for. Nothing has to be squeezed.
 * ==================================================================== */

.ccwhy-tl {
  --cctl-max: 1000px;

  /* Five steps instead of the three the strip had, so the air between two
   * of them comes down a little: at the component's 64px the block would
   * stand taller than the three pillars above it and take the section over.
   * 56px keeps the five reading as one group. */
  --cctl-step: 56px;
}

/* The section sets align-items: center on the column the block sits in.
 * A flex item takes its own width from the width property, and the
 * component writes 100% there, so the two agree; this line only makes sure
 * the block cannot be pulled narrower than its content by a later change
 * to the section.
 *
 * ----------------------------------------------------------------- */
.ccwhy-tl.ccwhy-tl {
  width: 100%;
}

/* 20px of air on each side once the screen is narrower than the block. At
 * 1024 the strip that used to stand here left 12px, which is close enough
 * to the edge that the tiles of a timeline touch it.
 *
 * Taken off the width and not 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 pads its own sides with 16px,
 * and a second helping would take 40px off a text column that is already
 * the narrowest it gets. */
@media (min-width: 768px) {
  .ccwhy-tl.ccwhy-tl {
    max-width: min(1000px, calc(100% - 40px));
  }
}

/* One column below 901px, the shape the component takes on its own. The
 * section adds 16px of side padding on phones, which is where the tiles
 * then stand, so nothing else is needed here. */
@media (max-width: 900px) {
  .ccwhy-tl {
    --cctl-step: 30px;
  }
}