/**
 * Blog listing — Figma 1171:4943 (1440×7034).
 * Reuses .inia-ou-hero / .inia-ou-image-band / .inia-omb-mid-cta via shell classes.
 * Unique: dynamic .inia-blog-grid cards from [inia_blog_grid].
 */

/* Shell: 120px below last section before Theme Builder footer */
.inia-blog-page.e-con {
	padding-bottom: 120px !important;
}

/* —— Hero height override (291 vs Über uns 349) —— */
.inia-blog-page .inia-blog-hero {
	min-height: 291px;
}

.inia-blog-page .inia-blog-hero > .e-con-inner {
	min-height: 291px;
}

/* —— Grid sections —— */
.inia-blog-page .inia-blog-grid-section {
	width: 1200px;
	max-width: 100%;
	box-sizing: border-box;
}

.inia-blog-page .inia-blog-grid-section--padded {
	padding-top: 50px;
}

.inia-blog-page .inia-blog-grid-widget,
.inia-blog-page .inia-blog-grid-widget .elementor-widget-container {
	width: 100%;
}

.inia-blog-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: 1200px;
	max-width: 100%;
	box-sizing: border-box;
}

/* —— Cards (588×574 feel) —— */
.inia-blog-card {
	width: 100%;
	max-width: 588px;
	height: 574px;
	box-sizing: border-box;
	padding: 24px;
	border-radius: 24px;
	background: rgba(241, 241, 242, 0.8);
	/* Inset ring (not border) so media stays Figma 540px wide */
	border: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #fff;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Gentle lift only — keep the resting shadow so hover doesn't cast an
   extra shadow that reads as if it were on the card image. */
.inia-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #fff;
}

.inia-blog-card__link {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.inia-blog-card__media {
	width: 540px;
	max-width: 100%;
	height: 306px;
	border-radius: 16px;
	overflow: hidden;
	flex-shrink: 0;
	background: #e8e8ea;
}

.inia-blog-card__media img,
.inia-blog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Beat Elementor kit `.elementor-kit-6 h3` (24/31) */
.inia-blog-page h3.inia-blog-card__title,
.elementor-kit-6 h3.inia-blog-card__title,
.inia-blog-card__title {
	margin: 0;
	color: #000;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	flex: 1 1 auto;
}

.inia-blog-card__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 10px;
	margin-top: auto;
}

/* `.inia-blog-page img` beats the global `body.inia-theme img` reset that
   otherwise forces border-radius:0 on the avatar. */
.inia-blog-page img.inia-blog-card__avatar,
.inia-blog-card__avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.inia-blog-card__byline {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.inia-blog-card__name,
.inia-blog-card__date {
	margin: 0;
	color: #000;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.inia-blog-card__date {
	opacity: 0.7;
}

/* Moss band CTAs use global .inia-btn-primary gradient hover. */

/* —— Responsive —— */
@media (max-width: 1199px) {
	.inia-blog-page .inia-blog-grid-section,
	.inia-blog-grid {
		width: 100%;
		max-width: 100%;
		padding-left: var(--inai-side-gutter, 24px);
		padding-right: var(--inai-side-gutter, 24px);
		box-sizing: border-box;
	}

	.inia-blog-card {
		max-width: 100%;
		height: auto;
		min-height: 0;
	}

	.inia-blog-card__media {
		width: 100%;
		height: auto;
		aspect-ratio: 540 / 306;
	}

	.inia-blog-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 833px) {
	.inia-blog-grid {
		gap: 20px;
	}

	.inia-blog-card {
		padding: 20px;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.inia-blog-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-left: var(--inai-side-gutter, 16px);
		padding-right: var(--inai-side-gutter, 16px);
	}

	.inia-blog-page .inia-blog-grid-section--padded {
		padding-top: 24px;
	}

	.inia-blog-page .inia-blog-hero {
		min-height: 0;
	}

	.inia-blog-page .inia-blog-hero > .e-con-inner {
		min-height: 0;
	}

	.inia-blog-page h3.inia-blog-card__title,
	.elementor-kit-6 h3.inia-blog-card__title,
	.inia-blog-card__title {
		font-size: clamp(22px, 5.5vw, 24px);
		line-height: 1.25;
	}

	.inia-blog-page.e-con {
		padding-bottom: 64px !important;
	}
}