/* Block Bài viết mới (Figma 404:61). Style card dùng chung nằm ở assets/css/layout.css (.post-card). */

.block-insights__header {
	display: grid;
	gap: 20px;
	margin-bottom: clamp(28px, 2.08vw, 40px);
}

@media (min-width: 768px) {
	.block-insights__header {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

.block-insights__title {
	max-width: 8ch;
	font-size: var(--fs-h2-sm);
	font-weight: 900;
	line-height: 1.22;
	text-transform: uppercase;
}

.block-insights__intro {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: clamp(16px, 1.46vw, 28px);
	max-width: 521px;
	font-size: var(--fs-body-lg);
	font-weight: 300;
	line-height: 1.25;
	color: var(--color-text-muted);
}

.block-insights__all {
	font-size: var(--fs-body-lg);
}

.block-insights__grid {
	display: grid;
	gap: 32px 20px;
}

@media (min-width: 640px) {
	.block-insights__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.block-insights__grid .post-card--large {
		grid-column: 1 / -1;
	}
}

/* Desktop: thẻ lớn bên trái chiếm 2 hàng, 2 thẻ vừa xếp sát nhau bên phải như Figma. Hàng 1 cao bằng thẻ vừa thứ nhất,
   phần thẻ lớn cao hơn dồn vào hàng 2 (1fr); thẻ vừa không giãn theo hàng nên mũi tên luôn nằm trong thẻ, ở góc dưới
   phải phần chữ, cách đáy ảnh 15 (feedback vòng 3: trước đây thẻ giãn theo thẻ lớn, mũi tên rơi xuống dưới ảnh). */
@media (min-width: 1024px) {
	.block-insights__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: auto 1fr;
	}

	.block-insights__grid .post-card--large {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.block-insights__grid .post-card--side {
		grid-column: 3 / span 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-self: start;
		align-items: start;
	}

	.block-insights__grid .post-card--side .post-card__body {
		grid-template-rows: auto auto 1fr;
		align-self: stretch;
		align-content: start;
		padding-block: 15px;
	}

	.block-insights__grid .post-card--side .post-card__arrow {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: end;
	}
}

.post-card--large .post-card__media {
	border-radius: var(--radius-md);
	aspect-ratio: 892 / 502;
}

.post-card--large .post-card__tag {
	top: 19px;
	left: 24px;
	padding: 16px;
	border-radius: var(--radius-sm);
	font-size: 10px;
}

.post-card--large .post-card__title,
.post-card--side .post-card__title {
	font-size: clamp(20px, 1.67vw, 32px);
}

.post-card--large .post-card__arrow {
	width: clamp(32px, 3.33vw, 64px);
	height: clamp(32px, 3.33vw, 64px);
	margin-right: 24px; /* Figma: mũi tên cách mép phải thẻ lớn 24 */
}

/* 2 bài vừa: mũi tên cách mép phải 18 (feedback vòng 4). */
.post-card--side .post-card__arrow {
	margin-right: 18px;
}

.post-card--side .post-card__media {
	aspect-ratio: 434 / 244;
}

/* Bố cục trang Insight (Figma "Detail page → Insight": tiêu đề 92px ở giữa, Frame 90 rộng 1808, hàng dưới 3 bài, link ở dưới) */

.block-insights--page {
	margin-top: clamp(56px, 6.3vw, 121px);
	margin-bottom: clamp(48px, 5.05vw, 97px); /* Frame 90 → footer: 97 */
}

.block-insights__heading {
	margin-bottom: clamp(32px, 5.47vw, 105px);
	text-align: center;
}

@media (min-width: 1024px) {
	.block-insights--page .block-insights__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: clamp(16px, 1.25vw, 24px);
	}

	.block-insights--page .block-insights__grid .post-card--large {
		grid-column: 1 / span 3;
	}

	.block-insights--page .block-insights__grid .post-card--side {
		grid-column: 4 / span 3;
	}

	.block-insights--page .block-insights__grid .post-card--small {
		grid-column: span 2;
	}
}

/* "View all Insight": nút đỏ ở giữa dưới lưới, cỡ lớn hơn nút thường (feedback vòng 4). */
.block-insights__more {
	display: flex;
	width: fit-content;
	min-width: min(100%, 280px);
	margin: clamp(32px, 3.33vw, 64px) auto 0;
	padding: clamp(16px, 1.35vw, 26px) clamp(32px, 2.6vw, 56px);
	font-size: clamp(16px, 1.25vw, 24px);
}

/* Mobile (Figma mobile "Insight", feedback vòng 4): bài đầu lớn, các bài sau thành hàng ảnh nhỏ bên trái – chữ bên phải,
   không mũi tên; "View all Insight" là chữ gạch chân ở giữa. */
@media (max-width: 639px) {
	.block-insights__grid {
		gap: 16px;
	}

	.block-insights__grid .post-card--large {
		margin-bottom: 8px;
	}

	.block-insights__grid .post-card:not(.post-card--large) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 12px;
	}

	.block-insights__grid .post-card:not(.post-card--large) .post-card__media {
		aspect-ratio: 174 / 99;
		border-radius: var(--radius-sm);
	}

	.block-insights__grid .post-card:not(.post-card--large) .post-card__title {
		font-size: 16px;
	}

	.block-insights__grid .post-card:not(.post-card--large) .post-card__date {
		font-size: 12px;
	}

	.block-insights__grid .post-card__arrow {
		display: none;
	}

	.block-insights__more.btn {
		min-width: 0;
		min-height: 0;
		margin-top: 24px;
		padding: 8px;
		background: none;
		font-family: var(--font-body);
		font-size: 16px;
		text-transform: none;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.25em;
		color: var(--color-text-strong);
	}

	.block-insights__more.btn .icon {
		display: none;
	}
}