/* ============================================================
   LearningConsult Air · 新闻模块 + 花絮照片墙(独立样式表)
   ------------------------------------------------------------
   v1.5.0 新增。与 style.css 分离的原因:仓库存在并行会话
   (另一会话负责首页 v1.4.x 间距调优,CSS 以 redesign/v1xx-fix.css
   补丁形式在构建时追加),为免相互覆盖,本文件的样式不进 style.css,
   由 functions.php 在 style.css 之后入队(级联相同时本文件恒胜)。
   改动只追加 [v1.5.x] 小节,不要整文件重写。
   ============================================================ */

/* ============================================================
   [v1.5.0] 新闻模块重设计 + 花絮照片墙
   ------------------------------------------------------------
   用户需求(2026-10-22):「网站的文章主要就是为了发新闻,重新设计
   新闻模块类型,增加花絮照片墙功能,可以上传新闻花絮照片,然后
   设计前端显示,并可以点击放大」。
   范围:新闻列表页 + 详情页重设计;花絮照片墙挂详情页正文后;
   数据结构不变(仍走 WP 文章 + /category/news/)。
   全部规则带 #Content 前缀 —— 基础排版规则特异性 > 单类名
   (agent.md §7 第 8 条,1.1.0 实测踩过)。
   ============================================================ */

/* ---------- 1. 新闻列表:竖向白卡网格(桌面 2 列) ---------- */
#Content .posts_group.classic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media only screen and (min-width: 1024px) {
  #Content .posts_group.classic { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* 旧横向卡片的底子(20/22px 内边距 + 下边框 + 20px 外边距)全部清掉,
   间距改由网格 gap 接管;盒子保持 border-box(agent.md §2.5 坑 3) */
#Content .posts_group.classic .post-item.ll-news-card {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ll-line);
  border-bottom: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-lg);
  background: var(--ll-surface);
  overflow: hidden;
  box-sizing: border-box;
  -webkit-transition: transform .22s var(--ll-ease), box-shadow .22s var(--ll-ease), border-color .22s var(--ll-ease);
  transition: transform .22s var(--ll-ease), box-shadow .22s var(--ll-ease), border-color .22s var(--ll-ease);
}
#Content .posts_group.classic .post-item.ll-news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ll-shadow-md);
  border-color: #d7e6f3;
}
/* 封面:16:9 顶部出血;object-position 钉在顶部 —— 新闻原图 1920×1440
   底部 13.8% 是品牌横幅,从底部裁才不会漏出来(同 v1.4.0 首页卡) */
#Content .ll-news-card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ll-bg-soft);
}
#Content .ll-news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  -webkit-transition: transform .5s var(--ll-ease);
  transition: transform .5s var(--ll-ease);
}
#Content .ll-news-card:hover .ll-news-card-media img { transform: scale(1.035); }
#Content .ll-news-card-body {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: start;
  align-items: flex-start;
  flex: 1;
  padding: 20px 22px 22px;
}
#Content .ll-news-card-meta { margin-bottom: 10px; }
#Content .ll-news-card-date {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ll-faint);
  font-variant-numeric: tabular-nums;
}
#Content .ll-news-card-date svg { color: var(--ll-blue); flex: none; }
#Content .ll-news-card-title {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ll-ink);
  margin: 0 0 8px;
}
#Content .ll-news-card-title a { color: var(--ll-ink); text-decoration: none; }
#Content .ll-news-card-title a:hover { color: var(--ll-blue); }
/* 摘要锁 3 行:150 字段落在双列卡里约 3~4 行,不锁高度会参差 */
#Content .ll-news-card-excerpt {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ll-muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#Content .ll-news-card-more {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ll-blue-dark);
}
#Content .ll-news-card-more svg {
  -webkit-transition: transform .18s var(--ll-ease);
  transition: transform .18s var(--ll-ease);
}
#Content .ll-news-card:hover .ll-news-card-more { color: var(--ll-blue); }
#Content .ll-news-card:hover .ll-news-card-more svg { transform: translateX(3px); }
@media only screen and (max-width: 767px) {
  #Content .posts_group.classic { gap: 18px; }
  /* 手机 16:9 太扁,改 16:10:仍从底部裁掉 16.7% > 横幅 13.8% */
  #Content .ll-news-card-media { aspect-ratio: 16 / 10; }
  #Content .ll-news-card-body { padding: 16px 16px 18px; }
  #Content .ll-news-card-title { font-size: 17.5px; }
  #Content .ll-news-card-excerpt { font-size: 14px; -webkit-line-clamp: 2; }
}

