/**
 * Elucio Theme – Contentseiten
 *
 * Craft · Materials · Philosophy · Ubrique · House Seal
 * Figma: „CONTENTSEITEN“ (178:1428), mobil „Mobile - Craft“ (178:1267)
 *
 * Bild/Text-Reihen: Text in der 1440er-Spalte, Bild läuft bis an den
 * Fensterrand (rechts bei geraden, links bei ungeraden Reihen).
 */

.content-page {
	--cp-inset: max(var(--container-pad), calc((100% - 1440px) / 2 + 56px));
}

/* =========================================================================
   Hero (Figma „Hero Section“ 1920 × 760, Header liegt darüber)
========================================================================= */
.cp-hero {
	position:       relative;
	display:        flex;
	flex-direction: column;
	justify-content: center;
	min-height:     clamp(592px, 39.6vw, 760px);
	margin-top:     -88px;
	padding:        88px var(--container-pad) 0 clamp(0.75rem, 8vw, 9.5625rem);
	overflow:       hidden;
	background:     #3a2f25;
	color:          var(--color-white);
}

.cp-hero__media {
	position: absolute;
	inset:    0;
}

.cp-hero__media::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(111.6deg, rgba(0, 0, 0, 0.23) 49.52%, rgba(102, 102, 102, 0) 100%);
}

.cp-hero__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.cp-hero__copy {
	position:  relative;
	max-width: 648px;
}

.cp-hero__kicker {
	font-family:    var(--font-body);
	font-weight:    300;
	font-size:      clamp(1.125rem, 1.65vw, 2rem);
	line-height:    1.55;
	letter-spacing: 0.1em;
	text-transform: capitalize;
}

.cp-hero__title {
	font-family:    var(--font-display);
	font-weight:    400;
	font-size:      clamp(3.25rem, 4.6vw, 5.5rem);
	line-height:    1.23;
	text-transform: uppercase;
	color:          var(--color-white);
}

/* =========================================================================
   Bild/Text-Reihen (Figma „Desktop - Content 1–5“, 760px hoch)
========================================================================= */
.cp-row {
	display:     flex;
	align-items: center;
	gap:         clamp(2rem, 5.8vw, 7rem);
	padding-block: clamp(2.5rem, 3.3vw, 4rem);
}

.cp-row--image-right {
	padding-left: var(--cp-inset);
}

.cp-row--image-left {
	flex-direction: row-reverse;
	gap:            clamp(2rem, 7vw, 8.5rem);
	padding-right:  var(--cp-inset);
}

.cp-row__copy {
	flex:      0 0 min(428px, 38%);
	min-width: 0;
}

.cp-row__kicker {
	display:        flex;
	align-items:    center;
	gap:            36px;
	margin:         0 0 clamp(2rem, 2.8vw, 2.6rem) 5px;
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      clamp(1rem, 1.05vw, 1.25rem);
	line-height:    1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-gray);
}

.cp-row__kicker::after {
	content:    '';
	flex:       0 0 105px;
	height:     1px;
	background: var(--color-sand);
}

.cp-row__title {
	font-family:    var(--font-headline);
	font-weight:    400;
	font-size:      clamp(2.5rem, 3.35vw, 4rem);
	line-height:    1.125;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.cp-row__text {
	margin-top:     35px;
	padding-inline: 4px;
	font-family:    var(--font-headline);
	font-size:      clamp(1rem, 0.95vw, 1.125rem);
	line-height:    1.78;
	letter-spacing: 0.06em;
	color:          var(--color-dark);
}

.cp-row__text > * + * {
	margin-top: 1em;
}

.cp-row__media {
	flex:       1 1 auto;
	align-self: stretch;
	min-width:  0;
	min-height: clamp(320px, 32.9vw, 632px);
}

.cp-row__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* =========================================================================
   Banner (Figma „Desktop - Content Trenner“, 416px)
========================================================================= */
.cp-banner {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      clamp(320px, 21.7vw, 416px);
	margin-top:      clamp(1rem, 3.3vw, 4rem);
	padding:         clamp(3rem, 4vw, 4rem) var(--container-pad);
	overflow:        hidden;
	background:      #C9A53B;
	text-align:      center;
	color:           #FFFCCB;
}

.cp-banner__media {
	position: absolute;
	inset:    0;
}

.cp-banner__media::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: rgba(78, 67, 52, 0.24);
}

.cp-banner__image {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: bottom;
}

