/*
 * db-promo-tiles.css v1.3.0
 * The component styles itself on its own classes. It no longer depends on the
 * old styles.css rules for .sales, .background-sales, .col-3, .col-sm-4,
 * .max-width-450, .promo-message, .jacksts or .button.
 * Site breakpoints only: phone max 767px, 768px and up = 3 columns.
 * Contrast: heading/subtext --text-body (#333333) on the 80% white panel is
 * 7:1 or better over any photo; white button text on the textured red
 * (--brand-red fallback) is 5.7:1 or better; focus ring --color-focus on the
 * panel 4:1 or better.
 */

/* -- Layout ---------------------------------------------------------------- */
.db-promo-tiles {
	text-transform: uppercase;
}

.db-promo-tiles .db-promo-tiles__list {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.db-promo-tiles .db-promo-tiles__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The photo and the white panel share one grid cell. Normally the photo sets
 * the tile height. If larger text makes the panel taller than the space
 * above its 75px offset, the tile grows and the photo fills it (cropped at
 * the sides), so the panel never spills over the section above. */
.db-promo-tiles .db-promo-tiles__tile {
	display: grid;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.db-promo-tiles .db-promo-tiles__image-link {
	grid-area: 1 / 1;
	display: block;
}

.db-promo-tiles .db-promo-tiles__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -- White panel: heading, subtext and button, always stacked ----------------
 * Desktop and tablet: 75px up from the bottom of the photo (the look the
 * tiles had at 768-1500px). Phone: at the bottom of the photo.
 * min-height only - the panel grows with larger text and spacing modes. */
.db-promo-tiles .db-promo-tiles__panel {
	grid-area: 1 / 1;
	align-self: end;
	position: relative;
	margin-bottom: 75px;
	min-height: 100px;
	padding: 20px 10px;
	box-sizing: border-box;
	background-color: var(--overlay-light, rgba(255, 255, 255, 0.8));
	text-align: center;
}

@media (max-width: 767px) {
	.db-promo-tiles .db-promo-tiles__panel {
		margin-bottom: 0;
	}
}

/* Heading - accent font (Merriweather) in its text style: italic Regular.
 * 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 .db-promo-tiles__heading {
	margin: 0 0 5px;
	padding: 0;
	font-family: var(--font-accent, Georgia, serif);
	font-style: var(--font-accent-style-text, italic);
	font-weight: var(--font-accent-weight-text, 400);
	font-size: var(--font-size-2xl, 25px);
	line-height: 1.1;
	color: var(--text-body, #333333);
	text-transform: uppercase;
}

.db-promo-tiles .db-promo-tiles__subtext {
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-md, 16px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.43;
	color: var(--text-body, #333333);
}

@media (max-width: 767px) {
	.db-promo-tiles .db-promo-tiles__heading {
		font-size: var(--font-size-3xl, 30px);
	}
}

/* -- Button ----------------------------------------------------------------
 * Same look as the site's SHOP SMALL buttons: textured red, white bold
 * uppercase text, at least 135px wide, centered at every width.
 * min-height instead of a fixed height so larger text never clips. */
.db-promo-tiles .db-promo-tiles__cta {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
}

.db-promo-tiles .db-promo-tiles__cta:hover,
.db-promo-tiles .db-promo-tiles__cta:focus {
	text-decoration: none;
}

.db-promo-tiles .db-promo-tiles__button {
	display: inline-block;
	min-width: 135px;
	max-width: 100%;
	min-height: 30px;
	padding: 5px 15px;
	box-sizing: border-box;
	vertical-align: top;
	background-color: var(--brand-red, #c32b2a);
	background-image: url('/mm5/graphics/button-background.jpg');
	color: var(--color-white, #ffffff);
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-sm, 14px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.43;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Hover: no change (keeps the current look). The link color hover from
 * styles.css must not recolor the button text. */
.db-promo-tiles .db-promo-tiles__cta:hover .db-promo-tiles__button,
.db-promo-tiles .db-promo-tiles__cta:focus .db-promo-tiles__button {
	color: var(--color-white, #ffffff) !important;
}

/* Focus ring on the visible button */
.db-promo-tiles .db-promo-tiles__cta:focus {
	outline: none;
}

.db-promo-tiles .db-promo-tiles__cta:focus-visible .db-promo-tiles__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-transform: none;
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
	border: 2px dashed var(--border-medium, #bbbbbb);
}