/**
 * CRG Recipes -- front-end grid.
 *
 * No literal colour is used in a rule below. Every value is a token declared
 * once on .crg-recipes, and each token points at the active theme's own token
 * with a hard fallback, so the grid looks right here and still works if the
 * plugin is dropped on a theme that has never heard of --crg-color-*.
 */

.crg-recipes {
	/* Palette ----------------------------------------------------------- */
	--crg-recipes-surface: var( --crg-color-surface, #ffffff );
	--crg-recipes-surface-hover: var( --crg-color-surface, #ffffff );
	--crg-recipes-border: var( --crg-color-border, #e5e7eb );
	--crg-recipes-text: var( --crg-color-text, #0a0a0b );
	--crg-recipes-text-muted: var( --crg-color-text-muted, #3f3f46 );
	--crg-recipes-accent: var( --crg-color-accent, #4f46e5 );
	--crg-recipes-hover-border: color-mix( in srgb, var( --crg-recipes-accent ) 30%, transparent );
	--crg-recipes-shadow: var( --crg-shadow-card, none );
	--crg-recipes-shadow-hover: var( --crg-shadow-card-hover, none );

	/* Shape and rhythm -------------------------------------------------- */
	--crg-recipes-radius: var( --crg-radius-xl, 16px );
	--crg-recipes-radius-sm: var( --crg-radius-sm, 8px );
	--crg-recipes-gap: var( --wp--preset--spacing--40, 1.5rem );
	--crg-recipes-pad: var( --wp--preset--spacing--50, 2rem );
	/*
	 * Card minimum, and the only thing deciding how many fit per row.
	 *
	 * auto-fill lays down as many tracks as `n * min + (n-1) * gap` allows. At
	 * the 1152px content width with a 16px gap, 260px let four fit (1088px) and
	 * the row that was meant to be three became four. Three across needs a
	 * minimum above 276px and no more than 373px; 320px sits in the middle, so
	 * the row still drops to two and then one as the screen narrows.
	 */
	--crg-recipes-min: 320px;
	--crg-recipes-transition: var( --crg-transition, 0.25s ease );
	--crg-recipes-transition-fast: var( --crg-transition-fast, 0.15s ease );
	--crg-recipes-icon-size: 40px;

	/* Call to action ---------------------------------------------------- */
	--crg-recipes-cta-radius: var( --crg-radius-md, 10px );
	/*
	 * Deliberately the same raised surface as a card hover, named separately so
	 * the button can be retuned without dragging the cards along with it.
	 */
	--crg-recipes-cta-button-bg: var( --crg-color-surface-alt, #f3f4f6 );
}

/* -----------------------------------------------------------------------------
 * Section header
 *
 * Both parts are optional, so the spacing lives on the wrapper rather than on
 * the title -- an absent title cannot then leave a gap behind it.
 * -------------------------------------------------------------------------- */

.crg-recipes__header {
	margin-bottom: var( --crg-recipes-gap );
}

.crg-recipes__title-main {
	margin: 0;
	color: var( --crg-recipes-text );
	line-height: 1.2;
	text-wrap: balance;
}

.crg-recipes__description {
	margin: 0.4em 0 0;
	max-width: 60ch;
	color: var( --crg-recipes-text-muted );
	line-height: 1.5;
	text-wrap: pretty;
}

/*
 * The filter toggles the `hidden` attribute. Flex and grid children override
 * the UA stylesheet's [hidden] rule, so it has to be restated here.
 */
.crg-recipes [hidden] {
	display: none !important;
}

/* Visually hidden, still read aloud. */
.crg-recipes__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
 * Search
 * -------------------------------------------------------------------------- */

.crg-recipes__search-form {
	position: relative;
	max-width: 400px;
	margin-bottom: var( --crg-recipes-gap );
}

.crg-recipes__search-icon {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	display: flex;
	transform: translateY( -50% );
	color: var( --crg-recipes-text-muted );
	pointer-events: none;
}

.crg-recipes__search {
	width: 100%;
	padding: 0.6em 0.9em 0.6em 2.4em;
	background-color: var( --crg-recipes-surface );
	border: 1px solid var( --crg-recipes-border );
	border-radius: var( --crg-recipes-radius-sm );
	color: var( --crg-recipes-text );
	font: inherit;
	font-size: 0.9em;
	transition: border-color var( --crg-recipes-transition );
}

.crg-recipes__search::placeholder {
	color: var( --crg-recipes-text-muted );
	opacity: 1;
}

.crg-recipes__search:focus {
	border-color: var( --crg-recipes-accent );
	outline: none;
}

.crg-recipes__search:focus-visible {
	outline: 2px solid var( --crg-recipes-accent );
	outline-offset: 1px;
}

/* -----------------------------------------------------------------------------
 * Grid
 *
 * auto-fill + minmax gives three across on a wide screen and reflows down to
 * one on a phone, with no media query to keep in sync.
 * -------------------------------------------------------------------------- */

.crg-recipes__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --crg-recipes-min ), 1fr ) );
	gap: var( --crg-recipes-gap );
}

.crg-recipes__card {
	display: block;
	padding: var( --crg-recipes-pad );
	background-color: var( --crg-recipes-surface );
	border: 1px solid var( --crg-recipes-border );
	border-radius: var( --crg-recipes-radius );
	box-shadow: var( --crg-recipes-shadow );
	color: var( --crg-recipes-text );
	text-decoration: none;
	transition:
		border-color var( --crg-recipes-transition ),
		box-shadow var( --crg-recipes-transition ),
		background-color var( --crg-recipes-transition );
}

/* Only the linked cards react -- a card with no URL is not interactive. */
a.crg-recipes__card:hover,
a.crg-recipes__card:focus-visible {
	background-color: var( --crg-recipes-surface-hover );
	border-color: var( --crg-recipes-hover-border );
	box-shadow: var( --crg-recipes-shadow-hover );
}

a.crg-recipes__card:focus-visible {
	outline: 2px solid var( --crg-recipes-accent );
	outline-offset: 2px;
}

/*
 * Dashicons sizes itself with font-size AND a matching width/height box, so
 * scaling one without the others leaves the glyph clipped or off-centre. All
 * three come from the one token.
 */
.crg-recipes__icon {
	display: block;
	width: var( --crg-recipes-icon-size );
	height: var( --crg-recipes-icon-size );
	margin-bottom: 0.75rem;
	color: var( --crg-recipes-accent );
	font-size: var( --crg-recipes-icon-size );
	line-height: 1;
}

.crg-recipes__title {
	margin: 0;
	color: var( --crg-recipes-text );
	font-size: 1.05em;
	line-height: 1.35;
	text-wrap: balance;
}

/*
 * Arrow on the cards that lead somewhere.
 *
 * The selector does the work: a card with a URL is rendered as an anchor and one
 * without is rendered as a div, so `a.` already means "has a link" and no extra
 * class or markup is needed.
 *
 * The `/ ""` supplies empty alternative text, so a screen reader announces the
 * title without reading the glyph.
 */
a.crg-recipes__card .crg-recipes__title::after {
	content: "\2197" / "";
	margin-left: 0.3em;
	color: var( --crg-recipes-text-muted );
	font-weight: 400;
	transition: color var( --crg-recipes-transition );
}

a.crg-recipes__card:hover .crg-recipes__title::after,
a.crg-recipes__card:focus-visible .crg-recipes__title::after {
	color: var( --crg-recipes-accent );
}

.crg-recipes__desc {
	margin: 0.5em 0 0;
	color: var( --crg-recipes-text-muted );
	font-size: 0.9em;
	line-height: 1.5;
	text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
 * States
 * -------------------------------------------------------------------------- */

.crg-recipes__empty,
.crg-recipes__notice {
	margin: var( --crg-recipes-gap ) 0 0;
	color: var( --crg-recipes-text-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.crg-recipes__card,
	a.crg-recipes__card:hover,
	a.crg-recipes__card:focus-visible {
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
 * Contribution call to action
 *
 * Closes the section, inside .crg-recipes so it picks up the tokens above.
 *
 * The search filter never touches it -- the script toggles .crg-recipes__card
 * and .crg-recipes__empty only, so the invitation stays put while filtering.
 * -------------------------------------------------------------------------- */

.crg-recipes__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --crg-recipes-gap );
	margin-top: var( --crg-recipes-gap );
	padding: var( --crg-recipes-pad ) calc( var( --crg-recipes-pad ) * 1.2 );
	border: 1px solid var( --crg-recipes-border );
	border-radius: var( --crg-recipes-cta-radius );
}

/*
 * The copy keeps a readable measure and the button keeps its natural width, so
 * the two stack only when there is genuinely no room for both.
 */
.crg-recipes__cta-text {
	flex: 1 1 22rem;
	max-width: 60ch;
}

.crg-recipes__cta-title {
	margin: 0;
	color: var( --crg-recipes-text );
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.35;
}

.crg-recipes__cta-desc {
	margin: 0.25em 0 0;
	color: var( --crg-recipes-text-muted );
	font-size: 0.9em;
	line-height: 1.5;
}

.crg-recipes__cta-button {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.55em 1.1em;
	background-color: var( --crg-recipes-cta-button-bg );
	border-radius: var( --crg-recipes-radius-sm );
	color: var( --crg-recipes-text );
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
	transition: filter var( --crg-recipes-transition-fast );
}

/*
 * Brightness rather than a second background colour, so the button keeps one
 * declared surface and the hover cannot drift away from it.
 */
.crg-recipes__cta-button:hover,
.crg-recipes__cta-button:focus-visible {
	filter: brightness( 1.25 );
}

.crg-recipes__cta-button:focus-visible {
	outline: 2px solid var( --crg-recipes-accent );
	outline-offset: 2px;
}

/*
 * Decorative arrow. The `/ ""` supplies empty alternative text, so a screen
 * reader announces the label without it.
 */
.crg-recipes__cta-button::after {
	content: "\2197" / "";
	margin-left: 0.45em;
}