/* =========================================================
   FUCHSBAU – Startseite: Aktuelles
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.fuchsbau-news-section {
	position: relative;

	padding:
		105px
		32px
		115px;

	background: #fff2d1;

	overflow: hidden;
}


/* Dekorative Hintergrundform */

.fuchsbau-news-section::before {
	content: "";

	position: absolute;

	width: 520px;
	height: 520px;

	right: -250px;
	top: -230px;

	background:
		rgba(128, 163, 56, 0.12);

	border-radius: 50%;
}


.fuchsbau-news-inner {
	position: relative;

	z-index: 2;

	max-width: 1380px;

	margin:
		0
		auto !important;
}


.fuchsbau-news-lead {
	max-width: 640px;

	margin: 0;

	color: #485052;

	font-size: 19px;

	line-height: 1.6;
}


/* =========================================================
   QUERY LOOP
   ========================================================= */

.fuchsbau-news-query {
	position: relative;

	width: 100%;

	margin: 0 !important;
}


/*
 * Die 3 Spalten auf Desktop kommen aus Gutenberg:
 *
 * wp:post-template
 * layout.type = grid
 * columnCount = 3
 *
 * CSS kümmert sich hier nur um Abstand und Darstellung.
 */

.fuchsbau-news-query
> .wp-block-post-template {
	gap: 24px;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	align-items: stretch;
}


/* =========================================================
   KARTE
   ========================================================= */

.fuchsbau-news-query
.wp-block-post {
	display: flex !important;

	flex-direction: column;

	min-width: 0;

	height: 100% !important;

	margin: 0 !important;

	padding:
		0
		0
		28px !important;

	background: #ffffff;

	border:
		1px solid
		rgba(31, 60, 46, 0.08);

	border-radius: 26px;

	overflow: hidden;

	box-shadow:
		0
		18px
		45px
		rgba(31, 60, 46, 0.08);

	transition:
		transform 220ms ease,
		box-shadow 220ms ease;
}


.fuchsbau-news-query
.wp-block-post:hover {
	transform:
		translateY(-5px);

	box-shadow:
		0
		24px
		60px
		rgba(31, 60, 46, 0.13);
}


/* =========================================================
   BILD
   ========================================================= */

.fuchsbau-news-image {
	width: 100%;

	margin:
		0
		0
		24px !important;

	overflow: hidden;
}


.fuchsbau-news-image a {
	display: block;
}


.fuchsbau-news-image img {
	display: block;

	width: 100% !important;
	max-width: none !important;

	height: 230px !important;

	object-fit: cover;

	transition:
		transform 450ms ease;
}


.fuchsbau-news-query
.wp-block-post:hover
.fuchsbau-news-image img {
	transform:
		scale(1.035);
}


/* =========================================================
   DATUM
   ========================================================= */

.fuchsbau-news-date {
	margin:
		0
		28px
		10px !important;

	color: #6b9e2f;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.4;

	letter-spacing: 1px;

	text-transform: uppercase;
}


/* =========================================================
   TITEL
   ========================================================= */

.fuchsbau-news-card-title {
	margin:
		0
		28px
		14px !important;

	font-size: 24px !important;

	font-weight: 700;

	line-height: 1.2;
}


.fuchsbau-news-card-title a {
	color: #1f3c2e;

	text-decoration: none;

	transition:
		color 160ms ease;
}


.fuchsbau-news-card-title a:hover {
	color: #e74d24;
}


/* =========================================================
   AUSZUG
   ========================================================= */

.fuchsbau-news-excerpt {
	display: flex;

	flex-direction: column;

	flex:
		1 1 auto;

	margin:
		0
		28px !important;

	color: #485052;

	font-size: 15px;

	line-height: 1.65;
}


.fuchsbau-news-excerpt
.wp-block-post-excerpt__excerpt {
	margin:
		0
		0
		17px !important;
}


/*
 * Durch margin-top:auto landet "Weiterlesen"
 * bei allen drei Karten möglichst weit unten.
 */

.fuchsbau-news-excerpt
.wp-block-post-excerpt__more-text {
	margin:
		auto
		0
		0 !important;
}


.fuchsbau-news-excerpt
.wp-block-post-excerpt__more-link {
	display: inline-block;

	color: #e74d24;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

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


.fuchsbau-news-excerpt
.wp-block-post-excerpt__more-link:hover {
	color: #d13f1a;

	transform:
		translateX(3px);
}


/* =========================================================
   BUTTON "ALLE BEITRÄGE"
   ========================================================= */

.fuchsbau-news-all {
	position: relative;

	margin-top:
		32px !important;
}


.fuchsbau-news-all
.wp-block-button__link {
	padding:
		11px
		20px;

	color: #1f3c2e;

	border-color:
		rgba(31, 60, 46, 0.25);

	border-radius: 999px;

	font-size: 14px;

	font-weight: 600;

	transition:
		background 180ms ease,
		color 180ms ease;
}


.fuchsbau-news-all
.wp-block-button__link:hover {
	background: #1f3c2e;

	color: #ffe7ac;
}


/* =========================================================
   TABLET

   Gutenberg gibt 3 Spalten vor.
   Unter 950 px reduzieren wir rein responsiv auf 2.
   ========================================================= */

@media (max-width: 950px) {

	.fuchsbau-news-query
	> .wp-block-post-template {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			) !important;
	}
}


/* =========================================================
   MOBILE

   Unter 700 px werden die Karten vollständig gestapelt.
   ========================================================= */

@media (max-width: 700px) {

	.fuchsbau-news-section {
		padding:
			75px
			20px
			80px;
	}


	.fuchsbau-news-query
	> .wp-block-post-template {
		grid-template-columns:
			1fr !important;

		gap:
			18px;
	}


	.fuchsbau-news-image img {
		height:
			220px !important;
	}


	.fuchsbau-news-card-title {
		font-size:
			24px !important;
	}
}


/* =========================================================
   GUTENBERG EDITOR

   Gutenberg erzeugt für den ersten Query-Beitrag zusätzlich
   eine Live-Vorschau. Diese Dublette nur im Editor ausblenden.
   ========================================================= */

.fuchsbau-news-query
.wp-block-post.block-editor-block-list__layout
+
.wp-block-post.block-editor-block-preview__live-content {
	display: none !important;
}