.cp-banner__copy {
	position:       relative;
	max-width:      1248px;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.cp-banner__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size:   clamp(2.25rem, 4.6vw, 5.5rem);
	line-height: 1.09;
	color:       inherit;
}

.cp-banner__text {
	margin-top:  clamp(1.5rem, 3.5vw, 4.25rem);
	font-family: var(--font-headline);
	font-size:   clamp(1.125rem, 1.65vw, 2rem);
	line-height: 1.25;
}

/* =========================================================================
   Vorteile (Figma „Desktop - Content 6“, 312px)
========================================================================= */
.cp-usps {
	width:         min(100% - 2 * var(--container-pad), 1440px);
	margin-inline: auto;
	margin-top:    clamp(1rem, 3.3vw, 4rem);
	border-block:  1px solid var(--color-sand);
}

.cp-usps__list {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-block:         clamp(2.5rem, 3.3vw, 3.75rem);
}

.cp-usp {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             clamp(1.5rem, 3.4vw, 4rem);
	padding-inline:  clamp(1rem, 2.5vw, 3.75rem);
}

.cp-usp + .cp-usp {
	border-left: 1px solid var(--color-sand);
}

.cp-usp__icon {
	flex:            0 0 88px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          112px;
}

.cp-usp__icon img {
	max-width:  88px;
	max-height: 98px;
	width:      auto;
	height:     auto;
}

.cp-usp__icon--anvil img {
	transform: rotate(38.28deg);
}

.cp-usp__copy {
	min-width: 0;
}

.cp-usp__title {
	margin-bottom:  20px;
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      clamp(1rem, 1.05vw, 1.25rem);
	line-height:    1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.cp-usp__text {
	font-family:    var(--font-headline);
	font-size:      clamp(1rem, 0.95vw, 1.125rem);
	line-height:    1.33;
	letter-spacing: 0.06em;
	color:          var(--color-dark);
}

/* Abstand zum Footer, wenn die Seite mit einer Reihe endet */
.content-page > :last-child {
	margin-bottom: clamp(2rem, 4vw, 5rem);
}

.content-page > .cp-banner:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   Responsive
========================================================================= */
@media (max-width: 1100px) {

	.cp-usps__list {
		grid-template-columns: 1fr;
		gap:                   0;
		padding-block:         0;
	}

	.cp-usp {
		justify-content: flex-start;
		padding:         2rem clamp(1rem, 6vw, 4rem);
	}

	.cp-usp + .cp-usp {
		border-left: 0;
		border-top:  1px solid var(--color-sand);
	}
}

@media (max-width: 768px) {

	.cp-hero {
		min-height:     592px;
		margin-top:     -80px;
		padding:        80px 12px 0;
		justify-content: center;
	}

	.cp-hero__kicker {
		font-size:      1.125rem;
		letter-spacing: 0.1em;
	}

	.cp-hero__title {
		font-size:   3.25rem;
		line-height: 1.23;
	}

	/* Figma Mobile: Topline · Überschrift · Text zentriert, Bild darunter */
	.cp-row,
	.cp-row--image-left {
		flex-direction: column;
		gap:            72px;
		padding:        39px 12px 64px;
		text-align:     center;
	}

	.cp-row__copy {
		flex:       none;
		width:      100%;
		max-width:  366px;
	}

	.cp-row__kicker {
		justify-content: center;
		gap:             22px;
		margin:          0 0 13px;
		font-size:       1.125rem;
	}

	.cp-row__kicker::after {
		flex-basis: 64px;
	}

	.cp-row__title {
		font-size:   3.25rem;
		line-height: 1.19;
	}

	.cp-row__text {
		margin-top:     22px;
		padding-inline: 0;
		font-size:      1rem;
		line-height:    2;
	}

	.cp-row__media {
		align-self: center;
		width:      100%;
		max-width:  366px;
		min-height: 0;
		aspect-ratio: 366 / 306;
	}

	.cp-banner__text br {
		display: none;
	}

	.cp-usps {
		width: calc(100% - 24px);
	}

	.cp-usp {
		gap:     24px;
		padding: 2rem 12px;
	}

	.cp-usp__icon {
		flex-basis: 72px;
		height:     80px;
	}

	.cp-usp__icon img {
		max-width:  72px;
		max-height: 80px;
	}

	.cp-usp__title {
		margin-bottom: 14px;
		font-size:     1.125rem;
	}

	.cp-usp__text {
		font-size: 1rem;
	}
}