/* ==========================================================================
   USP block (.usp)
   Reusable four-card value proposition. Background and outer padding come
   from the parent Haga Section (.section / .section.lightgray / .section.brown).

   Local tokens:
   --gap
     Text-block internal spacing. Set to 0 so the heading and intro
     paragraph form a tight label group.

   --usp-grid-max
     Maximum width of the whole card grid. Cards fill their grid cells;
     this token controls the overall spread of the 2x2 / 1x4 layout.

   --usp-column-gap
     Horizontal space between card columns.

   --usp-row-gap
     Vertical space between the two mobile rows. Kept separate from the
     horizontal gap so the 2x2 layout can breathe without widening.

   --cols / --cols-md
     Column count consumed by containers/grid.css: 2 columns by default,
     4 columns from md (40rem) upward.

   --card-icon-size / --usp-icon-filter
     Icon size and color treatment for direct SVG icons and external SVG image
     icons. Scoped here so USP icons can scale and recolor without affecting
     other cards.
   ========================================================================== */

.usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-32);
  padding-block: var(--s-40);
  width: 100%;
}

.usp .text-block {
  --gap: 0;
}

/* grid */

.usp .grid {
  --usp-grid-max: 24rem;
  --usp-column-gap: var(--s-16);
  --usp-row-gap: var(--s-48);

  --cols: 2;
  --cols-md: 4;

  gap: var(--usp-row-gap) var(--usp-column-gap);
  margin-inline: auto;
  max-width: min(100%, var(--usp-grid-max));
}

/* card */

.usp .card {
  --card-icon-size: 3.4rem;
  --usp-icon-filter: brightness(0) saturate(100%) invert(7%) sepia(55%) saturate(794%)
    hue-rotate(338deg) brightness(126%) contrast(46%);
  --gap: var(--s-4);
}

.usp .card svg {
  color: var(--wp--preset--color--warm-brown);
}

.section.brown .usp .card svg {
  color: var(--wp--preset--color--off-white);
  opacity: 0.76;
}

.usp .card > img:first-child,
.usp .card > .wp-block-image:first-child {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin: 0 0 var(--gap);
}

.usp .card > img:first-child {
  display: block;
  filter: var(--usp-icon-filter);
  object-fit: contain;
}

.usp .card > .wp-block-image:first-child img {
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--usp-icon-filter);
  object-fit: contain;
}

.usp .card h6 {
  font-weight: 500;
  font-size: var(--font-size-sm);
}

/* breakpoints */

@media (min-width: 40rem) {
  /* 640px */
  .usp .grid {
    --usp-grid-max: 50rem;
    --usp-column-gap: var(--s-24);
    --usp-row-gap: var(--s-24);
  }

  .usp .card {
    --card-icon-size: 3.8rem;
  }
}

@media (min-width: 64rem) {
  .usp {
    gap: var(--s-60);
  }

  /* 1024px */
  .usp .grid {
    --usp-grid-max: 58rem;
    --usp-column-gap: var(--s-32);
    --usp-row-gap: var(--s-40);
  }

  .usp .card {
    --card-icon-size: 4.2rem;
  }

  .usp .card h6 {
    font-size: var(--font-size-base);
  }
}