/**
 * Kijuju – Projektarchiv und einzelne Projektseiten
 *
 * Zielseiten:
 * - body.post-type-archive-projekt
 * - body.single-projekt
 */

/* =========================================================
   Variablen
   ========================================================= */

:root {
	--kijuju-project-paper: #f4f1eb;
	--kijuju-project-card: #ffffff;
	--kijuju-project-dark: #102733;
	--kijuju-project-text: #15232d;
	--kijuju-project-muted: #52606a;
	--kijuju-project-border: #d8d4cc;
	--kijuju-project-pink: #ec1e64;
	--kijuju-project-turquoise: #18d8ad;
	--kijuju-project-shadow: 0 10px 28px rgb(16 39 51 / 7%);
	--kijuju-project-font:
		"Segoe UI",
		"Noto Sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
}

/* =========================================================
   Gemeinsame Grundlage
   ========================================================= */

.post-type-archive-projekt #main,
.single-projekt #main {
	color: var(--kijuju-project-text);
	background: var(--kijuju-project-paper);
}

.post-type-archive-projekt #main *,
.single-projekt #main * {
	box-sizing: border-box;
}

/* =========================================================
   Projektarchiv: Kopf
   ========================================================= */

.post-type-archive-projekt #main > .ct-container {
	width: min(1320px, calc(100% - 48px));
	max-width: none;
	padding-top: clamp(42px, 5vw, 76px);
	padding-bottom: clamp(58px, 6vw, 92px);
}

.post-type-archive-projekt .hero-section {
	margin: 0 0 clamp(30px, 3.5vw, 46px);
}

.post-type-archive-projekt .entry-header {
	max-width: 780px;
}

.post-type-archive-projekt .page-title .ct-title-label {
	display: none;
}

.post-type-archive-projekt .page-title {
	position: relative;
	width: fit-content;
	margin: 0;
	font-family: var(--kijuju-project-font);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--kijuju-project-dark);
}

.post-type-archive-projekt .page-title::after {
	display: block;
	width: 180px;
	max-width: 70%;
	height: 16px;
	margin-top: 8px;
	content: "";
	background-image: url("../images/content/content-line-turquoise.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.post-type-archive-projekt .page-description,
.post-type-archive-projekt .page-description.ct-hidden-sm {
	display: block !important;
	max-width: 650px;
	margin-top: 18px;
	font-family: var(--kijuju-project-font);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.65;
	color: var(--kijuju-project-muted);
}

.post-type-archive-projekt .page-description p {
	margin: 0;
}

/* =========================================================
   Projektarchiv: Karten
   ========================================================= */

.post-type-archive-projekt .entries[data-layout="grid"] {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.6vw, 38px) !important;
	margin: 0;
}

.post-type-archive-projekt .entry-card {
	display: grid;
	grid-template-rows: auto auto 1fr;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 !important;
	background: var(--kijuju-project-card);
	border: 1px solid var(--kijuju-project-border);
	border-radius: 0;
	box-shadow: 0 4px 14px rgb(16 39 51 / 4%);
	overflow: hidden;
	transition:
		transform 170ms ease,
		border-color 170ms ease,
		box-shadow 170ms ease;
}

.post-type-archive-projekt .entry-card:hover {
	border-color: rgb(16 39 51 / 28%);
	box-shadow: var(--kijuju-project-shadow);
	transform: translateY(-3px);
}

.post-type-archive-projekt .entry-card .entry-title {
	margin: 0 !important;
	padding: 18px 18px 14px;
	font-family: var(--kijuju-project-font);
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--kijuju-project-dark);
}

.post-type-archive-projekt .entry-card .entry-title a {
	color: inherit;
	text-decoration: none;
}

.post-type-archive-projekt .entry-card .entry-title a:hover {
	color: var(--kijuju-project-pink);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.post-type-archive-projekt .entry-card .ct-media-container {
	display: block;
	width: 100%;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	background: #e4e6e5;
	overflow: hidden;
}

.post-type-archive-projekt .entry-card .ct-media-container img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover;
	object-position: center;
	transition: transform 260ms ease;
}

