@use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;

.ontario-card__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: spacing.$spacing-6;
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-0;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		gap: spacing.$spacing-0;
		flex-direction: column;
	}
}

.ontario-card {
	box-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);
	border-radius: globalVariables.$global-radius;
	overflow: hidden;
	padding: spacing.$spacing-0;
	list-style-type: none;
	transition: all 0.3s ease-in-out;
	position: relative;
	cursor: pointer;
	background: colours.$ontario-colour-white;
	flex: 0 1 auto;

	&:hover {
		box-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);
	}

	&:focus-within {
		box-shadow: placeholders.$ontario-focus-box-shadow;
		outline: globalFunctions.px-to-rem(4) solid transparent;
		transition: box-shadow 0.1s ease-in-out;
	}

	&:active {
		box-shadow: placeholders.$ontario-focus-box-shadow;
	}

	.ontario-card--cards-per-row-4 & {
		width: calc(25% - 2rem);

		&:nth-child(4n) {
			margin-right: spacing.$spacing-0;
		}
	}

	.ontario-card--cards-per-row-3 & {
		width: calc(33.3333% - 1.75rem);

		&:nth-child(3n) {
			margin-right: spacing.$spacing-0;
		}
	}

	.ontario-card--cards-per-row-2 & {
		width: calc(50% - 1.25rem);

		&:nth-child(2n) {
			margin-right: spacing.$spacing-0;
		}
	}

	@media screen and (max-width: breakpoints.$medium-breakpoint) {
		.ontario-card--cards-per-row-4 & {
			width: calc(50% - 1.25rem);

			&:nth-child(2n) {
				margin-right: spacing.$spacing-0;
			}
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin-bottom: spacing.$spacing-6;
		width: 100% !important; // to override the specificity of the widths listed for the card-rows
		max-width: 100%;
	}
}

.ontario-card--position-horizontal {
	display: flex;
	width: 50%;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: 100%;
		max-width: 100%;
	}

	.ontario-card__image-container,
	.ontario-card__text-container {
		position: relative;
	}

	a {
		&:focus-within {
			box-shadow: none;
			outline: none;
		}

		&:active {
			box-shadow: none;
		}
	}

	img {
		height: 100%;
		position: absolute;
	}
}

.ontario-card--position-horizontal__image-right {
	flex-direction: row-reverse;
}

.ontario-card__heading {
	@extend %h4-styles;
	margin: spacing.$spacing-0;
	padding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;
	transition: text-decoration 0.3s ease-in-out;
	background-color: colours.$ontario-colour-white;
	max-width: none;

	.ontario-card:hover & {
		text-decoration-line: underline;
		text-decoration-color: colours.$ontario-colour-black;
	}

	.ontario-card--light & {
		background-color: colours.$ontario-greyscale-5;
		padding-top: spacing.$spacing-4;
		padding-bottom: spacing.$spacing-4;
	}

	.ontario-card--dark & {
		background-color: colours.$ontario-colour-black;
		padding-top: spacing.$spacing-4;
		padding-bottom: spacing.$spacing-4;
	}

	.ontario-card--dark:hover & {
		text-decoration-line: underline;
		text-decoration-color: colours.$ontario-colour-white;
	}

	.ontario-card--no-description & {
		padding: spacing.$spacing-4 spacing.$spacing-5;
	}

	a {
		color: colours.$ontario-colour-black;
		text-decoration: none;
		outline: none;

		.ontario-card--dark & {
			color: colours.$ontario-colour-white;
		}

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}

		&:focus {
			box-shadow: none;
		}

		&:active {
			outline: none;
		}
	}

	@media screen and (max-width: breakpoints.$medium-breakpoint) {
		font-size: fontSizes.$ontario-font-size-large;
		padding-left: spacing.$spacing-4;
		padding-right: spacing.$spacing-4;
	}
}

.ontario-card__text-container {
	.ontario-card--position-horizontal & {
		width: math.percentage(math.div(2, 3));
	}

	.ontario-card--image--one-fourth & {
		width: 75%;
	}

	.ontario-card--no-image & {
		width: 100%;
	}
}

.ontario-card__description {
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;
	background-color: colours.$ontario-colour-white;

	p {
		margin-top: spacing.$spacing-0;
	}

	p:last-of-type {
		margin-bottom: spacing.$spacing-0;
	}

	.ontario-card--light &,
	.ontario-card--dark & {
		padding-top: spacing.$spacing-4;
	}

	@media screen and (max-width: breakpoints.$medium-breakpoint) {
		padding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;

		.ontario-card--light &,
		.ontario-card--dark & {
			padding-top: spacing.$spacing-4;
		}
	}
}

.ontario-card__image-container {
	.ontario-card--position-horizontal & {
		width: 33.3%;
	}

	.ontario-card--image--one-fourth & {
		width: 25%;
	}
}

.ontario-card__image {
	width: 100%;
	object-fit: cover;
	background-size: 100% 100%;

	.ontario-card--position-horizontal__image-right & {
		height: 100%;
	}

	.ontario-card--position-horizontal__image-left & {
		height: 100%;
	}
}

.ontario-card--light.ontario-card--no-description {
	background-color: colours.$ontario-greyscale-5;
}

.ontario-card--dark.ontario-card--no-description {
	background-color: colours.$ontario-colour-black;
}
