/* ============================================================
   全站样式（前台）
   原来内联在 resources/views/layouts/main.blade.php 的 <style> 里，
   现在抽到这里，改样式只改这一个文件，所有前台页面一起生效。
   配套的脚本在 public/js/front.js
   ============================================================ */

    /* 全局：米黄色纸感底色，茶室味道 */
    body {
      background-color: #FAF1EF;
      color: #2F2124;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    }

    /* 顶部导航：墨绿 */
    .navbar {
      background-color: #7A2232 !important;
    }

    .navbar .navbar-brand {
      color: #fff;
      font-weight: bold;
      letter-spacing: 2px;
      margin-right: 30px;
    }

    /* 顶部导航：站名和菜单之间留气口，hover 是浅色底块，当前页用一小段米黄下划线标出来 */
    .navbar .nav-link {
      position: relative;
      color: rgba(255, 255, 255, .8);
      padding: .45rem .9rem;
      margin: 0 2px;
      font-size: 15px;
      letter-spacing: 1px;
      border-radius: 4px;
      white-space: nowrap;
      transition: color .2s, background-color .2s;
    }

    .navbar .nav-link:hover {
      color: #fff;
      background-color: rgba(255, 255, 255, .1);
    }

    .navbar .nav-link.active {
      color: #fff;
      font-weight: 600;
    }

    .navbar .nav-link.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 22px;
      height: 2px;
      margin-left: -11px;
      background-color: #D9A46B;
      border-radius: 2px;
    }

    /* 卡片统一：去掉硬边框，加柔和阴影 */
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(122, 34, 50, .10);
    }

    .card-header {
      background-color: #fff;
      border-bottom: 1px solid #EFDCD6;
      font-weight: bold;
      border-radius: 12px 12px 0 0 !important;
    }

    /* 正文小标题：左侧一道细竖条，高度跟着字号走，多大字号都不会歪 */
    .section-title {
      position: relative;
      padding-left: 14px;
      margin-bottom: 20px;
      letter-spacing: .02em;
      color: #35292A;
    }

    .section-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: .12em;
      width: 3px;
      height: .92em;
      background: #7A2232;
      border-radius: 2px;
    }

    /* 首页板块抬头：标题在左、入口在右，底下压一条细线，把板块和上面的内容分开 */
    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding-bottom: .55rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid rgba(122, 34, 50, .12);
    }

    .section-head .section-title {
      margin-bottom: 0;
    }

    .section-more {
      flex: none;
      font-size: .78rem;
      letter-spacing: .05em;
      color: #9A8B84;
      text-decoration: none;
      transition: color .15s ease;
    }

    .section-more:hover {
      color: #7A2232;
    }

    /* 页脚 */
    footer {
      background: #5A1523;
      color: rgba(255, 255, 255, .85);
    }

    /* 友情链接：单独一整块，标题下面一条细线，链接按多列纯文字排（不用胶囊、不加边框）。
       列宽写死 170px，条目少时自动留白、条目多时自动换行成更多列，版面始终是齐的。 */
    .footer-flinks {
      margin-top: 34px;
      margin-bottom: 22px;
    }

    .footer-flinks-title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 1px;
      padding-bottom: 10px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .22);
    }

    .footer-flinks-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 170px);
      gap: 16px;
      justify-content: start;
    }

    .footer-flinks-grid a {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .62);
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color .2s;
    }

    .footer-flinks-grid a:hover {
      color: #F2C08B;
    }

    /* 窄屏：固定排两列，列宽平分整行 */
    @media (max-width: 575.98px) {
      .footer-flinks {
        margin-top: 26px;
      }

      .footer-flinks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
      }
    }

    /* 页脚上半：左「站名+家底+入口」 / 右「约茶艺师上门」转化块。
       center 对齐是为了左栏内容比右卡矮时上下均分留白，不会出现「右边一张高卡、左边一整片空」 */
    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
    }

    .footer-brand {
      flex: 1 1 320px;
      min-width: 0;
    }

    /* 左栏的「家底」：三个数字块，数字大一号白色、下面小字淡色，撑起左栏的高度和看头 */
    .footer-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 34px;
      margin-top: 14px;
    }

    .footer-stat {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .footer-stat b {
      font-size: 21px;
      font-weight: 600;
      line-height: 1.1;
      color: rgba(255, 255, 255, .92);
    }

    .footer-stat span {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
    }

    /* 左栏的常用入口：一行浅色文字链，深红底上不用下划线，hover 提亮成玫瑰金 */
    .footer-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 20px;
      margin-top: 12px;
      font-size: 13px;
    }

    .footer-quick a {
      color: rgba(255, 255, 255, .62);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-quick a:hover {
      color: #F2C08B;
    }

    /* 转化块：深红页脚上垫一层浅描边面板，左边一道玫瑰金竖线做点睛，不抢页脚底色但一眼看到 */
    .footer-cta {
      flex: 0 0 320px;
      max-width: 100%;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .16);
      border-left: 3px solid rgba(217, 164, 107, .65);
      border-radius: 10px;
      padding: 16px 18px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    }

    /* 版权行里的站名：可点回首页。全站 a 是深红，深红页脚上必须单独覆盖成浅色 */
    .footer-brand-link {
      color: rgba(255, 255, 255, .92);
      text-decoration: none;
      border-bottom: 1px dashed rgba(255, 255, 255, .35);
      padding-bottom: 1px;
    }

    .footer-brand-link:hover {
      color: #fff;
      border-bottom-color: #D9A46B;
    }

    @media (max-width: 767px) {
      .footer-cta {
        flex: 1 1 100%;
      }
    }

    /* 备案行：版权行上面那一行，两个位置并排。深红底上用淡色小字，不抢版权行 */
    .footer-beian {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 28px;
      margin-top: 18px;
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
    }

    /* 两个号都是链接：全站 a 默认深红，深红页脚上必须单独覆盖成淡白，hover 才提亮 */
    .footer-beian-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-beian-item:hover {
      color: #F2C08B;
      text-decoration: none;
    }

    .footer-beian-ico {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      opacity: .75;
    }

    /* 页脚最后一行：左边版权，右边「站点导航」。
       放在这里而不是每个页面各挂一个按钮，所有页面自动都有，也不会被内页排版挤乱 */
    .footer-bottom {
      margin-top: 18px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .footer-map-link {
      font-size: 13px;
      color: rgba(255, 255, 255, .78);
      text-decoration: none;
      border-bottom: 1px dashed rgba(255, 255, 255, .35);
      padding-bottom: 1px;
    }

    .footer-map-link:hover {
      color: #fff;
      border-bottom-color: rgba(255, 255, 255, .8);
    }

    /* 两个地图链接并排：左边的站点导航（HTML）+ 右边的 XML 网站地图 */
    .footer-map-group {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* 头像没图时的占位底色 */
    .avatar-box {
      background: #F0DFD9;
    }

    /* 茶文卡片的封面缩略图：不管原图什么比例，都裁成同一块，卡片高度才整齐 */
    .article-thumb {
      object-fit: cover;
      min-height: 140px;
      max-height: 200px;
    }

    /* 详情页顶部大图 */
    .article-hero {
      width: 100%;
      max-height: 380px;
      object-fit: cover;
      border-radius: .5rem;
    }

    /* 首页「茶界资讯」卡片顶图：统一高度裁切，一排骨牌对齐 */
    .news-cover {
      height: 150px;
      object-fit: cover;
      transition: opacity .2s;
    }

    .news-cover:hover {
      opacity: .9;
    }

    /* 首页「按区找茶艺师」的区名按钮：默认白底描边，hover 变墨绿底白字 */
    .area-pill {
      color: #4A2A33;
      background: #fff;
      padding: .4rem .8rem;
      border-radius: 6px;
      transition: background-color .18s, color .18s, border-color .18s;
    }

    .area-pill:hover {
      background: #7A2232;
      border-color: #7A2232 !important;
      color: #fff;
    }

    .area-pill .badge {
      font-weight: 500;
    }

    .area-pill:hover .badge {
      color: #FCEAE4 !important;
      background: rgba(255, 255, 255, .18) !important;
    }

    /* ===== 侧边栏板块：这里放「能带来内链、能覆盖长尾词」的内容，不放重复导航 ===== */
    .side-card .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      letter-spacing: 1px;
      padding: 12px 16px;
    }

    .side-card .side-more {
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0;
      color: #8E7B76;
      text-decoration: none;
    }

    .side-card .side-more:hover {
      color: #7A2232;
    }

    /* 热读茶文：一张小缩略图 + 两行标题 + 一行小字，比纯文字清单更容易点 */
    .hot-item {
      display: flex;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid #F3E1DA;
      text-decoration: none;
      color: inherit;
    }

    .hot-item:last-child {
      border-bottom: none;
    }

    .hot-item:hover {
      background: #FDF6F4;
    }

    .hot-thumb {
      width: 62px;
      height: 62px;
      flex: 0 0 62px;
      border-radius: 8px;
      object-fit: cover;
      background: #F0DFD9;
    }

    .hot-thumb-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #A18C82;
      font-size: 12px;
    }

    /* min-width:0 是关键，没有它子元素的省略号会失效，长标题会把整栏撑破 */
    .hot-body {
      min-width: 0;
      flex: 1;
    }

    .hot-title {
      font-size: 14px;
      line-height: 1.45;
      color: #2F2124;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .hot-item:hover .hot-title {
      color: #7A2232;
    }

    .hot-meta {
      font-size: 12px;
      color: #92807A;
      margin-top: 4px;
    }

    /* 随机文章：纯文字清单（序号 + 一行标题 + 分类/日期），跟带图的「热读」区分开 */
    .rand-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 9px 16px;
      border-bottom: 1px dashed #F3E1DA;
      text-decoration: none;
      color: inherit;
    }

    .rand-item:last-child {
      border-bottom: none;
    }

    .rand-item:hover {
      background: #FDF6F4;
    }

    .rand-num {
      flex: 0 0 18px;
      font-size: 12px;
      font-weight: bold;
      color: #D9A46B;
      letter-spacing: 1px;
      padding-top: 2px;
    }

    .rand-body {
      min-width: 0;
      flex: 1;
    }

    .rand-title {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: #2F2124;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rand-item:hover .rand-title {
      color: #7A2232;
    }

    .rand-meta {
      display: block;
      font-size: 12px;
      color: #9B8882;
      margin-top: 2px;
    }

    /* 最新发布：两行标题 + 一行小字，不带缩略图，跟上面两个清单在视觉上区分开。
       侧栏卡片太少会把右栏下半截空出来，这一块同时也把侧栏的高度补上 */
    .latest-item {
      display: block;
      padding: 10px 16px;
      border-bottom: 1px dashed #F3E1DA;
      text-decoration: none;
      color: inherit;
    }

    .latest-item:last-child {
      border-bottom: none;
    }

    .latest-item:hover {
      background: #FDF6F4;
      color: inherit;
    }

    .latest-title {
      display: flex;
      gap: 8px;
      align-items: baseline;
      font-size: 14px;
      line-height: 1.5;
      color: #2F2124;
    }

    /* 新文章给个「新」字标：一眼能看出哪些是最近发的，也方便自查更新有没有生效 */
    .latest-title .latest-new {
      flex: 0 0 auto;
      font-size: 11px;
      line-height: 1.4;
      padding: 0 4px;
      border-radius: 3px;
      color: #7A2232;
      background: #F8E3DA;
    }

    .latest-item:hover .latest-title {
      color: #7A2232;
    }

    .latest-meta {
      display: block;
      font-size: 12px;
      color: #9B8882;
      margin-top: 3px;
    }

    /* 地区胶囊：区名本身就是长尾词，点进去是地区聚合页 */
    .area-chip {
      display: inline-block;
      font-size: 13px;
      padding: 4px 10px;
      margin: 0 6px 8px 0;
      border: 1px solid #ECD5CE;
      border-radius: 999px;
      color: #7A2232;
      text-decoration: none;
      background: #FFF9F7;
    }

    .area-chip:hover {
      background: #7A2232;
      border-color: #7A2232;
      color: #fff;
    }

    .area-chip em {
      font-style: normal;
      font-size: 12px;
      color: #9C8780;
      margin-left: 4px;
    }

    .area-chip:hover em {
      color: rgba(255, 255, 255, .75);
    }

    /* 常见问题：折叠着，点开才展开答案（页面本身不占版面） */
    .faq-item {
      padding: 10px 16px;
      border-bottom: 1px dashed #EFDCD6;
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    .faq-item summary {
      cursor: pointer;
      font-size: 14px;
      color: #2F2124;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      float: right;
      color: #D9A46B;
      font-weight: bold;
    }

    .faq-item[open] summary::after {
      content: "−";
    }

    .faq-item p {
      font-size: 13px;
      line-height: 1.75;
      color: #6E5A55;
      margin: 8px 0 0;
    }

    /* /faq.html 那一页用的大号版本：侧栏是缩着看的，整页要能好好读 */
    .faq-page-item {
      padding: 16px 20px;
    }

    .faq-page-item summary {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.6;
    }

    .faq-page-item summary::after {
      font-size: 16px;
    }

    .faq-page-item p {
      font-size: 14px;
      line-height: 1.8;
      padding-right: 24px;
    }

    /* 预约咨询转化块：原来在侧栏，现在挂在页脚右侧（.footer-cta 面板），这几个样式两边都通用 */

    /* 标题前面一道玫瑰金竖条，比纯文字有个抓手 */
    .cta-title {
      position: relative;
      padding-left: 11px;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 1px;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .cta-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px;
      height: 15px;
      margin-top: -7.5px;
      border-radius: 2px;
      background: #D9A46B;
    }

    /* 三个场景改成小胶囊：比一行「家宴 / 商务接待 / 茶会」更清楚，也更有层次 */
    .cta-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 9px 0 11px;
    }

    .cta-chip {
      font-size: 12px;
      line-height: 1.6;
      padding: 1px 10px;
      border-radius: 999px;
      color: #F2DBBD;
      background: rgba(217, 164, 107, .14);
      border: 1px solid rgba(217, 164, 107, .38);
    }

    .cta-phone {
      display: block;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1px;
      color: #F3DCCB;
      text-decoration: none;
      margin-bottom: 10px;
    }

    .cta-phone:hover {
      color: #fff;
    }

    /* 服务区域：上面一条细线跟场景标签断开，小字低调但读得清 */
    .cta-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .13);
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .62);
    }

    .cta-meta-key {
      color: rgba(255, 255, 255, .5);
    }

    .cta-meta-val {
      color: #F3DCCB;
    }

    .cta-meta-mail {
      flex: 1 1 100%;
      color: rgba(255, 255, 255, .62);
    }

    /* ===== 首页 banner：左边介绍卡 + 右边两排图片墙，两块同高（持平） ===== */

    .hero-banner {
      position: relative;
      overflow: hidden;
      padding: 20px;
      background: linear-gradient(135deg, #5E1526, #B04A63);
    }

    /* 左右两栏等高：左卡和右图墙的上下边一条线 */
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(280px, 35%) minmax(0, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    /* 左：介绍卡（半透明白框，跟右边图墙形成一个"块"） */
    .hero-intro {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .75rem;
      padding: 1.5rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .16);
      color: #fff;
    }

    .hero-kicker {
      margin: 0;
      font-size: 12px;
      letter-spacing: .1em;
      color: #F2C7A4;
    }

    .hero-title {
      margin: 0;
      font-size: 1.4rem;
      line-height: 1.35;
      font-weight: 700;
      white-space: nowrap;
    }

    /* 站名下面那句 slogan：独立一行，字号小一档、颜色淡一点 */
    .hero-slogan {
      margin: 0;
      font-size: .92rem;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .8);
      white-space: nowrap;
    }

    .hero-lead {
      margin: 0;
      font-size: .9rem;
      line-height: 1.75;
      color: rgba(255, 255, 255, .84);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .25rem;
    }

    /* 右：图片墙，两排错开一起往左走 */
    .hero-wall {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      min-width: 0;
    }

    /* 只在右边淡出：左边贴着介绍卡，硬边反而像一扇窗 */
    .hero-marquee {
      position: relative;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent);
      mask-image: linear-gradient(90deg, #000 0 92%, transparent);
    }

    .hero-track {
      display: flex;
      width: max-content;
      animation-name: heroScroll;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      will-change: transform;
    }

    .hero-group {
      display: flex;
      gap: 14px;
      padding-right: 14px; /* 两组之间留同样一段空隙，-50% 才是无缝的 */
    }

    /* 竖版照片小块：固定 3:4，竖图不用横着硬裁 */
    .hero-shot {
      position: relative;
      display: block;
      flex: 0 0 auto;
      width: 132px;
      aspect-ratio: 3 / 4;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .2);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
      background: rgba(255, 255, 255, .08);
      text-decoration: none;
    }

    .hero-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 0%; /* 人像从头顶开始裁，脸基本都在 */
      display: block;
    }

    /* 名字条：平时不显示，鼠标移到图上才浮出来，画面保持干净 */
    .hero-tag {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      padding: 4px 8px;
      border-radius: 8px;
      background: rgba(40, 8, 16, .6);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: #fff;
      font-size: 12px;
      line-height: 1.45;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .18s ease, transform .18s ease;
    }

    .hero-tag small {
      display: block;
      font-size: 11px;
      color: #F2C7A4;
    }

    .hero-shot:hover .hero-tag {
      opacity: 1;
      transform: none;
    }

    @keyframes heroScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* 鼠标移上去暂停，方便看清是谁 */
    .hero-marquee:hover .hero-track {
      animation-play-state: paused;
    }

    /* 系统开了「减少动态效果」就不滚，只静态展示 */
    @media (prefers-reduced-motion: reduce) {
      .hero-track { animation: none; }
    }

    @media (max-width: 991.98px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-intro { padding: 1.15rem; }
      .hero-shot { width: 112px; }
      .hero-tag { opacity: 1; transform: none; } /* 手机没有 hover，名字直接显示 */
    }

    /* 分页条：链接色跟着全站酒红走，当前页用酒红底（改的是 Bootstrap 的变量，最稳） */
    .pagination {
      --bs-pagination-color: #7A2232;
      --bs-pagination-border-color: #ECD5CE;
      --bs-pagination-hover-color: #B04A63;
      --bs-pagination-hover-bg: #F7E3D2;
      --bs-pagination-hover-border-color: #ECD5CE;
      --bs-pagination-active-bg: #7A2232;
      --bs-pagination-active-border-color: #7A2232;
      --bs-pagination-active-color: #fff;
      --bs-pagination-disabled-color: #B4A29D;
      --bs-pagination-disabled-border-color: #ECD5CE;
    }

    .pagination .page-link {
      color: #7A2232;
    }

    .pagination .page-item.active .page-link {
      background: #7A2232;
      border-color: #7A2232;
      color: #fff;
    }

    /* ===== 全站主色：酒红 · 玫瑰金 · 暖奶白（诱惑系配色） ===== */

    /* Bootstrap 默认链接是蓝色，跟酒红整片打架，全站统一成主色 */
    a {
      color: #7A2232;
    }

    a:hover,
    a:focus {
      color: #B04A63;
    }

    /* 面包屑分隔符用褪色的玫瑰金，不抢眼 */
    .breadcrumb-item + .breadcrumb-item::before {
      color: #C89A8B;
    }

    /* Bootstrap 的 success 是一套死绿，跟酒红打架，这里统一改成主色/玫瑰金 */
    .btn-success,
    .btn-success:focus {
      background: #7A2232;
      border-color: #7A2232;
      color: #fff;
    }

    .btn-success:hover,
    .btn-success:active {
      background: #5E1526 !important;
      border-color: #5E1526 !important;
      color: #fff !important;
    }

    .btn-outline-success {
      color: #7A2232;
      border-color: #C89A8B;
      background: transparent;
    }

    .btn-outline-success:hover,
    .btn-outline-success:focus {
      background: #7A2232;
      border-color: #7A2232;
      color: #fff;
    }

    .text-success { color: #7A2232 !important; }
    .bg-success { background-color: #7A2232 !important; }
    .border-success { border-color: #C89A8B !important; }

    .alert-success {
      background: #F7E4E1;
      border-color: #ECD5CE;
      color: #6B2230;
    }

    /* 玫瑰金描边的小标签（分类、日期这类弱信息用金色，不抢正文） */
    .chip-gold {
      display: inline-block;
      padding: .12rem .5rem;
      border-radius: 10px;
      font-size: 12px;
      color: #8C5A31;
      background: #F7E3D2;
    }

    /* ===== 手机 / 平板：点汉堡后展开的顶部菜单 =====
       原来展开就是一整片红底、菜单项一列排到底、登录信息孤零零挂在最后，看着很空。
       这里改成：菜单项两列小方块、底部登录区单独一行，用细线跟上面隔开。
       全部包在 @media 里，电脑上的横排导航一点都不变。 */
    @media (max-width: 991.98px) {

      /* 汉堡按钮：白描边圆角，默认的深色图标反相成白色 */
      .navbar .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 8px;
        padding: .25rem .5rem;
      }

      .navbar .navbar-toggler:focus {
        box-shadow: none;
      }

      .navbar .navbar-toggler-icon {
        width: 1.15em;
        height: 1.15em;
        filter: brightness(0) invert(1);
      }

      /* 展开面板跟顶栏之间留白 + 一条细线，不再糊成一片 */
      .navbar .navbar-collapse {
        margin-top: .6rem;
        padding-top: .85rem;
        padding-bottom: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
      }

      /* 菜单项：两列排，8 个链接从 8 行压成 4 行 */
      .navbar .navbar-nav.ms-auto {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
      }

      .navbar .navbar-nav.ms-auto .nav-item {
        margin: 0;
      }

      .navbar .navbar-nav.ms-auto .nav-link {
        display: block;
        width: 100%;
        margin: 0;
        padding: .6rem .4rem;
        text-align: center;
        font-size: 14px;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
      }

      .navbar .navbar-nav.ms-auto .nav-link:hover {
        background-color: rgba(255, 255, 255, .16);
      }

      /* 当前页：整块点亮，不用下划线（方块里贴边下划线很别扭） */
      .navbar .navbar-nav.ms-auto .nav-link.active {
        background-color: rgba(255, 255, 255, .22);
        border-color: rgba(255, 255, 255, .35);
      }

      .navbar .navbar-nav.ms-auto .nav-link.active::after {
        display: none;
      }

      /* 底部登录区：一条细线隔开，一行放完（左邮箱、右按钮） */
      .navbar .navbar-nav:not(.ms-auto) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
        width: 100%;
        margin-top: .85rem;
        padding-top: .85rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
      }

      .navbar .navbar-nav:not(.ms-auto) .nav-item {
        margin: 0;
        min-width: 0;
      }

      /* 没登录时这行只有一个「登录」按钮，让它居中，别孤零零挂在左边 */
      .navbar .navbar-nav:not(.ms-auto) .nav-item:only-child {
        margin: 0 auto;
      }

      .navbar .navbar-nav:not(.ms-auto) .nav-link {
        padding: .2rem 0;
        font-size: 13px;
        color: rgba(255, 255, 255, .72);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 62vw;
      }

      /* 登录 / 退出按钮：小胶囊，去掉原来那个把按钮顶偏的 mt-2 */
      .navbar .navbar-nav:not(.ms-auto) .btn {
        margin-top: 0 !important;
        padding: .28rem .9rem;
        font-size: 13px;
        border-radius: 999px;
        white-space: nowrap;
      }
    }



/* ============================================================
   

/* ============================================================
   桌面端两栏「收口」：让左右两栏的底边落在同一条线上
   两栏内容量天生不等（侧栏是热读/随机/最新/热门标签/常见问题一堆块，
   主栏是卡片墙），差百八十像素时，其中一栏下面就会空一块。
   - 给卡片补 padding：会在卡片内部留一片白（不好看）
   - 把卡片拉高：封面图会被撑变形（也不好）
   做法：两列都变成 flex 列、纵向 space-between —— 多出来的高度平均分到
   「块与块之间」的间隙里，两侧最后一块都贴到列底，底边自然齐平，
   卡片本身一点不变形。窗口宽窄变化时自动重算，不用写死像素。
   ============================================================ */
@media (min-width: 992px) {
  .row-balance #main-col,
  .row-balance #side-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .row-balance #main-col > *:last-child,
  .row-balance #side-col > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* 主栏最后一块是资讯卡片墙，它的 mb-4 会多留 24px，让卡片底比列底低一截；
   这里清零，让两侧卡片底都落在列底 */
@media (min-width: 992px) {
  .row-balance #main-col > .news-row {
    margin-bottom: 0 !important;
  }
}

/* 平板宽度（992–1399）主栏只有 8 栏宽，资讯卡若排三列会窄到把日期挤断行，
   所以这一档排两列，≥1400 才排三列（列宽规则在 home.blade 的 col-xxl-4） */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .news-row .card-title {
    font-size: .95rem;
  }
}

