/* "Peek inside" dialog (sidequest `pricingPeek`): the landing page's cohort peeks and the pricing page's Supporter peek are the same component, so it has ONE stylesheet, linked by both (`landing-paths.php`, `public-pricing.php`).
   The pricing page carries no inline <style> (a house rule, `PricingPromoAndClubCopyTest`). The class names keep the landing's `css-paths-peek*`: it was the first user, and renaming would only churn tests. */
/* The scroll behaviour (centred, never taller than the visible area, only the body scrolls) is the shared `.iwe-modal--contained`; this partial keeps only its width. */
.css-paths-peek .iwe-modal__dialog { max-width: 640px; }
.css-paths-peek .iwe-modal__title { margin: 0; font-size: var(--iwe-fs-h4); line-height: 1.2; }
.css-paths-peek-intro { margin: 0; color: var(--iwe-text); }
.css-paths-peek-lead { margin: 0; color: var(--iwe-text-muted); font-size: var(--iwe-fs-body-sm); }
.css-paths-peek-outro { margin: 0; font-family: var(--iwe-font-display); font-weight: var(--iwe-fw-bold); font-size: 1.125rem; line-height: 1.35; color: var(--iwe-navy-900); }
.css-paths-peek-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--iwe-space-4); }
.css-paths-peek-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--iwe-space-4); align-items: start; }
.css-paths-peek-item > .css-paths-peek-text:only-child { grid-column: 1 / -1; }
.css-paths-peek-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--iwe-radius-md); background: var(--iwe-surface-sunken); }
.css-paths-peek-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--iwe-space-2); margin: 0 0 var(--iwe-space-1); }
.css-paths-peek-title { margin: 0; font-weight: var(--iwe-fw-bold); color: var(--iwe-text); }
.css-paths-peek-line { margin: 0; font-size: var(--iwe-fs-body-sm); color: var(--iwe-text-muted); }

/* [2026-10-18, MG] Stack the thumbnail above the text on mobile, same breakpoint `.iwe-steplist__item`/`.iwe-guidehead` already stack
   their own thumb+text rows at (`iwe-components-ext.css`). `order: -1` keeps the thumbnail first without changing the markup. */
@media (max-width: 719px) {
	.css-paths-peek-item { grid-template-columns: 1fr; gap: var(--iwe-space-2); }
	.css-paths-peek-thumb { order: -1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
}