/* ============================================================
   Lazy Corner · style.css
   第 3 课:盒子模型 / 选择器 / Grid 布局 / hover 动效
   读法:每一段开头注释标明了它演示的是哪种选择器
   ============================================================ */

/* ---- ① 通配选择器(*):选中页面上所有元素 ----
   浏览器默认给很多元素加了 margin/padding,先全部清零,
   这叫"重置(Reset)"。box-sizing 是盒子模型的总开关,见文末卡片 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- ② 元素选择器:直接写标签名 ---- */
body {
  font-family: system-ui, "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.75;          /* 行高:1.75 倍字号,中文可读性的甜点值 */
  color: #2c2c2c;             /* 前景色(文字) */
  background: #faf9f7;        /* 背景色:带一点暖的米白,比纯白柔和 */
  max-width: 860px;           /* 盒子模型:限制内容宽度,长文才不至于一行读到眼瞎 */
  margin: 0 auto;             /* 左右 margin 为 auto = 水平居中的经典手法 */
  padding: 2.5rem 1.25rem 4rem;
}

/* ---- ③ 后代选择器(header 里面的 p):空格表示"……之中的" ---- */
header {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e1db;   /* 盒子模型的 border 上岗 */
}
header h1 { font-size: 2rem; }
header p { color: #8a857c; margin: 0.35rem 0 1.25rem; }

/* ---- ④ 类选择器(.nav?不,nav 是元素;这里是给链接上色)----
   :hover 是"伪类":元素被鼠标悬停时的状态 */
nav a {
  display: inline-block;
  margin-right: 1.25rem;
  text-decoration: none;      /* 去掉链接默认下划线 */
  color: #4a6fa5;             /* 主题色,记住它,第 4 课会搬进 CSS 变量 */
  font-weight: 600;
}
nav a:hover { text-decoration: underline; }

section { margin-bottom: 3rem; }
section h2 { font-size: 1.25rem; margin-bottom: 1rem; }

/* ---- ⑤ Grid 网格布局:标签卡的骨架 ----
   auto-fill + minmax = "每列最少 230px,能塞几列塞几列",
   列数随屏幕宽度自动变化——第 4 课响应式的地基已经在这里了 */
.site-list {
  list-style: none;                       /* 去掉 li 的圆点 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;                              /* 卡片间距 */
}

/* ---- ⑥ 卡片本体:把 a 变成块级盒子 ----
   a 默认是 inline(行内),display:block/inline-block 之后才能设宽高 */
.site-card {
  display: block;
  height: 100%;                 /* 同行卡片等高 */
  background: #ffffff;
  border: 1px solid #e5e1db;
  border-radius: 10px;          /* 圆角 */
  padding: 1rem 1.1rem;         /* 内边距:文字离盒边的呼吸空间 */
  text-decoration: none;
  color: inherit;               /* 继承父级文字色,不要默认的蓝紫链接色 */
  /* transition:哪些属性变化时做动画、用多久——hover 动效的铺垫 */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.site-card:hover {
  transform: translateY(-3px);              /* 悬停:整卡上浮 3px */
  border-color: #4a6fa5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);  /* 加一层柔和投影 */
}
.site-card strong { display: block; margin-bottom: 0.35rem; color: #1f1f1f; }
.site-card span { font-size: 0.85rem; color: #8a857c; line-height: 1.55; }

/* ---- ⑦ 博客列表 ---- */
.post-list { list-style: none; }
.post-list li { border-bottom: 1px dashed #e5e1db; }
.post-list article {
  padding: 0.9rem 0.25rem;
  display: flex;                       /* 弹性布局:标题左、日期右 */
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.post-list a { color: #2c2c2c; text-decoration: none; font-weight: 600; }
.post-list a:hover { color: #4a6fa5; }
.post-list time { color: #8a857c; font-size: 0.85rem; white-space: nowrap; }

/* ---- ⑧ 文章页排版(post-learning 页面共用)---- */
article h3 { margin: 1.8rem 0 0.6rem; font-size: 1.08rem; }
article p { margin-bottom: 1rem; }
article ul { margin: 0 0 1rem 1.4rem; }
article a { color: #4a6fa5; }
article time { color: #8a857c; font-size: 0.9rem; }
article code {
  background: #efedea;
  padding: 0.15em 0.45em;
  border-radius: 5px;
  font-size: 0.9em;
  overflow-wrap: anywhere;    /* 长命令太宽时允许换行,撑破手机屏幕 */
}

/* ---- ⑨ 页脚 ---- */
footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e1db;
  color: #8a857c;
  font-size: 0.85rem;
}

/* ============================================================
   盒子模型速记(面试必考):
   ┌─────────── margin(外边距:盒子和别人的距离)┐
   │  ┌───────── border(边框)─────────┐  │
   │  │  ┌────── padding(内边距:墙和家具)┐  │  │
   │  │  │        content(内容)        │  │  │
   │  │  └──────────────────────────────┘  │  │
   │  └────────────────────────────────────┘  │
   └──────────────────────────────────────────┘
   box-sizing: border-box 的意思:width 写多少,内容+padding+border
   合起来就是多少——不再做"width 300 + padding 20 = 实际 340"的算术。
   ============================================================ */