/* Bento Grid
   Cards on a shared grid, each able to span extra columns/rows and carry its own palette.
   Palette colours arrive via the .bpt-palette--* class on the card itself, which sets
   --section-bg/--section-fg/--section-button-* exactly as a section-level palette would. */

.bpt-bento__grid {
	display: grid;
	grid-template-columns: repeat(var(--bento-cols, 3), minmax(0, 1fr));
	grid-auto-rows: minmax(var(--bento-row-min, 15rem), auto);
	gap: var(--bpt-space-md);
	/* Dense packing lets a 1x1 card backfill the hole left beside a 2x2 card,
	   which is what stops the mosaic developing gaps. */
	grid-auto-flow: dense;
}

.bpt-bento__grid[data-cols="2"] { --bento-cols: 2; }
.bpt-bento__grid[data-cols="3"] { --bento-cols: 3; }
.bpt-bento__grid[data-cols="4"] { --bento-cols: 4; }

.bpt-bento__grid[data-row-height="sm"] { --bento-row-min: 11rem; }
.bpt-bento__grid[data-row-height="md"] { --bento-row-min: 15rem; }
.bpt-bento__grid[data-row-height="lg"] { --bento-row-min: 19rem; }

.bpt-bento__item {
	position: relative;
	overflow: hidden;
	display: flex;
	border-radius: var(--bpt-radius-md);
	background: var(--section-bg);
	color: var(--section-fg);
	border: var(--bpt-border-thin) solid var(--section-border);
	/* `span` takes an integer, so no min() here — PHP already clamps the span
	   against the grid's column count before it reaches the markup. */
	grid-column: span var(--bento-col-span, 1);
	grid-row: span var(--bento-row-span, 1);
}

/* Background image sits on a pseudo-element so it never tints the text. */
.bpt-bento__item--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bento-bg);
	background-repeat: no-repeat;
	pointer-events: none;
}

.bpt-bento__item--bg-cover::before  { background-size: cover;      background-position: center; }
.bpt-bento__item--bg-bottom::before { background-size: 100% auto;  background-position: bottom center; }
.bpt-bento__item--bg-top::before    { background-size: 100% auto;  background-position: top center; }

/* Optional scrim for when the artwork is busy enough to hurt legibility. */
.bpt-bento__item--scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--section-bg) 62%, transparent);
	pointer-events: none;
}

.bpt-bento__content {
	position: relative; /* above ::before and ::after */
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--bpt-space-sm);
	padding: var(--bpt-space-lg);
	width: 100%;
	justify-content: flex-start;
}

.bpt-bento--align-center .bpt-bento__content { text-align: center; align-items: center; }
.bpt-bento--align-left   .bpt-bento__content { text-align: left;   align-items: flex-start; }

.bpt-bento__content > * { margin: 0; }

.bpt-bento__icon {
	display: inline-flex;
	color: var(--section-accent);
	font-size: 2.5rem;
	line-height: 1;
}

.bpt-bento__icon svg { width: 1em; height: 1em; }

/* Icon images must be sized explicitly, not left to their intrinsic dimensions.
   WordPress cannot read a width/height out of an SVG, so wp_get_attachment_image()
   emits width="1" height="1" and `height: auto` would render a 1px icon.
   `picture > img` is needed because the host's webp optimiser wraps some images. */
.bpt-bento__media,
.bpt-bento__media picture {
	display: block;
	line-height: 0;
}

.bpt-bento__media img {
	display: block;
	width: var(--bento-icon-size, 3rem);
	height: var(--bento-icon-size, 3rem);
	max-width: 100%;
	object-fit: contain;
}

/* Cards that span 2+ columns get a slightly larger icon, matching the heading step-up. */
.bpt-bento__item[style*="--bento-col-span:2"],
.bpt-bento__item[style*="--bento-col-span:3"],
.bpt-bento__item[style*="--bento-col-span:4"] {
	--bento-icon-size: 3.75rem;
}

.bpt-bento__title {
	font-family: var(--bpt-font-display);
	font-weight: var(--bpt-weight-display);
	font-size: var(--bpt-text-lg);
	line-height: var(--bpt-leading-snug);
	color: var(--section-fg);
}

.bpt-bento__text {
	color: var(--section-fg-muted);
	font-size: var(--bpt-text-sm);
	line-height: var(--bpt-leading-normal);
}

.bpt-bento__actions {
	margin-top: auto;
	padding-top: var(--bpt-space-xs);
}

/* A card that spans 2+ columns has room for a larger heading. */
.bpt-bento__item[style*="--bento-col-span:2"] .bpt-bento__title,
.bpt-bento__item[style*="--bento-col-span:3"] .bpt-bento__title,
.bpt-bento__item[style*="--bento-col-span:4"] .bpt-bento__title {
	font-size: var(--bpt-text-xl);
}

/* Tablet: cap the grid at 2 columns and let nothing span more than 2. */
@media (max-width: 1023px) {
	.bpt-bento__grid,
	.bpt-bento__grid[data-cols="3"],
	.bpt-bento__grid[data-cols="4"] {
		--bento-cols: 2;
	}
}

/* Phone: single column, all spans collapse. A 2x2 card must not cause sideways scroll. */
@media (max-width: 639px) {
	.bpt-bento__grid,
	.bpt-bento__grid[data-cols="2"],
	.bpt-bento__grid[data-cols="3"],
	.bpt-bento__grid[data-cols="4"] {
		--bento-cols: 1;
		grid-auto-rows: minmax(0, auto);
	}

	.bpt-bento__item {
		grid-column: span 1;
		grid-row: span 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bpt-bento__item {
		transition:
			transform var(--bpt-duration-base) var(--bpt-ease-standard),
			border-color var(--bpt-duration-fast) var(--bpt-ease-standard);
	}

	.bpt-bento__item:hover {
		transform: translateY(-3px);
		border-color: var(--section-accent);
	}
}