/* Cards grid and the four looks of the single card (front end and editor) */
.sg-cards {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 32px;

  &.has-cols-2 { --cols: 2; }
  &.has-cols-3 { --cols: 3; }
  &.has-cols-4 { --cols: 4; gap: 24px; }
  &.has-cols-5 { --cols: 5; gap: 24px; }
}

@media (max-width: 1100px) {
  .sg-cards.has-cols-5 { --cols: 3; }
}
@media (max-width: 1023px) {
  .sg-cards.has-cols-4 { --cols: 2; }
}
@media (max-width: 860px) {
  .sg-cards:is(.has-cols-3, .has-cols-5) { --cols: 2; }
}
@media (max-width: 560px) {
  .sg-cards { --cols: 1 !important; }
}

/* ---------- the card ---------- */
.sg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--wp--custom--body);
  transition: transform 220ms var(--wp--custom--ease-out), box-shadow 220ms ease;
}

/* image: shown whole (product images, cut-outs), no background; white image backgrounds blend into grey cards.
   Only the look "image" fills the card (see below). */
.sg-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
    transition: transform 600ms var(--wp--custom--ease-out);
  }

  & .sg-media-empty { position: absolute; inset: 0; min-height: 0; }
}

.is-variant-frame .sg-card__media,
.is-variant-tint .sg-card__media { margin: 16px 16px 0; }

/* option "Images" of the block: whole or filling, for every card of the block */
.sg-cards.is-fit-contain .sg-card__media img { object-fit: contain; }
.sg-cards.is-fit-cover .sg-card__media img { object-fit: cover; mix-blend-mode: normal; }

.sg-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;

  & > * { margin: 0; }
  & h3 { font-size: 17px; line-height: 1.35; transition: color 200ms ease; }
  & p { font-size: 14px; }
}

/* editor: the inner blocks sit in one more wrapper */
.sg-card__body-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;

  & > * { margin: 0 !important; }
}

.sg-card__kicker {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--teal);
  font-variant-numeric: tabular-nums;
}

.sg-card__link {
  margin-top: auto;
  padding-top: 6px;
  color: var(--wp--preset--color--teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;

  /* the whole card is clickable; links inside the text stay clickable above it */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  & .arr {
    display: inline-block;
    transition: transform 220ms var(--wp--custom--ease-out);
  }
}

.sg-card__link.is-editor::after { content: none; }

.sg-card__body a:not(.sg-card__link) {
  position: relative;
  z-index: 2;
}

.sg-card__link:focus-visible {
  outline: none;

  &::after { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
}

@media (hover: hover) and (pointer: fine) {
  .sg-card.has-link:hover {
    & h3 { color: var(--wp--preset--color--teal); }
    & .sg-card__link .arr { transform: translateX(4px); }
    & .sg-card__media img { transform: scale(1.03); }
  }

  /* On dark ground (looks "image" and "numbered", cards without their own background in a dark section) a teal
     title would be unreadable: it stays white and is underlined instead. Cards with a light tile keep teal. */
  :is(.is-variant-image, .is-variant-numbered) .sg-card.has-link:hover h3,
  .sg-section.is-dark .sg-cards:not(.is-variant-frame, .is-variant-tint, .is-variant-logo, .is-variant-panels) .sg-card.has-link:hover h3 {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
  }
}

/* look "frame" */
.is-variant-frame .sg-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--custom--line);

  & .sg-card__body { padding: 24px 24px 28px; }
}

@media (hover: hover) and (pointer: fine) {
  .is-variant-frame .sg-card.has-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -20px rgba(14, 110, 100, .6);
  }
}

/* look "tint" */
.is-variant-tint .sg-card {
  background: var(--wp--preset--color--grey);

  & .sg-card__body { padding: 24px 24px 28px; }
}

.sg-section.has-bg-grey .is-variant-tint .sg-card { background: var(--wp--preset--color--white); }

/* look "line": separators between the cards, key figure on top (Business Lines of the home page) */
.sg-cards.is-variant-line {
  gap: 0;
  border-top: 1px solid var(--wp--custom--line);
}

