.workshop-detail-page{
  color:#2c211b;
  background:#f3eee5;
}

.detail-nav{display:flex}

.detail-hero{
  position:relative;
  min-height:max(780px,100svh);
  overflow:hidden;
  color:#fff;
  background:#120e0c;
}

.detail-hero-art{
  position:absolute;
  inset:0;
  background:url("assets/web-design-assets/exports/ouzan-home-hero-theme-wall.webp") center 45%/cover no-repeat;
  filter:saturate(.96) contrast(1.04);
}

.detail-hero-wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(15,10,8,.12) 0%,rgba(19,12,9,.08) 38%,rgba(20,12,9,.38) 58%,rgba(15,10,8,.9) 100%),
    linear-gradient(180deg,rgba(9,7,6,.4) 0%,transparent 32%,rgba(18,14,12,.24) 58%,#120e0c 100%);
}

.detail-hero-layout{
  position:relative;
  z-index:2;
  min-height:max(780px,100svh);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:116px 0 54px;
}

.detail-hero-copy{
  width:clamp(620px,49vw,740px);
  padding:34px 40px 36px;
  border-left:3px solid var(--ouzan-orange);
  background:rgba(18,12,9,.64);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.detail-hero h1{
  margin:.18em 0 0;
  font-size:clamp(42px,4vw,61px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.045em;
}

.detail-hero h1 span{display:block}

.detail-hero-description{
  max-width:650px;
  margin:20px 0 0;
  color:#dbcfc6;
  font-size:15px;
  line-height:1.85;
}

.detail-hero-meta{
  display:grid;
  grid-template-columns:176px minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
}

.detail-date-fact{
  padding-top:4px;
}

.detail-date-fact small{
  display:block;
  color:var(--ouzan-gold);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
}

.detail-date-fact strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:22px;
  line-height:1;
  letter-spacing:.03em;
}

.detail-date-fact p{
  margin:8px 0 0;
  color:#c9bbb0;
  font-size:12px;
  line-height:1.6;
}

.detail-track-list{
  border-left:1px solid rgba(255,255,255,.16);
  padding-left:22px;
}

.detail-track-list article{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:11px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.detail-track-list article:first-child{padding-top:0}
.detail-track-list article:last-child{padding-bottom:0;border-bottom:0}

.detail-track-list article>span{
  color:var(--ouzan-orange);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.detail-track-list h2{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:1.25;
  letter-spacing:0;
}

.detail-track-list p{
  margin:4px 0 0;
  color:#baaca2;
  font-size:11px;
  line-height:1.5;
}

.track-directory{
  background:#f3eee5;
}

.detail-heading{margin-bottom:55px}

.shared-pricing{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:26px;
  align-items:center;
  margin:-20px 0 18px;
  padding:18px 0;
  border-block:1px solid #cdbfae;
}

.shared-pricing-copy span{
  display:block;
  color:#a34c16;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.shared-pricing-copy strong{
  display:block;
  margin-top:4px;
  font-size:17px;
}

.shared-pricing-list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.shared-pricing-list span{
  min-width:0;
  color:#6f5c50;
  font-size:12px;
  white-space:nowrap;
}

.shared-pricing-list b{
  display:block;
  margin-top:3px;
  color:#b85315;
  font-size:21px;
}

.detail-heading h2,
.detail-pricing h2,
.detail-register h2{
  margin:.2em 0;
  font-size:clamp(2.4rem,5vw,4.7rem);
  line-height:1.05;
}

.track-detail{
  position:relative;
  display:grid;
  grid-template-columns:80px minmax(0,1fr) minmax(250px,340px);
  gap:34px;
  align-items:center;
  padding:58px 0;
  border-top:1px solid #cdbfae;
}

.track-detail:last-child{border-bottom:1px solid #cdbfae}

.track-number{
  align-self:start;
  color:#c96818;
  font-size:2rem;
}

.track-copy h3{
  margin:.15em 0 .35em;
  font-size:clamp(2rem,4vw,3.5rem);
}

.track-copy>p{line-height:1.8}

.track-kicker{
  color:#a34c16;
  font-weight:700;
}

.track-copy li{
  margin:.75em 0;
  line-height:1.55;
}

.track-register{
  margin-top:20px;
}

.detail-teachers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:end;
  width:100%;
}

.detail-teachers-single{
  grid-template-columns:calc((100% - 12px)/2);
  justify-content:center;
}

.detail-teachers .speaker-card{
  width:100%;
  min-width:0;
}

.detail-teachers .speaker-ke-liyun img{
  width:86.59%;
  left:11%;
  bottom:4%;
}

.detail-teachers .speaker-card>button::after{
  opacity:1;
  transform:none;
}

.enrollment-help{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:end;
  padding:42px 0 0;
}

.enrollment-help h3{
  margin:0;
  font-size:clamp(25px,3vw,38px);
  line-height:1.2;
}

.enrollment-help>div>p:last-child{
  max-width:620px;
  margin:12px 0 0;
  color:#6f5c50;
  font-size:14px;
  line-height:1.75;
}

.enrollment-contact{
  margin:0;
  padding:14px 0;
  border-top:1px solid #cdbfae;
  color:#49382e;
  font-size:14px;
  line-height:1.7;
  text-align:right;
}

.enrollment-contact b{
  display:block;
  color:#a34c16;
  font-size:11px;
  letter-spacing:.1em;
}

.detail-pricing{
  padding:95px 0;
  color:#fff;
  background:#21140e;
}

.price-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:42px;
  border:1px solid #704326;
}

.price-grid div{
  padding:28px 18px;
  border-right:1px solid #704326;
}

.price-grid div:last-child{border:0}
.price-grid span{display:block;color:#d8c3ae}
.price-grid b{color:#f49a1e;font-size:2.5rem}

.pricing-note,
.mockup-notice{
  margin-top:24px;
  color:#cdbfae;
}

.register-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:36px 0;
}

.register-facts p{
  padding:24px;
  border-top:4px solid #d36b1b;
  background:#fff;
}

.register-facts b{
  display:block;
  margin-bottom:10px;
  color:#8a3e12;
}

.detail-register .mockup-notice{color:#6b5d53}
.detail-register .action{display:inline-block;margin-top:18px}

@media(max-width:1050px){
  .detail-hero-copy{width:min(680px,55vw)}
  .detail-hero h1 span{white-space:normal}
  .track-detail{grid-template-columns:64px minmax(0,1fr) minmax(230px,300px)}
}

@media(max-width:800px){
  .detail-nav{display:none}

  .detail-hero{
    min-height:100svh;
  }

  .detail-hero-art{
    inset:0 0 auto;
    height:56%;
    background-image:url("assets/web-design-assets/exports/ouzan-home-hero-theme-wall-mobile.webp");
    background-position:50% 15%;
    background-size:cover;
  }

  .detail-hero-wash{
    background:linear-gradient(180deg,rgba(12,8,7,.25) 0%,rgba(15,10,8,.42) 31%,rgba(18,13,10,.95) 60%,#120e0c 100%);
  }

  .detail-hero-layout{
    min-height:100svh;
    align-items:flex-end;
    padding:270px 0 58px;
  }

  .detail-hero-copy{
    width:100%;
    padding:0;
    border-left:0;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .detail-hero-meta{
    grid-template-columns:155px minmax(0,1fr);
  }

  .track-detail{
    grid-template-columns:48px minmax(0,1fr);
  }

  .detail-teachers{
    grid-column:2;
    max-width:400px;
  }

  .detail-teachers .speaker-card:last-child{
    grid-column:auto;
    width:100%;
    justify-self:stretch;
  }

  .shared-pricing{grid-template-columns:1fr;gap:14px}
  .shared-pricing-list{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:2px}
  .enrollment-help{grid-template-columns:1fr;gap:20px}
  .enrollment-contact{text-align:left}

  .price-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid div{border-bottom:1px solid #704326}
  .register-facts{grid-template-columns:1fr}
}

@media(max-width:560px){
  .detail-hero-art{
    height:46%;
    background-position:50% top;
  }

  .detail-hero-layout{
    padding:235px 0 48px;
  }

  .detail-hero h1{
    font-size:34px;
    letter-spacing:-.055em;
  }

  .detail-hero-description{
    font-size:14px;
    line-height:1.7;
  }

  .detail-hero-meta{
    grid-template-columns:1fr;
    gap:18px;
  }

  .detail-date-fact{
    display:grid;
    grid-template-columns:1fr auto;
    gap:4px 14px;
  }

  .detail-date-fact small{grid-column:1}
  .detail-date-fact strong{grid-column:1;margin-top:2px}
  .detail-date-fact p{grid-column:2;grid-row:1/3;margin:0;text-align:right}

  .detail-track-list{
    padding:16px 0 0;
    border-top:1px solid rgba(255,255,255,.16);
    border-left:0;
  }

  .detail-track-list h2{font-size:15px}
  .detail-track-list p{font-size:10px}

  .track-detail{display:block}
  .track-number{margin-bottom:12px}
  .detail-teachers{margin-top:28px}
  .shared-pricing{margin-top:-28px}
  .shared-pricing-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .shared-pricing-list span:last-child{grid-column:1/-1}
  .price-grid{grid-template-columns:1fr}
  .price-grid div{border-right:0}
}