/* =====================================================
   TAAL13A COURSE DETAIL
   独立课程详情页
===================================================== */

:root{
  --course-ink:#171717;
  --course-text:#343434;
  --course-muted:#686868;

  --course-paper:#FFFFFF;
  --course-white:#FFFFFF;

  --course-line:#E6DED2;

  --course-blue:#2F5DA8;   /* 雾蓝（原来的深蓝） */
  --course-orange:#B4532E;   /* 芥子黄（原来的橙色） */
}


/* =====================================================
   PAGE
===================================================== */

body{
  margin:0;
  background:var(--course-paper);
  color:var(--course-ink);
  font-family:
    "Inter",
    "Noto Sans SC",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.course-page{
  max-width:1180px;
  margin:0 auto;
  padding:32px 20px 70px;
}


/* =====================================================
   BACK
===================================================== */

.course-back-link{
  display:inline-block;
  margin-bottom:28px;

  border:0;
  background:transparent;

  color:var(--course-blue);
  text-decoration:none;

  font-size:15px;
  font-weight:800;
}

.course-back-link:hover{
  color:var(--course-orange);
  text-decoration:underline;
  text-underline-offset:5px;
}


/* =====================================================
   TWO COLUMN LAYOUT
===================================================== */

.course-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr);
  gap:48px;
  align-items:start;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.course-detail-main{
  background:var(--course-paper);
  border:1px solid var(--course-line);
  padding:48px 50px;
}


/* HERO */

.course-hero-text{
  padding-bottom:42px;
  margin-bottom:38px;
  border-bottom:1px solid var(--course-line);
}

