/* ==========================================================================
   INTERNAL TOOLS, ONE CAROUSEL INSTEAD OF THREE STACKED BLOCKS

   The section used to run three blocks under each other, each one text on
   one side and a screen shot on the other. Together they filled 1866px of
   page and the eye met the same shape three times.

   The carousel keeps every word of those blocks and changes the order:
   the screen shot moves to the top and spans the whole slide, the text
   follows underneath, and the big numeral finally has a place of its own
   at the right hand edge of the text zone. One slide is in view at a time,
   the same as the carousel above the references.

   The look of a slide is written here and not into the three library
   templates, so a change reaches all three at once and the templates stay
   plain content. Only the frame of the card, its fill and its radius come
   from the container settings, which keeps the card editable.
   ========================================================================== */

/* --------------------------------------------------------------------
 * THE TRACK
 *
 * Two things the carousel widget needs before a card can live in it.
 *
 * Height: every slide is stretched to the tallest one, so the lower edge
 * of the band stays put while the slides change. Without it the shortest
 * slide leaves a gap under itself, the same correction the carousel above
 * the references carries.
 *
 * Room around the card: the swiper clips at its own box, and the rim glow
 * of a card reaches 18px past its edge. The slide therefore keeps 20px of
 * air above and below, and the card is 40px narrower than the slide, so
 * the glow has its room on all four sides and nothing is cut off. The
 * padding is vertical only: a horizontal one would change the width the
 * carousel calculates its slides from.
 * -------------------------------------------------------------------- */
.cctool-slider .swiper-wrapper { align-items: stretch; }

.cctool-slider .swiper-slide {
  height: auto;
  overflow: visible;
  padding: 20px 0;
}

.cctool-slider .elementor-testimonial,
.cctool-slider .elementor-testimonial__content,
.cctool-slider .elementor-testimonial__text,
.cctool-slider .elementor-testimonial__text > .elementor,
.cctool-slider .elementor-testimonial__text > .elementor > .e-con { height: 100%; }

/* The widget keeps a slot for a name and a picture under every slide. The
 * slides here are full blocks and fill that role themselves. */
.cctool-slider .elementor-testimonial__footer { display: none; }

/* The widget was built for a quote and centres what it holds, in italics.
 * A slide here is a block of copy with a headline, a paragraph and a bullet
 * grid, so both are reset once at the top of the chain. */
.cctool-slider .elementor-testimonial,
.cctool-slider .elementor-testimonial__content,
.cctool-slider .elementor-testimonial__text {
  text-align: left;
  font-style: normal;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------
 * THE CARD
 * -------------------------------------------------------------------- */
.cctool-slide {
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  --gc-pad: 18px;
}

/* --------------------------------------------------------------------
 * THE PICTURE BAND
 *
 * The shots are 1534 by 1206, a screen with a phone in front of it. Shown
 * whole across a card of 1336 they would stand over a thousand pixels
 * tall and push the text off the screen, so the band shows the upper part
 * and lets the rest run out under a soft edge. The gradient mask is the
 * point of it: a hard cut through a phone reads as a mistake, a picture
 * that dissolves into the card reads as intended, and because it is a
 * mask and not a colour it needs no second value when the card fill
 * changes.
 *
 * The radius is 19px against the 20px of the card: the band sits inside
 * the hair line of the card, so it follows the inner curve.
 * -------------------------------------------------------------------- */
/* Slides are stretched to the tallest one, and the extra height has to
 * land somewhere. It goes into the text zone, where it reads as air under
 * the bullet grid; in the picture band it would leave the shot floating
 * over an empty field. */
.cctool-shot {
  position: relative;
  overflow: hidden;
  border-radius: 19px 19px 0 0;
  flex: 0 0 auto;
}

.cctool-body { flex: 1 1 auto; }

.cctool-shot .cctool-shotimg img {
  display: block;
  width: 100%;
  aspect-ratio: 3.15;
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0) 100%);
}

/* --------------------------------------------------------------------
 * THE TEXT ZONE AND THE NUMERAL
 *
 * The complaint that started this round: on the old blocks the numeral
 * stood at the left edge of the text column, which is exactly where the
 * label, the headline and the first bullet lines are, and at five percent
 * white almost nothing of it survived behind them.
 *
 * The fix is the one the reference blocks already use: the numeral moves
 * to the right hand edge, and the text is capped so it never reaches into
 * that zone. The cap is 250px against a numeral that is about 140px wide
 * at this size, which leaves the glyph free on both sides and keeps it
 * well inside the card, so the clipping edge of the slide never touches
 * it. Vertically it sits in the middle of the zone, where the card is
 * calmest.
 * -------------------------------------------------------------------- */
.cctool-body {
  position: relative;
  --cctool-num: 250px;
  --cctool-cap: 250px;
  --cctool-numright: 44px;
}

.cctool-body > .elementor-element { position: relative; z-index: 1; }

/* Doubled class name on purpose: the stylesheet Elementor writes for a
 * library template arrives with the template, which is later than this
 * file, and it carries a full width of its own for every widget. */
.cctool-slide .cctool-body > .elementor-element.elementor-element {
  max-width: calc(100% - var(--cctool-cap));
}

