/**
 * Course card modal: the grid card content, opened from its own button.
 *
 * Only the course-specific parts live here. The dialog reuses the theme's
 * .ipa-modal base (padding, radius, backdrop, close button), so it looks like
 * every other modal on the site.
 *
 * Every selector is qualified as `dialog.ipa-modal.ipa-modal--course` on
 * purpose: a plugin stylesheet is not guaranteed to load after the theme's, so
 * these rules win on specificity rather than on cascade order. Without that,
 * the theme's own `.ipa-modal` values silently override the ones below.
 */
dialog.ipa-modal.ipa-modal--course {
	--_padding: var(--wp--preset--spacing--70, 32px) var(--wp--preset--spacing--60, 24px);
	/* The theme's 480px floor would overflow narrow viewports. */
	--_min-width: min(480px, calc(100vw - 2rem));

	min-width: var(--_min-width);
	max-width: min(480px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	color: var(--wp--preset--color--neutral-700);
	font-size: var(--base-font-size);
}

.ipa-modal.ipa-modal--course::backdrop{
    background: rgba( 11, 77, 208, 0.5);
    backdrop-filter: blur(4px);
}

.ipa-modal.ipa-modal--course .close-btn{
	right: 10px;
}

dialog.ipa-modal.ipa-modal--course .ipa-modal__content {
	gap: var(--wp--preset--spacing--50);
}

dialog.ipa-modal.ipa-modal--course .ipa-modal__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--medium, 8px);
}

dialog.ipa-modal.ipa-modal--course .ipa-modal__description{
	padding-block: var(--wp--preset--spacing--40);
}

dialog.ipa-modal.ipa-modal--course .ipa-modal__description > :last-child {
	margin-bottom: 0;
}

/**
 * Desktop: the same content laid out in two columns — image on the left,
 * title, description and button stacked on the right.
 *
 * The markup is identical on both sizes: the mobile layout is the theme's
 * stacked, centred flex column, and this only re-places the three blocks on a
 * grid from the breakpoint the theme already uses for its mobile/desktop
 * switch. Nothing below the breakpoint changes.
 */
@media ( min-width: 761px ) {

	dialog.ipa-modal.ipa-modal--course {
		--_min-width: min( 720px, calc( 100vw - 2rem ) );

		max-width: min( 720px, calc( 100vw - 2rem ) );
	}

	dialog.ipa-modal.ipa-modal--course .ipa-modal__content {
		display: grid;
		/* Rows: the text block takes what it needs, the button sits under it. */
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		grid-template-rows: 1fr auto;
		align-items: start;
		text-align: left;
	}

	dialog.ipa-modal.ipa-modal--course .ipa-modal__image {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: stretch;
	}

	/* Cover, so the image fills its column whichever side happens to be taller. */
	dialog.ipa-modal.ipa-modal--course .ipa-modal__image img {
		height: 100%;
		object-fit: cover;
	}

	dialog.ipa-modal.ipa-modal--course .ipa-modal__body {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
	}

	dialog.ipa-modal.ipa-modal--course .ipa-modal__actions {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}
}

/**
 * Mobile: the close button sits in the flow at the top of the dialog, pushed to
 * the right edge, instead of the theme's absolute corner placement — on a
 * narrow dialog that overlapped the image.
 */
@media ( max-width: 760px ) {

	dialog.ipa-modal.ipa-modal--course .close-btn {
		position: static;
		display: block;
		margin-left: auto;
		margin-bottom: var(--wp--preset--spacing--50);
	}
}