@import "../global.less";

.cards:has(.cards-cta) {
	--border-radius: 16px;
	--cards-light-gray: var(--base-5);
	--cards-dark-gray: var(--base-2);
	--min-width: 240px;
	--max-width: 700px;
	--padding-outer: 1.5rem;
	--grid-min-gap: 0.5rem;

	display: grid;
	grid-template-areas:
		"icon title"
		"text-content text-content"
		"cta cta";
	grid-template-columns: 24px 1fr;
	grid-template-rows: min-content auto min-content;
	grid-gap: var(--grid-min-gap);
	position: relative;
	min-width: var(--min-width);
	max-width: var(--max-width);
	min-height: 200px;
	padding: 0;
	margin: 2rem 0 1rem;
	border: none;
	border-radius: var(--border-radius);
	color: var(--brand-secondary);
	text-decoration: none;
	background-color: var(--cards-light-gray);
	cursor: pointer;
	overflow: clip;

	&:hover {
		.cards-cta span.arrow:before {
			animation: scroll 0.6s cubic-bezier(0.46, 0.06, 0, 1.02);
		}
	}

	// start padding

	.h4 {
		padding-block-start: var(--padding-outer);
		padding-inline-end: var(--padding-outer);
	}

	&:not(.cards-wide):has(> :is(img, picture, .illustration):first-child) .h4 {
		padding-block-start: 0;
	}

	.cards-icon {
		padding-block-start: var(--padding-outer);
	}

	:is(.h4, .cards-icon) {
		padding-inline-start: var(--padding-outer);
	}

	.cards-content {
		padding-inline: var(--padding-outer);
	}

	.cards-cta {
		padding-block-end: var(--padding-outer);
		padding-inline: var(--padding-outer);
	}

	&.cards-wide .cards-content {
		padding-block-end: var(--padding-outer);
	}

	&.cards-wide:has(> :is(img, picture, .illustration):first-child)
		:is(.h4, .cards-icon, .cards-content, .cards-cta) {
		padding-inline-start: 0;

		&:is(.cards-content) {
			padding-block-end: 0;
		}
	}

	// end paddings

	// start button specific styling

	&:is(button) {
		line-height: inherit;
	}
	// end button specific styling

	.cards-icon {
		grid-area: icon;
		padding-block-end: 1.25lh; // this is meant to ensure the same gap below title-icon and title-text, since at of now text-box-trim does not exist, so we cannot enforce a consistant spacing between the title part and the text-content part. Once text-box-trim is widely supported remove it and add text-box-trim to the title-text
		width: 24px;
		height: 24px;
		margin-inline-end: 0.5rem;
	}

	&:has(> :is(img, picture, .illustration):first-child) {
		grid-template-areas:
			"image"
			"title"
			"text-content"
			"cta";
		grid-template-columns: 1fr;

		&:is(button) :is(img, picture, .illustration) {
			max-width: 100%;
		}

		&:before {
			content: "";
			aspect-ratio: 16 / 9;
			width: 100%;
			margin: 0 0 calc(1.5rem - var(--grid-min-gap));
			grid-area: image;
		}

		&:has(> :is(img, picture, .illustration):first-child.ratio-1-1):before {
			aspect-ratio: 1 / 1;
		}

		&:has(> :is(img, picture, .illustration):first-child.ratio-4-3):before {
			aspect-ratio: 4 / 3;
		}

		& > :is(img, picture, .illustration):first-child {
			width: 100%;
			aspect-ratio: 16 / 9;
			grid-area: image;
			object-fit: cover;
			margin: 0;
			position: absolute;

			&:is(picture) > img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&.ratio-1-1 {
				aspect-ratio: 1 / 1;
			}

			&.ratio-4-3 {
				aspect-ratio: 4 / 3;
			}
		}
	}

	&:not(:has(.cards-icon)) {
		grid-template-areas:
			"title title"
			"text-content text-content"
			"cta cta";
	}

	&:not(:has(.h4)) {
		grid-template-areas:
			"icon icon"
			"text-content text-content"
			"cta cta";
	}

	&.cards-wide {
		grid-template-areas:
			"icon title cta"
			"text-content text-content cta";
		grid-template-columns: min-content 1fr auto;
		min-height: unset;
		min-width: 450px;

		@media screen and (max-width: 600px) {
			min-width: unset;
		}

		&:not(:has(.cards-icon)) {
			grid-template-areas:
				"title cta"
				"text-content cta";
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto;
		}

		&:not(:has(.cards-content)) {
			grid-template-areas: "icon title cta";
			grid-template-rows: min-content;

			&:not(:has(.cards-icon)) {
				grid-template-areas: "title cta";
			}
		}

		.cards-cta {
			margin-block-start: 0;
			height: 100%;
			justify-self: end;

			& :not(.arrow) {
				display: none;
			}
		}

		&:not(:has(> :is(img, picture, .illustration):first-child)) {
			grid-template-rows: auto auto;

			& .cards-cta {
				padding-block-end: 0;
			}
		}

		&:not(:has(> :is(img, picture, .illustration):first-child)):not(:has(.h4)) {
			grid-template-areas: "icon text-content cta";
			grid-template-columns: auto 1fr min-content;
			grid-template-rows: auto;
			padding: var(--padding-outer);

			& :is(.cards-icon, .cards-content, .cards-cta) {
				padding: 0;
			}
		}

		&:not(:has(> :is(img, picture, .illustration):first-child)):not(
				:has(.cards-content)
			) {
			grid-template-areas: "icon title cta";
			grid-template-columns: auto 1fr min-content;
			grid-template-rows: auto;
			padding: var(--padding-outer);
			align-items: center;

			& :is(.cards-icon, .h4, .cards-cta) {
				padding: 0;
			}
		}

		&:not(:has(> :is(img, picture, .illustration):first-child)):not(
				:has(.cards-icon)
			):not(:has(.cards-content)) {
			grid-template-areas: "title cta";
			grid-template-columns: 1fr min-content;
			grid-template-rows: auto;
			padding: var(--padding-outer);

			& :is(.h4, .cards-cta) {
				padding: 0;
			}
		}

		&:has(> :is(img, picture, .illustration):first-child) {
			grid-template-areas:
				"image title"
				"image text-content"
				"image cta";
			grid-template-columns: auto 1fr;
			grid-template-rows: auto 1fr min-content;
			padding: 0;
			min-width: 600px;
			grid-column-gap: var(--padding-outer);

			& .cards-cta {
				justify-self: start;
				height: min-content;

				& :not(.arrow) {
					display: revert;
				}
			}

			&:before {
				grid-area: image;
				object-fit: cover;
				position: relative;
				margin: 0;
				height: 224px;
				aspect-ratio: 1;
			}

			& > :is(img, picture, .illustration):first-child {
				max-width: 100%;
				object-fit: cover;
				width: auto;
				height: 100%;
				max-height: 100%;
				position: absolute;
				left: 0;
				aspect-ratio: 1;
			}

			&:not(:has(.cards-content)) {
				grid-template-areas:
					"image title"
					"image cta";
				grid-template-rows: auto min-content;
			}
		}
	}

	&:hover {
		background-color: var(--cards-dark-gray);
		color: var(--white);

		.h4 {
			color: inherit;
		}
	}

	&:focus {
		box-shadow: 0 0 0 2px var(--brand-secondary);
		outline: 2px solid transparent;
		color: var(--brand-secondary);
	}

	.cards-content {
		text-align: start;
		grid-area: text-content;
	}

	.cards-cta {
		grid-area: cta;
		align-self: end;
		display: flex;
		gap: 0.5rem;
		margin-block-start: calc(2rem - var(--grid-min-gap));

		& span.arrow {
			width: 40px;
			display: grid;
			overflow: clip;

			&:before {
				place-self: center;
				content: "";
				width: 18px;
				height: 18px;
				display: block;
				mask: url("../../icons/shapes/arrow-right.svg") 0 0 / 18px 18px
					no-repeat;
				background-color: currentColor;
			}
		}
	}

	.cards-icon {
		color: currentColor;
		max-width: 24px;
	}

	.h4 {
		grid-area: title;
		font-family: var(--brand-headline);
		text-align: start;
		margin-block: 0;
	}

	@keyframes scroll {
		0% {
			transform: translateX(0);
			opacity: 1;
		}

		29.9% {
			transform: translateX(150%);
			opacity: 1;
		}

		29.91% {
			opacity: 0;
		}

		30.09% {
			opacity: 1;
		}

		30.1% {
			transform: translateX(-150%);
		}

		100% {
			transform: translateX(0);
			opacity: 1;
		}
	}
}

