/* ============================================================
   Duke Education — 样式覆盖层  overrides.css
   原则：只加渐变过渡，不改任何原有布局、定位、排版。
   移除 index.html 里那一行 <link> 即可完全还原。
   ============================================================

   ⚠️ 已知雷区（v1 踩过，勿重蹈）：
   1. 不要写  section... > * { position:relative }
      站内深色区块的第一个子元素是 <div class="absolute inset-0">
      背景层，一旦被改成 relative 就会脱离绝对定位、占据 flex 宽度，
      把页面标题挤到右边。内容容器本身已有 relative z-10/z-20，
      不需要额外提升层级。
   2. 选择器必须带 py-24 限定。
      Programs / Promotions / Pricing / Booking / Contact 五个页面的
      hero 也带 bg-gradient-to-br from-warm-deep，但没有 py-24。
      不加限定就会误伤它们。
   ============================================================ */


/* ------------------------------------------------------------
   1. 首页区块之间的渐变过渡
   会上反馈："这条线的渐变不够，感觉很硬"
   仅作用于首页的 py-24 深色区 / 金色区，页面 hero 不受影响。
   ------------------------------------------------------------ */

section.py-24.bg-gradient-to-br.from-warm-deep::before,
section.py-24.bg-gradient-to-br.from-gold::before,
section.py-24.bg-gradient-to-br.from-warm-deep::after,
section.py-24.bg-gradient-to-br.from-gold::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:150px;
  z-index:1;
  pointer-events:none;
}

section.py-24.bg-gradient-to-br.from-warm-deep::before,
section.py-24.bg-gradient-to-br.from-gold::before{top:0}

section.py-24.bg-gradient-to-br.from-warm-deep::after,
section.py-24.bg-gradient-to-br.from-gold::after{bottom:0}

/* 上缘：从上一块米色渐隐进来 */
section.py-24.bg-gradient-to-br.from-warm-deep::before{
  background:linear-gradient(to bottom,
    #FAF6EF 0%, rgba(250,246,239,.68) 26%, rgba(250,246,239,.28) 56%,
    rgba(250,246,239,.07) 80%, rgba(250,246,239,0) 100%);
}
section.py-24.bg-gradient-to-br.from-gold::before{
  background:linear-gradient(to bottom,
    #FAF6EF 0%, rgba(250,246,239,.58) 30%, rgba(250,246,239,.20) 62%,
    rgba(250,246,239,0) 100%);
}

/* 下缘：只在下一块确实是米色时才渐隐出去 */
section.py-24.bg-gradient-to-br.from-warm-deep:has(+ section.bg-cream)::after,
section.py-24.bg-gradient-to-br.from-warm-deep:has(+ section.bg-cream-light)::after,
section.py-24.bg-gradient-to-br.from-gold:has(+ section.bg-cream)::after,
section.py-24.bg-gradient-to-br.from-gold:has(+ section.bg-cream-light)::after{
  background:linear-gradient(to top,
    #FAF6EF 0%, rgba(250,246,239,.68) 26%, rgba(250,246,239,.28) 56%,
    rgba(250,246,239,.07) 80%, rgba(250,246,239,0) 100%);
}

/* 下一块不是米色时（金色区紧接深色区），不要画下缘 */
section.py-24.bg-gradient-to-br.from-gold:not(:has(+ section.bg-cream)):not(:has(+ section.bg-cream-light))::after,
section.py-24.bg-gradient-to-br.from-warm-deep:not(:has(+ section.bg-cream)):not(:has(+ section.bg-cream-light))::after{
  display:none;
}


/* ------------------------------------------------------------
   2. 首页 Hero 底部渐隐进下一区块
   会上反馈：Hero 与下方之间"中间没有渐变效果"
   Hero 内容为 z-20、SCROLL 提示为 z-20，本层 z-1 不会遮挡。
   ------------------------------------------------------------ */

section.relative.min-h-screen.flex.items-center.justify-center.overflow-hidden::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:170px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,
    #FFFDF9 0%, rgba(255,253,249,.66) 30%, rgba(255,253,249,.26) 62%,
    rgba(255,253,249,0) 100%);
}


/* ------------------------------------------------------------
   2b. 内页 Hero 底部渐隐（与首页 Hero 同一处理）
   Campus / Programs / Promotions / Pricing / Booking / Contact /
   Teachers 共 7 个 40vh hero，后面接的都是 bg-cream。
   内页没有 py-24 深色/金色区块，所以这是与首页对应的唯一位置。

   ⚠️ 只加伪元素，绝不改子元素定位 —— hero 的第一个子元素是
   <div class="absolute inset-0"> 背景层，动它会把标题挤到右边。
   标题容器是 relative z-10，本层 z-1 不会遮住它。
   ------------------------------------------------------------ */