/* ============================================================
   茶艺师详情页主栏底部「同区其他茶艺师」小卡
   头像统一方形裁切（人物站姿照拉成别的比例容易糊），下面两行字：名字 + 级别/年限
   ============================================================ */
.master-mini {
  text-align: center;
}

.master-mini-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .6rem;
  background: #f3ece4;
}

.master-mini-name {
  margin-top: .5rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-mini-meta {
  font-size: .78rem;
  line-height: 1.3;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-mini:hover .master-mini-name {
  text-decoration: underline;
}

/* ============================================================
   茶艺师详情页主栏「茶文推荐」：两列图文卡（一行两张，共两行）
   封面统一 16:9 裁切，标题最多两行，日期放最后一行
   ============================================================ */
.mini-article-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .6rem;
  background: #f3ece4;
}

.mini-article-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  opacity: .5;
}

.mini-article-title {
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-article-meta {
  margin-top: .3rem;
  font-size: .78rem;
  opacity: .72;
}

.mini-article:hover .mini-article-title {
  text-decoration: underline;
}

/* 茶艺师详情页窄屏档（992–1399）：右栏文字换行后比主栏高出一大截，
   这一档先收起「随机文章」，宽屏（≥1400）和首页、列表页照常显示 */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .side-rand-collapse {
    display: none;
  }
}