/* ---------- 2. 新闻详情页 ---------- */
#Content .section.section-post-content { padding-top: 34px !important; }
#Content .section-post-header .post-header .title_wrapper { padding: 0; margin: 0; }
/* 标题:放大 + 限宽(24em ≈ 两行内),左对齐 editorial 版式 */
#Content .section-post-header .entry-title {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ll-ink);
  max-width: 24em;
  margin: 0 0 14px;
}
#Content .section-post-header .post-meta {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}
#Content .section-post-header .post-meta .date {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ll-faint);
  font-variant-numeric: tabular-nums;
}
#Content .section-post-header .post-meta .date svg { color: var(--ll-blue); flex: none; }
#Content .section-post-header .post-meta .category { margin: 0; }
#Content .section-post-header .post-meta .ll-cats a {
  font-size: 12.5px;
  line-height: 20px;
  padding: 1px 10px;
}
/* 特色图:通栏大图 + 圆角 + 投影(原来被 title_wrapper 的 69/99px
   左边距和 calc(100% - 130px) 卡成小图,这里整段重置) */
#Content .single-photo-wrapper { margin-top: 26px; }
/* 特色图:从通栏 1215px 缩到 760px(约为容器 61%),与加宽后的正文形成
   「图略窄于文」的 editorial 层次;左对齐与正文同缘,圆角投影不变 */
#Content .single-photo-wrapper .image_frame {
  border: 0;
  margin: 0;
  padding: 0;
  max-width: 760px;
  border-radius: var(--ll-radius-lg);
  overflow: hidden;
  box-shadow: var(--ll-shadow-md);
  background: none;
}
#Content .single-photo-wrapper .image_frame .image_wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
/* 正文/相关新闻:平铺整个内容区。
   基础主题把二者限成 760px 居中栏(.section-post-content .entry-content,
   #Content .ll-related-news { max-width: var(--ll-measure); margin:auto }),
   正文右侧留出近 480px 空白。这里解除限宽 + 清零外边距,让内容贴满 1240 容器。 */
#Content .section-post-content .entry-content,
#Content .ll-related-news {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 标题随之放宽:24em(≈768,两行内) → 30em,与正文左缘对齐不断档 */
#Content .section-post-header .entry-title { max-width: 30em !important; }

/* ---------- 3. 花絮照片墙(详情页正文后) ---------- */
#Content .ll-gallery { margin-top: clamp(36px, 4vw, 56px); }
#Content .ll-gallery-head {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
#Content .ll-gallery-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ll-ink);
  margin: 0;
}
/* 标题前 4px 品牌蓝竖条(不动四色条纹签名位,见 §2.5) */
#Content .ll-gallery-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--ll-blue);
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: -2px;
}
#Content .ll-gallery-count { font-size: 13px; color: var(--ll-faint); }
/* 无 JS 兜底:按原始比例的网格(PHP 已内联 aspect-ratio),照片不裁坏;
   JS 启用后容器改 flex,行宽高由 main.js 的 layoutGallery() 计算 */
