.blog {
	padding: 4rem 1.5rem 5rem;
	background: #f8fafc;
}

.blog-article {
	max-width: 860px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 24px;
	padding: clamp(2rem, 4vw, 3.5rem);
	box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);
}

.blog-header {
	margin-bottom: 2.25rem;
}

.blog-meta {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--text-tertiary);
	margin-bottom: 0.75rem;
}

.blog-header h2 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--text-main);
	margin-bottom: 1rem;
}

.blog-intro {
	font-size: 1.1rem;
	color: var(--text-secondary);
}

.blog-image {
	margin: 1.5rem 0 2rem;
}


.blog-image-media {
	width: 100%;
	height: clamp(220px, 36vw, 360px);
	border-radius: 18px;
	object-fit: cover;
	display: block;
}

.blog-image figcaption {
	margin-top: 0.65rem;
	font-size: 0.95rem;
	color: var(--text-tertiary);
}

figcaption a{
    color: var(--text-tertiary);
    text-decoration: none;
}

.blog-section {
	margin-top: 1rem;
    padding: 1rem 0;
}

.blog-section h3 {
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
	color: var(--text-main);
}

.blog-section p {
	color: var(--text-secondary);
}

.blog-section p + p {
	margin-top: 0.75rem;
}

.blog-list {
	margin: 0.85rem 0 0;
	padding-left: 1.3rem;
	color: var(--text-secondary);
	display: grid;
	gap: 0.5rem;
}

.blog-cta {
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(102, 204, 255, 0.2), rgba(155, 222, 255, 0.2));
	border: 1px solid #6cf;
}

.blog-cta h3 {
	font-size: 1.4rem;
	margin-bottom: 0.75rem;
}

.blog-cta p {
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.blog-cta-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.blog {
		padding: 3rem 1.25rem 4rem;
	}

	.blog-index {
		padding: 3rem 1.25rem 4rem;
	}

	.blog-article {
		padding: 2rem;
	}

	.blog-cta-actions .btn {
		width: 100%;
		text-align: center;
	}
}