/**
 * Course card grid:
 *   - 2 columns on desktop & tablet, 1 on mobile (source grid was 2fr / 3 rows,
 *     6 rows on mobile = single column)
 *   - card size is FLUID and keeps a fixed proportion: width comes from the grid,
 *     height follows via `aspect-ratio: 3 / 4`, so when the column width changes
 *     the height changes with it and the ratio stays constant
 *   - background image fills the card (object-fit: cover) and scales with it
 *   - NO overlay, text uses the theme's own typography & colour
 *   - content centred, container padding 0 60 50 (0 30 50 on mobile)
 *   - plus a staggered scroll-in reveal (assets/js/course-cards.js)
 * Pure core blocks: wp:group.course-card-grid > wp:cover.course-card.
 */

.course-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px; /* source: card margin-bottom 30px */
	margin-block: 48px;
}

/* Neutralise core flow-layout child margins inside the grid. */
.course-card-grid > * {
	margin-block: 0;
}

/* ---- Card shell: width from the grid, height locked to a 3:4 ratio ---- */
.course-card-grid .course-card.wp-block-cover {
	margin: 0;
	aspect-ratio: 3 / 4;
	min-height: 0; /* override core/cover's default min-height so the ratio wins */
	justify-content: center; /* flex_justify_content: center */
	align-items: center;     /* flex_align_items: center */
}

/* Source had no overlay (dimRatio 0) — keep the photo untinted. */
.course-card-grid .course-card .wp-block-cover__background {
	background: transparent;
}

/* Background image fills the whole card and scales with it at any resolution. */
.course-card-grid .course-card .wp-block-cover__image-background {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ---- Content: match the theme's own text style, just centre + source padding ---- */
.course-card-grid .course-card .wp-block-cover__inner-container {
	width: 100%;
	padding: 0 60px 50px;
	text-align: center;
	/* core/cover forces #fff on its content; restore Blocksy's body text colour
	   (var --theme-palette-color-3 → #6E6E75), which is what the original
	   Elementor widgets inherited (they set no colour of their own). */
	color: var(--theme-palette-color-3, #6e6e75);
}

.course-card-grid .course-card :where(h2, p) {
	text-align: center;
}

.course-card-grid .course-card p {
	color: var(--theme-palette-color-3, #6e6e75);
}

/* Blocksy headings colour: var --theme-palette-color-4 → #0D0E16 */
.course-card-grid .course-card :where(h2, h3) {
	color: var(--theme-palette-color-4, #0d0e16);
}

.course-card-grid .course-card p {
	margin: 0 0 0.5em;
}

.course-card-grid .course-card p:last-child {
	margin-bottom: 0;
}

/* ---- Scroll-in reveal ----
   distance + duration are data-driven: course-cards.js sets --reveal-distance
   and --reveal-duration from the data-* config; the values below are only
   fall-backs for when the script has not run. */
.course-card-grid .course-card.is-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance, 36px));
	transition:
		opacity var(--reveal-duration, 0.6s) cubic-bezier(0.22, 0.61, 0.36, 1),
		transform var(--reveal-duration, 0.6s) cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.course-card-grid .course-card.is-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- Tablet: still 2-up (no source column override); ratio unchanged ---- */
@media (max-width: 1024px) {
	.course-card-grid {
		gap: 24px;
	}
	.course-card-grid .course-card h2 {
		font-size: 26px;
	}
	.course-card-grid .course-card p {
		font-size: 12px;
	}
}

/* ---- Mobile: 1-up; same 3:4 ratio (≈ the source's 500px at phone widths) ---- */
@media (max-width: 781px) {
	.course-card-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-block: 32px;
	}
	.course-card-grid .course-card .wp-block-cover__inner-container {
		padding: 0 30px 50px;
	}
	.course-card-grid .course-card h2 {
		font-size: 24px;
	}
	.course-card-grid .course-card p {
		font-size: 12px;
	}
}

/* ---- Reduced motion: show immediately ---- */
@media (prefers-reduced-motion: reduce) {
	.course-card-grid .course-card.is-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}