.course-section-kicker{
  margin-bottom:14px;

  color:var(--course-orange);

  font-size:12px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.course-hero-text h1{
  margin:0 0 20px;

  color:var(--course-ink);

  font-family:
    "Noto Serif SC",
    Georgia,
    serif;

  font-size:clamp(40px,4.8vw,72px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.055em;
}

.course-hero-text p{
  max-width:680px;
  margin:0;

  color:var(--course-text);

  font-size:18px;
  line-height:1.85;
  font-weight:400;
}


/* =====================================================
   CONTENT SECTIONS
===================================================== */

.course-info-section{
  padding:35px 0;
  border-bottom:1px solid var(--course-line);
}

.course-info-section:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.course-info-section h2{
  margin:0 0 16px;

  color:var(--course-ink);

  font-family:
    "Noto Serif SC",
    Georgia,
    serif;

  font-size:32px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.035em;
}

.course-info-section > p{
  max-width:680px;
  margin:0;

  color:var(--course-text);

  font-size:16px;
  line-height:1.9;
  font-weight:400;
}


/* =====================================================
   LEARNING POINTS
===================================================== */

.course-point-list{
  list-style:none;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 22px;

  margin:24px 0 0;
  padding:0;
}

.course-point-list li{
  position:relative;

  padding-left:23px;

  color:var(--course-text);

  font-size:15px;
  line-height:1.55;
  font-weight:500;
}

.course-point-list li::before{
  content:"✓";

  position:absolute;
  left:0;
  top:0;

  color:var(--course-blue);
  font-weight:900;
}


/* =====================================================
   COURSE INFO GRID
===================================================== */

.course-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;

  margin-top:23px;
}

.course-info-grid > div{
  padding:20px;

  background:#F3F8FA;
  border:1px solid #D9E6EA;
}

.course-info-grid span{
  display:block;

  margin-bottom:7px;

  color:var(--course-muted);

  font-size:12px;
  font-weight:700;
}

.course-info-grid strong{
  display:block;

  color:var(--course-ink);

  font-size:16px;
  line-height:1.45;
  font-weight:700;
}


/* =====================================================
   FAQ
===================================================== */

.course-faq{
  padding:17px 0;
  border-top:1px solid var(--course-line);
}

.course-faq:last-child{
  border-bottom:1px solid var(--course-line);
}

.course-faq summary{
  list-style:none;

  display:flex;
  justify-content:space-between;
  gap:20px;

  cursor:pointer;

  color:var(--course-ink);

  font-size:16px;
  line-height:1.5;
  font-weight:800;
}

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

.course-faq summary::after{
  content:"+";

  color:var(--course-orange);

  font-size:20px;
  font-weight:900;
}

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

.course-faq p{
  margin:16px 0 0;

  color:var(--course-muted);

  font-size:15px;
  line-height:1.8;
  font-weight:400;
}


/* =====================================================
   RIGHT PURCHASE CARD
===================================================== */

.course-side-card{
  position:sticky;
  top:100px;

  padding:32px;

  background:var(--course-white);
  border:1px solid var(--course-line);
}

.course-brand{
  margin-bottom:8px;

  color:var(--course-muted);

  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.course-side-card h2{
  margin:10px 0 17px;

  color:var(--course-ink);

  font-family:
    "Noto Serif SC",
    Georgia,
    serif;

  font-size:31px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.04em;
}

.course-side-price{
  margin-bottom:20px;

  color:var(--course-ink);

  font-family:
    "Noto Serif SC",
    Georgia,
    serif;

  font-size:44px;
  line-height:1;
  font-weight:800;
}


/* TAGS */

.course-side-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-bottom:22px;
}

.course-side-tags span{
  padding:7px 11px;

  background:var(--course-paper);
  border:1px solid var(--course-line);
  border-radius:0;

  color:var(--course-text);

  font-size:12px;
  font-weight:750;
}

.course-side-desc{
  margin:0 0 23px;

  color:var(--course-text);

  font-size:14.5px;
  line-height:1.75;
  font-weight:400;
}


/* BUTTONS */

.course-pay-btn,
.course-more-btn{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;

  text-decoration:none;
  cursor:pointer;

  font-family:inherit;
  font-weight:850;
}

.course-pay-btn{
  height:56px;

  margin-bottom:12px;

  border:1px solid var(--course-ink);
  background:var(--course-ink);
  color:#fff;

  font-size:16px;
}

.course-pay-btn:hover{
  background:var(--course-orange);
  border-color:var(--course-orange);
}

.course-more-btn{
  height:52px;

  border:1.5px solid var(--course-ink);
  background:#fff;
  color:var(--course-ink);

  font-size:14px;
}

.course-more-btn:hover{
  background:var(--course-ink);
  color:#fff;
}


/* =====================================================
   RELATED COURSES
===================================================== */

.related-courses-section{
  margin-top:64px;
  padding-top:35px;

  border-top:1px solid var(--course-line);
}

.related-courses-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;

  margin-bottom:24px;
}

.related-courses-head h2{
  margin:0;

  font-family:
    "Noto Serif SC",
    Georgia,
    serif;

  font-size:32px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.035em;
}

.related-all-link{
  color:var(--course-ink);
  text-decoration:none;

  padding-bottom:4px;
  border-bottom:3px solid var(--course-orange);

  font-size:14px;
  font-weight:850;

  white-space:nowrap;
}

.related-courses-track{
  display:flex;
  gap:16px;

  overflow-x:auto;

  padding-bottom:10px;

  scrollbar-width:none;
}

.related-courses-track::-webkit-scrollbar{
  display:none;
}

.related-course-card{
  flex:0 0 260px;

  padding:22px;

  background:var(--course-paper);
  border:1px solid var(--course-line);

  color:inherit;
  text-decoration:none;
}

.related-course-card:hover{
  border-color:var(--course-orange);
}

.related-course-level{
  margin-bottom:12px;

  color:var(--course-orange);

  font-size:12px;
  font-weight:900;
}

.related-course-card h3{
  margin:0 0 14px;

  color:var(--course-ink);

  font-size:18px;
  line-height:1.4;
  font-weight:850;
}

