/* ==========================================================================
   Đá Sân Vườn Việt — reset và primitive dùng chung
   Component của từng dải nằm ở main.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Header dính giờ MỘT hàng, đo được ~60px ở 1440px. Giá trị này phải LỚN
	   HƠN con số đó, nếu không liên kết neo sẽ thả người đọc xuống một tiêu đề
	   nằm khuất dưới header. Đo lại nếu đổi chiều cao header. */
	scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;            /* Fraunces là serif — 800 đóng bết ở cỡ tiêu đề */
	line-height: var(--lh-head);
	letter-spacing: -.014em;     /* nhẹ hơn sans: serif đã có chân giữ nhịp */
	margin: 0;
	overflow-wrap: anywhere;     /* tên loại đá dài không được phá thẻ */
}
h1 { line-height: var(--lh-tight); }

p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }

/* ⚠️ Thuộc tính `hidden` của HTML chỉ đặt `display:none` ở stylesheet của trình
   duyệt, nên BẤT KỲ rule display nào của ta cũng đè được nó. Đo được đúng như
   vậy: `.mona-rail__nav[hidden]` vẫn hiện vì `.mona-rail__nav{display:flex}`
   thắng — và khi tắt JS, hai mũi tên đó thành nút chết.
   Rule này khoá lại: `hidden` là ẩn, không bàn thêm. */
[hidden] { display: none !important; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Số liệu kỹ thuật phải xếp thẳng cột — đây là ấn phẩm đầy bảng thông số */
table, .mona-num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; border-radius: 4px; }
.mona-on-dark :focus-visible, .mona-band--dark :focus-visible,
.mona-topbar :focus-visible { outline-color: var(--sand); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.mona-skip-link {
	position: absolute; top: 0; left: 0; z-index: 999;
	transform: translateY(-120%);
	background: var(--ink); color: var(--on-dark); padding: 12px 18px;
}
.mona-skip-link:focus { transform: translateY(0); }

/* ── Khung ─────────────────────────────────────────────────────────────────*/
.mona-container {
	width: 100%; max-width: var(--container);
	margin-inline: auto; padding-inline: var(--gutter);
}
.mona-band       { padding-block: var(--band); }
.mona-band--sunk { background: var(--ground-2); }
.mona-band--white{ background: var(--card); }
.mona-band--dark { background: var(--ink); color: var(--on-dark); }
.mona-band--dark h2, .mona-band--dark h3 { color: var(--on-dark); }
.mona-band--tight{ padding-block: clamp(30px, 3.2vw, 52px); }

.mona-prose > p, .mona-prose > ul, .mona-prose > ol { max-inline-size: var(--measure); }

/* ── Đầu dải ───────────────────────────────────────────────────────────────
   Nhãn nhỏ + tiêu đề bên trái, link "xem tất cả" bên phải. Một ấn phẩm lặp
   nhịp này bảy, tám lần — nên nó là component, không phải markup chép lại. */
.mona-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 18px 28px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 34px);
}
.mona-head__t { min-width: 0; }
.mona-head h2 { font-size: var(--t-h2); max-inline-size: 22ch; }
.mona-head p  { color: var(--ink-2); margin-top: 9px; max-inline-size: 56ch; font-size: var(--t-small); }
.mona-band--dark .mona-head p { color: var(--on-dark-soft); }

.mona-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-body); font-size: var(--t-micro); font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--ochre);
	margin-bottom: 11px;
}
.mona-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.mona-band--dark .mona-eyebrow { color: var(--sand); }

/* ── Nút ───────────────────────────────────────────────────────────────────*/
.mona-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--tap); padding: 11px 22px;
	border: 1.5px solid transparent; border-radius: var(--r-s);
	font-family: var(--f-body); font-weight: 600; font-size: var(--t-small);
	white-space: nowrap;
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2),
	            border-color var(--dur) var(--ease-2), transform var(--dur) var(--ease);
}
.mona-btn--moss  { background: var(--moss); color: var(--on-dark); }
.mona-btn--moss:hover  { background: var(--ink); transform: translateY(-1px); }
.mona-btn--ink   { background: var(--ink); color: var(--on-dark); }
.mona-btn--ink:hover   { background: var(--moss); }
.mona-btn--ghost { border-color: var(--line-2); color: var(--ink); }
.mona-btn--ghost:hover { border-color: var(--ink); background: var(--card); }
.mona-band--dark .mona-btn--ghost { border-color: var(--line-dark); color: var(--on-dark); }
.mona-band--dark .mona-btn--ghost:hover { border-color: var(--on-dark); background: var(--tint-dark); }