.post-type-archive-projekt .entry-card:hover .ct-media-container img {
	transform: scale(1.035);
}

.post-type-archive-projekt .entry-card .entry-excerpt {
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0 !important;
	padding: 18px 18px 22px;
	font-family: var(--kijuju-project-font);
	font-size: 0.98rem;
	line-height: 1.58;
	color: var(--kijuju-project-text);
}

.post-type-archive-projekt .entry-card .entry-excerpt p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.post-type-archive-projekt .entry-card .entry-meta {
	display: none;
}

.post-type-archive-projekt .entry-card a:focus-visible {
	outline: 4px solid var(--kijuju-project-pink);
	outline-offset: -4px;
}


/* =========================================================
   Projektarchiv: Projektrunden
   ========================================================= */

/*
 * Die Überschrift wird per PHP direkt zwischen die Karten gesetzt.
 * Als Grid-Element läuft sie über die gesamte Breite.
 */
.post-type-archive-projekt .kijuju-project-round-heading {
	position: relative;
	grid-column: 1 / -1;

	width: fit-content;
	max-width: 100%;
	margin:
		clamp(26px, 3vw, 44px)
		0
		2px;

	font-family: var(--kijuju-project-font);
	font-size: clamp(1.55rem, 2.4vw, 2.15rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;

	color: var(--kijuju-project-dark);
}

.post-type-archive-projekt
	.entries[data-layout="grid"]
	> .kijuju-project-round-heading:first-child {
	margin-top: 0;
}

.post-type-archive-projekt .kijuju-project-round-heading::after {
	display: block;

	width: 135px;
	max-width: 75%;
	height: 13px;
	margin-top: 7px;

	content: "";

	background-image:
		url("../images/content/content-line-turquoise.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.post-type-archive-projekt
	.kijuju-project-round-heading--undated {
	color: var(--kijuju-project-muted);
}


/* =========================================================
   Projektarchiv: Seitennavigation
   ========================================================= */

.post-type-archive-projekt .ct-pagination {
	margin-top: clamp(34px, 4vw, 54px);
}

.post-type-archive-projekt .ct-pagination a,
.post-type-archive-projekt .ct-pagination .current {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 12px;
	font-family: var(--kijuju-project-font);
	font-weight: 750;
	text-decoration: none;
	border: 2px solid var(--kijuju-project-dark);
	border-radius: 0;
}

.post-type-archive-projekt .ct-pagination .current {
	color: #ffffff;
	min-height: var(--kijuju-project-header-min-height);

	background: var(--kijuju-project-dark);
}

.post-type-archive-projekt .ct-pagination a:hover {
	color: #ffffff;
	background: var(--kijuju-project-pink);
	border-color: var(--kijuju-project-pink);
}

/* =========================================================
   Einzelprojekt: Variablen und Außenlayout
   ========================================================= */

.single-projekt {
	--kijuju-project-content-width: 820px;
	--kijuju-project-shell-width: 1200px;
	--kijuju-project-header-gap: 24px;
	--kijuju-project-header-min-height: 340px;
	--kijuju-project-header-left: 456px;
	--kijuju-project-header-right: 340px;
}

.single-projekt #main > .ct-container-full {
	width: 100%;
	max-width: none;

	padding:
		clamp(42px, 5vw, 72px)
		max(
			20px,
			calc(
				(100vw - var(--kijuju-project-shell-width))
				/ 2
			)
		)
		clamp(62px, 7vw, 104px);
}

.single-projekt article.projekt {
	display: grid;
	grid-template-columns:
		minmax(0, var(--kijuju-project-header-left))
		minmax(0, var(--kijuju-project-header-right));
	grid-template-areas:
		"project-hero project-image"
		"project-content project-content";
	gap:
		clamp(38px, 4vw, 52px)
		var(--kijuju-project-header-gap);
	align-items: stretch;
	justify-content: center;

	width: 100%;
	max-width: var(--kijuju-project-shell-width);
	margin-inline: auto;
	padding:
		clamp(42px, 5vw, 66px)
		clamp(28px, 5vw, 72px)
		clamp(46px, 5vw, 70px);

	background: var(--kijuju-project-card);
	border: 0;
	box-shadow: 0 10px 32px rgb(16 39 51 / 7%);
}

.single-projekt article.projekt > .hero-section {
	grid-area: project-hero;

	width: 100%;
	max-width: none;
	margin: 0 !important;
}

.single-projekt article.projekt > .ct-featured-image {
	grid-area: project-image;
	align-self: stretch;

	width: 100%;
	max-width: none;
	margin: 0 !important;
}

.single-projekt article.projekt > .entry-content {
	grid-area: project-content;

	width: 100%;
	max-width: var(--kijuju-project-content-width);
	margin: 0 auto !important;
}


/* =========================================================
   Einzelprojekt: dunkler Projektkopf
   ========================================================= */

.single-projekt .hero-section {
	display: flex;
	margin: 0 !important;

	background: var(--kijuju-project-dark);
}

.single-projekt .entry-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 100%;
	max-width: none;
	min-height: 100%;
	padding:
		clamp(26px, 3vw, 38px)
		clamp(24px, 3vw, 34px);

	color: #ffffff;
}

.single-projekt .page-title {
	position: relative;

	width: 100%;
	margin: 0;

	font-family: var(--kijuju-project-font);
	font-size: clamp(2.25rem, 4vw, 3.7rem);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.045em;

	color: #ffffff;
}

.single-projekt .page-title::after {
	display: none;
	content: none;
}

.single-projekt .page-description,
.single-projekt .page-description.ct-hidden-sm,
.single-projekt .hero-section .page-description,
.single-projekt .hero-section .page-description.ct-hidden-sm {
	display: block !important;

	max-width: 38ch;
	margin-top: 22px;

	font-family: var(--kijuju-project-font);
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	font-weight: 400;
	line-height: 1.65;

	color: rgb(255 255 255 / 88%);
}

.single-projekt .page-description p {
	margin: 0;
}


/* =========================================================
   Projektrunde im Projektkopf
   ========================================================= */

/*
 * Das neue Element behält zusätzlich die alten year-Klassen.
 * Dadurch kann das bestehende site.js es weiterhin automatisch
 * in den dunklen Projektkopf verschieben.
 */
.single-projekt .kijuju-project-round {
	display: inline-flex;
	gap: 7px;
	align-items: center;

	width: fit-content;
	max-width: 100%;
	margin: 0 0 22px !important;
	padding: 8px 11px;

	font-family: var(--kijuju-project-font);
	font-size: 0.78rem;
	font-weight: 850;
	line-height: 1;
	letter-spacing: 0.075em;
	text-transform: uppercase;

	color: #ffffff;
	background: var(--kijuju-project-pink);
	border: 0;
}

.single-projekt .kijuju-project-round__label,
.single-projekt .kijuju-project-round__value {
	font: inherit;
	color: inherit;
}

.single-projekt .kijuju-project-round__value {
	letter-spacing: 0.035em;
}

/*
 * Fallback, falls JavaScript deaktiviert ist:
 * Dann bleibt die Projektrunde am Anfang des Inhalts sichtbar.
 */
.single-projekt .entry-content > .kijuju-project-round {
	align-self: flex-start;
}

/*
 * Übergang vom bisherigen Feld "projektjahr":
 * Ein eventuell noch vom Pods-Auto-Template ausgegebenes altes
 * Projektjahr wird ausgeblendet. Das neue Element hat beide Klassen
 * und bleibt deshalb sichtbar.
 */
.single-projekt
	.kijuju-project-year:not(.kijuju-project-round) {
	display: none !important;
}


/* =========================================================
   Einzelprojekt: Beitragsbild als Poster
   ========================================================= */

.single-projekt .ct-featured-image {
	padding: 0 !important;

	line-height: 0;

	min-height: var(--kijuju-project-header-min-height);

	background: #ffffff;
	border: 3px solid var(--kijuju-project-dark);
	box-shadow: 7px 7px 0 rgb(24 216 173 / 46%);
}

.single-projekt .ct-featured-image .ct-media-container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	overflow: hidden;
}

