/* clx-svc-card — archetype service card.
   Composes existing classes (.svc-card / .svc-card-icon / .svc-card-title /
   .svc-card-desc / .svc-card-link / .clx-eb-stat) and adds only the new
   subcomponents this design needs: chips, stats grid, outcome callout. */

/* Root sits on top of existing .svc-card chrome (white bg + border via
   site-wide), but normalize flex direction + spacing so the new
   sub-blocks stack predictably.

   height:100% lets the card fill its grid cell (cells in same row
   already stretch to the tallest one). Combined with margin-top:auto
   on the foot below, every card's VIEW MORE CTA aligns to the bottom
   of the row regardless of how much content sits above. */
.clx-svc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Normalize child margins inherited from old .svc-card-* rules in
   site-wide.css so the card matches the spacing rhythm in the
   reference design exactly:
     icon  → header     24px (icon margin-bottom)
     header→ desc       14px (header margin-bottom)
     desc  → divider 1  20px (divider margin-top)
     div1  → label      20px (divider margin-bottom)
     label → chips      10px (label margin-bottom)
     chips → divider 2  20px
     div2  → stats      20px
     stats → outcome    pushed via margin-top:auto so outcome aligns
                        to the bottom of the card regardless of body
                        length (the design's vertical-baseline rule)
     outcome→ foot      20px + 1px border + 20px padding-top
*/
.clx-svc-card .svc-card-icon { margin-bottom: 24px; }
.clx-svc-card .svc-card-header { margin-bottom: 14px; }
.clx-svc-card .svc-card-title { margin: 0; }
.clx-svc-card .svc-card-desc { margin: 0; }
.clx-svc-card .svc-card-specs-label {
  margin: 0 0 10px;
  font-weight: 700 !important;
  /* Black overrides the inherited light-gray (#898D90) from site-wide.css —
     visual weight on the section labels comes from the color contrast, not
     from a font-family swap. */
  color: #000 !important;
}
/* .svc-card-link-wrap (the foot) NOT normalized here — its spacing is
   owned by the .clx-svc-card__foot rule further down. The earlier
   `margin-top: 0; padding-top: 0` normalization was killing the
   foot's 28/28 spacing by higher specificity (2 classes vs 1). */

/* Divider hairlines between body sections.
   Uniform 32px breathing room above and below — same rhythm used for
   every section-to-section gap in the card (chips→stats, stats→outcome,
   outcome→foot). Reusing this number everywhere makes the card read
   as a vertically rhythmic stack regardless of which sections are
   present. */
.clx-svc-card__divider {
  display: block !important;     /* override the old global .svc-card-divider {display:none} cascade */
  border: none;
  border-top: 1px solid #efeeec; /* design's --hairline-2 */
  margin: 14px 0 !important;     /* tightened from 20px to compress card height. !important: overrides Elementor frontend.css `.elementor hr {margin:0}` which would otherwise collapse the divider's spacing */
  width: 100%;
}
/* Modifier kept as a hook; same rhythm as the default divider. */
.clx-svc-card__divider--below-chips {
  margin: 14px 0 !important;
}

/* === Specialities chip list ==============================================
   The label ("Specialities", "Typical engagement outcome") uses the
   existing .svc-card-specs-label class so the typography matches the
   old card exactly — see site-wide.css:5408 for the spec (DM Sans
   15px 700, color #898D90, margin-bottom 8px). No new label rules
   needed here. */
.clx-svc-card__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clx-svc-card__chips > li { margin: 0; padding: 0; }

/* Chip — canonical site inline-link treatment: ember orange (#FF6A1C)
   text + same-color underline, 1px thickness, 3px offset. Hover
   deepens to brand #FA4900. Matches .svc-card-specs li a (site-wide.css
   line ~5445) and the inline link convention used on
   /about-us/, /client-security/, etc. */
.clx-svc-card__chip {
  display: inline-block;
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #FF6A1C;
  background: #F8F8F8;
  padding: 6px 10px;
  line-height: 1.2;
  /* !important: Elementor frontend.css sets `.elementor a {text-decoration:none}`
     at higher specificity than a single class — same trick used for the
     divider's margin. */
  text-decoration: underline !important;
  text-decoration-color: #FF6A1C !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s ease, background 0.15s ease, text-decoration-color 0.15s ease;
}
a.clx-svc-card__chip:hover,
a.clx-svc-card__chip:focus {
  color: #FA4900;
  text-decoration-color: #FA4900 !important;
  background: #ECECEC;
}
.clx-svc-card__chip--plain {
  text-decoration: none;
}
.clx-svc-card__chip--plain {
  cursor: default;
}

/* === Stats — 2x2 grid using existing .clx-eb-stat ========================= */
.clx-svc-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* The .clx-eb-stat rule in site-wide.css is scoped to
   `body.page .elementor .clx-eng-banner .clx-eb-stat`. That selector
   chain doesn't apply inside a /services/ card. Re-declare a card-
   scoped copy with the same visual spec so the stat tiles look
   identical to the ones on the engagement banner sections.
   When the archetype rolls out to more pages, this single rule covers
   all instances. */
.clx-svc-card__stats .clx-eb-stat {
  background: rgba(248, 248, 248, .95);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.clx-svc-card__stats .clx-eb-num {
  margin: 0;
  color: #FA4900;
  font-family: 'Cabin', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.clx-svc-card__stats .clx-eb-lbl {
  margin: 8px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #1c1e21;
  text-align: center;
}

/* === Typical outcome callout ============================================ */
.clx-svc-card__outcome {
  background: #F8F8F8;
  padding: 14px 16px;
  margin-top: 14px;        /* tightened from 20px */
}
/* Outcome label uses .svc-card-specs-label (same class as the
   "Specialities" header above) for typography parity. No override
   needed here. */
.clx-svc-card__outcome-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #1c1e21;
  margin: 0;
}
/* Inline links inside the outcome — same canonical ember-orange
   spec used on chip links and across /about-us/, /client-security/.
   !important needed to beat Elementor's `.elementor a {text-decoration:none}`. */
.clx-svc-card__outcome-text a {
  color: #FF6A1C;
  text-decoration: underline !important;
  text-decoration-color: #FF6A1C !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
.clx-svc-card__outcome-text a:hover {
  color: #FA4900;
  text-decoration-color: #FA4900 !important;
}

/* === Foot — VIEW MORE CTA right-aligned ==================================
   Mirrors the design's .svc-card-foot pattern: margin above, 1px
   hairline divider, padding above the link itself.

   align-self: stretch overrides the old site-wide rule
   `.svc-card-link-wrap { align-self: flex-end }` which would otherwise
   collapse the foot div to the link's content width — making the
   border-top hairline only span the VIEW MORE text rather than the
   full card width. */
.clx-svc-card__foot {
  /* VIEW MORE sits right after the outcome callout. Earlier attempts
     to push the foot to the bottom of the card via margin-top:auto
     created variable empty whitespace above VIEW MORE that the user
     didn't want. Fixed 20px gap keeps it flush. */
  margin-top: 20px;
  padding-top: 0;
  text-align: right;
  align-self: stretch;
  width: 100%;
}

/* === /services/ heading row vertical centering =========================
   The .svc-cards-heading grid row 1 contains the heading-text block
   (spans cols 1-2) and a service-line card (col 3). Their heights
   don't match: heading-text is a long editorial block; the card is
   the archetype with chips + stats + outcome. By default the cells
   auto-stretch so both items are the same height — but the user
   wants the two blocks vertically centered against each other so
   their midpoints align.

   Scoped to .page-services so DE / DM / IT Consulting heading rows
   (which have totally different right-column content like cost-curves
   or intelligence-belt) keep their existing stretch behaviour. */
.page-services .svc-cards-heading > .svc-cards-heading-text,
.page-services .svc-cards-heading > article.clx-svc-card:first-of-type {
  align-self: center;
}

/* === Per-card layout tweaks ============================================ */
/* Creative & Design has only 5 specialities — fewer than its row siblings
   (CS:10, DE:8, DM:7). At wrap-into-chips layout the card ends up shorter
   than peers, breaking the row alignment. On desktop only, stack the C&D
   chips one-per-line so the specs section grows taller and the card
   matches its siblings naturally. */
@media (min-width: 768px) {
  .clx-svc-card--creative-design .clx-svc-card__chips {
    flex-direction: column;
    gap: 8px;
  }
  .clx-svc-card--creative-design .clx-svc-card__chip {
    align-self: flex-start;
  }
}

/* === Responsive ========================================================== */
@media (max-width: 767px) {
  .clx-svc-card__stats { gap: 6px; }
  .clx-svc-card__stats .clx-eb-num { font-size: 20px; }
  .clx-svc-card__outcome { padding: 14px 14px; }
}