/*
 * db-promo-tiles.css v1.2.1
 * 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 - accent font (Merriweather) in its text style: italic Regular.
 * v1.2.1: style and weight set here instead of coming from the global h3 rule.
 * The weight token steps up in the bolder text mode. Light (300) is not used
 * because it gets lost on the photo backgrounds. */
.db-promo-tiles .background-sales h3 {
	font-family: var(--font-accent, Georgia, serif);
	font-style: var(--font-accent-style-text, italic);
	font-weight: var(--font-accent-weight-text, 400);
}

/* 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);
}