/* ====================================================================
   CartCraft FX: the written parts of /services/ (round 19)

   Five shapes, all of them small, all of them markup that sits inside a
   heading widget because the page builder has no control for them:

     1. the reference line under a section intro
     2. one chip inside that line
     3. the ghost pill that leads to a landing page
     4. the boxed note that names where a service stops
     5. the marker class of the cards this round added

   Nothing here positions a section or a card. Sections and cards carry
   their own container settings, copied from the ones that were already on
   the page, so the two rows of a section keep meeting at the same edges.
   ==================================================================== */


/* --------------------------------------------------------------------
   1. The reference line

   The heading widget renders one block element with the whole line in it.
   Turning that block into a wrapping flex row is what lets a label and
   three or four chips sit next to each other and break where the column
   ends, instead of running off the side on a phone.

   The line is centred because it stands under a section intro that is
   centred, and it keeps a hair of distance from the paragraph above so it
   reads as a footnote to it and not as a second paragraph.
   -------------------------------------------------------------------- */
.ccsvc-refs .elementor-heading-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

/* The words in front of the chips. Quieter than the chips themselves, so
   the eye lands on the names and not on the introduction to them. */
.ccsvc-reflabel {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #8A90A2;
  margin-right: 2px;
}


/* --------------------------------------------------------------------
   2. One chip

   The same pill the security and the process tools pages carry, down to
   the six values: a barely raised fill, a hairline, 999px corners and
   type at 13 over 18. A chip never breaks into two lines; the longest one
   on this page is "Psychiatrie Grabbe" at about 150px against a column
   that offers 316px even on a phone.

   The class is named twice in every rule that touches colour. Elementor
   colours links inside a heading at three classes and one element, and
   naming the class twice puts these rules above that without an
   exclamation mark and without relying on the order of the stylesheets.
   -------------------------------------------------------------------- */
.ccsvc-refs .elementor-heading-title .ccsvc-chip.ccsvc-chip {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #C9D0E0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease,
              background-color 0.18s ease, box-shadow 0.18s ease;
}

/* A chip that leads somewhere warms up under the pointer. The ring is
   drawn outside the border so the pill itself does not appear to grow,
   which would nudge the chips beside it. */
.ccsvc-refs .elementor-heading-title a.ccsvc-chip.ccsvc-chip:hover,
.ccsvc-refs .elementor-heading-title a.ccsvc-chip.ccsvc-chip:focus-visible {
  color: #FFFFFF;
  border-color: rgba(255, 142, 43, 0.58);
  background: rgba(255, 142, 43, 0.10);
  box-shadow: 0 0 0 3px rgba(255, 142, 43, 0.07);
}

/* A chip that names something without linking to it. There is no target
   behind "This website", and a pill that looks clickable and is not is
   worse than one that stays quiet. */
.ccsvc-refs .elementor-heading-title span.ccsvc-chip.ccsvc-chip {
  color: #A7A9B1;
  border-color: rgba(255, 255, 255, 0.09);
}


/* --------------------------------------------------------------------
   3. The ghost pill to a landing page

   A container with an anchor tag around it, so the whole shape is the
   link. It sizes to its label rather than to the column, and it centres
   itself inside the intro block above the cards.

   The chevron is two borders of an empty box turned by 45 degrees. A
   glyph would have been simpler and would also have put a character in
   the page text that has no business being read out.

   The class is named twice in the rules that set width and padding.
   Elementor writes the container defaults on the element class of the
   container, which counts one class, and a tie there would be decided by
   the order the stylesheets load in.
   -------------------------------------------------------------------- */
.ccsvc-cta.ccsvc-cta {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 142, 43, 0.42);
  background: rgba(216, 226, 255, 0.05);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

/* A widget inside a container is laid out at the full width of that
   container. Left at that the label filled the pill on its own and pushed
   the chevron onto a second line, which is what it did on the first
   build. The label is told to take the width of its words instead. */
.ccsvc-cta.ccsvc-cta > .elementor-widget {
  width: auto;
  flex: 0 0 auto;
}

.ccsvc-cta .elementor-heading-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #F3F5FA;
  margin: 0;
  white-space: nowrap;
}

.ccsvc-cta::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-top: 1.5px solid #FF8E2B;
  border-right: 1.5px solid #FF8E2B;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.ccsvc-cta:hover,
.ccsvc-cta:focus-visible {
  border-color: rgba(255, 142, 43, 0.82);
  background: rgba(255, 142, 43, 0.10);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 142, 43, 0.14);
}

.ccsvc-cta:hover::after,
.ccsvc-cta:focus-visible::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* Elementor gives a container an ::before of its own with the border and
   the height of the container written into it. Left alone that draws a
   second pill a little off the first one, the same defect the idea cards
   and the pillars of the home page had. Reset here rather than waited
   for. */
.ccsvc-cta::before {
  border: 0;
  height: auto;
  width: auto;
  bottom: auto;
  left: auto;
}


/* --------------------------------------------------------------------
   4. The boxed note

   Where a service stops belongs on the page, and it belongs after the
   cards rather than inside one: a card that lists what we do not do
   would read as an offer at a glance. The box is quieter than a card, no
   fill worth the name and a hairline instead of a frame.
   -------------------------------------------------------------------- */
.ccsvc-note.ccsvc-note {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(216, 226, 255, 0.03);
  padding: 22px 28px;
}

.ccsvc-note .elementor-heading-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #9BA1B0;
  margin: 0;
}

.ccsvc-notelabel {
  color: #E3E3E6;
  font-weight: 700;
  margin-right: 6px;
}

/* Same reset as on the pill, for the same reason. */
.ccsvc-note::before {
  border: 0;
  height: auto;
  width: auto;
  bottom: auto;
  left: auto;
}


/* --------------------------------------------------------------------
   5. Cards added in this round

   The marker only. Every value that draws the card sits in its container
   settings, copied from the cards that stood next to it before, and the
   pointer glow is handed out at runtime by the module of the cards
   package. Kept here as an empty declaration on purpose, so the class is
   documented in one place even while it carries nothing of its own.
   -------------------------------------------------------------------- */
.ccsvc-card {
  position: relative;
}


/* --------------------------------------------------------------------
   Narrow windows

   Below the tablet break the intro block sits closer to the cards, so
   the reference line loses a little of its air and the note loses a
   little of its padding. Chips keep their size: they are already at the
   smallest step this design uses anywhere.
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccsvc-note.ccsvc-note {
    padding: 20px 22px;
  }
}

@media (max-width: 767px) {
  .ccsvc-refs .elementor-heading-title {
    gap: 7px;
  }
  .ccsvc-reflabel {
    width: 100%;
    text-align: center;
    margin-right: 0;
  }
  .ccsvc-cta.ccsvc-cta {
    padding: 12px 22px;
  }
  .ccsvc-cta .elementor-heading-title {
    font-size: 14px;
  }
  .ccsvc-note.ccsvc-note {
    padding: 18px 18px;
  }
  .ccsvc-note .elementor-heading-title {
    font-size: 13px;
    line-height: 21px;
  }
}