/******************************************************************
Cards of the Einblicke (style handle mediaschneider-cards)

Blog posts, Publikationen and Webinare in the blocks Einblicke (homepage,
Group 785 / Group 787) and Einblicke-Übersicht (Blog-Beitrag – 3 /
Mitarbeiter – 1). Markup: mediaschneider_einblicke_cards() (library/einblicke.php).

Card: picture, type badge (and the categories of blog posts), title, excerpt
(at most 3 lines), link with arrow and date. The link is the only link of the
card, but it covers the whole card (::after), so the whole card is clickable.
Hover: the card rises 3px with a light shadow, the picture zooms slowly to
102.5%, the arrow moves right. Keyboard focus: an outline around the card.

Layout by position in the list:
- mobile (below 48rem): one column; the first card big (Group 664: picture
  above the texts), the others small (Group 663: square picture 99px on the
  left, no excerpt);
- from 48rem: 12-column grid, the first three cards 1/3 (Group 562), the others
  1/2, from 64rem 1/4 (Group 563).

Background: --ms-card-bg (default Hellgrau), set by the blocks.
******************************************************************/

.ms-cards {
	display: grid;
	gap: var(--ms-cards-row-gap) var(--ms-cards-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The card fills its grid cell: cards in a row are equally high. */
.ms-cards__item {
	display: flex;
}

.ms-card {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	padding: 1.1875rem; /* 19px */
	color: var(--wp--preset--color--navy);
	background-color: var(--ms-card-bg, var(--wp--preset--color--grey-light));

	&:has(.ms-card__more:focus-visible) {
		outline: 2px solid var(--wp--preset--color--navy);
		outline-offset: 3px;
	}
}

/* 366 × 196 / 260 × 140px in the design. The picture fills its mask; without a picture: a blue area. */
.ms-card__media {
	aspect-ratio: 15 / 8;
	min-block-size: 0; /* the ratio wins over the picture's own height */
}

.ms-card__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--blue);
}

@media (prefers-reduced-motion: no-preference) {

	.ms-card {
		transition:
			translate 0.4s var(--ms-ease-out),
			box-shadow 0.4s var(--ms-ease-out);
	}

	.ms-card__image {
		transition: scale 1.4s var(--ms-ease-soft); /* slow and soft, also when the mouse leaves */
	}
}

@media (hover: hover) {
	.ms-card:hover {
		translate: 0 -0.1875rem;
		box-shadow: 0 0.75rem 1.5rem -1rem rgb(6 34 64 / 0.18);

		.ms-card__image {
			scale: 1.025;
		}
	}
}

.ms-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-block-start: var(--ms-card-image-gap);
}

/* Type badge (navy, 15px high) and categories, 10px */
.ms-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.5rem;
	font-size: 0.625rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.ms-card__type {
	padding-inline: 0.1875rem;
	line-height: 0.9375rem;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--navy);
}

.ms-card__title {
	margin-block-start: 0.5rem;
	font-size: var(--ms-fs-card-title);
	line-height: var(--ms-lh-card-title);
	font-weight: 600;
	color: inherit;
	overflow-wrap: break-word;
}

.ms-card__excerpt {
	display: -webkit-box;
	margin-block-start: 0.5rem;
	overflow: hidden;
	font-size: 0.75rem;
	line-height: var(--ms-lh-card-text);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* "Weiter lesen ›" and the date, at the bottom of the card */
.ms-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.25;
}

/* Always at the right edge: next to the link, above it (media query below) or on its own line. */
.ms-card__date {
	margin-inline-start: auto;
}

/*
The link to the post, stretched over the whole card (::after). Hover anywhere on the card
(and focus): text underlined, the arrow moves right (.ms-arrow, style.css). The focus
outline is around the card.
*/
.ms-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 700;
	color: var(--wp--preset--color--blue);
	text-decoration: none;

	&::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
	}

	&:is(:hover, :focus-visible) > span {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	&:focus-visible {
		outline: none;
	}
}

/*
Date above the link (still on the right), in every card, where the link and the date don't fit next to each
other in some cards. Measured with the longest default link text («Jetzt Video anschauen»,
156px at 12px; 131px at 10px in the small mobile cards) and the widest date (04.04.2000,
68px), without a scrollbar: below 371px (small mobile cards), 768–935px (the wide cards)
and 1024–1261px (the 1/4 cards). The ranges add 17px for a classic scrollbar (Windows)
and a few px for font rendering differences between browsers.
A longer «Button-Text» of a Publikation can still wrap elsewhere: the date then goes below.
*/
@media (width < 24.5rem), (48rem <= width < 60.25rem), (64rem <= width < 81rem) {

	.ms-card__footer {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.25rem;
	}

	.ms-card__date {
		order: -1;
	}
}

@media (width < 48rem) {

	/* Big first card: wider picture (320 × 140px) */
	.ms-cards__item:first-child .ms-card__media {
		aspect-ratio: 16 / 7;
	}

	/* Small cards: square picture on the left, texts next to it, no excerpt */
	.ms-cards__item:not(:first-child) {
		.ms-card {
			display: grid;
			grid-template-columns: 6.1875rem minmax(0, 1fr); /* 99px */
			column-gap: 0.75rem;
			padding: 0.8125rem 0.75rem; /* 13 / 12px */
		}

		.ms-card__media {
			aspect-ratio: 1;
		}

		.ms-card__body {
			padding-block-start: 0;
		}

		.ms-card__meta {
			font-size: 0.5rem;
		}

		.ms-card__type {
			line-height: 0.75rem;
		}

		.ms-card__title {
			margin-block-start: 0.125rem;
			font-size: 0.625rem;
			line-height: 1rem;
		}

		.ms-card__excerpt {
			display: none;
		}

		.ms-card__footer {
			padding-block-start: 0.5rem;
			font-size: 0.625rem;
		}
	}
}

@media (width >= 48rem) {

	.ms-cards {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.ms-cards__item {
		grid-column: span 6;
	}

	.ms-cards__item:nth-child(-n + 3) {
		grid-column: span 4;
	}
}

@media (width >= 64rem) {

	.ms-cards__item:nth-child(n + 4) {
		grid-column: span 3;
	}
}