/* TRL Block Theme Starter — utility CSS.
 *
 * For layout mechanics theme.json CANNOT express: :has(), flex card equalisation,
 * @media breakpoints, word-break. Design tokens (color, type, spacing) still belong
 * in theme.json / styles/*.json — keep this file small and mechanical.
 *
 * Loaded from the PARENT (template) dir in inc/enqueue.php, before the active
 * style.css, so every child inherits these and a child's own rules can still override.
 */

/* --- Equal-height card grids ---------------------------------------------------
 * When a columns row holds TRL card/panel groups, make each column a flex column so
 * the card fills the row height and its trailing CTA pins to a common bottom across
 * cards (otherwise a card whose list wraps to more lines pushes its button lower).
 * Scoped with :has() so ONLY columns directly holding a card/panel are affected —
 * ordinary content columns (hero, prose) stay normal flow blocks. (This is the safe,
 * scoped version of the unscoped `.wp-block-column{display:flex}` a child hand-rolled,
 * which turned every column into a horizontal flex row and shattered the hero.)
 */
.wp-block-column:has(> .is-style-trl-card),
.wp-block-column:has(> .is-style-trl-card-lifted),
.wp-block-column:has(> .is-style-trl-card-bordered),
.wp-block-column:has(> .is-style-trl-panel) {
	display: flex;
}
.wp-block-column > .is-style-trl-card,
.wp-block-column > .is-style-trl-card-lifted,
.wp-block-column > .is-style-trl-card-bordered,
.wp-block-column > .is-style-trl-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.is-style-trl-card > .wp-block-list,
.is-style-trl-card-lifted > .wp-block-list,
.is-style-trl-card-bordered > .wp-block-list,
.is-style-trl-panel > .wp-block-list {
	flex-grow: 1; /* the list grows, pushing the trailing CTA to the card bottom */
}

/* --- CTA buttons never shatter mid-word ----------------------------------------
 * WP core sets .wp-block-button__link { word-break: break-word }, which breaks
 * uppercase / letter-spaced CTA labels mid-word in tight columns. Normalise it.
 */
.wp-block-button__link {
	word-break: normal;
}

/* --- Opt-in tablet stacking ----------------------------------------------------
 * WP only auto-stacks wp:columns below 782px; big display type + multi-column
 * marketing sections usually need to stack earlier. OPT-IN via the columns block
 * style (Site Editor: "Stack on tablet") so it never surprises a row that wants to
 * stay side-by-side. Registered as core/columns style `trl-stack-tablet`.
 */
@media (max-width: 1024px) {
	.wp-block-columns.is-style-trl-stack-tablet {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.is-style-trl-stack-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
}