.single-projekt .ct-featured-image img.wp-post-image {
	display: block;

	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100%;

	margin: 0 !important;

	object-fit: cover;
	object-position: center;

	contain-intrinsic-size: none !important;
}


/* =========================================================
   Einzelprojekt: Inhalt
   ========================================================= */

.single-projekt .entry-content {
	display: flex;
	flex-direction: column;

	padding: 0 !important;

	font-family: var(--kijuju-project-font);
	font-size: clamp(1rem, 1.12vw, 1.08rem);
	line-height: 1.72;

	color: var(--kijuju-project-text);
	background: transparent;
	border: 0;
	box-shadow: none;

	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

.single-projekt
	.entry-content.is-layout-constrained
	> :where(
		:not(.alignleft):not(.alignright):not(.alignfull)
	),
.single-projekt .entry-content > * {
	width: 100% !important;
	max-width: none !important;

	margin-right: 0 !important;
	margin-left: 0 !important;
}

.single-projekt .entry-content > p {
	margin-top: 0;
	margin-bottom: 20px;
}

.single-projekt .entry-content > p:first-of-type {
	font-size: clamp(1.04rem, 1.25vw, 1.14rem);
	line-height: 1.72;
}

.single-projekt .entry-content > p:last-of-type {
	margin-bottom: 0;
}

.single-projekt .entry-content h2,
.single-projekt .entry-content h3,
.single-projekt .entry-content h4 {
	font-family: var(--kijuju-project-font);
	font-weight: 850;
	line-height: 1.15;
	letter-spacing: -0.025em;

	color: var(--kijuju-project-dark);
}

.single-projekt .entry-content h2 {
	font-size: clamp(1.55rem, 2.3vw, 2rem);
}

.single-projekt .entry-content h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}

