/**
 * utilities.css
 *
 * Trích từ design/html/styles.css (bộ V3). KHÔNG sửa file gốc trong design/.
 * Mọi @media đã được tách sang responsive.css.
 *
 * @package tntam-driving-theme
 */

/* ==========================================================================
   MISC
   ========================================================================== */

.two-col { display: grid; gap: var(--space-10); }


.note-box {
  border: 1px solid var(--border-strong);
  background: var(--warning-100);
  color: var(--warning-700);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 14.5px;
  max-width: 820px;
}

/* ==========================================================================
   PHẦN DƯỚI ĐÂY KHÔNG CÓ TRONG BỘ V3
   ==========================================================================
   Component chỉ bản WordPress mới cần: khối trạng thái rỗng khi plugin chưa
   bật, breadcrumb, phân trang, khung ảnh thật thay placeholder. Đặt tên theo
   hệ có sẵn của V3; utility hoàn toàn mới dùng tiền tố .tntam-.
   ========================================================================== */

/* ---- Icon từ SVG sprite nội bộ ---- */

.tntam-icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---- Cột đọc cho trang bài viết ----

   Khối .article vốn rộng 760px nhưng nằm sát mép trái khung 1180px, nên trên
   màn hình laptop trở lên có một mảng trống lớn bên phải và trang trông như bị
   dồn về một góc.

   Thu hẹp CẢ khung thay vì chỉ căn giữa .article: ảnh đại diện và liên kết cuối
   bài là anh em cùng cấp với .article, căn giữa mỗi .article thì ba thứ đó lệch
   nhau ba mép khác nhau — còn xấu hơn lúc đầu.

   Cộng thêm hai lần padding của .container để phần CHỮ vẫn đúng 760px như bộ V3,
   không bị hụt mất 40px.

   Trên điện thoại quy tắc này không đổi gì: màn hình hẹp hơn 800px nên width
   100% thắng, padding giữ nguyên. */

.container--reading {
  max-width: calc(var(--tntam-reading-max) + var(--space-5) * 2);
}

/* ---- Ảnh thật, thay cho khối placeholder ----
   Giữ đúng tỷ lệ và viền của khối .ph để bố cục không nhảy khi thay ảnh vào. */

.tntam-figure {
  margin: 0;
  border: 2px solid var(--border-brand);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}

.tntam-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tntam-figure.ph-4x3 { aspect-ratio: 4 / 3; }
.tntam-figure.ph-wide { aspect-ratio: 21 / 9; }
.tntam-figure.ph-16x10 { aspect-ratio: 16 / 10; }
.tntam-figure.ph-1x1 { aspect-ratio: 1 / 1; }

/* ---- Khối trạng thái rỗng ---- */

.empty-state {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.empty-state__message {
  color: var(--text-muted);
  max-width: 52ch;
  margin-inline: auto;
}

.empty-state__action { margin-top: var(--space-5); }

.empty-state--compact {
  border: 0;
  background: transparent;
  padding: var(--space-4) 0;
  text-align: left;
}

/* ---- Breadcrumb (dùng trên nền navy của .page-hero) ---- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-100);
  margin-bottom: var(--space-4);
}

.breadcrumb a { color: var(--terra-100); }
.breadcrumb a:hover { color: var(--neutral-0); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

/* ---- Phân trang ---- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-12);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-heading);
  font-weight: 700;
  text-decoration: none;
}

.pagination .page-numbers:hover {
  border-color: var(--navy-600);
  color: var(--navy-600);
}

.pagination .page-numbers.current {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--neutral-0);
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ---- Siêu dữ liệu bài viết (trên nền navy) ---- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--navy-100);
}

.meta-item {
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- Bề rộng nội dung bài ---- */

.article--narrow { max-width: 68ch; }
.article--full { max-width: none; }

/* ---- Khung landing: header tối giản, không dính trên cùng ---- */

.site-header--landing { position: static; }
.site-header--landing .header-cta { display: inline-flex; }

.is-blank-canvas { background: var(--bg-page); }

/* ---- Form dự phòng khi plugin lead chưa bật ---- */

.form-panel--fallback { text-align: left; }
.form-panel--fallback .hero-actions { margin-top: var(--space-5); }

/*
 * Chữ chỉ dành cho trình đọc màn hình. WordPress yêu cầu theme tự khai lớp này;
 * caption của bảng và nhãn form ẩn đều dựa vào nó. Không dùng display:none vì
 * trình đọc màn hình sẽ bỏ qua luôn.
 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}