/*
 * NAL Desktop Layout Balance
 * Chỉ áp dụng cho tablet ngang, laptop và desktop từ 901px.
 */

@media (min-width: 901px) {
	:root {
		--nal-desktop-max: 1380px;
		--nal-desktop-gap: clamp(20px, 2vw, 30px);
		--nal-desktop-section: clamp(82px, 8vw, 124px);
	}

	.nal-container {
		width: min(var(--nal-desktop-max), 100%);
	}

	.nal-section {
		padding-block: var(--nal-desktop-section);
	}

	/* ---------- Archive hero ---------- */
	.post-type-archive-project .page-hero,
	.post-type-archive-course .page-hero {
		padding-block: clamp(76px, 8vw, 122px) 58px;
	}

	.post-type-archive-project .page-hero-inner,
	.post-type-archive-course .page-hero-inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
		gap: clamp(50px, 7vw, 110px);
		align-items: end;
	}

	.post-type-archive-project .page-hero h1,
	.post-type-archive-course .page-hero h1 {
		font-size: clamp(78px, 9vw, 136px);
		line-height: .82;
		max-width: 860px;
	}

	.post-type-archive-project .page-intro,
	.post-type-archive-course .page-intro {
		max-width: 470px;
		font-size: 16px;
		line-height: 1.75;
	}

	/* ---------- Project cards ---------- */
	body.home .projects-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--nal-desktop-gap);
	}

	body.home .projects-grid .project-card,
	body.home .projects-grid .project-card:nth-child(4n+1),
	body.home .projects-grid .project-card:nth-child(4n+4) {
		grid-column: auto !important;
		min-width: 0;
	}

	.post-type-archive-project .projects-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--nal-desktop-gap);
		align-items: stretch;
	}

	.post-type-archive-project .projects-grid .project-card,
	.post-type-archive-project .projects-grid .project-card:nth-child(4n+1),
	.post-type-archive-project .projects-grid .project-card:nth-child(4n+4) {
		grid-column: auto !important;
		min-width: 0;
		height: 100%;
	}

	body.home .projects-grid .card-image,
	.post-type-archive-project .projects-grid .card-image {
		aspect-ratio: 4 / 3;
	}

	.post-type-archive-project .project-card,
	body.home .project-card {
		display: flex;
		flex-direction: column;
		background: var(--nal-paper);
		border: 1px solid var(--nal-line);
		transition: transform .3s ease, box-shadow .3s ease;
	}

	.post-type-archive-project .project-card > a,
	body.home .project-card > a {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.post-type-archive-project .project-card h3,
	body.home .project-card h3 {
		margin-top: auto;
		font-size: clamp(29px, 2.6vw, 42px);
		line-height: 1.02;
	}

	/* ---------- Course cards ---------- */
	.post-type-archive-course .course-grid,
	body.home .course-grid {
		align-items: stretch;
		gap: var(--nal-desktop-gap);
	}

	.post-type-archive-course .course-card,
	body.home .course-card {
		min-width: 0;
		height: 100%;
	}

	.post-type-archive-course .course-card .card-image,
	body.home .course-card .card-image {
		aspect-ratio: 4 / 3;
	}

	.post-type-archive-course .course-body,
	body.home .course-body {
		padding: clamp(20px, 2vw, 28px);
	}

	.post-type-archive-course .course-card h3,
	body.home .course-card h3 {
		font-size: clamp(28px, 2.55vw, 40px);
		line-height: .98;
		overflow-wrap: anywhere;
	}

	.post-type-archive-course .course-facts,
	body.home .course-facts {
		margin-top: auto;
	}

	/* ---------- Detail hero ---------- */
	.single-project .detail-hero,
	.single-course .detail-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		min-height: clamp(660px, 72vh, 790px);
		max-height: 850px;
	}

	.single-project .detail-copy,
	.single-course .detail-copy {
		min-width: 0;
		padding:
			clamp(56px, 6vw, 90px)
			clamp(42px, 5.2vw, 82px);
	}

	.single-project .detail-copy h1,
	.single-course .detail-copy h1 {
		max-width: 760px;
		margin-block: 26px;
		font-size: clamp(54px, 6.2vw, 96px);
		line-height: .88;
		letter-spacing: -.055em;
		overflow-wrap: anywhere;
	}

	.single-project .detail-summary,
	.single-course .detail-summary {
		max-width: 610px;
		font-size: 16px;
		line-height: 1.75;
	}

	.single-project .detail-media,
	.single-course .detail-media {
		min-width: 0;
		min-height: 100%;
		max-height: 850px;
	}

	.single-project .detail-media img,
	.single-course .detail-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.single-project .detail-facts,
	.single-course .detail-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-project .detail-facts > div,
	.single-course .detail-facts > div {
		min-width: 0;
		font-size: 14px;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	/* ---------- Main content ---------- */
	.single-project .entry-content,
	.single-course .entry-content {
		width: min(900px, calc(100% - 80px));
	}

	.single-project .entry-content h2,
	.single-course .entry-content h2 {
		font-size: clamp(44px, 4.8vw, 70px);
		line-height: .96;
	}

	.single-project .entry-content h3,
	.single-course .entry-content h3 {
		font-size: clamp(31px, 3vw, 46px);
		line-height: 1.02;
	}

	.single-project .entry-content p,
	.single-project .entry-content li,
	.single-course .entry-content p,
	.single-course .entry-content li {
		font-size: clamp(17px, 1.25vw, 19px);
		line-height: 1.78;
	}

	/* ---------- Galleries ---------- */
	.single-project .project-gallery,
	.single-course .project-gallery,
	.single-course .course-gallery {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--nal-desktop-gap);
		align-items: stretch;
	}

	.single-project .project-gallery figure,
	.single-project .project-gallery figure:nth-child(3n),
	.single-course .project-gallery figure,
	.single-course .project-gallery figure:nth-child(3n),
	.single-course .course-gallery figure,
	.single-course .course-gallery figure:nth-child(3n) {
		grid-column: auto !important;
		margin: 0;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		background: #181818;
	}

	.single-project .project-gallery img,
	.single-course .project-gallery img,
	.single-course .course-gallery img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.single-project .gallery-section > .nal-container,
	.single-course .gallery-section > .nal-container {
		width: min(var(--nal-desktop-max), 100%);
	}

	.single-project .gallery-section .eyebrow,
	.single-course .gallery-section .eyebrow {
		margin-bottom: 26px;
	}

	/* ---------- Credits and enrollment ---------- */
	.single-project .credits-block,
	.single-course .enrollment-box {
		width: min(1220px, calc(100% - 80px));
		margin-inline: auto;
	}

	.single-project .credits-block {
		grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr);
		gap: clamp(40px, 6vw, 96px);
		align-items: start;
	}

	.single-course .enrollment-box {
		grid-template-columns: minmax(0, 1.1fr) minmax(340px, .65fr);
		gap: clamp(50px, 7vw, 110px);
		align-items: end;
		padding: clamp(52px, 6vw, 82px);
		background: color-mix(in srgb, var(--nal-paper) 88%, var(--nal-bg));
		border: 1px solid var(--nal-line);
	}

	.single-course .enrollment-box h2 {
		font-size: clamp(48px, 5.5vw, 82px);
		line-height: .9;
	}

	.single-course .enrollment-box > div:last-child {
		justify-self: stretch;
		max-width: none;
	}

	.single-course .enrollment-box .nal-button {
		width: 100%;
	}

	/* ---------- Filters ---------- */
	.post-type-archive-project .archive-filters,
	.post-type-archive-course .archive-filters {
		gap: 9px;
		margin-bottom: 36px;
	}

	.post-type-archive-project .filter-button,
	.post-type-archive-course .filter-button {
		min-height: 38px;
		padding-inline: 15px;
	}

	/* ---------- Footer form balance ---------- */
	.nal-footer-form {
		grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
		gap: clamp(50px, 7vw, 100px);
	}

	.nal-footer-form__body,
	.nal-footer-form .form-grid {
		min-width: 0;
	}
}

/* Laptop nhỏ / tablet ngang */
@media (min-width: 901px) and (max-width: 1199px) {
	.post-type-archive-course .course-grid,
	body.home .course-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.home .projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-project .detail-hero,
	.single-course .detail-hero {
		grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
	}

	.single-project .detail-copy h1,
	.single-course .detail-copy h1 {
		font-size: clamp(46px, 5.6vw, 68px);
	}

	.single-project .project-gallery,
	.single-course .project-gallery,
	.single-course .course-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-course .enrollment-box {
		grid-template-columns: 1fr 1fr;
		padding: 48px;
	}
}

/* Desktop lớn */
@media (min-width: 1200px) {
	.post-type-archive-course .course-grid,
	body.home .course-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Màn hình rất rộng: giữ nội dung tập trung, không kéo giãn quá mức */
@media (min-width: 1680px) {
	:root {
		--nal-desktop-max: 1460px;
	}

	.single-project .detail-copy,
	.single-course .detail-copy {
		padding-inline: clamp(70px, 6vw, 110px);
	}
}