/* ------------------------------------------------------------------------
 * ccx-kpi26.css
 *
 * The band of three figures under the opening block of both home pages.
 *
 * ONE THING HAPPENS HERE, AND IT USED TO BE THREE
 *
 * The three figures are pulled apart by twenty four pixels, and the hair line
 * that separates them is moved into the middle of that gap. Nothing else. The
 * tiles carry no frame, no fill, no lit edge and no pane of glass; they are
 * three blocks of type standing on the page ground, which is what they were
 * before this module existed and what they are again.
 *
 * WHY THE REST WENT
 *
 * The round before this one gave the tiles the anatomy of a card - a hair
 * line frame, a two percent fill, a lit top edge - and from 1025 pixels up a
 * real pane of glass with a displacement filter along its rim. Every piece of
 * it worked and was measured. Read on the page, though, the three figures
 * stopped being three statements and became three highlighted boxes, louder
 * than the reference blocks and the idea cards further down the same column.
 * Lars asked for the transparent reading back, and for the rim glow - which
 * comes from inc/ccx-home26.php and never went anywhere - to stay the only
 * thing that ever paints an edge here.
 *
 * The glass could not simply be turned down. Its own measurement from that
 * round says why: with the diagonal sheen taken off, a resting tile still
 * stood 5.8 levels out of 255 above the ground beside it, evenly across the
 * whole surface. A backdrop filter that brightens and saturates is a lighter
 * rectangle whether or not anything is painted on top of it, and a lighter
 * rectangle is exactly what was asked to go. So the pane is gone rather than
 * dimmed, and with it the script that drew a filter per tile.
 *
 * WHAT THE SPACING COSTS THE TEXT: NOTHING
 *
 * The gap is taken out of the tiles, not added to the band, so the band keeps
 * its thousand pixels. A tile therefore loses sixteen pixels of width, and
 * gets them back by carrying twelve pixels of side padding instead of the
 * twenty the page gives it. The text column inside a tile comes out at 293.3
 * pixels at 1440, which is to the tenth of a pixel the width it had before
 * any of this - so no label anywhere wraps differently than it did then.
 *
 * WEIGHTS
 *
 * Every rule that has to outweigh the page stylesheet says so through its own
 * weight and not through the order of the two files. The page writes the band
 * and the tiles through three classes (page, elementor-element, element id)
 * and the divider through five plus a pseudo element, so the counts below are
 * one step above whichever of those a rule has to settle.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * 1. THE THREE FIGURES STAND APART
 *
 * They touched: the section was built with a gap of zero and the hair line
 * against the left edge of the second and the third tile as the only
 * separation. Twenty four pixels is not a taste decision - it is the figure
 * every other row of blocks on this page uses, measured on the rendered page:
 * the three Why CartCraft pillars and the three idea cards both stand at 24,
 * and the band now reads in the same rhythm as the rest of the column.
 *
 * Written on Elementor's own custom properties rather than on gap and width,
 * because that is where the container reads them from and it keeps the two
 * declarations in one place instead of fighting the shorthand.
 * -------------------------------------------------------------------- */
.cckpi-band.cckpi-band.cckpi-band.cckpi-band {
  --cckpi-gap: 24px;
  --gap: var(--cckpi-gap) var(--cckpi-gap);
  --row-gap: var(--cckpi-gap);
  --column-gap: var(--cckpi-gap);
}

@media (min-width: 768px) {
  .cckpi-band .cckpi-item.cckpi-item.cckpi-item.cckpi-item {
    /* equal thirds of what is left once the two gaps are taken out */
    --width: auto;
    flex: 1 1 0;
    /* Twelve instead of the twenty the page gives, which is the sixteen
     * pixels of width a third of the 48 pixel gap costs, given back to the
     * text. The vertical padding is the page's own six: it was raised to
     * sixteen while there was a frame that needed room inside it, and with
     * the frame gone that room is a hole under the label. */
    --padding-top: 6px;
    --padding-bottom: 6px;
    --padding-left: 12px;
    --padding-right: 12px;
  }
}

/* On a phone the band is a column. A row gap of 24 between stacked tiles
 * reads as a hole; 16 holds them together as one band while still keeping
 * them apart. The tiles keep the padding the page gives them there. */
@media (max-width: 767px) {
  .cckpi-band.cckpi-band.cckpi-band.cckpi-band {
    --cckpi-gap: 16px;
  }
}

/* --------------------------------------------------------------------
 * 2. THE DIVIDER MOVES INTO THE GAP
 *
 * The page draws a vertical hair line against the left edge of the second and
 * the third tile, and below 768 pixels assets/ccx-home26.css lays the same
 * line on its side along their top edge. With the tiles touching, that edge
 * was the seam between two blocks and the line sat in the middle of it, the
 * same twenty pixels of air on either side.
 *
 * With twenty four pixels between the tiles the same line is no longer in the
 * middle of anything: it stands hard against the text of the tile to its
 * right and thirty six pixels from the text of the one to its left. So it is
 * moved half a gap outwards, which puts it back on the centre line between
 * two blocks and gives it the same distance to both again - twenty four
 * pixels, once the twelve of the gap and the twelve of the padding are added.
 *
 * Written against the gap variable rather than against a number, so the two
 * cannot drift apart: change the gap above and the line follows it.
 *
 * Five classes and a pseudo element in the page rule, so six and a pseudo
 * element here.
 * -------------------------------------------------------------------- */
@media (min-width: 768px) {
  .cckpi-band.cckpi-band
    .cckpi-item.cckpi-item.cckpi-item.cckpi-item + .cckpi-item::before {
    left: calc(var(--cckpi-gap, 24px) / -2);
  }
}

@media (max-width: 767px) {
  .cckpi-band.cckpi-band
    .cckpi-item.cckpi-item.cckpi-item.cckpi-item + .cckpi-item::before {
    top: calc(var(--cckpi-gap, 16px) / -2);
  }
}

/* rv:20260831a cache refresh */