/* ============================================================
 * Keystone Category Tiles
 * ============================================================
 * Full-width section with intro (heading + paragraph) followed
 * by a responsive grid of category tiles. Each tile renders as
 * a featured-image card with a dark overlay, category name and
 * project count — closely matching the homepage `.keystone-hp-cat`
 * pattern but at the larger billboard shape used on landing pages.
 *
 * Pattern slug: keystone/category-tiles
 * Replaces the legacy "Eligible Organizations" shortcode block on
 * /rma-badges/ and is reusable for any taxonomy / industry /
 * segment listing across brands.
 *
 * Each tile may carry a background image via a CSS custom property:
 *   <a class="keystone-category-tile keystone-category-tile--has-bg"
 *      style="--tile-bg-image: url('/path/to/img.webp');">
 *
 * The image is painted on a ::before pseudo so it can zoom on
 * hover without scaling the label / count badge — same motion
 * language as the homepage `.keystone-hp-featured` card.
 *
 * Tiles without an image fall back to the solid surface colour
 * (--keystone-category-tile-bg) and keep dark text.
 * ============================================================ */

.keystone-category-tiles {
	--keystone-category-tiles-bg:           transparent;
	--keystone-category-tiles-heading:      var(--wp--preset--color--contrast, #111111);
	--keystone-category-tiles-text:         var(--wp--preset--color--contrast, #111111);

	--keystone-category-tile-bg:            #f1f1f4;
	--keystone-category-tile-label:         #1a1a1a;
	--keystone-category-tile-radius:        14px;

	/* When a tile has a background image, the overlay darkens it
	   so the white name + count badge stay legible. */
	--keystone-category-tile-overlay:       rgba(0, 0, 0, 0.38);
	--keystone-category-tile-on-image:      #ffffff;

	background:     var(--keystone-category-tiles-bg);
	color:          var(--keystone-category-tiles-text);
	padding-block:  clamp(2.5rem, 6vw, 5rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

.keystone-category-tiles__inner {
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.5rem, 3vw, 2.5rem);
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
}

/* ── Intro (heading + lead paragraph) ──────────────────────── */
.keystone-category-tiles__intro {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

.keystone-category-tiles__heading {
	color:          var(--keystone-category-tiles-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
	line-height:    1.2;
	font-weight:    700;
	letter-spacing: -0.01em;
}

.keystone-category-tiles__lead {
	color:       var(--keystone-category-tiles-text);
	margin:      0;
	font-size:   var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* ── Tile grid ─────────────────────────────────────────────── */
.keystone-category-tiles__grid {
	display:               grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:                   clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ── Tile ──────────────────────────────────────────────────── */
.keystone-category-tile {
	position:        relative;
	display:         block;
	min-height:      96px;
	padding:         clamp(1rem, 2vw, 1.5rem);
	background-color: var(--keystone-category-tile-bg);
	border-radius:   var(--keystone-category-tile-radius);
	overflow:        hidden;
	color:           var(--keystone-category-tile-label);
	text-decoration: none;

	box-shadow:      var(--keystone-card-shadow);
	transition:      var(--keystone-card-shadow-transition);
}

.keystone-category-tile:hover {
	box-shadow: var(--keystone-card-shadow-hover);
	transform:  var(--keystone-card-hover-transform-subtle);
}

/* Image layer — painted on ::before so it can zoom on hover
   without scaling the label or count badge. The image URL is
   passed via the --tile-bg-image custom property on the tile. */
.keystone-category-tile--has-bg::before {
	content:        "";
	position:       absolute;
	inset:          0;
	background-image:    var(--tile-bg-image);
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	transform:      scale(1);
	transition:     transform 0.45s ease;
	z-index:        0;
	pointer-events: none;
}

/* Dark overlay layer — sits above the image, below the content. */
.keystone-category-tile--has-bg::after {
	content:        "";
	position:       absolute;
	inset:          0;
	background:     var(--keystone-category-tile-overlay);
	z-index:        1;
	pointer-events: none;
}

/* On hover, zoom the image — matches .keystone-hp-featured__img. */
.keystone-category-tile--has-bg:hover::before {
	transform: scale(1.06);
}

/* When a bg image is present, flip text to white. */
.keystone-category-tile--has-bg {
	color: var(--keystone-category-tile-on-image);
}

/* ── Content row (name + count badge) ──────────────────────── */
.keystone-category-tile__content {
	position:        relative;
	z-index:         2;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	height:          100%;
}

.keystone-category-tile__label {
	margin:      0;
	font-size:   clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.25;
	font-weight: 600;
	color:       inherit;
}

.keystone-category-tile__count {
	flex-shrink:    0;
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      28px;
	height:         28px;
	padding:        0 9px;
	border-radius:  999px;
	font-size:      0.8125rem;
	font-weight:    600;
	line-height:    1;

	/* Default badge style — works on light tiles. */
	background: rgba(0, 0, 0, 0.08);
	color:      var(--keystone-category-tile-label);
}

/* On image-backed tiles, badge flips to translucent white. */
.keystone-category-tile--has-bg .keystone-category-tile__count {
	background: rgba(255, 255, 255, 0.18);
	color:      var(--keystone-category-tile-on-image);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.keystone-category-tiles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.keystone-category-tiles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.keystone-category-tiles__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * BRAND: VaaSBlock
 * ============================================================ */
body.brand-vaasblock .keystone-category-tiles {
	--keystone-category-tiles-heading: #1a1a72;
	--keystone-category-tiles-text:    #1a1a1a;
	--keystone-category-tile-bg:       #eef0f4;
	--keystone-category-tile-label:    #1a1a1a;
}