/**
 * Centi Theme — assets/css/layout.css
 *
 * Container, page structure, content+sidebar grid.
 * Mobile-first: mặc định mobile, override lên lớn hơn.
 *
 * @package CentiTheme
 */

/* -------------------------------------------------------------------------
 * Container
 * ---------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.container {
		padding-inline: var(--space-8);
	}
}

/* -------------------------------------------------------------------------
 * Site structure
 * ---------------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
	padding-block: var(--space-8);
}

@media (min-width: 1024px) {
	.site-main {
		padding-block: var(--space-12);
	}
}

/* -------------------------------------------------------------------------
 * Content + Sidebar grid
 * ---------------------------------------------------------------------- */

.content-area {
	width: 100%;
}

/* Layout có sidebar */
.has-sidebar .content-area-inner {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.has-sidebar .content-area-inner {
		grid-template-columns: 1fr var(--sidebar-width);
		align-items: start;
	}
}

/* Sidebar sticky */
@media (min-width: 1024px) {
	.widget-area {
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
	}
}

/* -------------------------------------------------------------------------
 * Posts grid (archive)
 * ---------------------------------------------------------------------- */

.posts-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
	.posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Khi có sidebar — 2 cột thay vì 3 */
.has-sidebar .posts-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.has-sidebar .posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Tutorial grid
 * ---------------------------------------------------------------------- */

.tutorials-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
	.tutorials-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Single post layout
 * ---------------------------------------------------------------------- */

.entry-content {
	max-width: var(--content-max);
}

/* Tutorial — full width vì có TOC sidebar */
.site-main--tutorial .entry-content {
	max-width: 100%;
}

/* Page template — full width (không bị giới hạn 780px) */
.page .entry-content,
.page-template-default .entry-content,
.home .entry-content {
	max-width: 100%;
}

/* Entry header — luôn full width */
.entry-header {
	max-width: 100%;
}

/* Homepage custom blocks */
.homepage-custom-block {
	width: 100%;
	overflow-x: clip;                  /* ngăn tràn ngang */
	background-color: var(--color-bg);
	color: var(--color-text);
	padding-block: var(--space-8);
}

/* Kế thừa nền xen kẽ để phân biệt block 1 / block 2 */
.homepage-custom-block--1 {
	background-color: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.homepage-custom-block--2 {
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

/* Đảm bảo nội dung bên trong không vượt quá container */
.homepage-custom-block .container > * {
	max-width: 100%;
}

/* Tương thích Gutenberg blocks bên trong */
.homepage-custom-block .wp-block-group,
.homepage-custom-block .wp-block-columns {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Page header
 * ---------------------------------------------------------------------- */

.page-header {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.page-header__title {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
	.page-header__title {
		font-size: var(--font-size-4xl);
	}
}

.page-header__description {
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
	margin-bottom: 0;
}