/* 992–1199 这一档容器只有 960px，主栏更窄、封面更矮，右栏文字却仍然折行，
   两栏会差出一百多像素；这一档把推荐卡封面从 16:9 改成 4:3，正好把主栏补回来
   （1200 以上不启用，那一档本来就齐平） */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .mini-article-cover {
    aspect-ratio: 4 / 3;
  }
}

/* 茶艺师详情页主栏「收口」：992–1399 这一档右栏还剩几十到一百多像素，
   主栏卡片下面会露一块米色空白。
   - 继续加内容：内容会越堆越多，宽屏反而比右栏长
   - 拉高卡片：卡片内部留白，更难看
   做法：这一档把主栏变成 flex 列、纵向 space-between，
   多出来的高度平均分到「面包屑 / 同区茶艺师 / 茶文推荐」之间的间隙里，
   最后一块自然贴到列底，卡片本身高度一点不变。
   1400 以上不启用（那一档主栏本来就比右栏长，不需要）。 */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .master-col-balance {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .master-col-balance > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   返回顶部按钮（右下角）
   平时藏着，滚过一屏才淡入；点一下平滑滚回顶部。
   颜色跟顶部导航同一支深红 #7A2232，不另起色系。
   ============================================================ */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #7A2232;
  box-shadow: 0 6px 16px rgba(122, 34, 50, .26);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}