section.relative.h-\[40vh\]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:150px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,
    #FAF6EF 0%, rgba(250,246,239,.66) 30%, rgba(250,246,239,.26) 62%,
    rgba(250,246,239,0) 100%);
}


/* ------------------------------------------------------------
   3. 米色与浅米色相邻处补一道极淡分隔
   ------------------------------------------------------------ */

section.bg-cream + section.bg-cream-light,
section.bg-cream-light + section.bg-cream{
  box-shadow:inset 0 1px 0 rgba(232,160,32,.07);
}


/* ------------------------------------------------------------
   4. 登录页去黄
   会上反馈："那个 log in 的页面太黄了"
   只改颜色，不动结构。
   ------------------------------------------------------------ */

main:has(#teachworks-remote-login) .bg-cream{
  background:#FFFFFF !important;
}
main:has(#teachworks-remote-login) .bg-gradient-to-r.from-gold{
  background:#FFFFFF !important;
  border-bottom:1px solid #EFE7DA !important;
}
main:has(#teachworks-remote-login) .bg-gradient-to-r.from-gold .bg-cream{
  background:#FDF4E2 !important;
  box-shadow:0 2px 10px rgba(232,160,32,.16) !important;
}
main:has(#teachworks-remote-login) .border-gold\/20{
  border-color:#EFE7DA !important;
}


/* ------------------------------------------------------------
   5. 创始人图块整体缩小
   会上反馈："I would just reduce the size"
   缩的是最外层容器，相框、光晕、"Flora Fu" 名牌都是相对它定位的，
   会一起等比收进去 —— 不能只缩 <img>，否则相框留白、名牌错位。
   ------------------------------------------------------------ */

div.relative:has(> div.rounded-2xl.overflow-hidden > img[src*="/images/founder"]){
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}

img[src*="/images/founder"]{
  height:430px !important;
}

@media (max-width:1023px){
  div.relative:has(> div.rounded-2xl.overflow-hidden > img[src*="/images/founder"]){
    max-width:320px;
  }
  img[src*="/images/founder"]{height:360px !important}
}


/* ------------------------------------------------------------
   6. 尊重系统的"减少动效"设置
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ------------------------------------------------------------
   7. 首页 Learning Pathway —— 卡片堆叠（scroll-stacking）
   会上反馈：网站要更"动态"；同时又嫌页面太长。
   堆叠正好两头兼顾：四张卡依次钉住并被下一张盖住，
   占用的滚动高度比四栏平铺 + 四段 fade-up 更少，观感却更强。

   ⚠️ 雷区：position:sticky 会被任何祖先的 overflow:hidden 杀死。
      本区块的 <section> 与 .container 都没有 overflow，勿加。
   ⚠️ 类名全部 dk- 前缀；Tailwind 已 purge 掉 flex-shrink-0 /
      lg:block / 任意 top 值，所以布局一律写在这里，不写在 JSX。
   ------------------------------------------------------------ */

.dk-stack{position:relative}

.dk-scard{
  position:sticky;
  transform-origin:top center;
  will-change:transform;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:34px 26px;
  min-height:290px;
  justify-content:center;
  /* 必须不透明，否则堆叠时会透出下层 */
  background-color:#FAF6EF;
}
.dk-scard + .dk-scard{margin-top:30px}

/* 每张比上一张低一点，露出上一张的顶边 */
.dk-scard:nth-child(1){top:88px;z-index:1}
.dk-scard:nth-child(2){top:106px;z-index:2}
.dk-scard:nth-child(3){top:124px;z-index:3}
.dk-scard:nth-child(4){top:142px;z-index:4}

.dk-sicon{
  width:60px;height:60px;border-radius:50%;
  background:rgba(232,160,32,.12);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.dk-sbody{flex:1 1 auto;min-width:0}

/* 大号阶段数字，仅桌面显示，纯装饰 */
.dk-snum{display:none}

@media (min-width:768px){
  .dk-scard{
    flex-direction:row;
    align-items:center;
    gap:38px;
    padding:52px 48px;
    min-height:330px;
  }
  .dk-scard:nth-child(1){top:100px}
  .dk-scard:nth-child(2){top:122px}
  .dk-scard:nth-child(3){top:144px}
  .dk-scard:nth-child(4){top:166px}
  .dk-snum{
    display:block;
    flex:0 0 auto;
    font-family:var(--font-heading,'Cormorant Garamond',Georgia,serif);
    font-size:5.5rem;
    line-height:1;
    font-weight:700;
    color:rgba(232,160,32,.17);
    -webkit-user-select:none;user-select:none;
    pointer-events:none;
  }
}

/* 降级：系统开启"减少动效"时退回普通堆叠排版 */
@media (prefers-reduced-motion:reduce){
  .dk-scard{position:static;transform:none !important}
}