/* icon_cards.css — flexible icon / value cards section.
   Values from the spec ## Computed Styles + the frozen source crop:
   1440 = base rules; 768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   All selectors scoped under the component root (.c-icon_cards__section-icon-cards)
   so cross-component canonical classes (c-about_info__*, c-hero__*, c-blog_body__*,
   c-careers_benefits__*) never leak (rule 9). */

/* ============================ Section root ================================= */
.c-icon_cards__section-icon-cards {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-icon_cards__section-icon-cards {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-*) ----------- */
.c-icon_cards--values .c-about_info__heading-wrap-5 {
  display: block;
  padding: var(--space-64) var(--space-40);
}
.c-icon_cards--icons .c-about_info__heading-wrap-5 {
  display: block;
  padding: 32px var(--space-40);
}

/* ---- Container (container-large cap) ------------------------------------- */
.c-icon_cards__section-icon-cards .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ============================ Variant A: values-grid ====================== */
.c-icon_cards--values .c-icon_cards__spacer-large-custom-6 {
  display: block;
  width: 100%;
  height: 0;
}

/* eyebrow row (shared child div_block_73 > headin_links): red dot + label */
.c-icon_cards--values .c-icon_cards__heading-block {
  display: block;
}
.c-icon_cards--values .c-about_info__group-2 {
  display: block;
  width: 100%;
}
.c-icon_cards--values .c-about_info__headin-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 60px;
}
/* .c-icon_cards__eyebrow-dot + .c-icon_cards__eyebrow lifted to css/atoms.css
   (atom_c_icon_cards_eyebrow_dot / atom_c_icon_cards_eyebrow — WS-FE-1). */

/* the bordered card grid: 1px lines rendered as container-bg showing through
   the 1px gap + a 1px container border (no double borders) */
.c-icon_cards--values .c-icon_cards__values-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--color-bg-alt2);
  border: 1px solid var(--color-bg-alt2);
}
.c-icon_cards--values .c-icon_cards__values-grid > * {
  min-width: 0;
}

/* text-only card = single cell */
.c-icon_cards--values .c-icon_cards__card--text {
  display: block;
  background: var(--color-bg-page);
  min-height: 340px;
}

/* imaged card spans both columns as ONE bordered cell; text + image share a
   16px WHITE gap (source value-row gap) — no internal divider */
.c-icon_cards--values .c-icon_cards__card--media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  background: var(--color-bg-page);
}
.c-icon_cards--values .c-icon_cards__card--media > * {
  min-width: 0;
}
/* image-side alternation: img-right → text in column 1, image in column 2
   (at 1-col this becomes text ABOVE image, matching the source stack order) */
.c-icon_cards--values .c-icon_cards__card--img-right .c-icon_cards__group {
  order: 1;
}
.c-icon_cards--values .c-icon_cards__card--img-right .c-icon_cards__media {
  order: 2;
}
/* A standalone single-image icon_cards section (e.g. /about "Oaisys, AI
   Practitioner Conference") is not a value alternation: the source places its
   photo collage on the LEFT. The alternator gives the sole image card
   (img index 1, odd) an img-right treatment; undo it — but ONLY when the grid
   holds a single media card, so the real multi-card values grid is untouched. */
.c-icon_cards--values .c-icon_cards__values-grid:has(.c-icon_cards__card--media:only-child) .c-icon_cards__card--media .c-icon_cards__media {
  order: -1;
}
.c-icon_cards--values .c-icon_cards__values-grid:has(.c-icon_cards__card--media:only-child) .c-icon_cards__card--media .c-icon_cards__group {
  order: 0;
}

.c-icon_cards--values .c-icon_cards__media {
  display: block;
  width: 100%;
  height: 360px; /* source value-img fixed render height across all viewports */
  object-fit: cover;
}

/* Small source ICONS (service "Services" cards — 40px source glyphs): a compact
   single cell in the 2-col grid, icon rendered at its natural small size above a
   title+body stack. Without this the tiny icon is stretched with object-fit:cover
   to fill the 631×360 photo cell (blown-up, blurry). Distinct from the full-bleed
   photo media cards used by /about "United by values". */
.c-icon_cards--values .c-icon_cards__card--icon {
  grid-column: auto;
  grid-template-columns: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}
.c-icon_cards--values .c-icon_cards__card--icon .c-icon_cards__media {
  order: -1;
  width: 56px;
  height: 56px;
  max-width: 56px;
  object-fit: contain;
}
.c-icon_cards--values .c-icon_cards__card--icon .c-icon_cards__group {
  order: 0;
}
/* Odd icon-card count: the lone last card spans both columns so the 2-col grid
   leaves no empty cell showing the grey grid backdrop. */
.c-icon_cards--values .c-icon_cards__card--icon:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* text block: imaged cards flex-centre their (shorter) text; text-only cards
   top-align their (long) copy */
