/* ==========================================================================
   首页版式（home-02）
   --------------------------------------------------------------------------
   只按需加载：inc/enqueue.php 里 home 版式才会引这个文件。

   这一版的结构按搜索引擎首页来：**品牌标识在中部**，顶部只留一条功能条，
   搜索区是整页的视觉落点。所以这里最重要的一条约束是纵向节奏——
   顶部功能条 + 搜索区 + 首屏广告位的总高度必须控制在一屏之内，
   广告位必须落在首屏可见范围内（见文件末尾那条断言用的注释）。
   ========================================================================== */

/* ==========================================================================
   1. 首屏：品牌 + 搜索
   --------------------------------------------------------------------------
   底色一律纯白。用户明确说过不要灰白/米白（「视觉光感度差」），
   所以这里不做整块背景色分区，靠留白和一条细线分隔。
   ========================================================================== */

.home-hero {
  padding: var(--sp-9) 0 var(--sp-7);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.home-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 元素之间用手工间距而不是统一 gap：标题和副标题要贴紧成一组，
     搜索框又要和它们拉开。用一个 gap 值会逼出后面一堆 margin 覆盖。 */
}

/* --- 品牌区 ------------------------------------------------------------- */

.home-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* 首屏的 logo 比站头里的大一号：它是这一屏的视觉起点。
   内联 SVG 回退用的是 currentColor，所以这里的颜色会直接生效。 */
.home-logo {
  width: 64px;
  height: 64px;
  color: var(--accent);
}

.home-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
}

.home-lead {
  margin-top: var(--sp-3);
  max-width: 46em;
  font-size: 16.5px;
  line-height: 1.75;
  /* --ink-2 在白底上 5.7:1。不用 --ink-3（3.0:1），
     那是 16px 正文，AA 要求 4.5:1。 */
  color: var(--ink-2);
}

/* --- 搜索区 ------------------------------------------------------------- */

.home-search {
  width: 100%;
  max-width: 720px;
  margin-top: var(--sp-7);
  /* 表单本身在 template-tags.php 里输出 .aib-search--multi 的结构，
     这里只负责尺寸和位置——结构归 PHP，版式归 CSS。 */
}

/* 首屏的输入框比站头里的高：它是页面的主交互，值得占更大面积。 */
.home-search .aib-search-bar input[type="search"] {
  height: 56px;
  font-size: 16.5px;
  padding: 0 var(--sp-5);
}
.home-search .aib-search-clear {
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.home-hotwords {
  margin-top: var(--sp-5);
  justify-content: center;
}

@media (max-width: 768px) {
  .home-hero { padding: var(--sp-7) 0 var(--sp-6); }
  .home-logo { width: 52px; height: 52px; }
  .home-title { font-size: 27px; }
  .home-lead { font-size: 15.5px; }
  .home-search { margin-top: var(--sp-6); }
}

/* ==========================================================================
   2. 首屏广告位
   --------------------------------------------------------------------------
   位置是硬要求：必须在首屏可见范围内，不能埋进长内容中间。
   用户的理由是「他不一定往下滑……放在中间其实没什么意义」。

   所以这一块紧贴 hero 的下边缘，中间只留 --sp-6 的呼吸，
   不插任何标题、面包屑或引言。任何"先介绍一下再放广告"的改动
   都会把它推出首屏——要加东西请加在这一块**之后**。
   ========================================================================== */

.home-ads {
  padding: var(--sp-6) 0 0;
}

.home-ad-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

@media (max-width: 900px) {
  .home-ad-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .home-ad-row { grid-template-columns: minmax(0, 1fr); }
}

/* 没配广告的格子完全不占地方。
   :empty 只看子节点，data-ad-slot 是属性、不影响判定——
   所以这里能同时满足"给广告插件的 JS 留出挂载点"和"空着不出现空洞"。
   广告一旦被填进来，格子自然出现，不需要再加任何显隐逻辑。 */
.aib-ad-cell { min-width: 0; }
.aib-ad-cell:empty { display: none; }
/* 小工具和广告卡都要撑满格子高度，否则同一行里长短不一的卡片底部会对不齐。 */
.aib-ad-cell .aib-ad { height: 100%; }

/* 首页的广告卡是"海报位"：图标大一号、标题大一档。
   站内其它位置的 .aib-ad 保持原尺寸不动，所以这里只覆盖必要的几项。 */
.home-ad-row .aib-ad { padding: var(--sp-4); }
.home-ad-row .aib-ad-img { width: 48px; height: 48px; }
/* 首字母方块跟着图一起放大。不写这条的话，同一排里"配了图的"是 48px、
   "没配图的"是 40px，卡片标题的基线会差 8px——而且只在混排时看得出来。 */
.home-ad-row .aib-ad-initial { width: 48px; height: 48px; font-size: 20px; }
.home-ad-row .aib-ad-title { font-size: 15px; }

/* 三列时推广标记会和标题抢位置：标记绝对定位在右上角，
   而三列比侧栏窄得多，标题一旦换行就会顶到标记底下。
   给标题留出标记的宽度即可。 */
.home-ad-row .aib-ad-body { padding-right: 46px; }

/* ==========================================================================
   3. 内容区
   ========================================================================== */

.home-sec {
  padding: var(--sp-9) 0;
  border-bottom: 1px solid var(--line);
}
.home-sec:last-of-type { border-bottom: 0; }

/* 不复用 .aib-sec-head：那个是左对齐的一行（标题 + 右侧"更多"），
   首页的区块标题是居中的两行（标题 + 说明）。形状不同、
   共享的只有字号量级，硬套过去要靠一堆覆盖去拆它的 flex 主轴。
   两边都属于"区块标题"这个组件，但结构确实是两套。 */
.home-sec-head {
  margin-bottom: var(--sp-6);
  text-align: center;
}
.home-sec-head > h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.home-sec-head > p {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}

/* --- 3.1 分类入口 ------------------------------------------------------- */

.home-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.home-cat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease;
}
/* 双类名：单类 .home-cat:hover 是 (0,2,0)，会被 `a:hover` 那种
   (0,1,1) 加上后写的规则盖掉。凡是 <a> 上的组件色都写成双类。 */
.home-cats .home-cat:hover,
.home-cats .home-cat:focus {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.home-cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.home-cat-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- 3.2 站点介绍 ------------------------------------------------------- */

.home-intro {
  max-width: 46em;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.home-intro > * + * { margin-top: var(--sp-4); }
.home-intro h2,
.home-intro h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.home-intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.home-intro ul { list-style: disc; padding-left: 1.35em; }
.home-intro ol { list-style: decimal; padding-left: 1.35em; }
.home-intro li + li { margin-top: var(--sp-2); }

/* ==========================================================================
   4. 底部行动区
   ========================================================================== */

.home-cta {
  padding: var(--sp-9) 0;
  text-align: center;
}
.home-cta > h2 {
  font-size: 21px;
  font-weight: 700;
}
.home-cta > p {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}
.home-cta .aib-btns {
  margin-top: var(--sp-6);
  justify-content: center;
}