/* Link "xem tất cả" — chữ + mũi tên chạy khi hover */
.mona-more {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--f-body); font-weight: 600; font-size: var(--t-small);
	color: var(--moss); white-space: nowrap; min-height: var(--tap);
}
.mona-band--dark .mona-more { color: var(--sand); }
.mona-more svg { transition: transform var(--dur) var(--ease); }
.mona-more:hover svg { transform: translateX(4px); }

/* ── Chip thông số ─────────────────────────────────────────────────────────
   Dùng khắp trang cho quy cách, độ dày, bề mặt. Một mẩu dữ liệu, không phải
   một nhãn trang trí — nên nó có màu mực đủ chuẩn, không phải chữ xám nhạt. */
.mona-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 9px; border-radius: var(--r-s);
	background: var(--ground-2); color: var(--ink-2);
	font-size: var(--t-micro); font-weight: 600; line-height: 1.5;
	white-space: nowrap;
}
.mona-chip--moss  { background: var(--moss-wash);  color: var(--moss); }
.mona-chip--ochre { background: var(--ochre-wash); color: var(--ochre); }
.mona-band--dark .mona-chip { background: var(--tint-dark); color: var(--on-dark-soft); }

/* ── Lưới ──────────────────────────────────────────────────────────────────
   Ba cột là nhịp của một ấn phẩm: đủ rộng để tiêu đề bài không gãy làm bốn
   dòng. Xuống 1 cột ở điện thoại — khác shop, vì thẻ bài viết là chữ, đọc
   một cột dễ hơn là nhồi hai cột chữ bé. */
.mona-grid { display: grid; gap: clamp(14px, 1.5vw, 24px); }
.mona-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mona-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mona-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mona-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .mona-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
	.mona-grid--4, .mona-grid--3, .mona-grid--2 { grid-template-columns: 1fr; }
}

/* ── Cổng chuyển động ──────────────────────────────────────────────────────
   Mọi trạng thái ẩn nằm dưới .js, nên script bị chặn thì thấy đủ trang chứ
   không trắng. main.js thêm .is-in; GSAP đè opacity bằng style inline khi nó
   thật sự chạy. Ba nhánh đều dẫn tới nội dung hiện ra: có GSAP, không GSAP
   (IntersectionObserver), và lưới an toàn 2.500ms.

   ⚠️ Đừng đổi các selector này mà không sửa MOTION_SEL trong main.js — hai chỗ
   phải khớp, nếu không sẽ có phần tử bị ẩn mà không ai gỡ ra. */
.js [data-reveal],
.js [data-stagger] > *,
.js [data-split],
.js [data-layer]            { opacity: 0; }
.js [data-reveal].is-in,
.js [data-stagger] > .is-in,
.js [data-split].is-in,
.js [data-layer].is-in      { opacity: 1; }

/* Tách dòng tiêu đề: hộp ngoài cắt, hộp trong trượt lên. */
.mona-line   { display: block; overflow: hidden; }
.mona-line__i{ display: block; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal], .js [data-stagger] > *,
	.js [data-split], .js [data-layer] { opacity: 1 !important; transform: none !important; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ WordPress ═════════════════════════════════════════════════════════════
   Classes core and the block editor emit that a static prototype never has to
   show. Carried over from the base sheet this file replaced, re-pointed at
   this palette — the old `--ink-soft` token does not exist here.
   ========================================================================= */

/* The skip link, revealed on focus. `.screen-reader-text` above hides it. */
.screen-reader-text:focus {
	position: fixed !important;
	top: 16px; left: 16px;
	width: auto; height: auto;
	clip-path: none; overflow: visible;
	z-index: 999;
	padding: 12px 20px;
	background: var(--ink); color: var(--on-dark);
	border-radius: var(--r-s);
	box-shadow: var(--sh-lift);
}

/* Alignment: classic editor, plus `alignwide`/`alignfull` from block markup. */
.alignleft   { float: left;  margin: 0 24px 20px 0; }
.alignright  { float: right; margin: 0 0 20px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide,
.alignfull   { max-width: none; }

/* Captions. `.mona-prose figcaption` already styles the block editor's
   `<figure>`; these carry the same treatment to the `[caption]` shortcode and
   to `wp-element-caption`. */
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	margin-top: 9px;
	font-size: var(--t-micro); line-height: 1.55;
	color: var(--ink-2); text-align: center;
}

/* Admin bar. `.mona-header` is `position: sticky; top: 0`, so it slides under
   the bar unless pushed down. Core fixes the bar at 32px, 46px under 783px,
   and lets it scroll away entirely under 601px — three cases, not one. */
body.admin-bar .mona-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mona-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .mona-header { top: 0; }
}