/* ═══════════════════════════════════════════════════════════
   Aqua HomeTuts v1 · 首页教程区「主打课 + 副课」杂志式排版
   参考 Blender Studio / Udemy 的课程区结构，保持本站深海玻璃语言：
   1) 第一张卡 = 主打卡：占两列、大号水印数字、渐变光带、播放徽标、悬浮上浮；
   2) 其余卡 = 副课，紧凑竖排在右侧；
   3) 首页不放筛选胶囊（那是教程页的职责），头部给「进入教程专区」去处；
   4) ≥901px 生效，窄屏退回单列自然高度。 ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .home-tuts .learn-scroll {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 18px;
    /* 用户红线：这个区域不许有自己的滚动——catalog 给 .learn-scroll 的
       overflow-y:auto + 限高在此全数作废，滚轮只滚整页 */
    overflow: visible !important;
    max-height: none !important;
    padding-bottom: 0;
    align-items: stretch;
  }
  .home-tuts .learn-scroll > * { min-width: 0; }

  /* 主打卡 */
  .home-tuts .learn-scroll > .course:first-child {
    grid-column: span 2;
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 330px;
    padding: 26px 28px 22px;
    position: relative; overflow: hidden;
  }
  /* 2026-10-23 二次修复：站长确认不想要这块蓝色装饰渐变，
     彻底移除该伪元素的背景（保留空伪元素避免其它样式引用受影响）。 */
  .home-tuts .course:first-child::before {
    content: ''; position: absolute; inset: 0;
    background: none;
    pointer-events: none;
  }
  .home-tuts .course:first-child .c-no {
    font-size: 96px; right: 16px; top: 0; opacity: .14; letter-spacing: -.02em;
  }
  .home-tuts .course:first-child h3 { font-size: 30px; margin-top: 10px; }
  .home-tuts .course:first-child p { font-size: 14.5px; line-height: 1.9; max-width: 44ch; }

  /* 播放徽标：主打卡右侧悬浮的玻璃圆钮（挂在 h3 伪元素上，静态/动态卡通吃） */
  .home-tuts .course:first-child h3 { position: static; }
  .home-tuts .course:first-child h3::after {
    content: '▶';
    position: absolute; right: 30px; bottom: 30px;
    width: 74px; height: 74px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 22px; padding-left: 6px;
    background: linear-gradient(140deg, var(--sw-a1, #4fb2f0), var(--azure, #2f6cf6) 60%, var(--azure-deep, #1a49c4));
    box-shadow: 0 18px 40px rgba(26, 73, 196, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
  }
  .home-tuts .course:first-child h3::before {
    content: ''; position: absolute; right: 22px; bottom: 22px;
    width: 90px; height: 90px; border-radius: 50%;
    border: 1px solid rgba(79, 178, 240, .5);
    animation: htPulse 2.6s var(--e-soft, ease) infinite;
    pointer-events: none;
  }
  @keyframes htPulse {
    0% { transform: scale(.9); opacity: .9; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
  }
  .home-tuts .course:first-child:hover { /* 已按站长要求移除悬停阴影 */ }

  /* 副课卡：紧凑 */
  .home-tuts .learn-scroll > .course { padding: 20px 20px 18px; }
  .home-tuts .learn-scroll > .course .c-no { font-size: 44px; }
  .home-tuts .learn-scroll > .course h3 { font-size: 17px; }
  .home-tuts .learn-scroll > .course p { font-size: 12.5px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  /* 管理员「＋」位与「更多教程」卡：瘦条形状 */
  .home-tuts .learn-scroll > .add-tile { min-height: 0; justify-content: center; }
}

/* 头部右侧「进入教程专区」 */
.sec-head { position: relative; }
.sec-head .sec-go {
  position: absolute; right: 0; bottom: 4px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; font-weight: 900; letter-spacing: .08em;
  color: var(--azure-deep, #1a49c4);
  background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(206, 228, 255, .55));
  border: 1px solid rgba(129, 166, 224, .45);
  box-shadow: 0 8px 20px rgba(26, 73, 196, .12), inset 0 1px 0 #fff;
  transition: transform .5s var(--e-expo), box-shadow .5s var(--e-expo);
}
.sec-head .sec-go:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26, 73, 196, .2), inset 0 1px 0 #fff; }
.sec-head .sec-go::after { content: '→'; font-weight: 900; }

@media (max-width: 900px) {
  .sec-head .sec-go { position: static; margin-top: 12px; }
}