/*
 * The gallery at /wordpress-demo/.
 *
 * Loaded on the archive ONLY, and written to sit inside the site's own theme rather than
 * replace it — this page keeps jsk-growth's header and footer because it is a page of
 * jskbusinesssolutions.com, not a demo. Colours are deliberately the site's, not a demo's.
 *
 * Nothing here is scoped under .jsk-demo-body, because the archive does not carry that
 * class. That is the intended separation: a demo's stylesheet cannot reach this page, and
 * this cannot reach a demo.
 */

.jsk-demo-gallery {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.jsk-demo-gallery__inner {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.jsk-demo-gallery__head {
	max-width: 62ch;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.jsk-demo-gallery__head h1 {
	margin: 0 0 0.6rem;
}

.jsk-demo-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: clamp(1rem, 3vw, 1.75rem);
}

/*
 * The card states its own text colour rather than inheriting.
 *
 * The card is white in both of the site's colour schemes, but `color: inherit` picks up
 * the theme's ink -- which in dark mode is near-white, and rendered the title and excerpt
 * as pale grey on white. Same mistake as the demo buttons: assuming an empty canvas when
 * the theme is still supplying values.
 */
.jsk-demo-card a {
	display: block;
	text-decoration: none;
	color: #12233d;
	border: 1px solid rgba(14, 53, 108, 0.12);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jsk-demo-card a:hover,
.jsk-demo-card a:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(14, 53, 108, 0.14);
}

/*
 * A fixed aspect ratio, cropped from the top.
 *
 * A demo page is several thousand pixels tall; a card shows its first screenful, which is
 * the part that sells it. object-position: top means a longer demo does not push its own
 * hero out of the frame.
 */
.jsk-demo-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top;
	background: #eef4fa;
}

.jsk-demo-card__noshot {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background: #eef4fa;
	font-size: 0.85rem;
	opacity: 0.7;
}

.jsk-demo-card__body {
	padding: 1rem 1.15rem 1.25rem;
}

/*
 * The heading needs its own colour, not the anchor's.
 *
 * Setting colour on .jsk-demo-card a fixed the excerpt and the call to action but not the
 * title, because the theme colours h2 directly and a rule on an ancestor loses to one on
 * the element. Two rounds of the same bug: the theme is still styling this page, and every
 * element that must look a particular way has to say so itself.
 */
.jsk-demo-card__body h2 {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	color: #12233d;
}

.jsk-demo-card__body p {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
}

.jsk-demo-card__cta {
	font-weight: 700;
	font-size: 0.9rem;
}

.jsk-demo-gallery__note {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	font-size: 0.85rem;
	opacity: 0.75;
	max-width: 70ch;
}