/*
 * Trust Strip — Monoline Icon + Stat (core/columns).
 *
 * Block style on core/group wrapping core/columns. Each column = one trust
 * item: icon (terracotta SVG) + stat (Cormorant Garamond) + label (Inter,
 * small caps) in a horizontal flex row. Vertical dividers + inner padding on
 * desktop only; 2×2 grid on tablet/mobile via flex-wrap override.
 *
 * Tokens read:
 *   semantic.color.bg.base · semantic.color.border.base
 *   semantic.color.text.primary / muted
 *   color.terracotta.500   (icon stroke)
 *   font.family.display    (stat: Cormorant Garamond)
 *   semantic.typography.label.*  (label: Inter)
 *   space.3 / space.6 / space.7 / space.9
 */

/* --- Section container ---------------------------------------------------- */

.wp-block-group.is-style-wpdl-trust-strip {
  background-color: var(--wp--custom--semantic--color--background--canvas);
  padding-inline: var(--wp--custom--space--7);

  /* Vertical padding is buyer-editable via the Dimensions "Compact" preset
     (spacingSizes 50) applied in the pattern markup — not hardcoded here. */
}

/* --- Columns wrapper: zero gap (spacing via column padding-inline) --------- */

.wpdl-trust-strip__cols.wp-block-columns {
  gap: 0;
}

/* --- Column = one trust item: icon + text, horizontal --------------------- */

.wp-block-group.is-style-wpdl-trust-strip .wp-block-column {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wp--custom--space--3);
}

/* --- Desktop: inner padding + vertical dividers --------------------------- */

@media (width >= 64em) {
  .wp-block-group.is-style-wpdl-trust-strip .wp-block-column {
    padding-inline: var(--wp--custom--space--9);
  }

  .wp-block-group.is-style-wpdl-trust-strip .wp-block-column:first-child {
    padding-inline-start: 0;
  }

  .wp-block-group.is-style-wpdl-trust-strip .wp-block-column:last-child {
    padding-inline-end: 0;
  }

  .wp-block-group.is-style-wpdl-trust-strip .wp-block-column + .wp-block-column {
    border-inline-start: 1px solid var(--wp--custom--semantic--color--border--base);
  }
}

/* --- Tablet/mobile: 2×2 CSS grid (overrides WP flex on .is-layout-flex) -- */

@media (width < 64em) {
  .wp-block-group.is-style-wpdl-trust-strip .wp-block-columns.wpdl-trust-strip__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--custom--space--6);
  }

  .wp-block-group.is-style-wpdl-trust-strip .wp-block-columns.wpdl-trust-strip__cols > .wp-block-column {
    flex: unset;
    min-width: 0;
  }
}

/* --- Icon (wp-design-library/icon block, size="lg") ---------------------- */

.wp-block-group.is-style-wpdl-trust-strip .wpdl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(1.1875rem, 1.8vw, 1.625rem);
  block-size: clamp(1.1875rem, 1.8vw, 1.625rem);
  color: var(--wp--custom--semantic--color--accent--primary);
  flex-shrink: 0;
}

/* Override icon.css .wpdl-icon--lg svg (2rem) with trust strip's fluid size */
.wp-block-group.is-style-wpdl-trust-strip .wpdl-icon svg {
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Reset WP is-layout-flow margins that break flex alignment ------------ */

.wp-block-group.is-style-wpdl-trust-strip .wp-block-column > * {
  margin-block: 0;
}

.wp-block-group.is-style-wpdl-trust-strip .wpdl-trust-item__text > * {
  margin-block: 0;
}

/* --- Text group ----------------------------------------------------------- */

.wpdl-trust-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* --- Stat (Cormorant Garamond, fluid) ------------------------------------- */

.wpdl-trust-item__stat {
  display: block;
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

/* --- Label (Inter, small caps) -------------------------------------------- */

.wpdl-trust-item__label {
  display: block;
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.5625rem, 0.8vw, 0.6875rem);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
}