.c-icon_cards--values .c-icon_cards__group {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
}
.c-icon_cards--values .c-icon_cards__card--text .c-icon_cards__group {
  align-items: flex-start;
  min-height: 100%;
}
.c-icon_cards--values .c-icon_cards__value-1-about {
  display: block;
}
/* imaged cards: text is flex-centred against the 360px image (spec 0/20/20) */
.c-icon_cards--values .c-icon_cards__card--media .c-icon_cards__value-1-about {
  padding: 0 var(--space-20) var(--space-20);
}
/* text-only cards: top-aligned copy with 40/40 vertical padding (spec) */
.c-icon_cards--values .c-icon_cards__card--text .c-icon_cards__value-1-about {
  padding: var(--space-40) var(--space-20);
}
.c-icon_cards--values .c-icon_cards__value-1-about h3 {
  margin: 0 0 var(--space-16);
  font-family: var(--font-family-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-text-dark);
}
.c-icon_cards--values .c-icon_cards__value-1-about p {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-text-body);
}

/* ============================ Variant B: icon-list-grid ==================== */
.c-icon_cards--icons .c-icon_cards__group-2 {
  display: block;
  margin: 0 0 var(--space-40);
  width: 100%;
}
/* .c-hero__group lifted to css/atoms.css (atom_c_hero_group — WS-FE-1). */
.c-icon_cards--icons .c-hero__group-2 {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: rgb(105, 74, 213);
  flex: 0 0 auto;
}
.c-icon_cards--icons .c-hero__label-3 {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(105, 74, 213);
  border-radius: var(--radius-20);
}
.c-icon_cards--icons .c-careers_benefits__grid-col-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 96px;
  align-items: start;
}
.c-icon_cards--icons .c-careers_benefits__grid-col-2 > * {
  min-width: 0;
}
.c-icon_cards--icons .c-icon_cards__icon-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  max-width: 520px;
}
.c-icon_cards--icons .c-icon_cards__icon-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  min-height: 32px;
}
.c-icon_cards--icons .c-icon_cards__icon-40 {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.c-icon_cards--icons .c-icon_cards__icon-card-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.c-icon_cards--icons .c-icon_cards__icon-card-content-wrapper h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--color-text-h3);
}
.c-icon_cards--icons .c-icon_cards__icon-card-content-wrapper p {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-text-body);
}
.c-icon_cards--icons .c-icon_cards__spacer-large-custom-3-copy {
  display: block;
  width: 100%;
  height: 0;
}

/* ============================ Tablet: 768 band ============================= */
@media (max-width: 991px) {
  /* Variant A collapses to a single column (image stacks above/below text) */
  .c-icon_cards--values .c-icon_cards__values-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .c-icon_cards--values .c-icon_cards__card--media {
    grid-template-columns: minmax(0, 1fr);
  }
  .c-icon_cards--values .c-icon_cards__card--text {
    min-height: 0;
  }
  /* stacked cards at 768 carry more vertical whitespace than the desktop grid;
     padding tuned so the fixed-height images realign against the source band */
  .c-icon_cards--values .c-icon_cards__card--media .c-icon_cards__value-1-about {
    padding: var(--space-20) var(--space-20) var(--space-40);
  }
  /* image-top cards keep their text below the image — extra bottom padding here
     pushes the following row's (bottom) image down into source alignment
     without disturbing this card's own top-anchored image */
  .c-icon_cards--values .c-icon_cards__card--media:not(.c-icon_cards__card--img-right) .c-icon_cards__value-1-about {
    padding-bottom: 84px;
  }
  .c-icon_cards--values .c-icon_cards__card--text .c-icon_cards__value-1-about {
    padding: var(--space-40) var(--space-20) 72px;
  }

  /* Variant B stays 2-column; gap gains a 40px gutter */
  .c-icon_cards--icons .c-careers_benefits__grid-col-2 {
    column-gap: var(--space-40);
    row-gap: 96px;
  }
  .c-icon_cards--icons .c-icon_cards__icon-card-head {
    gap: 32px;
  }
}

/* ============================ Mobile: 375 band ============================= */
@media (max-width: 479px) {
  .c-icon_cards--values .c-about_info__heading-wrap-5 {
    padding: 32px var(--space-16);
  }
  .c-icon_cards--values .c-icon_cards__spacer-large-custom-6 {
    padding: var(--space-16) 0 0;
    height: var(--space-16);
  }
  .c-icon_cards--values .c-icon_cards__card--media .c-icon_cards__value-1-about {
    padding: var(--space-40) var(--space-15) 44px;
  }
  .c-icon_cards--values .c-icon_cards__card--text .c-icon_cards__value-1-about {
    padding: var(--space-40) var(--space-15) 72px;
  }

  .c-icon_cards--icons .c-about_info__heading-wrap-5 {
    padding: var(--space-16);
  }
  .c-icon_cards--icons .c-icon_cards__group-2 {
    margin: 0 0 var(--space-20);
  }
  /* Variant B now collapses to one column; single 64px row gap */
  .c-icon_cards--icons .c-careers_benefits__grid-col-2 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-64);
    column-gap: 0;
  }
  .c-icon_cards--icons .c-icon_cards__icon-card-left {
    max-width: none;
  }
  .c-icon_cards--icons .c-icon_cards__icon-card-head {
    gap: var(--space-24);
  }
  .c-icon_cards--icons .c-icon_cards__spacer-large-custom-3-copy {
    padding: var(--space-16) 0 0;
    height: var(--space-16);
  }
}