/* 箭头用两条白描边转 45° 画出来，不依赖图标字体，也不会因为字体缺失变方块 */
.back-top-arrow {
  display: block;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}

/* 由 front.js 在滚过一屏后加上这个类，淡入 + 轻微上浮归位 */
.back-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover {
  background-color: #92303F;
}

.back-top:active {
  transform: translateY(0) scale(.94);
}

.back-top:focus-visible {
  outline: 2px solid #F7E3D2;
  outline-offset: 2px;
}

/* 手机端小一号、离边缘近一点，少占地方 */
@media (max-width: 575.98px) {
  .back-top {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
}

/* 系统开了「减少动画」就不过渡也不位移 */
@media (prefers-reduced-motion: reduce) {
  .back-top,
  .back-top.is-show {
    transition: none;
    transform: none;
  }
}
/* ================= 弹窗广告（前台由 js/ads.js 现插，源码里没有） ================= */
/* 盖住整屏的半透明底：0.55 的黑，比纯黑柔和，也能透出底下的页面 */
.promo-mask {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 18, 20, .55);
  animation: promoIn .18s ease-out;
}

/* 白卡片：圆角 + 细边 + 深一点的影子，跟站上其它卡片一个调性
   overflow:hidden —— 弹窗尺寸固定，绝不出滚动条（图再高也不能把下面的文案挤没了） */
