/* Generated cover motifs for the guides (CNT-1).
 *
 * Their own sheet, because two surfaces draw them and only one of them
 * loaded the editorial stylesheet: the home page teaser rendered the tiles
 * with no position, no overflow and no ratio - 332px instead of 152, and a
 * 1 606px teaser on a 390px phone. Whoever renders a motif enqueues this.
 */

.vb-guideart {
	position: relative;
	display: block;
	aspect-ratio: 40 / 21;
	overflow: hidden;
	background: var(--vb-surface, #f2e7df);
}

.vb-guideart__bg { position: absolute; inset: 0; width: 100%; height: 100%; }

.vb-guideart__glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
}

.vb-guideart__glyph svg { width: clamp(48px, 22%, 92px); height: auto; }

.vb-guideart__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Small square variant for the homepage teaser. */
.vb-guideart--tile { aspect-ratio: 3 / 2; border-radius: var(--vb-radius-sm, 11px); margin-bottom: 10px; }
.vb-guideart--tile .vb-guideart__glyph svg { width: clamp(36px, 26%, 60px); }

/* The timely slot on the index: beside the text from 46rem, above it below.
   The variant lives here with the other motif variants - article.css is the
   editorial layout sheet, and a motif rule written there once ended up in a
   stylesheet the surface that needed it never loaded (M-016). */
.vb-guideart--now { border-radius: var(--vb-radius-sm, 11px); }

/* On a phone the timely slot competes with the four chips above it for the
   first screen; the same strip the cards use keeps the picture and gives the
   sections 38px back. */
@media (max-width: 40rem) {
	.vb-guideart--now { aspect-ratio: 40 / 15; }
}

@media (min-width: 46rem) {
	.vb-guideart--now { aspect-ratio: 3 / 2; height: 100%; }
}

/* Banner above an article, edge to edge of the reading column. */
.vb-guideart--banner {
	max-width: var(--vb-measure);
	margin: 0 auto 1.8em;
	border-radius: var(--vb-radius, 16px);
	aspect-ratio: 40 / 15;
}


/* The guide overview has its own optional photograph; copy stays outside it. */
.vb-guides__intro { display: grid; gap: 1rem; margin-block-end: 1.5rem; }
.vb-guides__intro .vb-guides__lead { margin: 0; align-self: center; }
.vb-guides__intro-photo { margin: 0; border-radius: var(--vb-radius-sm, 11px); overflow: hidden; }
.vb-guides__intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 46rem) {
	.vb-guides__intro:has(.vb-guides__intro-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2rem; }
}
@media (max-width: 45.99rem) {
	.vb-guides__intro-photo { aspect-ratio: 40 / 15 !important; }
}
:root[data-focus="reduced"] .vb-guides__intro { grid-template-columns: minmax(0, 1fr); }
:root[data-focus="reduced"] .vb-guides__intro-photo { display: none; }