.cctool-body::after {
  position: absolute;
  right: var(--cctool-numright);
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: var(--cctool-num);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The one is the narrowest glyph of the three and reads lighter at the
 * same value, the same correction the reference blocks make. */
.cctool-s1 .cctool-body::after { content: "1"; color: rgba(255, 255, 255, 0.065); }
.cctool-s2 .cctool-body::after { content: "2"; }
.cctool-s3 .cctool-body::after { content: "3"; }

/* --------------------------------------------------------------------
 * TEXT PARTS
 * -------------------------------------------------------------------- */
.cctool-badgerow { flex-wrap: wrap; width: 100%; }

/* Label on the left, badge on the right edge of the text column, the same
 * header line the blocks before had. The value is written out here and not
 * left to the page stylesheet, which still carries it from those blocks:
 * once those lines are cleared out the line keeps its shape.
 *
 * On a phone the row wraps and the badge gets a line of its own, where a
 * push to the right would leave it hanging off the label above it. */
.cctool-slide .cctool-badgerow > .ccref-badge {
  margin-left: auto;
  flex: 0 0 auto;
}

.cctool-slide .cctool-label .elementor-heading-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .01em;
  color: #FFFFFFCC;
}

.cctool-slide .ccref-badge .elementor-heading-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Headline and bullet lines run in the same pale silver gradient the whole
 * section uses. It sat on the single widgets before and lives here now, so
 * all three slides share one value. */
.cctool-slide .cctool-h .elementor-heading-title,
.cctool-slide .cctool-bultext .elementor-heading-title {
  background: linear-gradient(98deg, rgba(255, 255, 255, 0.90) 30.29%, rgba(255, 255, 255, 0.76) 91.69%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------
 * BULLETS
 *
 * Two columns, because the text is capped for the numeral and four lines
 * under each other would make the card taller than a screen. The tile in
 * front of a line keeps the class name of the reference blocks, so the
 * warm wash and the small rim reach it from the shared effect layer.
 * -------------------------------------------------------------------- */
.cctool-bul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 30px;
}

.cctool-bulrow { align-items: center; }

.cctool-bultext { flex: 1 1 auto; min-width: 0; }

.cctool-slide .ccref-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cctool-slide .ccref-ico > .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.cctool-slide .ccref-ico img {
  display: block;
  width: 28px;
  height: 28px;
}

/* --------------------------------------------------------------------
 * ARROWS
 *
 * Same two pictures, same 80px, same corner as the service carousel, the
 * carousel above the references and the two project carousels, so the
 * page has one gesture for "there is more here".
 *
 * top and transform are set together on purpose. The widget centres its
 * arrows on the band with top:50% and a half height shift; leaving the
 * shift in place while giving top a value of its own is what makes the
 * arrows on the other carousels land 40px higher than their numbers say.
 * Written out, the button stands 16px clear above the card and, at 1235px
 * and further right, well beside the centred headline of the section,
 * which ends at 1190px.
 *
 * From 1024px down the headline grows into the full width of the section
 * and the corner above the card is no longer free, so the arrows move
 * under the slide and keep the right hand side.
 * -------------------------------------------------------------------- */
.cctool-slider .elementor-swiper-button {
  margin-top: 0 !important;
  transform: none !important;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.cctool-slider .elementor-swiper-button-prev {
  background-image: url('/wp-content/uploads/2024/09/back-arrow.png');
  left: auto !important;
  right: 111px !important;
}

.cctool-slider .elementor-swiper-button-next {
  background-image: url('/wp-content/uploads/2024/09/next-arrow.png');
  left: auto !important;
  right: 10px !important;
}

.cctool-slider .elementor-swiper-button svg { display: none !important; }

@media (min-width: 1025px) {
  .cctool-slider .elementor-swiper-button {
    top: -96px !important;
    bottom: auto !important;
  }
}

@media (max-width: 1024px) {
  .cctool-slider .elementor-swiper-button {
    top: auto !important;
    bottom: -96px !important;
  }
}

/* --------------------------------------------------------------------
 * SMALLER SCREENS
 * -------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 1025px) {
  .cctool-body { --cctool-num: 200px; --cctool-cap: 200px; --cctool-numright: 36px; }
}

@media (max-width: 1024px) {
  .cctool-shot .cctool-shotimg img { aspect-ratio: 2.3; }
  .cctool-body { --cctool-num: 160px; --cctool-cap: 170px; --cctool-numright: 24px; }
  .cctool-bul { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* The card fills the screen here, and a numeral in the corner would sit on
 * the badge or on a bullet line whatever value it gets. The idea cards and
 * the security steps of the same page drop theirs at this width for the
 * same reason.
 *
 * The picture is shown whole instead of cropped: at this width a band
 * would be a strip of a few dozen pixels and the screen in it unreadable.
 */
@media (max-width: 767px) {
  .cctool-slide { width: calc(100% - 24px); --gc-pad: 10px; }
  .cctool-slider .swiper-slide { padding: 12px 0; }
  /* The whole shot, at the ratio of the file. Never aspect-ratio:auto:
   * WordPress marks these pictures with sizes="auto" and gives them a
   * placeholder box of 3000 by 1500 until they are decoded, and a picture
   * without a ratio of its own keeps that box. */
  .cctool-shot .cctool-shotimg img {
    aspect-ratio: 1534 / 1206;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cctool-body { --cctool-cap: 0px; }
  .cctool-slide .cctool-body::after { content: none; }
  .cctool-slide .cctool-badgerow > .ccref-badge { margin-left: 0; }
  .cctool-slide .ccref-badge .elementor-heading-title { white-space: normal; }
  .cctool-slide .ccref-ico { width: 40px; height: 40px; border-radius: 11px; }
  .cctool-slide .ccref-ico img { width: 26px; height: 26px; }
  .cctool-slider .elementor-swiper-button {
    width: 48px;
    height: 48px;
    bottom: -76px !important;
  }
  .cctool-slider .elementor-swiper-button-prev { right: 70px !important; }
}