.promo-card {
  position: relative;
  width: min(380px, 100%);
  max-height: 86vh;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(122, 34, 50, .12);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(26, 18, 20, .28);
}

/* 关掉按钮：压在右上角，半透明底，图很亮的时候也看得见 */
.promo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 20px;
  color: #fff;
  background: rgba(26, 18, 20, .45);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.promo-close:hover {
  background: rgba(26, 18, 20, .7);
}

/* 广告图：图片区高度固定（最多占屏幕一半高），图超出的部分裁掉（object-fit:cover），
   这样不管后台传多高的图，弹窗都是同一个高度，下面文案和按钮永远在屏幕里看得到。 */
.promo-media {
  height: clamp(150px, 46vh, 360px);
  overflow: hidden;
  background: #F0DFD9;
}

.promo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.promo-body {
  padding: 1rem 1.15rem 1.15rem;
  text-align: center;
}

/* 一句话文案：跟正文一个字号，别搞成大标题吓人 */
.promo-text {
  margin: 0 0 .85rem;
  font-size: .95rem;
  line-height: 1.65;
  color: #35292A;
}

/* 按钮：站上主色，跟「看看我们的茶艺师」同款 */
.promo-btn {
  display: inline-block;
  padding: .5rem 1.15rem;
  font-size: .9rem;
  color: #fff;
  background: #7A2232;
  border-radius: 999px;
  text-decoration: none;
}