// TODO: silent support for non-migrated cards. Remove during next major release
// cards.legacy: option for projects who need to support browsers with no implementation of the `has()` selector yet (to be removed during next major version release as well of course)
.cards:not(:has(.cards-cta)),
.cards.legacy {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	position: relative;
	padding: 2.25rem 1.5rem 1.5rem;
	margin: 2rem 0 1rem;
	border-radius: 4px;
	box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
	color: @brand-secondary;
	text-decoration: none;
	background-color: @white;
	cursor: pointer;
	transition: 0.5s;

	&:after {
		position: absolute;
		bottom: 0;
		left: 0;
		content: "";
		width: 100%;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	&:hover {
		box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
		color: @brand-secondary;

		&:after {
			opacity: 1;
		}
	}

	&:focus {
		box-shadow: 0 0 0 2px @brand-secondary;
		outline: 2px solid transparent;
		color: @brand-secondary;

		&:after {
			opacity: 1;
		}
	}

	&.cards-primary {
		&:after {
			border-bottom: 4px solid @brand-primary;
		}

		> i {
			color: @brand-secondary;
		}

		.cards-icon {
			color: @brand-secondary;
			background-color: @brand-primary;

			svg {
				fill: @brand-secondary;
			}
		}
	}

	&.cards-secondary {
		&:after {
			border-bottom: 4px solid @brand-secondary-info-1;
		}

		.cards-icon {
			background-color: @brand-secondary-info-1;

			svg {
				fill: @white;
			}
		}
	}

	&.cards-tertiary {
		&:after {
			border-bottom: 4px solid @brand-secondary-info-2;
		}

		.cards-icon {
			background-color: @brand-secondary-info-2;

			svg {
				fill: @white;
			}
		}
	}

	&.cards-wide {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 1.5rem;
		margin-top: 2.25rem;

		> i {
			margin-top: initial;
		}

		.cards-icon {
			font-family: var(--brand-monofont);
			height: 2rem;
			top: -1rem;
		}

		.cards-content {
			margin-bottom: 0;
			margin-top: 0.75rem;

			.h3 {
				margin-top: 0;
				margin-bottom: 0.25rem;
			}
		}
	}

	> i {
		margin-top: auto;
	}

	> img {
		margin: -2.25rem -1.5rem 1rem;
		object-fit: cover;
		max-height: 130px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.cards-icon {
		display: flex;
		position: absolute;
		top: -1.25rem;
		left: 1.5rem;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 4px;
		align-items: center;
		justify-content: center;
		color: @brand-secondary;
		background-color: @brand-primary;

		svg {
			max-width: 24px;
		}
	}

	.cards-content {
		display: flex;
		flex-direction: column;
		margin-bottom: 1.25rem;

		.h4 {
			font-family: var(--brand-headline);
			margin-top: 0;
		}
	}
}

// TODO: remove during next major release, not offered for a long time now
.card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 1rem;

	header {
		padding: 1rem 1.5rem 0;

		/* stylelint-disable selector-list-comma-newline-after */
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		.h1,
		.h2,
		.h3,
		.h4,
		.h5,
		.h6 {
			margin: 0;
		}
		/* stylelint-enable selector-list-comma-newline-after */

		a {
			text-decoration: none;
		}
	}

	// TODO: to be removed. Not used anymore (Old card). Remove it in next major release
	&.card-primary {
		background-color: var(--bg-primary);

		.card-header {
			position: relative;
			border-top: 7px solid @brand-primary-light;

			* {
				color: var(--brand-secondary);
			}

			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 1.6rem;
				width: 1.2rem;
				height: 0.6rem;
				background-color: @brand-primary-light;
				clip-path: polygon(100% 0, 0 0, 50% 100%);
			}

			.media {
				margin: 0;
				color: @black;
			}
		}
	}

	&.card-secondary {
		background-color: @brand-bg-2;
		position: relative;

		.card-header {
			position: relative;
			border-top: 7px solid @brand-accent;

			* {
				color: var(--brand-secondary);
			}

			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 1.6rem;
				width: 1.2rem;
				height: 0.6rem;
				background-color: @brand-accent;
				clip-path: polygon(100% 0, 0 0, 50% 100%);
			}
		}
	}

	&.card-plain {
		background-color: @light-gray;

		.card-header {
			* {
				color: var(--brand-secondary);
			}
		}
	}

	.card-body {
		padding: 1.5rem;
		flex: 1 1 auto;

		/* stylelint-disable selector-list-comma-newline-after */
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		.h1,
		.h2,
		.h3,
		.h4,
		.h5,
		.h6 {
			margin: 1rem 0;

			& a {
				text-decoration: none;
				color: var(--brand-secondary);
			}
		}
		/* stylelint-enable selector-list-comma-newline-after */
	}

	.card-footer {
		padding: 1rem 1.5rem;
		background: rgb(0 0 0 / 3%);

		.footer-text {
			p {
				margin: 0.25rem 0;
			}
		}

		.footer-link {
			text-align: center;
			font-size: 80%;
		}
	}

	.card-img {
		height: 10rem;

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}
}

@media (forced-colors: active) {
	.cards,
	.card {
		border: 3px solid;

		&:hover {
			outline: 5px solid;
		}
	}
}