.single-projekt .entry-content a {
	color: var(--kijuju-project-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.single-projekt .entry-content a:hover {
	color: var(--kijuju-project-pink);
}

.single-projekt .entry-content a:focus-visible {
	outline: 3px solid var(--kijuju-project-pink);
	outline-offset: 4px;
}


/* =========================================================
   Einzelprojekt: Galerie
   ========================================================= */

.single-projekt .kijuju-project-gallery {
	width: 100%;
	max-width: none;
	margin: clamp(34px, 4vw, 48px) 0 0 !important;
	padding-top: clamp(28px, 3vw, 38px);

	border-top: 1px solid var(--kijuju-project-border);
}

.single-projekt .kijuju-project-gallery__title {
	position: relative;

	width: fit-content;
	max-width: none;
	margin: 0 0 22px !important;

	font-family: var(--kijuju-project-font);
	font-size: clamp(1.55rem, 2.2vw, 1.95rem);
	font-weight: 850;
	line-height: 1.1;
	letter-spacing: -0.025em;

	color: var(--kijuju-project-dark);
}

.single-projekt .kijuju-project-gallery__title::after {
	display: block;

	width: 160px;
	max-width: 80%;
	height: 14px;
	margin-top: 6px;

	content: "";

	background-image: url("../images/content/content-line.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.single-projekt .kijuju-project-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;

	width: 100%;
	max-width: none;
}

.single-projekt .kijuju-project-gallery__item {
	width: 100%;
	max-width: none;
	margin: 0 !important;

	aspect-ratio: 4 / 3;

	background: #ecece8;
	border: 1px solid var(--kijuju-project-border);
	overflow: hidden;
}

.single-projekt .kijuju-project-gallery__item img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
	object-position: center;

	transition: transform 220ms ease;
}

.single-projekt .kijuju-project-gallery__item:hover img {
	transform: scale(1.02);
}


/* =========================================================
   Einzelprojekt: Zurück-Link
   ========================================================= */

.single-projekt .kijuju-project-navigation {
	display: flex;

	width: 100%;
	margin-top: clamp(34px, 4vw, 48px);
	padding-top: clamp(26px, 3vw, 34px);

	border-top: 1px solid var(--kijuju-project-border);
}

.single-projekt .kijuju-project-back {
	display: inline-flex;
	gap: 12px;
	align-items: center;

	min-height: 48px;
	padding: 12px 18px;

	font-family: var(--kijuju-project-font);
	font-size: 0.94rem;
	font-weight: 850;
	line-height: 1;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	text-decoration: none;

	color: #ffffff;
	background: var(--kijuju-project-turquoise);

	transition:
		color 160ms ease,
		background-color 160ms ease,
		transform 160ms ease;
}

.single-projekt .kijuju-project-back:hover {
	color: var(--kijuju-project-pink);
	background: var(--kijuju-project-dark);

	transform: translateX(-3px);
}

.single-projekt .kijuju-project-back:focus-visible {
	outline: 4px solid var(--kijuju-project-pink);
	outline-offset: 4px;
}


/* =========================================================
   Einzelprojekt: responsive Darstellung
   ========================================================= */

@media (max-width: 900px) {

	.single-projekt article.projekt {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"project-hero"
			"project-image"
			"project-content";
		gap: 0;

		max-width: 820px;
	}

	.single-projekt article.projekt > .hero-section,
	.single-projekt article.projekt > .ct-featured-image,
	.single-projekt article.projekt > .entry-content {
		width: 100%;
		max-width: var(--kijuju-project-content-width);

		margin-right: auto !important;
		margin-left: auto !important;
	}

	.single-projekt .hero-section,
	.single-projekt .ct-featured-image,
	.single-projekt .entry-header {
		min-height: 0;
	}

	.single-projekt .ct-featured-image {
		margin-bottom: 34px !important;

		border-top: 0;
		box-shadow: 6px 6px 0 rgb(24 216 173 / 46%);
	}

	.single-projekt .ct-featured-image .ct-media-container,
	.single-projekt .ct-featured-image img.wp-post-image {
		height: auto !important;
		min-height: 0;
	}

	.single-projekt .hero-section .page-description,
	.single-projekt .hero-section .page-description.ct-hidden-sm {
		max-width: 640px;
	}
}

@media (max-width: 760px) {

	.single-projekt {
		--kijuju-project-content-width: 100%;
	}

	.single-projekt #main > .ct-container-full {
		padding: 36px 15px 64px;
	}

	.single-projekt article.projekt {
		padding: 0 0 34px;
	}

	.single-projekt .entry-header {
		padding: 24px 20px 28px;
	}

	.single-projekt .page-title {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.single-projekt article.projekt > .entry-content {
		padding-right: 18px !important;
		padding-left: 18px !important;
	}

	.single-projekt .kijuju-project-gallery__grid {
		grid-template-columns: 1fr;
	}

	.single-projekt .kijuju-project-back {
		justify-content: center;
		width: 100%;
	}
}


/* =========================================================
   Projektarchiv: responsive Darstellung
   ========================================================= */

@media (max-width: 1024px) {

	.post-type-archive-projekt .entries[data-layout="grid"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {

	.post-type-archive-projekt #main > .ct-container {
		width: min(100% - 30px, 1320px);
	}

	.post-type-archive-projekt .entries[data-layout="grid"] {
		grid-template-columns: 1fr;
		gap: 20px !important;
	}

	.post-type-archive-projekt .entry-card .entry-excerpt p {
		-webkit-line-clamp: 5;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.post-type-archive-projekt .entry-card,
	.post-type-archive-projekt .entry-card .ct-media-container img,
	.single-projekt .kijuju-project-gallery__item img,
	.single-projekt .kijuju-project-back {
		transition: none;
	}
}

/* =========================================================
   Einzelprojekt: äußerer weißer Rahmen wie andere Inhaltsseiten
   ========================================================= */

@media (min-width: 761px) {
	.single-projekt #main > .ct-container-full {
		width: min(1320px, calc(100% - 48px));
		max-width: none;
		margin-right: auto;
		margin-left: auto;
		padding:
			clamp(42px, 5vw, 72px)
			0
			clamp(62px, 7vw, 104px);
	}

	.single-projekt article.projekt {
		width: 100%;
		max-width: none;
		margin-right: auto;
		margin-left: auto;
	}
}