.promo-btn:hover {
  color: #fff;
  background: #6a1c2b;
  text-decoration: none;
}

@keyframes promoIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 窄屏上卡片贴边一点，别浪费宽度；图再压矮一点，保证文案和按钮一定在屏幕里 */
@media (max-width: 575.98px) {
  .promo-card {
    width: 100%;
  }
  .promo-mask {
    padding: .75rem;
  }
  .promo-media {
    /* 手机上按「宽度 × 0.9」定图高，跟电脑上的 380:360 差不多都是 1.1:1，
       这样同一张 780×700 的图在电脑、手机上都基本不裁边 */
    height: clamp(140px, 84vw, 320px);
  }
}

/* 手机竖屏特别矮的时候（比如老手机横过来），图再收一点，别把文案挤出去 */
@media (max-height: 640px) {
  .promo-media {
    height: clamp(120px, 70vw, 240px);
  }
  .promo-body {
    padding: .75rem .95rem .85rem;
  }
}

/* 系统开了「减少动画」就不淡入 */
@media (prefers-reduced-motion: reduce) {
  .promo-mask {
    animation: none;
  }
}
/* ============================================================
   看大图（茶艺师照片等）
   - 页面里给 img 加 data-photo-zoom="图片地址"，点一下就弹出全屏大图
   - 逻辑在 front.js 末尾；这里只管样式
   ============================================================ */
.photo-zoomable {
  cursor: zoom-in;
}

/* 照片右下角的小提示，鼠标移上去才明显一点，不挡人脸 */
.photo-zoom-tip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(28, 18, 16, .62);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* 大图遮罩 */
.photo-zoom {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vw;
  background: rgba(22, 14, 12, .9);
  animation: photoZoomIn .18s ease-out;
}

.photo-zoom img {
  max-width: min(96vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  cursor: zoom-out;
}

.photo-zoom-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.photo-zoom-close:hover {
  background: rgba(255, 255, 255, .3);
}

.photo-zoom-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
}

@keyframes photoZoomIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-zoom { animation: none; }
}

/* 茶艺师详情页那张竖照片：宽屏给高一点，别把人裁得太狠。
   外面套 .master-photo-frame 裁切，鼠标移入时照片在里面放大一点，不会盖到右边的文字 */
.master-photo-frame {
  overflow: hidden;
  height: 380px;
  border-radius: 0.375rem 0.375rem 0 0;
  background: #F0DFD9;
}

.master-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
  will-change: transform;
}

.master-photo-frame:hover .master-photo {
  transform: scale(1.08);
}

