/*
 * "BCK Homepage" block pattern — structural CSS only. Colors, fonts, and
 * spacing all come from theme.json presets via block attributes/inline
 * vars in the pattern markup itself; nothing here duplicates those.
 *
 * What IS needed here:
 * 1. The hero credit line has no native block-attribute equivalent for
 *    "small text pinned to a corner" — Cover block content is normal
 *    in-flow content, so this positions it absolutely within the cover.
 *    On narrow viewports the hero is much shorter relative to its text
 *    content (heading + subline + stacked buttons), so an absolutely
 *    positioned corner element collides with the buttons; below 600px it
 *    drops back into normal document flow instead, appearing right after
 *    the buttons rather than overlapping them.
 * 2. A mobile fallback for the tradition-card grid. WP core's grid layout
 *    CSS only auto-collapses a *fixed* columnCount grid below its own
 *    default breakpoint; this makes the 3-per-row desktop grid explicitly
 *    single-column under 600px so cards aren't cramped on phones.
 */

.wp-block-cover .bck-hero-credit {
	position: absolute;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--20);
	margin: 0;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.wp-block-cover .bck-hero-credit {
		position: static;
		text-align: center;
		margin-top: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 600px) {
	.bck-tradition-card {
		grid-column: 1 / -1;
	}
}

.bck-tradition-card .wp-block-image img {
	width: 100%;
}