/*
 * NAL Mobile Layout Polish
 * Tối ưu theo hướng editorial, cân đối, có chiều sâu nhưng không làm nặng trang.
 */

/* Tablet và mobile */
@media (max-width: 900px) {
	:root {
		--nal-mobile-pad: clamp(18px, 5vw, 26px);
		--nal-mobile-radius: 5px;
		--nal-mobile-shadow: 0 18px 45px rgba(18, 18, 18, .085);
		--nal-mobile-soft-shadow: 0 10px 30px rgba(18, 18, 18, .065);
		--nal-pad: var(--nal-mobile-pad);
	}

	html {
		scroll-padding-top: calc(var(--nal-header, 68px) + 18px);
	}

	body {
		overflow-x: hidden;
		text-rendering: optimizeLegibility;
	}

	.nal-container {
		padding-inline: var(--nal-mobile-pad);
	}

	.eyebrow {
		font-size: 9px;
		line-height: 1.5;
		letter-spacing: .16em;
	}

	/* Header */
	.site-header {
		height: var(--nal-header, 68px);
	}

	.header-inner {
		gap: 14px;
	}

	.nal-logo {
		font-size: 21px;
		line-height: 1;
	}

	.custom-logo {
		max-height: 38px;
		max-width: 170px;
	}

	/* Nhịp section */
	.nal-section {
		padding: 68px 0;
	}

	body.home .nal-section-projects,
	body.home .nal-section-trends {
		background:
			linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
	}

	body.home .nal-section-courses {
		background: color-mix(in srgb, var(--nal-paper, #fbfaf7) 76%, var(--nal-bg, #f3efe9));
	}

	.section-heading {
		display: block;
		margin-bottom: 28px;
	}

	.section-heading > div {
		max-width: 100%;
	}

	.section-heading h2 {
		margin-top: 9px;
		font-size: clamp(46px, 13vw, 66px);
		line-height: .91;
		letter-spacing: -.052em;
	}

	.section-heading > p {
		max-width: 100%;
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid var(--nal-line);
		font-size: 15px;
		line-height: 1.65;
	}

	.section-link {
		margin-top: 26px;
	}

	.section-link .nal-button {
		width: 100%;
	}

	/* Hero trang chủ */
	.home-hero {
		min-height: auto;
		grid-template-columns: 1fr;
	}

	.hero-copy {
		min-height: auto;
		padding: 38px var(--nal-mobile-pad) 42px;
	}

	.hero-top {
		align-items: flex-start;
		gap: 14px;
	}

	.hero-top .eyebrow:first-child {
		max-width: 72%;
	}

	.hero-copy h1 {
		max-width: 100%;
		margin: 46px 0 34px;
		font-size: clamp(50px, 14.4vw, 72px);
		line-height: .88;
		letter-spacing: -.062em;
		overflow-wrap: anywhere;
	}

	.hero-bottom {
		gap: 22px;
	}

	.hero-bottom p {
		max-width: none;
		font-size: 15px;
		line-height: 1.65;
	}

	.hero-bottom .nal-button {
		width: 100%;
		min-height: 52px;
	}

	.hero-media,
	.detail-media,
	.event-image {
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.hero-media > img,
	.detail-media > img,
	.event-image > img {
		object-position: center center;
	}

	.media-caption {
		left: 12px;
		right: 12px;
		bottom: 12px;
		padding: 10px 12px;
		gap: 8px;
		font-size: 8px;
		line-height: 1.35;
		letter-spacing: .1em;
	}

	.nal-marquee > div {
		padding: 10px 0;
		font-size: 9px;
		letter-spacing: .14em;
	}

	.nal-marquee span {
		padding-right: 32px;
	}

	/* Phần nội dung biên tập trên Home */
	.home-editor-content {
		padding: 62px 0;
		background: var(--nal-paper, #fbfaf7);
	}

	.home-editor-content .entry-content {
		width: 100%;
		padding-inline: var(--nal-mobile-pad);
	}

	.home-editor-content .wp-block-columns {
		gap: 24px;
	}

	.home-editor-content h2 {
		font-size: clamp(42px, 12vw, 58px);
		line-height: .94;
	}

	.home-editor-content p {
		font-size: 16px;
		line-height: 1.7;
	}

	.home-editor-content .wp-block-button,
	.home-editor-content .wp-block-button__link {
		width: 100%;
	}

	/* Card dùng chung */
	.project-card,
	.course-card,
	.trend-row {
		border-radius: var(--nal-mobile-radius);
		box-shadow: var(--nal-mobile-soft-shadow);
	}

	.project-card,
	.course-card {
		overflow: hidden;
		background: var(--nal-paper, #fbfaf7);
	}

	.editorial-grid,
	.course-grid {
		gap: 24px;
	}

	.card-image {
		aspect-ratio: 4 / 5;
	}

	.card-meta {
		padding: 14px 16px 8px;
		font-size: 9px;
		line-height: 1.45;
	}

	.project-card h3 {
		padding: 0 16px 18px;
		font-size: clamp(27px, 8vw, 36px);
		line-height: 1.02;
	}

	.course-body {
		padding: 18px;
		gap: 17px;
	}

	.course-card h3 {
		font-size: clamp(28px, 8vw, 38px);
		line-height: .98;
	}

	.status-pill {
		padding: 7px 10px;
		font-size: 9px;
		line-height: 1.3;
	}

	.course-facts span {
		min-height: 48px;
		display: flex;
		align-items: center;
		padding-block: 10px;
		font-size: 9px;
		line-height: 1.35;
	}

	.course-body .nal-button {
		width: 100%;
	}

	/* Trends: từ hàng ngang thành card đọc rõ */
	.trend-list {
		border-top: 0;
		display: grid;
		gap: 13px;
	}

	.trend-row {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 8px 12px;
		padding: 18px;
		border: 1px solid var(--nal-line);
		background: rgba(255,255,255,.48);
	}

	.trend-row:hover {
		padding-left: 18px;
	}

	.trend-number {
		grid-column: 1;
		grid-row: 1 / span 3;
		font-size: 21px;
		line-height: 1;
	}

	.trend-row h3 {
		grid-column: 2;
		font-size: clamp(24px, 7.1vw, 31px);
		line-height: 1.02;
	}

	.trend-row p {
		display: block;
		grid-column: 2;
		font-size: 13px;
		line-height: 1.55;
	}

	.trend-row > span:last-child {
		grid-column: 2;
		font-size: 9px;
	}

	/* Event */
	.event-feature {
		min-height: auto;
	}

	.event-copy {
		padding: 42px var(--nal-mobile-pad) 48px;
	}

	.event-copy h2 {
		margin: 18px 0;
		font-size: clamp(43px, 12vw, 61px);
		line-height: .91;
	}

	.event-copy > div > p {
		font-size: 15px;
		line-height: 1.65;
	}

	.fact-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin-top: 28px;
	}

	.fact-grid > div {
		min-width: 0;
		padding: 16px 12px 16px 0;
		font-size: 18px;
		line-height: 1.25;
		border-bottom: 1px solid rgba(255,255,255,.18);
	}

	.fact-grid > div:nth-child(even) {
		padding-left: 12px;
		border-left: 1px solid rgba(255,255,255,.18);
	}

	.fact-grid > div:nth-child(3) {
		grid-column: 1 / -1;
		padding-left: 0;
		border-left: 0;
	}

	.event-copy .nal-button {
		width: 100%;
		margin-top: 22px;
	}

	/* Archive / trang danh sách */
	.page-hero {
		padding: 52px 0 38px;
	}

	.page-hero-inner {
		gap: 18px;
	}

	.page-hero h1 {
		margin-top: 10px;
		font-size: clamp(52px, 16vw, 76px);
		line-height: .86;
		letter-spacing: -.06em;
		overflow-wrap: anywhere;
	}

	.page-intro {
		font-size: 15px;
		line-height: 1.65;
	}

	.archive-filters {
		position: sticky;
		z-index: 30;
		top: calc(var(--nal-header, 68px) + 1px);
		flex-wrap: nowrap;
		gap: 8px;
		margin: -10px calc(var(--nal-mobile-pad) * -1) 28px;
		padding: 12px var(--nal-mobile-pad);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		background: color-mix(in srgb, var(--nal-bg, #f3efe9) 93%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--nal-line);
	}

	.archive-filters::-webkit-scrollbar {
		display: none;
	}

	.admin-bar .archive-filters {
		top: calc(var(--nal-header, 68px) + 46px);
	}

	.filter-button {
		flex: 0 0 auto;
		min-height: 38px;
		padding: 8px 13px;
		font-size: 9px;
		white-space: nowrap;
	}

	.pagination-wrap {
		margin-top: 32px;
	}

	.nav-links {
		justify-content: center;
	}

	/* Trang chi tiết */
	.detail-hero {
		min-height: auto;
	}

	.detail-copy {
		min-height: auto;
		padding: 40px var(--nal-mobile-pad) 34px;
	}

	.detail-copy h1 {
		margin: 22px 0 20px;
		font-size: clamp(45px, 13.5vw, 66px);
		line-height: .89;
		letter-spacing: -.055em;
		overflow-wrap: anywhere;
	}

	.detail-summary {
		font-size: 15px;
		line-height: 1.65;
	}

	.detail-facts {
		grid-template-columns: 1fr 1fr;
		margin-top: 30px;
	}

	.detail-facts > div {
		min-width: 0;
		padding: 12px 10px 12px 0;
		font-size: 13px;
		line-height: 1.4;
	}

	.detail-facts > div:nth-child(even) {
		padding-left: 10px;
		border-left: 1px solid var(--nal-line);
	}

	.detail-facts small {
		font-size: 8px;
	}

	body.single-project .detail-media {
		order: -1;
	}

	body.single-project .detail-copy {
		border-top: 1px solid var(--nal-line);
	}

	.entry-content {
		width: calc(100% - (var(--nal-mobile-pad) * 2));
	}

	.entry-content > * {
		margin-bottom: 1.25em;
	}

	.entry-content h2 {
		font-size: clamp(37px, 10.5vw, 50px);
		line-height: .98;
	}

	.entry-content h3 {
		font-size: clamp(27px, 8vw, 36px);
		line-height: 1.05;
	}

	.entry-content h4 {
		font-size: 20px;
		line-height: 1.25;
	}

	.entry-content p,
	.entry-content li {
		font-size: 16px;
		line-height: 1.72;
	}

	.entry-content ul,
	.entry-content ol {
		padding-left: 20px;
	}

	.entry-content .alignwide,
	.entry-content .alignfull {
		width: 100vw;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.single-featured {
		margin-bottom: 32px;
	}

	.single-featured img,
	.article-featured img {
		width: 100%;
		max-height: none;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	/* Gallery có nhịp tạp chí, giảm chiều dài trang */
	.project-gallery,
	.entry-content .wp-block-gallery {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: dense;
		gap: 8px;
	}

	.project-gallery figure,
	.project-gallery figure:nth-child(3n),
	.entry-content .wp-block-gallery figure {
		grid-column: span 1;
		margin: 0;
		overflow: hidden;
	}

	.project-gallery figure:nth-child(7n+1),
	.entry-content .wp-block-gallery figure:nth-child(7n+1) {
		grid-column: 1 / -1;
	}

	.project-gallery figure:nth-child(7n+1) img,
	.entry-content .wp-block-gallery figure:nth-child(7n+1) img {
		aspect-ratio: 4 / 5;
	}

	.project-gallery img,
	.entry-content .wp-block-gallery img {
		width: 100%;
		height: 100%;
		aspect-ratio: 3 / 4;
		object-fit: cover;
	}

	.gallery-section .eyebrow {
		margin-bottom: 18px;
	}

	.credits-block {
		gap: 12px;
	}

	.credits-block > p:last-child {
		font-size: 25px;
		line-height: 1.35;
	}

	/* Bài Trends */
	.article-hero {
		padding: 52px 0 38px;
	}

	.article-hero h1 {
		margin: 16px 0;
		font-size: clamp(44px, 12.5vw, 63px);
		line-height: .91;
		letter-spacing: -.055em;
		overflow-wrap: anywhere;
	}

	.article-deck {
		font-size: 19px;
		line-height: 1.45;
	}

	.article-content > p:first-of-type:first-letter {
		font-size: 4.6em;
	}

	/* Đăng ký khóa học/sự kiện */
	.enrollment-section {
		padding-top: 34px;
		padding-bottom: 64px;
	}

	.enrollment-box {
		gap: 24px;
		padding: 28px 20px;
		border: 1px solid var(--nal-line);
		border-radius: var(--nal-mobile-radius);
		background: var(--nal-paper, #fbfaf7);
		box-shadow: var(--nal-mobile-shadow);
	}

	.enrollment-box h2 {
		font-size: clamp(38px, 11vw, 52px);
		line-height: .94;
	}

	.enrollment-box > div:last-child {
		max-width: none;
		width: 100%;
	}

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

	/* Liên hệ trên Home */
	.nal-home-contact {
		padding: 68px 0;
	}

	.nal-home-contact__grid {
		gap: 30px;
	}

	.nal-home-contact__title h2 {
		font-size: clamp(44px, 12vw, 59px);
		line-height: .92;
	}

	.nal-home-contact__content > p {
		font-size: 16px;
		line-height: 1.65;
	}

	.nal-home-contact__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding-block: 20px;
	}

	.nal-home-contact .nal-button {
		width: 100%;
	}

	/* Footer và form */
	.site-footer {
		padding: 56px 0 max(24px, env(safe-area-inset-bottom));
	}

	.footer-grid {
		gap: 30px;
	}

	.footer-logo {
		font-size: clamp(47px, 14vw, 66px);
		line-height: .86;
	}

	.footer-column h3 {
		margin-bottom: 14px;
	}

	.footer-column ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}

	.footer-column a,
	.footer-column p {
		margin: 9px 0;
		font-size: 12px;
		line-height: 1.5;
	}

	.nal-footer-form {
		gap: 28px;
		padding: 46px 0;
		margin-top: 42px;
	}

	.nal-footer-form__heading h2 {
		font-size: clamp(43px, 12vw, 58px);
		line-height: .92;
	}

	.nal-footer-form__heading > p:last-child {
		font-size: 14px;
		line-height: 1.6;
	}

	.nal-footer-form .form-grid {
		gap: 18px;
	}

	.nal-footer-form input,
	.nal-footer-form select,
	.nal-footer-form textarea {
		min-height: 46px;
		font-size: 16px; /* tránh iOS tự zoom khi focus */
	}

	.nal-footer-form textarea {
		min-height: 105px;
	}

	.nal-footer-form button,
	.nal-footer-form input[type="submit"] {
		width: 100%;
		min-height: 50px;
	}

	.footer-bottom {
		gap: 10px;
		margin-top: 34px;
		padding-top: 18px;
		font-size: 8px;
		line-height: 1.55;
	}

	/* Nút và vùng chạm */
	.nal-button,
	.wp-block-button__link,
	button,
	.filter-button {
		touch-action: manipulation;
	}

	.nal-button {
		min-height: 50px;
	}

	/* Không để hiệu ứng hover tạo trạng thái dính trên màn hình cảm ứng */
	@media (hover: none) {
		.project-card:hover,
		.course-card:hover,
		.trend-row:hover {
			transform: none;
			box-shadow: var(--nal-mobile-soft-shadow);
		}

		.project-card:hover img,
		.course-card:hover img {
			transform: none;
		}
	}
}

/* Điện thoại nhỏ */
@media (max-width: 480px) {
	:root {
		--nal-mobile-pad: 18px;
	}

	.hero-copy h1 {
		font-size: clamp(48px, 15.3vw, 65px);
	}

	.hero-top .eyebrow:first-child {
		max-width: 76%;
	}

	.media-caption {
		flex-direction: column;
		align-items: flex-start;
	}

	.detail-facts {
		grid-template-columns: 1fr 1fr;
	}

	.footer-column ul {
		grid-template-columns: 1fr 1fr;
	}

	.project-gallery,
	.entry-content .wp-block-gallery {
		gap: 6px;
	}
}

/* Màn hình rất hẹp */
@media (max-width: 360px) {
	.detail-facts,
	.fact-grid {
		grid-template-columns: 1fr;
	}

	.detail-facts > div:nth-child(even),
	.fact-grid > div:nth-child(even) {
		padding-left: 0;
		border-left: 0;
	}

	.fact-grid > div:nth-child(3) {
		grid-column: auto;
	}

	.footer-column ul {
		grid-template-columns: 1fr;
	}

	.hero-copy h1 {
		font-size: 46px;
	}
}

/* Giảm chuyển động vẫn giữ bố cục */
@media (prefers-reduced-motion: reduce) {
	.archive-filters {
		scroll-behavior: auto;
	}
}

/* =========================================================
   v1.1 — Hard mobile layout correction
   Fixes narrow/offset single pages and crops white bands in
   featured course images that contain internal white margins.
   ========================================================= */
@media (max-width: 900px) {
	/* Force every single template back to one true viewport column. */
	body.single-course main,
	body.single-project main,
	body.single-event main,
	body.single-trend main,
	body.single-course .site-main,
	body.single-project .site-main,
	body.single-event .site-main,
	body.single-trend .site-main {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	body.single-course .detail-hero,
	body.single-project .detail-hero,
	body.single-event .detail-hero {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-course .detail-copy,
	body.single-project .detail-copy,
	body.single-event .detail-copy {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 36px var(--nal-mobile-pad) 32px !important;
		box-sizing: border-box !important;
	}

	body.single-course .detail-copy > div,
	body.single-project .detail-copy > div,
	body.single-event .detail-copy > div,
	body.single-course .detail-facts,
	body.single-project .detail-facts,
	body.single-event .detail-facts {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	/* Full-width media. The source course image contains large white
	   margins, so a 4:3 cover crop reveals the actual classroom photo. */
	body.single-course .detail-media,
	body.single-project .detail-media,
	body.single-event .detail-media {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 4 / 3 !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		overflow: hidden !important;
		background: #111 !important;
	}

	body.single-course .detail-media > img,
	body.single-project .detail-media > img,
	body.single-event .detail-media > img {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: cover !important;
		object-position: center 50% !important;
		transform: none !important;
	}

	/* Reset Gutenberg alignment/column values that were retained from
	   desktop and caused alternating 2/3-width blocks on phones. */
	body.single-course article.nal-section,
	body.single-project article.nal-section,
	body.single-event article.nal-section,
	body.single-trend article.nal-section {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 48px 0 58px !important;
		overflow: hidden !important;
	}

	body.single-course .entry-content,
	body.single-project .entry-content,
	body.single-event .entry-content,
	body.single-trend .entry-content {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 var(--nal-mobile-pad) !important;
		box-sizing: border-box !important;
	}

	body.single-course .entry-content > *,
	body.single-project .entry-content > *,
	body.single-event .entry-content > *,
	body.single-trend .entry-content > * {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	body.single-course .entry-content .alignwide,
	body.single-course .entry-content .alignfull,
	body.single-project .entry-content .alignwide,
	body.single-project .entry-content .alignfull,
	body.single-event .entry-content .alignwide,
	body.single-event .entry-content .alignfull,
	body.single-trend .entry-content .alignwide,
	body.single-trend .entry-content .alignfull {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	body.single-course .entry-content .wp-block-columns,
	body.single-project .entry-content .wp-block-columns,
	body.single-event .entry-content .wp-block-columns,
	body.single-trend .entry-content .wp-block-columns {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	body.single-course .entry-content .wp-block-column,
	body.single-project .entry-content .wp-block-column,
	body.single-event .entry-content .wp-block-column,
	body.single-trend .entry-content .wp-block-column {
		flex: none !important;
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-course .entry-content .wp-block-image,
	body.single-project .entry-content .wp-block-image,
	body.single-event .entry-content .wp-block-image,
	body.single-trend .entry-content .wp-block-image,
	body.single-course .entry-content figure,
	body.single-project .entry-content figure,
	body.single-event .entry-content figure,
	body.single-trend .entry-content figure {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		float: none !important;
		transform: none !important;
	}

	body.single-course .entry-content .wp-block-image img,
	body.single-project .entry-content .wp-block-image img,
	body.single-event .entry-content .wp-block-image img,
	body.single-trend .entry-content .wp-block-image img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		object-fit: cover !important;
	}

	/* Restore normal flow after legacy align-left/right blocks. */
	body.single-course .entry-content .alignleft,
	body.single-course .entry-content .alignright,
	body.single-project .entry-content .alignleft,
	body.single-project .entry-content .alignright,
	body.single-event .entry-content .alignleft,
	body.single-event .entry-content .alignright,
	body.single-trend .entry-content .alignleft,
	body.single-trend .entry-content .alignright {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Keep the title readable and prevent isolated one-letter wrapping. */
	body.single-course .detail-copy h1,
	body.single-project .detail-copy h1,
	body.single-event .detail-copy h1 {
		font-size: clamp(42px, 12vw, 60px) !important;
		line-height: .92 !important;
		overflow-wrap: normal !important;
		word-break: normal !important;
		hyphens: none !important;
	}
}

@media (max-width: 480px) {
	body.single-course .detail-media,
	body.single-project .detail-media,
	body.single-event .detail-media {
		aspect-ratio: 4 / 3 !important;
	}
}