/* ============================================================
 * VaaSBlock — Industry Standard section
 * ============================================================
 * Row of certification badges with the RMA badge highlighted
 * as the Web3 equivalent. Brand-specific to VaaSBlock — lives
 * in the child theme, not Keystone parent.
 *
 * Pattern slug: vaasblock/industry-standard
 *
 * Hidden entirely on mobile (per design — desktop-only
 * credibility imagery, not worth squashing into a mobile column).
 * ============================================================ */

.vaasblock-industry-standard {
	--vaasblock-industry-bg:                 #ffffff;
	--vaasblock-industry-heading:            #1a1a72;
	--vaasblock-industry-icon-bg:            #ececef;
	--vaasblock-industry-icon-size:          130px;
	--vaasblock-industry-label:              color-mix(in srgb, #686868 75%, transparent);
	--vaasblock-industry-label-featured:     #1a1a1a;
	--vaasblock-industry-featured-border:    #1a1a72;
	--vaasblock-industry-featured-text:      #1a1a72;

	background:     var(--vaasblock-industry-bg);
	padding-block:  clamp(2.5rem, 6vw, 5rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	/* Flush-stack with whatever sits above. */
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

.vaasblock-industry-standard__inner {
	display:        flex;
	flex-direction: column;
	gap:            clamp(2rem, 3.5vw, 3rem);
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
}

/* ── Heading ─────────────────────────────────────────────── */
.vaasblock-industry-standard__heading {
	color:          var(--vaasblock-industry-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3vw, 2rem);
	line-height:    1.2;
	font-weight:    700;
	letter-spacing: -0.01em;
	text-align:     center;
}

/* ── Row of badges ───────────────────────────────────────── */
.vaasblock-industry-standard__row {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             1rem;
	flex-wrap:       nowrap;
}

.vaasblock-industry-standard__badge {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.875rem;
	flex:            1 1 0;
	min-width:       0;
}

/* Default icon: muted grey circle */
.vaasblock-industry-standard__icon {
	width:           var(--vaasblock-industry-icon-size);
	height:          var(--vaasblock-industry-icon-size);
	border-radius:   50%;
	background:      var(--vaasblock-industry-icon-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	transition:      transform 0.2s ease;
}

.vaasblock-industry-standard__icon img,
.vaasblock-industry-standard__icon svg {
	width:      78%;
	height:     78%;
	object-fit: contain;
	display:    block;
}

/* Default badges: muted greyscale appearance so RMA stands out. */
.vaasblock-industry-standard__badge:not(.vaasblock-industry-standard__badge--featured) .vaasblock-industry-standard__icon img,
.vaasblock-industry-standard__badge:not(.vaasblock-industry-standard__badge--featured) .vaasblock-industry-standard__icon svg {
	opacity: 0.65;
	filter:  grayscale(100%);
}

/* Default label: muted grey small caps */
.vaasblock-industry-standard__label {
	font-size:      0.78rem;
	font-weight:    500;
	letter-spacing: 0.08em;
	color:          var(--vaasblock-industry-label);
	text-transform: uppercase;
	white-space:    nowrap;
}

/* ── Featured (RMA) variant ──────────────────────────────── */
/* Square outlined navy box (no grey circle), full-colour logo,
   slightly larger. Label uses contrast colour for emphasis. */
.vaasblock-industry-standard__badge--featured .vaasblock-industry-standard__icon {
	background:    transparent;
	border:        2px solid var(--vaasblock-industry-featured-border);
	border-radius: 12px;
	width:         calc(var(--vaasblock-industry-icon-size) * 1.15);
	height:        calc(var(--vaasblock-industry-icon-size) * 1.15);
}

.vaasblock-industry-standard__badge--featured .vaasblock-industry-standard__icon img,
.vaasblock-industry-standard__badge--featured .vaasblock-industry-standard__icon svg {
	width:  88%;
	height: 88%;
}

.vaasblock-industry-standard__badge--featured .vaasblock-industry-standard__label {
	color:       var(--vaasblock-industry-label-featured);
	font-weight: 700;
}

/* ── Hide when badges would crowd: 7 × 130px icons + gaps needs ~1100px ── */
@media (max-width: 1100px) {
	.vaasblock-industry-standard {
		display: none;
	}
}