/* ============================================================
   41-bento-trust.css — bento-grid layout for the trust strip

   Replaces the flat 5-column trust row with an asymmetric
   bento-grid (the modern 2026 layout pattern popularised by
   Apple, Linear, Stripe). One cell spans two rows for visual
   hierarchy — the most important credential (years on tools)
   becomes the hero card; the rest tile around it.

   Loaded AFTER 15-trust-row.css so it overrides the existing
   5-column grid. No HTML changes needed; we restyle the same
   `.trust-grid > .trust-item` structure.

   On mobile, collapses back to a clean stack — bento layouts
   only make sense when there's horizontal room.
   ============================================================ */

#trust-row {
  /* Slightly more breathing room than the old row variant */
  padding: var(--s-6) 0;
}

#trust-row .trust-grid {
  display: grid;
  /* 4-column bento. First cell spans 2 cols x 2 rows. */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: dense;
  gap: var(--s-3);
  align-items: stretch;
}

/* Reset the old per-item dividers — bento uses cards, not pipes */
.trust-item {
  text-align: left;
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line); /* override 15-trust-row's last-child:none */
  border-radius: 14px;
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 110px;
}
.trust-item:last-child { border-right: 1px solid var(--c-line); }

/* Feature cell — the first .trust-item spans 2 cols x 2 rows */
.trust-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  padding: var(--s-5) var(--s-5);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--c-yellow) 18%, transparent), transparent 60%),
    linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-dark) 100%);
  color: var(--c-white);
  border-color: var(--c-blue-dark);
  min-height: 220px;
  justify-content: flex-end;
}
.trust-item:first-child strong {
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 0.9;
  color: var(--c-yellow);
  margin-bottom: var(--s-2);
  letter-spacing: -0.03em;
}
.trust-item:first-child span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Typography for the regular cells */
.trust-item strong {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: -0.02em;
}
.trust-item span {
  font-size: 0.74rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* Optional accent line under each non-feature cell — pulls focus
   to the value without adding clutter */
.trust-item:not(:first-child)::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-yellow-dark));
  border-radius: 999px 999px 0 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
  .trust-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--c-blue) 24%, transparent);
  }
  .trust-item:not(:first-child):hover::after {
    transform: scaleX(1);
  }
}

/* ---- Mobile collapse: 2-column, no feature span ---- */
@media (max-width: 880px) {
  #trust-row .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .trust-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 160px;
  }
  .trust-item:first-child strong { font-size: 3.2rem; }
}

@media (max-width: 480px) {
  #trust-row .trust-grid { grid-template-columns: 1fr; }
  .trust-item:first-child { grid-column: span 1; }
}