/* Inner pages (design C): policy, article, empty states, thank-you. Only what the blocks' own settings cannot express. */
:root {
	--kcg-side-w: 260px; /* policy side menu */
	--kcg-art-side-w: 300px; /* article side column */
}

/* ---------- two-column pages: policy (menu left), article (side right) ---------- */
.kcg-pol, .kcg-art { display: grid; align-items: start; gap: var(--wp--preset--spacing--50); }
.kcg-pol { grid-template-columns: var(--kcg-side-w) minmax(0, 1fr); }
.kcg-art { grid-template-columns: minmax(0, 1fr) var(--kcg-art-side-w); gap: var(--wp--preset--spacing--60); }
/* grid/flex cells: the flow-layout block gap (margin-top) would push the second cell down */
.kcg-pol > *, .kcg-art > *, .kcg-side > * { margin: 0 !important; }
/* .kcg-card.x: beats theme.css .kcg-card whatever the stylesheet order */
.kcg-card.kcg-doc { padding: var(--wp--preset--spacing--70); }
/* The sticky offset --kcg-sticky-top comes from theme.css (it also sets the page scroll padding for in-page jumps).
   A side column taller than the window scrolls on its own, so its lower boxes ("Bài khác") stay reachable while reading.
   Scroll chaining stays on: at the column's end the wheel scrolls the page again (overscroll-behavior: contain froze it). */
.kcg-side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); position: sticky; top: var(--kcg-sticky-top); max-height: calc(100vh - var(--kcg-sticky-top) - var(--wp--preset--spacing--40)); overflow-y: auto; }
.kcg-side > .kcg-card, .kcg-side > .wp-block-template-part > .kcg-card { padding: var(--wp--preset--spacing--50); } /* the advice box is a template part (parts/advice-cta.html), one wrapper deeper */
.kcg-box__h .wp-block-icon svg, .kcg-state .wp-block-icon svg { height: auto; aspect-ratio: 1; }

/* deep call box: full-width buttons, one per row */
.kcg-card.kcg-cta { border-color: var(--wp--preset--color--deep); }
.kcg-cta .wp-block-buttons { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); }
.kcg-cta .wp-block-button__link { width: 100%; justify-content: center; }

/* support menu (parts/support-menu.html): full-width rows, current page tinted */
.kcg-supmenu, .kcg-supmenu .wp-block-navigation__container, .kcg-supmenu .wp-block-navigation-item { width: 100%; align-items: stretch; }
.kcg-supmenu .wp-block-navigation-item__content { flex: 1; padding: var(--wp--preset--spacing--20); border-radius: var(--wp--preset--border-radius--small); }
.kcg-supmenu .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--paper); text-decoration: none; }
.kcg-supmenu .current-menu-item > .wp-block-navigation-item__content,
.kcg-supmenu .wp-block-navigation-item__content[aria-current="page"] { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand-ink); font-weight: 600; }

/* ---------- long text: article, policy, product description, category intro ----------
   Class kcg-prose on the block that holds the text (Post Content, a Group around it, or Term Description). */
.kcg-prose { line-height: 1.75; }
.kcg-prose > :first-child { margin-top: 0; }
/* a host without a WordPress layout (Term Description prints raw HTML, and core zeroes its paragraph margins) gets the
   same gap between blocks as the flow layout gives Post Content */
.kcg-prose:not([class*="is-layout-"]) > * { margin-block-end: var(--wp--style--block-gap); }
.kcg-prose:not([class*="is-layout-"]) > :last-child { margin-block-end: 0; }
.kcg-prose h2 { margin-top: var(--wp--preset--spacing--70); }
.kcg-prose h3 { margin-top: var(--wp--preset--spacing--50); }
.kcg-prose :is(ul, ol) { padding-left: var(--wp--preset--spacing--50); }
.kcg-prose li + li { margin-top: var(--wp--preset--spacing--20); }
.kcg-prose li::marker { color: var(--wp--preset--color--brand); }
.kcg-prose img { max-width: 100%; height: auto; border-radius: var(--wp--preset--border-radius--medium); }

/* date line: calendar icon, "28/02/2026 · Bồn Tắm KCG" (site title) */
.kcg-art__by { margin: 0; font-weight: inherit; }
.kcg-art__by::before { content: "·"; margin-right: var(--wp--preset--spacing--10); }

/* "Bài khác": thumbnail + title rows (grid columns come from theme.css .kcg-mini-posts li) */
.kcg-mini-posts .wp-block-post-template { display: grid; gap: var(--wp--preset--spacing--30); }
.kcg-mini-posts .wp-block-post { margin: 0 !important; }
.kcg-mini-posts .wp-block-post > * { margin: 0; }
.kcg-mini-posts .wp-block-post-title { grid-column: 2; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* column 2 also when a post has no image */
.kcg-mini-posts .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.kcg-mini-posts .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--brand-ink); text-decoration: none; }

/* ---------- centred states: nothing found (pattern kcg/empty-state, 404), thank-you ---------- */
.kcg-state { text-align: center; }
.kcg-nores { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40); border: 1px dashed var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink-2); }
.kcg-card.kcg-state { max-width: var(--wp--style--global--content-size); padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60); }
.kcg-state .kcg-search { order: 0; flex: none; width: 100%; max-width: var(--wp--style--global--content-size); }
.kcg-state__hours { color: var(--wp--preset--color--ink-2); }

@media (max-width: 1180px) {
	.kcg-art { grid-template-columns: minmax(0, 1fr) var(--kcg-side-w); }
}
@media (max-width: 900px) {
	.kcg-pol, .kcg-art { grid-template-columns: minmax(0, 1fr); }
	.kcg-side { position: static; max-height: none; overflow: visible; }
	.kcg-card.kcg-doc { padding: var(--wp--preset--spacing--50); }
}
@media (max-width: 640px) {
	.kcg-card.kcg-doc { padding: var(--wp--preset--spacing--40); }
	.kcg-nores, .kcg-card.kcg-state { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }
	/* buttons one per row, full width (design C .box--cta .btn), instead of ragged natural widths */
	.kcg-state .wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
	.kcg-state .wp-block-button__link { width: 100%; }
}