.related-course-card p{
  margin:0 0 16px;

  color:var(--course-muted);

  font-size:13px;
  line-height:1.55;
  font-weight:400;
}

.related-course-card strong{
  display:block;

  color:var(--course-ink);

  font-size:19px;
  font-weight:900;
}


/* =====================================================
   MOBILE STICKY PURCHASE
===================================================== */

.mobile-course-sticky{
  display:none;
}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media(max-width:900px){

  .course-page{
    padding:24px 16px 110px;
  }

  .course-detail-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .course-detail-main{
    padding:32px 22px;
  }

  /*
    手机版隐藏右侧购买卡。
    使用底部固定购买条。
  */
  .course-side-card{
    display:none;
  }

  .course-hero-text{
    padding-bottom:32px;
    margin-bottom:25px;
  }

  .course-hero-text h1{
    font-size:40px;
  }

  .course-hero-text p{
    font-size:15.5px;
  }

  .course-info-section{
    padding:29px 0;
  }

  .course-info-section h2{
    font-size:26px;
  }

  .course-point-list{
    grid-template-columns:1fr;
  }

  .course-info-grid{
    grid-template-columns:1fr;
  }

  .related-courses-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .related-course-card{
    flex-basis:78vw;
  }


  /* MOBILE BUY BAR */

  .mobile-course-sticky{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:180;

    display:flex;

    align-items:center;
    justify-content:space-between;
    gap:16px;

    min-height:78px;

    padding:
      10px
      18px
      max(10px,env(safe-area-inset-bottom));

    background:rgba(255,253,248,.97);
    border-top:1px solid var(--course-line);

    box-shadow:0 -10px 26px rgba(0,0,0,.08);

    backdrop-filter:blur(16px);
  }

  .mobile-course-sticky-info{
    display:flex;
    flex-direction:column;
    gap:3px;

    width:86px;
    flex-shrink:0;
  }

  .mobile-course-sticky-info span{
    color:#666;

    font-size:12px;
    font-weight:800;
  }

  .mobile-course-sticky-info strong{
    color:#111;

    font-size:27px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.04em;
  }

  .mobile-course-sticky a{
    flex:1;

    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#111;
    border:1px solid #111;

    color:#fff;
    text-decoration:none;

    font-size:17px;
    font-weight:900;
  }
}


@media(max-width:520px){

  .course-page{
    padding-left:14px;
    padding-right:14px;
  }

  .course-detail-main{
    padding:28px 20px;
  }

  .course-hero-text h1{
    font-size:34px;
  }

  .course-side-tags span{
    font-size:11px;
  }
}
/* Crawlable course hierarchy shown above each course detail page. */
.course-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 24px;
  color:#686868;
  font-size:13px;
  line-height:1.5;
}

.course-breadcrumb a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

.course-breadcrumb a:hover{
  color:#2F5DA8;
}


/* === FINAL MOBILE 1:1 PAYMENT BUTTON FIX 2026-08-30 === */
@media(max-width:900px){
  .mobile-course-sticky button{
    flex:1;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0 18px;
    background:#111 !important;
    border:1px solid #111 !important;
    color:#fff !important;
    font-family:inherit;
    font-size:16px;
    line-height:1;
    font-weight:900;
    text-align:center;
    text-decoration:none;
    border-radius:0;
    box-shadow:none;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
  }

  .mobile-course-sticky button:hover,
  .mobile-course-sticky button:active{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
  }
}

/* 小班课定金说明：价格下面三行，左边小标签，右边说明 */
.course-deposit{list-style:none;margin:14px 0 18px;padding:0;border-top:1px solid var(--course-line)}
.course-deposit li{display:grid;grid-template-columns:4.5em 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--course-line);font-size:14px;line-height:1.5}
.course-deposit li[hidden]{display:none}
.course-deposit span{color:var(--course-muted)}
.course-deposit b{font-weight:500;color:var(--course-ink)}