#Content .ll-gallery-grid {
  --ll-gal-gap: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ll-gal-gap);
}
html.ll-gallery-js #Content .ll-gallery-grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  flex-wrap: wrap;
}
#Content .ll-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ll-radius);
  background: var(--ll-bg-soft);
  /* 发丝线描边:不占布局,浮动/网格都不会错位(同讲师墙白卡方案) */
  box-shadow: 0 0 0 1px var(--ll-line);
  -webkit-transition: box-shadow .22s var(--ll-ease);
  transition: box-shadow .22s var(--ll-ease);
}
#Content .ll-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-transition: transform .4s var(--ll-ease);
  transition: transform .4s var(--ll-ease);
}
#Content .ll-gallery-item:hover { box-shadow: 0 0 0 1px rgba(0, 147, 221, .4), var(--ll-shadow-md); }
#Content .ll-gallery-item:hover img { transform: scale(1.05); }
#Content .ll-gallery-item:focus-visible {
  outline: 2px solid var(--ll-focus);
  outline-offset: 2px;
}
#Content .ll-gallery-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(14, 28, 47, .55);
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  -webkit-transition: opacity .2s var(--ll-ease), transform .2s var(--ll-ease);
  transition: opacity .2s var(--ll-ease), transform .2s var(--ll-ease);
}
#Content .ll-gallery-item:hover .ll-gallery-zoom,
#Content .ll-gallery-item:focus-visible .ll-gallery-zoom { opacity: 1; transform: none; }
@media only screen and (max-width: 1023px) {
  #Content .ll-gallery-grid { grid-template-columns: repeat(3, 1fr); --ll-gal-gap: 12px; }
}
@media only screen and (max-width: 767px) {
  #Content .ll-gallery-grid { grid-template-columns: repeat(2, 1fr); --ll-gal-gap: 10px; }
  #Content .ll-gallery-zoom { width: 30px; height: 30px; right: 8px; bottom: 8px; }
}

/* ---------- 4. 相关新闻:三列带图卡片(6 条,桌面 3×2 / 平板 2 列 / 手机 1 列) ---------- */
#Content .ll-related-news {
  margin-top: clamp(40px, 4.5vw, 64px);
  margin-left: 0;
  margin-right: 0;
  padding-top: 26px;
  border-top: 1px solid var(--ll-line);
  max-width: none;
}
#Content .ll-related-news h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ll-ink);
  margin: 0 0 16px;
}
#Content .ll-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#Content .ll-related-card {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-lg);
  background: var(--ll-surface);
  text-decoration: none;
  -webkit-transition: transform .22s var(--ll-ease), box-shadow .22s var(--ll-ease), border-color .22s var(--ll-ease);
  transition: transform .22s var(--ll-ease), box-shadow .22s var(--ll-ease), border-color .22s var(--ll-ease);
}
#Content .ll-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ll-shadow-sm);
  border-color: #d7e6f3;
}
/* 封面 16:10,与列表卡一致:object-position 裁掉原图底部品牌横幅 */
#Content .ll-related-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef1f4;
}
#Content .ll-related-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-transition: transform .4s var(--ll-ease);
  transition: transform .4s var(--ll-ease);
}
#Content .ll-related-card:hover .ll-related-card-media img { transform: scale(1.04); }
#Content .ll-related-card-body { padding: 13px 15px 15px; }
#Content .ll-related-card-date {
  display: block;
  font-size: 12.5px;
  color: var(--ll-faint);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
