/* USPs — white card; TL / BR radius (Figma 20px). Fills the parent. */

/* With an image the block splits like the core values component, and the card
   sits flush against it. Without one the card keeps the full width. */
.usps-block:has(.usps-image) {
  display: grid;
  grid-template-columns: 4fr 8fr;
}

/* Scoped through :has() to outrank Salient's `.row .col img`, which adds a 15px
   bottom margin and caps the height. Either one breaks the sizing below. */
.usps-block:has(.usps-image) .usps-image {
  display: block;
  /* A replaced element defaults to start-like justification in a grid, which
     makes width:100% resolve against a shrink-to-fit box instead of the column.
     Without stretch an image narrower than the column keeps its natural width. */
  justify-self: stretch;
  width: 100%;
  /* Natural height, so the whole photo is shown rather than cropped. It may run
     taller than the card, but never shorter: align-self keeps the grid from
     stretching it, min-block-size keeps it at least as tall as the content. */
  align-self: start;
  block-size: auto;
  min-block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  margin-block-end: 0;
  /* The image now owns the block's top-left corner. */
  border-start-start-radius: var(--radius-m);
}

.usps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin: 0;
  padding: 24px 32px;
  list-style: none;
  background-color: #ffffff;
  color: var(--color-text);
  border-start-start-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
}

/* The image carries that corner instead. As a grid item the card would stretch
   to the row, so an image taller than the content would pull the white card
   along with it. Start keeps the card at its own height; the image overhangs. */
.usps-block:has(.usps-image) .usps {
  align-self: start;
  border-start-start-radius: 0;
}

.usp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem; /* Figma 12px */
  list-style: none;
}

.usp-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  inline-size: 17px;
  block-size: 13px;
  background-color: var(--color-brand-green);
  mask: url("icon.svg") center / contain no-repeat;
  -webkit-mask: url("icon.svg") center / contain no-repeat;
}

.usp-title,
.usp-description {
  grid-column: 2;
  margin-block: 0;
  padding-bottom: 0;
}

.usp-title {
  font-weight: 700;
  color: var(--color-brand-1);
}

@media (max-width: 999px) {
  .usps-block:has(.usps-image) {
    grid-template-columns: 1fr;
  }

  /* Stacked, so the image sits on top and keeps the top-left corner. Nothing
     to match in height any more. */
  .usps-block:has(.usps-image) .usps-image {
    min-block-size: 0;
  }
}

/* On a phone the image goes: stacked, it landed straight against the photo of
   the block above it on almost every page. The card takes the corner back. */
@media (max-width: 767px) {
  .usps-block:has(.usps-image) .usps-image {
    display: none;
  }

  .usps-block:has(.usps-image) .usps {
    border-start-start-radius: var(--radius-m);
  }
}