@media (min-width: 768px) {
  .master-photo-frame { height: 440px; border-radius: 0.375rem 0 0 0.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .master-photo { transition: none; }
  .master-photo-frame:hover .master-photo { transform: none; }
}
/* 茶艺师卡片：整张都能点（链接是 stretched-link），鼠标移上去轻抬一下，让人知道整块可点 */
.master-card {
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.master-card:hover {
  box-shadow: 0 10px 26px rgba(122, 34, 50, .13);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .master-card, .master-card:hover { transition: none; transform: none; }
}
/* 手机端「按区找茶艺师」：原来按钮按文字宽度自己缩，右边会空一大块。
   这里换成等宽网格，每个格子一样宽、一行排满，右边不留空。 */
@media (max-width: 767.98px) {
  .area-cells {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .area-cells .area-pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .52rem .75rem;
    font-size: .95rem;
  }

  .area-cells .area-pill .badge {
    margin-left: .4rem !important;
    white-space: nowrap;
  }
}

/* 小屏手机（iPhone 那种宽度）一行放 3 个会挤，改 2 个，还是撑满整行 */
@media (max-width: 575.98px) {
  .area-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 首页「茶界资讯」卡片：鼠标移上去整卡轻轻抬起 + 封面微微放大 + 标题转品牌色，
   让人一眼看出这块能点。卡片加了 overflow:hidden，放大的封面不会溢出圆角。 */
.news-row .card {
  overflow: hidden;
  height: 100%;
  transition: box-shadow .22s ease, transform .22s ease;
}

.news-row .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(122, 34, 50, .14);
}

.news-row .news-cover {
  transition: transform .45s ease, opacity .2s ease;
  will-change: transform;
}

.news-row .card:hover .news-cover {
  transform: scale(1.05);
}

.news-row .card:hover .card-title a {
  color: #7A2232 !important;
}

@media (prefers-reduced-motion: reduce) {
  .news-row .card,
  .news-row .card:hover,
  .news-row .news-cover { transition: none; transform: none; }
}
/* 文章列表卡（全部茶文 / 栏目页 / 标签页）：鼠标移上去整卡轻抬 + 左边缩略图微微放大 + 标题转品牌色。
   卡片外层本来就有 overflow-hidden，放大的缩略图不会溢出。 */
.article-card {
  transition: box-shadow .22s ease, transform .22s ease;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(122, 34, 50, .14);
}

.article-card .article-thumb {
  transition: transform .45s ease;
  will-change: transform;
}

.article-card:hover .article-thumb {
  transform: scale(1.06);
}

.article-card:hover .card-title a {
  color: #7A2232 !important;
}

@media (prefers-reduced-motion: reduce) {
  .article-card,
  .article-card:hover,
  .article-card .article-thumb { transition: none; transform: none; }
}
/* 广告「跑马灯边框」：后台每条广告可以单独开关（默认关）。
   做法：在卡片/横幅的边上描一圈彩色灯带，颜色顺着边框一直往前跑（红 → 橙 → 金 → 青 → 蓝 → 紫 → 红），
   一圈 3 秒转完。灯带 5px 粗、颜色饱和、外面还带一层彩色光晕，远处也看得见。
   纯 CSS：conic-gradient 做彩色渐变，再靠 @property 让渐变起始角度一直加，
   最后用 mask 把中间挖空、只留住那一圈边。 */
@property --promoRingAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.promo-card-ring::after,
.promo-banner-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 5px;
  background: conic-gradient(from var(--promoRingAngle),
      #E1123E, #FF7A18, #FFC93C, #12C6A6, #2E7CFF, #A74BFF, #E1123E);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  /* drop-shadow 加在 mask 之后，所以光晕是顺着这一圈灯带亮的，不是糊成一片 */
  filter: drop-shadow(0 0 6px rgba(255, 90, 120, .55)) drop-shadow(0 0 14px rgba(255, 140, 60, .3));
  animation: promoRingSpin 3s linear infinite;
  pointer-events: none;
}

@keyframes promoRingSpin {
  to {
    --promoRingAngle: 360deg;
  }
}

/* 灯带外面再加一层跟着换色的光晕：卡片自己被 overflow 裁掉的那部分光晕，用 box-shadow 补回来
   （box-shadow 画在元素外面，不受 overflow:hidden 影响），所以整张卡会像被彩灯照着一样，远处也扎眼 */
.promo-card-ring {
  animation: promoCardHalo 3s linear infinite;
}

@keyframes promoCardHalo {
  0% {
    box-shadow: 0 18px 44px rgba(26, 18, 20, .28), 0 0 12px rgba(225, 18, 62, .6), 0 0 30px rgba(225, 18, 62, .34);
  }
  25% {
    box-shadow: 0 18px 44px rgba(26, 18, 20, .28), 0 0 12px rgba(255, 122, 24, .6), 0 0 30px rgba(255, 122, 24, .34);
  }
  50% {
    box-shadow: 0 18px 44px rgba(26, 18, 20, .28), 0 0 12px rgba(18, 198, 166, .6), 0 0 30px rgba(18, 198, 166, .34);
  }
  75% {
    box-shadow: 0 18px 44px rgba(26, 18, 20, .28), 0 0 12px rgba(46, 124, 255, .6), 0 0 30px rgba(46, 124, 255, .34);
  }
  100% {
    box-shadow: 0 18px 44px rgba(26, 18, 20, .28), 0 0 12px rgba(225, 18, 62, .6), 0 0 30px rgba(225, 18, 62, .34);
  }
}

/* 横幅那条比较扁，光晕小一点，别糊住上下内容 */
.promo-banner-ring {
  animation: promoBannerHalo 3s linear infinite;
}

@keyframes promoBannerHalo {
  0% {
    box-shadow: 0 2px 10px rgba(122, 34, 50, .12), 0 0 10px rgba(225, 18, 62, .5), 0 0 22px rgba(225, 18, 62, .26);
  }
  25% {
    box-shadow: 0 2px 10px rgba(122, 34, 50, .12), 0 0 10px rgba(255, 122, 24, .5), 0 0 22px rgba(255, 122, 24, .26);
  }
  50% {
    box-shadow: 0 2px 10px rgba(122, 34, 50, .12), 0 0 10px rgba(18, 198, 166, .5), 0 0 22px rgba(18, 198, 166, .26);
  }
  75% {
    box-shadow: 0 2px 10px rgba(122, 34, 50, .12), 0 0 10px rgba(46, 124, 255, .5), 0 0 22px rgba(46, 124, 255, .26);
  }
  100% {
    box-shadow: 0 2px 10px rgba(122, 34, 50, .12), 0 0 10px rgba(225, 18, 62, .5), 0 0 22px rgba(225, 18, 62, .26);
  }
}

/* 开了系统「减少动效」的人：灯不转，留一圈静态彩边 */
@media (prefers-reduced-motion: reduce) {
  .promo-card-ring::after,
  .promo-banner-ring::after,
  .promo-card-ring,
  .promo-banner-ring {
    animation: none;
  }
}

/* 广告文案「闪字」：跟跑马灯同一个开关，勾上就一起亮。
   现在做的是「多彩呼吸字」：24 种深色轮着来（品红→紫→靛蓝→蓝→青→绿→橄榄→橙→深红），
   每种颜色之间慢慢过渡（20 秒走完一圈），不做硬跳、不做放大，字加粗到 800，
   光晕用 currentColor 自动跟着当前颜色变色，所以不会出现"红字配绿光"那种脏效果。 */
.promo-text-flash {
  color: #C0304C;
  font-weight: 800;
  text-shadow: 0 0 6px currentColor;
  animation: promoTextRainbow 20s ease-in-out infinite;
}

@keyframes promoTextRainbow {
  0%    { color: #C0304C; }
  4.2%  { color: #AD1457; }
  8.4%  { color: #880E4F; }
  12.6% { color: #8E24AA; }
  16.8% { color: #6A1B9A; }
  21%   { color: #4A148C; }
  25.2% { color: #4527A0; }
  29.4% { color: #283593; }
  33.6% { color: #1A237E; }
  37.8% { color: #1565C0; }
  42%   { color: #0277BD; }
  46.2% { color: #01579B; }
  50.4% { color: #00838F; }
  54.6% { color: #00695C; }
  58.8% { color: #004D40; }
  63%   { color: #2E7D32; }
  67.2% { color: #33691E; }
  71.4% { color: #558B2F; }
  75.6% { color: #827717; }
  79.8% { color: #EF6C00; }
  84%   { color: #D84315; }
  88.2% { color: #BF360C; }
  92.4% { color: #B71C1C; }
  96.6% { color: #C62828; }
  100%  { color: #C0304C; }
}

/* 开了「减少动效」就不变色，固定品牌深红 + 一层柔光，别变成一根没光的普通字 */
@media (prefers-reduced-motion: reduce) {
  .promo-text-flash {
    animation: none;
    color: #B52744;
    text-shadow: 0 0 5px currentColor;
  }
}

/* ============ 头部上方横幅广告 ============
   位置：网站最顶上、顶栏上面一条。盒子在模板里就一个空 div，内容由 ads.js 插进来。
   没广告时盒子直接 display:none，页面和原来一模一样，不多一条缝。 */

/* 宽度跟站点框架走：跟 Bootstrap 的 .container 一档档对齐（不动 540/720/960/1140/1320），
   屏幕越宽横幅跟着变宽，左右永远和下面内容区对齐，不会比内容区窄一条又宽出去 */
.promo-banner-slot {
  width: 100%;
  margin: 12px auto 10px;
  padding: 0 .75rem;
}

@media (min-width: 576px) {
  .promo-banner-slot {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .promo-banner-slot {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .promo-banner-slot {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .promo-banner-slot {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .promo-banner-slot {
    max-width: 1320px;
  }
}

/* 空的时候完全不占位（不然没广告也会多出一条缝） */
.promo-banner-slot:empty {
  display: none;
}

.promo-banner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(122, 34, 50, .1);
  text-decoration: none;
  color: #3F3330;
  transition: transform .3s ease, box-shadow .3s ease;
}

.promo-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(122, 34, 50, .18);
}

/* 后台开了几条横幅就排几条：从上往下一个压一个，中间留 10px，别糊成一整块 */
.promo-banner + .promo-banner {
  margin-top: 10px;
}

.promo-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* 有图的时候，文案压在图片底部那条渐变上，白字，不挡图 */
.promo-banner.has-media .promo-banner-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 18px 12px;
  color: #fff;
  font-size: .95rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  background: linear-gradient(to top, rgba(60, 20, 30, .72), rgba(60, 20, 30, 0));
}

/* 横幅压在图上那条白字：闪的时候保持白字，只让光晕慢慢亮一下，字号不动 */
.promo-banner.has-media .promo-banner-text.promo-text-flash {
  animation: promoBannerGlow 2.6s ease-in-out infinite;
}

@keyframes promoBannerGlow {
  0%, 100% {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  }
  50% {
    color: #FFF1F4;
    text-shadow:
      0 0 5px rgba(255, 180, 196, .85),
      0 0 14px rgba(255, 120, 150, .5),
      0 1px 6px rgba(0, 0, 0, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-banner.has-media .promo-banner-text.promo-text-flash {
    animation: none;
  }
}

/* 只有文案没图的时候，就当一条普通通栏，居中显示 */
.promo-banner:not(.has-media) .promo-banner-text {
  display: block;
  padding: .8rem 1rem;
  text-align: center;
  font-size: .95rem;
  color: #7A2232;
}

/* 手机端：边距收窄一点，圆角小一点，别跟屏幕两边留太多白 */
@media (max-width: 767.98px) {
  .promo-banner-slot {
    margin: 10px auto 8px;
    /* 跟内容区同一个内边距，手机上左右也是对齐的 */
    padding: 0 .75rem;
  }

  .promo-banner {
    border-radius: 10px;
  }

  .promo-banner.has-media .promo-banner-text {
    padding: 20px 12px 10px;
    font-size: .88rem;
  }
}

/* 系统开了「减少动效」的人，横幅就不抬起来 */
@media (prefers-reduced-motion: reduce) {
  .promo-banner,
  .promo-banner:hover {
    transform: none;
    transition: none;
  }
}