#Content .ll-related-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: var(--ll-ink);
  line-height: 1.6;
}
#Content .ll-related-card:hover .ll-related-card-title { color: var(--ll-blue); }
@media only screen and (max-width: 1023px) {
  #Content .ll-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 767px) {
  #Content .ll-related-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- 5. 花絮照片灯箱(点击放大) ---------- */
/* z-index 100000:全站最高(既有最大 99998),压过抽屉/搜索/粘性头 */
.ll-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
/* hidden 属性会被上面的 display:flex 吃掉,必须显式关掉 */
.ll-lightbox[hidden] { display: none !important; }
.ll-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 32, .88);
}
.ll-lightbox-figure {
  position: relative;
  margin: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  max-width: min(92vw, 1280px);
}
.ll-lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  background: #0b1220;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ll-lightbox-caption {
  margin-top: 12px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  text-align: center;
  max-width: 80vw;
}
.ll-lightbox-bar {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
}
.ll-lightbox-counter {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.ll-lightbox-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-transition: background .18s var(--ll-ease);
  transition: background .18s var(--ll-ease);
}
.ll-lightbox-btn:hover { background: rgba(255, 255, 255, .24); }
.ll-lightbox-btn:focus-visible { outline: 2px solid var(--ll-link-on-dark); outline-offset: 2px; }
body.ll-lightbox-open { overflow: hidden; }
/* 开启动效:背景淡入 + 图片轻放大;reduced-motion 时全关 */
.ll-lightbox.is-open .ll-lightbox-backdrop { -webkit-animation: ll-lb-fade .18s var(--ll-ease); animation: ll-lb-fade .18s var(--ll-ease); }
.ll-lightbox.is-open .ll-lightbox-figure { -webkit-animation: ll-lb-pop .22s var(--ll-ease-out); animation: ll-lb-pop .22s var(--ll-ease-out); }
@-webkit-keyframes ll-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ll-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes ll-lb-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ll-lb-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ll-lightbox.is-open .ll-lightbox-backdrop,
  .ll-lightbox.is-open .ll-lightbox-figure { -webkit-animation: none; animation: none; }
}
@media only screen and (max-width: 767px) {
  .ll-lightbox-img { max-height: 68vh; }
  .ll-lightbox-bar { bottom: 14px; gap: 8px; padding: 6px 10px; }
  .ll-lightbox-btn { width: 42px; height: 42px; }
}

/* ================= Air 1.6.4:课程详情平铺 + 新闻 header 适配 + 导航激活补全 ================= */

/* 1. 课程详情页正文平铺
   基础主题 `.single .entry-content { max-width: var(--ll-measure); margin:auto }` 把课程内容
   限成 760 居中栏(右侧空白约 480px)。课程正文在插件模板 .llc-single-body .entry-content 里,
   用 body.single-course(0,3,1)压过基础规则,并加 !important 防 WPO 分流顺序翻案(1.6.3 教训)。 */
body.single-course .llc-single-body .entry-content {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. 新闻详情页标题/时间栏适配正文宽度
   基础主题把 `.column.one.post-header` 限成 max-width:760 + margin-left:240px(居中),
   title_wrapper 另被显式 width:760px —— 结果是「上面窄、下面宽」。全部放开到 1240 内容区。 */
#Content .section-post-header .column.post-header {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#Content .section-post-header .post-header .title_wrapper {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. 导航当前激活补全
   基础激活规则只认 current-menu-ancestor / current_page_ancestor,但 WP 实际下发的是:
   - 列表页 custom link 菜单项(/courses/): current-menu-item
   - 新闻详情页: current-post-ancestor + current-menu-parent(无 ancestor!)
   - 课程/讲师详情页: 完全无类(由主题 PHP 过滤器补 current-menu-item,见 functions.php)
   这里把 current-menu-item / current-menu-parent 也接入激活态(蓝色字 + 四色条),
   body 前缀提特异性,避免与合并包内既有规则平手时被分流顺序打挂。 */
body #Top_bar .menu > li.current-menu-item > a,
body #Top_bar .menu > li.current-menu-parent > a { color: var(--ll-blue); }
body #Top_bar .menu > li.current-menu-item > a:after,
body #Top_bar .menu > li.current-menu-parent > a:after {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* ---------- v1.7.0 新闻详情页微信提示框 ----------
   相关新闻之后的「微信客服 + 业务咨询」块(与课程/讲师详情页同款,
   链接与文字在「外观 → 主题设置」调整)。默认 25px 上边距在
   「分隔线 + 64px」的相关新闻之后偏挤,这里补一档呼吸感。 */
#Content .ll-related-news + .ll-wechat-contact {
  margin-top: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(8px, 1vw, 14px);
}