/* Articles listing + single */

main.ordinator-page--articles .ordinator-page-shell,
main.ordinator-page--article .ordinator-page-shell {
	width: 100%;
	max-width: var(--ordinator-wide-width);
}

main.ordinator-page--articles .ordinator-page-shell > .wp-block-post-title,
main.ordinator-page--articles .ordinator-page-shell > h1 {
	margin-bottom: clamp(0.85rem, 2vh, 1.35rem);
}

.ordinator-articles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.85rem, 2vh, 1.35rem);
}

.ordinator-articles__item {
	margin: 0;
}

.ordinator-articles__empty {
	margin: 0;
	color: color-mix(in srgb, var(--ordinator-fg) 72%, transparent);
	text-align: center;
}

.ordinator-article-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(10.5rem, 28vw, 16rem);
	overflow: hidden;
	background: color-mix(in srgb, var(--ordinator-fg) 6%, var(--ordinator-bg));
}

.ordinator-article-hero.has-image {
	color: #fff;
}

.ordinator-article .ordinator-article-hero {
	min-height: clamp(14rem, 38vw, 22rem);
}

.ordinator-article-hero__media {
	position: absolute;
	inset: 0;
}

.ordinator-article-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ordinator-article-hero.has-image .ordinator-article-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(35, 42, 49, 0.78) 0%,
		rgba(35, 42, 49, 0.28) 48%,
		rgba(35, 42, 49, 0.06) 100%
	);
}

.ordinator-article-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	padding: clamp(1rem, 3vw, 1.75rem);
	max-width: 46rem;
}

.ordinator-article-hero--link,
.ordinator-article-hero--link:hover,
.ordinator-article-hero--link:focus-visible {
	color: inherit;
	text-decoration: none;
	background-image: none;
}

.ordinator-article-hero__title {
	margin: 0;
	font-size: clamp(1.35rem, 3.2vw, 2.15rem);
	font-weight: var(--ordinator-heading-weight);
	letter-spacing: var(--ordinator-heading-letter);
	line-height: 1.15;
}

.ordinator-article .ordinator-article-hero__title {
	font-size: var(--ordinator-h1-size);
}

.ordinator-article-hero__meta {
	margin: 0;
	font-size: clamp(0.82rem, 1.3vw, 0.95rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	opacity: 0.88;
}

.ordinator-article-hero:not(.has-image) .ordinator-article-hero__title,
.ordinator-article-hero:not(.has-image) .ordinator-article-hero__meta {
	color: var(--ordinator-fg);
}

.ordinator-article-hero:not(.has-image) .ordinator-article-hero__meta {
	opacity: 0.72;
}

.ordinator-articles__item .ordinator-article-hero {
	transition: transform 0.35s ease;
}

.ordinator-articles__item:hover .ordinator-article-hero.has-image .ordinator-article-hero__image,
.ordinator-articles__item:focus-within .ordinator-article-hero.has-image .ordinator-article-hero__image {
	transform: scale(1.02);
}

.ordinator-article-hero__image {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ordinator-article__body {
	width: min(100%, var(--ordinator-content-width));
	margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
	font-size: 1.125rem;
	line-height: 1.55;
}

.ordinator-article__body > :first-child {
	margin-top: 0;
}

.ordinator-article__body > :last-child {
	margin-bottom: 0;
}

.ordinator-article__body h2,
.ordinator-article__body h3 {
	font-weight: var(--ordinator-heading-weight);
	letter-spacing: var(--ordinator-heading-letter);
	line-height: 1.2;
}

.ordinator-article__body h2 {
	font-size: var(--ordinator-h2-size);
	margin: 1.75rem 0 0.7rem;
}

.ordinator-article__body h3 {
	font-size: var(--ordinator-h3-size);
	margin: 1.4rem 0 0.55rem;
}

.ordinator-article__body p {
	margin: 0 0 1rem;
}

.ordinator-article__body a {
	background-size: 100% 1px;
}

.ordinator-article__body figure,
.ordinator-article__body .wp-block-image,
.ordinator-article__body .wp-caption {
	margin: 1.5rem 0;
}

.ordinator-article__body figure img,
.ordinator-article__body .wp-block-image img,
.ordinator-article__body .wp-caption img {
	width: 100%;
	height: auto;
}

.ordinator-article__body figcaption,
.ordinator-article__body .wp-element-caption,
.ordinator-article__body .wp-caption-text {
	margin: 0.45rem 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--ordinator-fg) 68%, transparent);
}

.ordinator-article__back {
	width: min(100%, var(--ordinator-content-width));
	margin: 2rem auto 0;
}

.ordinator-articles__pagination {
	margin-top: clamp(1.25rem, 3vh, 2rem);
}

.ordinator-articles__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ordinator-articles__pagination a,
.ordinator-articles__pagination span {
	color: inherit;
}

@media (max-width: 767px) {
	.ordinator-article-hero,
	.ordinator-article .ordinator-article-hero {
		min-height: clamp(12rem, 58vw, 18rem);
	}

	.ordinator-article__body {
		font-size: 1.05rem;
	}
}