.is-variant-line .sg-card {
  padding: 28px 24px 28px 0;
  margin-right: 24px;
  border-right: 1px solid var(--wp--custom--line);

  &:last-child { border-right: 0; margin-right: 0; }
  & .sg-card__media { margin-bottom: 16px; }
}

@media (max-width: 860px) {
  .is-variant-line .sg-card {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--wp--custom--line);
  }
}

/* look "logo": brand logo fitted into a white tile, caption below (Our brands) */
.sg-cards.is-variant-logo { gap: 22px; }

.is-variant-logo .sg-card {
  text-align: center;

  & .sg-card__media {
    aspect-ratio: auto;
    height: 110px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--custom--line);

    & img {
      inset: 0;
      margin: auto;
      width: auto;
      height: auto;
      max-width: 68%;
      max-height: 42px;
      object-fit: contain;
    }
  }

  & .sg-card__body {
    padding-top: 10px;
    align-items: center;
  }

  & p { font-size: 12.5px; }
}

@media (hover: hover) and (pointer: fine) {
  .is-variant-logo .sg-card.has-link:hover .sg-card__media {
    border-color: var(--wp--preset--color--teal);

    & img { transform: none; }
  }
}

/* look "icon": small image / icon on top, everything centred (support center: advice, quality, spare parts …) */
.is-variant-icon .sg-card {
  text-align: center;
  align-items: center;

  & .sg-card__media {
    width: 56px;
    height: 56px;
    aspect-ratio: auto;
    background: none;
    margin-bottom: 14px;

    & img { object-fit: contain; }
  }

  & .sg-card__body { align-items: center; }
  & h3 { font-size: 17px; font-weight: 400; }
  & p { font-size: 12.5px; color: var(--wp--custom--muted); }
}

/* look "numbered": teal tiles with 01, 02 … (the numbers count across the grid) */
.sg-cards.is-variant-numbered { counter-reset: sg-tile; }

.is-variant-numbered .sg-card {
  counter-increment: sg-tile;
  background: var(--wp--preset--color--teal);
  color: rgba(255, 255, 255, .85); /* 4.5:1 on teal */
  padding: 22px 24px 28px;
  min-height: 170px;

  &::before {
    content: counter(sg-tile, decimal-leading-zero);
    font-size: 14px;
    line-height: 1;
    color: #c4e6d6; /* lighter than the accent: 4.55:1 on teal */
    margin-bottom: 8px;
  }

  & h3 { color: #fff; font-size: 18px; font-weight: 400; }
  & p { font-size: 13px; }
  & .sg-card__media { display: none; }
  & .sg-card__link { color: #fff; }
}

@media (hover: hover) and (pointer: fine) {
  .is-variant-numbered .sg-card.has-link:hover { background: var(--wp--preset--color--teal-dark); }
}

/* look "panels": coloured halves across the full page width (Investors / Careers) */
.is-layout-constrained > .sg-cards.is-variant-panels,
.is-layout-flow > .sg-cards.is-variant-panels {
  margin-block: 0;
}

.sg-cards.is-variant-panels { gap: 0; }

.is-variant-panels .sg-card {
  padding: clamp(48px, 6vw, 64px) clamp(24px, 5vw, 72px);
  background: var(--wp--preset--color--mint);
  transition: background-color 240ms ease;

  &:nth-child(2n) { background: var(--wp--preset--color--cream); }

  & .sg-card__body { gap: 14px; }
  & :is(h2, h3) { max-width: 18ch; }
  & p { max-width: 48ch; font-size: inherit; }
}

@media (hover: hover) and (pointer: fine) {
  .is-variant-panels .sg-card.has-link:hover { background: #e3f1ec; }
  .is-variant-panels .sg-card.has-link:nth-child(2n):hover { background: #f9eade; }
}

/* look "image": image fills the card, text at the bottom on a gradient */
.is-variant-image .sg-card {
  min-height: 360px;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--wp--preset--color--teal-dark);

  & .sg-card__media {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;

    & img { object-fit: cover; mix-blend-mode: normal; }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(21, 26, 25, 0) 35%, rgba(21, 26, 25, .78));
    }
  }

  & .sg-card__body {
    position: relative;
    flex: 0 0 auto;
    padding: 28px;
  }

  & :is(h3, .sg-card__link, .sg-card__kicker) { color: #fff; }
}