/* ------------------------------------------------------------------
 * front.css 的补丁层（缺的工具类）
 *
 * front.css 是 Tailwind 的**构建产物**，里面只有当初扫描到的那批类。
 * 主题模板后来用到的这些工具类它没有，缺失的直接后果是布局走形
 * （典型：首页新闻区 md:grid-cols-3 失效 → 卡片竖着排一列）。
 *
 * 这里按 Tailwind 的语义补齐，颜色一律走主题令牌（--color-*），
 * 两套皮肤（classic / industrial）共用这一份。
 * 注意：本文件必须加载在 front.css 之后、theme.css 之外（head.html 里的顺序已保证）。
 * ------------------------------------------------------------------ */

/* ——— 网格列数 ——— */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:ms-auto { margin-inline-start: auto; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ——— 间距 ——— */
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.pt-6 { padding-top: 1.5rem; }
.px-2 { padding-inline: .5rem; }
.py-0\.5 { padding-block: .125rem; }
.py-1 { padding-block: .25rem; }
.ps-3 { padding-inline-start: .75rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: .25rem; }

.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

/* ——— 尺寸 / 对齐 ——— */
.w-32 { width: 8rem; }
.h-fit { height: fit-content; }
.self-start { align-self: flex-start; }
.max-w-none { max-width: none; }
.max-w-xl { max-width: 36rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }

/* ——— 边框 / 分隔 ——— */
.border-s-2 { border-inline-start-width: 2px; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-top-style: solid; }
.divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-line); }

/* ——— 状态 ——— */
.cursor-pointer { cursor: pointer; }
.outline-none:focus,
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-primary:focus { border-color: var(--color-primary); }
.placeholder\:text-ink-mute::placeholder { color: var(--color-ink-mute); }
.disabled\:opacity-60:disabled { opacity: .6; }

/* ——— 皮肤语义类（模板里当钩子用，之前没有任何规则） ——— */
.rounded-chip { border-radius: var(--radius-chip, 999px); }
.lang-link { border-radius: var(--radius-md, .375rem); }
.lang-link:hover { background: var(--color-primary-soft); }