/*
 * db-promo-tiles.css v1.2.0
 * Visual styles (.sales, .background-sales, .button, .jacksts, .col-sm-4,
 * .col-3, .promo-message, h3) come from the global styles.css (tokenized).
 * This file adds: stacking on small screens, the heading font token, a focus
 * ring for the button, screen-reader-only text, and the Page Builder placeholder.
 * Contrast: heading/subtext #333333 on the 80% white overlay is 7:1 or better
 * over any photo; focus ring --color-focus on the overlay 4:1 or better.
 */

/* Stack on small screens */
@media (max-width: 767px) {
	.db-promo-tiles .col-sm-4 {
		float: none;
		width: 100%;
		max-width: 100%;
		display: block;
	}
}

/* Heading uses the accent font token so the Phase 2 Merriweather swap applies automatically */
.db-promo-tiles .background-sales h3 {
	font-family: var(--font-accent, 'Linden Hill', serif);
}

/* Button link: the visible button is the span inside it */
.db-promo-tiles .db-promo-tiles__cta {
	text-decoration: none;
}

.db-promo-tiles .db-promo-tiles__cta:focus {
	outline: none;
}

.db-promo-tiles .db-promo-tiles__cta:focus-visible .button {
	outline: 3px solid var(--color-focus, #c32b2a);
	outline-offset: 2px;
}

/* Text only screen readers hear */
.db-promo-tiles .db-promo-tiles__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Page Builder placeholder ----------------------------------------------
 * Shows when no tiles have been added yet.
 * ------------------------------------------------------------------------- */
.db-promo-tiles:not(:has(.db-promo-tiles__tile))::after {
	content: 'Promo Tiles - add tiles in the properties panel (top 3 will display)';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 220px;
	background: repeating-linear-gradient(
		45deg,
		var(--surface-alt, #e1e1e1),
		var(--surface-alt, #e1e1e1) 10px,
		var(--surface-muted, #f1f1f1) 10px,
		var(--surface-muted, #f1f1f1) 20px
	);
	color: var(--text-muted, #5f5f5f); /* 4.8:1 or better on both stripe colors */
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-sm, 14px);
	font-style: italic;
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
	border: 2px dashed var(--border-medium, #bbbbbb);
}