/**
 * Story-modul — rounded parchment section with 3 (or 2/4/6) story cards
 * that overlap the preceding hero section.
 */
.story-modul.alignwide,
.story-modul {
	background-color: var(--wp--preset--color--parchment, #f2e3d6);
	border-radius: clamp(32px, 5vw, 72px);
	/* Pull the module up so it overlaps the hero's bottom edge by ~50px. */
	margin-top: clamp(-70px, -5vh, -40px) !important;
	margin-left: auto;
	margin-right: auto;
	/* Tighter max-width + extra horizontal breathing room above 1280px so
	   the parchment doesn't dominate the viewport on wide desktops. */
	max-width: min(1200px, calc(100vw - clamp(40px, 8vw, 160px)));
	padding-top: clamp(30px, 5vh, 80px);
	padding-bottom: clamp(60px, 8vh, 120px);
	padding-left: clamp(20px, 4vw, 60px);
	padding-right: clamp(20px, 4vw, 60px);
	position: relative;
	z-index: 2;
}

.story-modul__heading {
	max-width: 650px;
	margin: 0 auto clamp(32px, 5vh, 60px);
	text-align: center;
}

.story-modul__grid,
.story-modul__grid.is-layout-flex,
.story-modul__grid.wp-block-post-template-is-layout-flex {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(20px, 3vw, 60px) !important;
	max-width: 1185px;
	margin: 0 auto;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: stretch !important;
}

/* wp:post-template wraps each card in <li class="wp-block-post"> — that
   LI is the grid item, so it needs to fill the row height for the inner
   .story-modul__card to do the same. */
.story-modul__grid > li.wp-block-post {
	display: flex;
	height: 100%;
}
/* Belt-and-braces: zero margins on grid children so WP's adjacent-sibling
   rule (`.wp-block-group + .wp-block-group { margin-top: 24px }`) doesn't
   push individual cards out of alignment within their row. */
.story-modul__grid > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* When there are fewer than 3 cards, center them instead of leaving the
   last grid slot empty on the right. Only kicks in above mobile so phone
   layout still stacks single-column. */
@media (min-width: 601px) {
	.story-modul__grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
		grid-template-columns: repeat(2, minmax(0, 355px)) !important;
	}
	.story-modul__grid:has(> :only-child) {
		grid-template-columns: minmax(0, 355px) !important;
	}
}

@media (max-width: 600px) {
	.story-modul__grid,
	.story-modul__grid.is-layout-flex {
		grid-template-columns: 1fr !important;
	}
}

.story-modul__card {
	background-color: #fff;
	border-radius: 20px;
	padding: 20px 20px 30px;
	width: 100%;
	max-width: 355px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}
.story-modul__card:hover,
.story-modul__card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
	background-color: #f65e48;
}
.story-modul__card:hover .wp-block-post-title a,
.story-modul__card:focus-within .wp-block-post-title a,
.story-modul__card:hover h3 a,
.story-modul__card:focus-within h3 a {
	text-decoration: underline;
}

/* Featured image inside card: fixed 335px height, rounded.
   Covers both the wp:query variant (.wp-block-post-featured-image) and
   the manual pattern variant (.wp-block-image / figure). */
.story-modul__card .wp-block-post-featured-image,
.story-modul__card figure.wp-block-image {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}
.story-modul__card .wp-block-post-featured-image img,
.story-modul__card figure.wp-block-image img {
	width: 100%;
	height: 335px;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}
.story-modul__card .wp-block-post-featured-image a,
.story-modul__card figure.wp-block-image a {
	display: block;
	height: 335px;
}

.story-modul__card .wp-block-post-title,
.story-modul__card > h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--ivymode, "ivymode", serif);
	font-weight: 300;
	font-size: 28px;
	line-height: 1.18;
	color: var(--wp--preset--color--mine-shaft, #292929);
	margin: 5px 0 0;
}
.story-modul__card .wp-block-post-title a,
.story-modul__card > h3.wp-block-heading a {
	color: inherit;
	text-decoration: none;
}
.story-modul__card .wp-block-post-title a:hover,
.story-modul__card .wp-block-post-title a:focus,
.story-modul__card > h3.wp-block-heading a:hover,
.story-modul__card > h3.wp-block-heading a:focus {
	text-decoration: underline;
}

.story-modul__card .wp-block-post-excerpt,
.story-modul__card > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.44;
	color: var(--wp--preset--color--mine-shaft, #292929);
}
.story-modul__card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Manual grid (wp:group with type:grid columnCount:3) — apply same grid
   layout as the wp:query variant so cards look identical. */
.story-modul__grid--manual {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(20px, 3vw, 60px) !important;
	max-width: 1185px;
	margin: 0 auto;
	justify-content: center !important;
	align-items: stretch !important;
}
@media (min-width: 601px) {
	.story-modul__grid--manual:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
		grid-template-columns: repeat(2, minmax(0, 355px)) !important;
	}
	.story-modul__grid--manual:has(> :only-child) {
		grid-template-columns: minmax(0, 355px) !important;
	}
}
@media (max-width: 600px) {
	.story-modul__grid--manual {
		grid-template-columns: 1fr !important;
	}
}
.story-modul__card .wp-block-post-excerpt__more-text {
	display: none;
}

@media (max-width: 600px) {
	.story-modul {
		border-radius: 32px;
	}
	.story-modul__card .wp-block-post-featured-image img,
	.story-modul__card .wp-block-post-featured-image a {
		height: 240px;
	}
}