/**
 * [curriki_reviews_grid] — self-contained (its own token block, like the
 * single-review stylesheets), so this works standalone on any page — Home,
 * Explore AI Tools, wherever the shortcode is dropped in — without needing
 * the single-review template's own CSS to be loaded on that page too.
 */
.crt-reviews-grid-wrap {
	--crt-blue: #285AA5;
	--crt-blue-bright: #2E8DF5;
	--crt-blue-light: #E5EEFF;
	--crt-highlight: #F7FAFF;
	--crt-ink: #515151;
	--crt-muted: #767676;
	--crt-border: #E5E5E5;
	--crt-radius-md: 18px;
	--crt-radius-sm: 10px;
	--crt-radius-pill: 999px;
	--crt-shadow-sm: 0 2px 8px rgba(8, 72, 146, 0.07);
	--crt-shadow-md: 0 12px 32px rgba(8, 72, 146, 0.12);

	font-family: 'Montserrat', sans-serif;
}
.crt-reviews-grid-wrap *, .crt-reviews-grid-wrap *::before, .crt-reviews-grid-wrap *::after {
	box-sizing: border-box;
}

/* Category filter buttons */
.crt-reviews-filters {
	display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px;
}
.crt-reviews-filter {
	font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
	padding: 8px 18px; border-radius: var(--crt-radius-pill); border: 1px solid var(--crt-border);
	background: #fff; color: var(--crt-ink); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Explicit `background` here isn't decorative — Hello Elementor's
   reset.css has a blanket `button:hover,button:focus{background-color:#CC3366}`
   (element+pseudo-class). Without a background declared on THIS rule too,
   that's the only rule touching the property and the pink wins by default
   regardless of this selector's higher specificity. */
.crt-reviews-filter:hover,
.crt-reviews-filter:focus,
.crt-reviews-filter:focus-visible { background: #fff; border-color: var(--crt-blue-bright); color: var(--crt-blue); }
.crt-reviews-filter.is-active,
.crt-reviews-filter.is-active:hover,
.crt-reviews-filter.is-active:focus { background: var(--crt-blue); border-color: var(--crt-blue); color: #fff; }

/* Grid + card */
.crt-reviews-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .crt-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .crt-reviews-grid { grid-template-columns: 1fr; } }

.crt-reviews-card {
	display: flex; flex-direction: column; gap: 10px; text-decoration: none;
	background: var(--crt-highlight); border: 1px solid var(--crt-border); border-radius: var(--crt-radius-md);
	padding: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.crt-reviews-card:hover { transform: translateY(-4px); box-shadow: var(--crt-shadow-md); }

.crt-reviews-logo-box {
	background: #fff; border: 1px solid var(--crt-border); border-radius: var(--crt-radius-sm);
	height: 100px; display: flex; align-items: center; justify-content: center; padding: 6px 14px; overflow: hidden;
}
/* object-fit:contain, never cover — cropping a logo to force it to fill
   the box looks worse than a smaller, uncropped one. A placeholder image
   with a lot of its own baked-in padding will still look small here;
   that's the test asset, not this CSS. */
.crt-reviews-logo-box img { max-height: 88px; max-width: 100%; width: auto; height: auto; display: block; object-fit: contain; }

.crt-reviews-tag {
	align-self: flex-start; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
	padding: 4px 12px; border-radius: var(--crt-radius-pill);
}
.crt-reviews-name { font-weight: 700; font-size: 16px; color: var(--crt-blue); }

/* Hidden by the filter script — not display:none directly in markup, so
   the grid still shows everything correctly if JS fails to load. */
.crt-reviews-card[hidden] { display: none; }