/**
 * Tasting events index — the cards rendered by `[domino_events]`.
 *
 * Ported from the source's /tasting-events, measured at 1655px: a 1215px grid of three 405px
 * cards, each with 10px of padding, a white ground and a soft shadow.
 *
 * The source builds that grid with UIkit — `uk-child-width-expand@s` on the container and
 * `uk-width-1-2@m uk-width-1-3@l` on each card, over UIkit's negative-margin gutter system. This
 * uses CSS grid instead: the rebuild does not load UIkit (see c7-product.css, which reproduces the
 * handful of UIkit classes Commerce7's own template depends on), and three equal columns is one
 * declaration here against a gutter system there. The breakpoints are UIkit's own — `@m` is 960px
 * and `@l` is 1200px — so the column counts change where the source's do.
 *
 * Only the type and layout are ported. The card markup is ours, from domino-events-shortcode.php,
 * so the class names are the rebuild's `div-` convention rather than UIkit's.
 */

.div-events-index {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 960px) {
	.div-events-index { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
	.div-events-index { grid-template-columns: 1fr 1fr 1fr; }
}

/* No gap: the source's cards sit edge to edge, 405px each across a 1215px grid, and the 10px of
   card padding is what separates the content. */
.div-ev-card {
	background: #fff;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.08);
	padding: 10px;
	text-align: center;
	color: #666;
}

/**
 * The source uses a background-cover div at a fixed 300px. This is a real `<img>` instead — it can
 * carry alt text and `loading="lazy"`, which a background image cannot — with `object-fit: cover`
 * reproducing the same crop. `display: block` removes the inline baseline gap under the image.
 */
.div-ev-card__media img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.div-ev-card__title {
	font-family: Italianno, cursive;
	font-size: 40px;
	line-height: 40px;
	margin: 8px 0;
	color: var( --e-global-color-primary, #740a14 );
	text-align: center;
}

/**
 * Uppercased in CSS, not in the markup, exactly as the source does it. The stored value keeps its
 * real capitalisation — "September 12, 2026 , from 12:00 PM to 4:00 PM" — so it stays readable in
 * wp-admin and is not shouted at screen readers.
 */
.div-ev-card__when {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	margin: 40px 0 16px;
	color: #333;
	text-transform: uppercase;
}

.div-ev-card__body {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: #666;
}

.div-ev-card__body p { margin: 15px 0; }

/* The source's in-body headings are NOT uppercased, unlike the date line above. */
.div-ev-card__body h5 {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	margin: 40px 0 16px;
	color: #333;
	text-transform: none;
}