/* CodeByCP What I Teach — frontend styles
   Colours are driven by CSS variables set from the Elementor panel. */

.cbcp-teach{
  --ink:#0B0E18;
  --ivory:#F4ECDC;
  --magenta:#FB39FB;
  --purple:#C64DF1;
  --cyan:#35D3FB;

  --ivory-soft:color-mix(in srgb, var(--ivory) 74%, transparent);
  --ivory-dim:color-mix(in srgb, var(--ivory) 52%, transparent);
  --line:color-mix(in srgb, var(--ivory) 12%, transparent);
  --prism:linear-gradient(100deg, var(--magenta) 0%, var(--purple) 48%, var(--cyan) 100%);

  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--purple) 14%, var(--ink)) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--cyan) 11%, var(--ink)) 0%, rgba(0,0,0,0) 60%),
    var(--ink);
  color:var(--ivory);
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(56px,7vw,108px) clamp(20px,5vw,72px);
  isolation:isolate;
  border-radius:inherit;
}
.cbcp-teach *{box-sizing:border-box;}

.cbcp-teach .cbcp-teach-aura{
  position:absolute; z-index:0; pointer-events:none;
  width:52vw; height:52vw; max-width:620px; max-height:620px;
  top:-14%; right:-10%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--purple) 30%, transparent),
    color-mix(in srgb, var(--cyan) 12%, transparent) 45%, transparent 68%);
  filter:blur(92px); opacity:.5;
  animation:cbcp-wit-drift 20s ease-in-out infinite alternate;
}
@keyframes cbcp-wit-drift{from{transform:translate(0,0)}to{transform:translate(-26px,24px)}}
.cbcp-teach.cbcp-no-glow .cbcp-teach-aura,
.cbcp-teach.cbcp-no-glow .cbcp-teach-halo{display:none;}

.cbcp-teach .cbcp-teach-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto;}

/* ---------- header ---------- */
.cbcp-teach .cbcp-teach-head{max-width:60ch; margin-bottom:clamp(40px,5vw,68px);}
.cbcp-teach .cbcp-teach-eyebrow{
  display:inline-block; margin-bottom:18px;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:500;
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cbcp-teach .cbcp-teach-lead{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; line-height:1.12; letter-spacing:.005em;
  font-size:clamp(27px,3.6vw,46px); color:var(--ivory); margin:0;
}
.cbcp-teach .cbcp-teach-lead em{
  font-style:italic; font-weight:600;
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cbcp-teach .cbcp-teach-lead p{margin:0;}
.cbcp-teach .cbcp-teach-intro{
  margin-top:1.1em; max-width:56ch;
  font-size:clamp(15px,1.45vw,18px); line-height:1.62; font-weight:300; color:var(--ivory-soft);
}
.cbcp-teach .cbcp-teach-intro p{margin:0;}

/* ---------- body grid ---------- */
.cbcp-teach .cbcp-teach-body{
  --visual-col:0.8fr;
  display:grid;
  grid-template-columns:minmax(0,var(--visual-col)) minmax(0,1.15fr);
  gap:56px; align-items:center;
}
.cbcp-teach .cbcp-teach-body[data-pos="right"] .cbcp-teach-visual{order:2;}

/* ---------- visual ---------- */
.cbcp-teach .cbcp-teach-frame{
  position:relative; overflow:hidden;
  border-radius:20px; border:1px solid var(--line);
  background:rgba(244,236,220,.035);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.cbcp-teach .cbcp-teach-frame::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--prism);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; pointer-events:none;
}
.cbcp-teach .cbcp-teach-halo{
  position:absolute; z-index:0; inset:-20%;
  background:radial-gradient(circle at 60% 35%,
    color-mix(in srgb, var(--purple) 26%, transparent), transparent 60%);
  filter:blur(30px); pointer-events:none;
}
.cbcp-teach .cbcp-teach-img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block;
}
.cbcp-teach .cbcp-teach-motif{position:relative; z-index:1; width:82%; height:auto;}

/* motif sheet cascade */
.cbcp-teach .cbcp-sheet{transform-box:fill-box; transform-origin:center; transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease; opacity:0;}
.cbcp-teach .cbcp-sheet-1{transform:translateY(26px);}
.cbcp-teach .cbcp-sheet-2{transform:translate(14px,18px);}
.cbcp-teach .cbcp-sheet-3{transform:translate(28px,10px);}
.cbcp-teach .cbcp-beam{opacity:0; transition:opacity 1s ease .5s;}
.cbcp-teach.cbcp-in .cbcp-sheet{opacity:1; transform:none;}
.cbcp-teach.cbcp-in .cbcp-sheet-2{transition-delay:.1s;}
.cbcp-teach.cbcp-in .cbcp-sheet-3{transition-delay:.05s;}
.cbcp-teach.cbcp-in .cbcp-beam{opacity:.12;}

/* approach note */
.cbcp-teach .cbcp-teach-approach{
  margin-top:18px; padding:22px 24px;
  border-radius:16px; border:1px solid var(--line);
  background:rgba(244,236,220,.035);
}
.cbcp-teach .cbcp-teach-approach-label{
  display:block; margin-bottom:9px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cbcp-teach .cbcp-teach-approach-text{
  font-size:14.5px; line-height:1.6; font-weight:300; color:var(--ivory-soft);
}
.cbcp-teach .cbcp-teach-approach-text p{margin:0;}

/* ---------- expertise list ---------- */
.cbcp-teach .cbcp-teach-subhead{
  font-family:'Outfit',sans-serif;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--ivory-dim); margin:0 0 22px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.cbcp-teach .cbcp-teach-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 26px;
}
.cbcp-teach .cbcp-teach-item{
  position:relative;
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 0; border-bottom:1px solid var(--line);
  --c:color-mix(in srgb, var(--magenta), var(--cyan) var(--mix, 0%));
}
.cbcp-teach .cbcp-teach-item span{
  font-size:15px; line-height:1.4; font-weight:400; color:var(--ivory);
  transition:transform .35s ease;
}
.cbcp-teach .cbcp-check{flex:none; width:21px; height:21px; margin-top:1px; overflow:visible;}
.cbcp-teach .cbcp-check path{
  fill:none; stroke:var(--c); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  transition:stroke-dashoffset .55s ease var(--d,0ms);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--c) 55%, transparent));
}
.cbcp-teach .cbcp-teach-item::after{
  content:""; position:absolute; left:34px; right:0; bottom:-1px; height:1px;
  background:var(--c); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.cbcp-teach .cbcp-teach-item:hover span{transform:translateX(3px);}
.cbcp-teach .cbcp-teach-item:hover::after{transform:scaleX(1);}

/* ---------- reveal ---------- */
.cbcp-teach .cbcp-teach-eyebrow,
.cbcp-teach .cbcp-teach-lead,
.cbcp-teach .cbcp-teach-intro,
.cbcp-teach .cbcp-teach-frame,
.cbcp-teach .cbcp-teach-approach,
.cbcp-teach .cbcp-teach-subhead{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.cbcp-teach .cbcp-teach-lead{transition-delay:.08s;}
.cbcp-teach .cbcp-teach-intro{transition-delay:.16s;}
.cbcp-teach .cbcp-teach-frame{transition-delay:.05s;}
.cbcp-teach .cbcp-teach-approach{transition-delay:.18s;}
.cbcp-teach .cbcp-teach-item{opacity:0; transform:translateY(14px); transition:opacity .55s ease var(--d,0ms), transform .55s ease var(--d,0ms);}

.cbcp-teach.cbcp-in .cbcp-teach-eyebrow,
.cbcp-teach.cbcp-in .cbcp-teach-lead,
.cbcp-teach.cbcp-in .cbcp-teach-intro,
.cbcp-teach.cbcp-in .cbcp-teach-frame,
.cbcp-teach.cbcp-in .cbcp-teach-approach,
.cbcp-teach.cbcp-in .cbcp-teach-subhead,
.cbcp-teach.cbcp-in .cbcp-teach-item{opacity:1; transform:none;}
.cbcp-teach.cbcp-in .cbcp-check path{stroke-dashoffset:0;}

/* no-anim / editor: show everything */
.cbcp-teach.cbcp-no-anim .cbcp-teach-eyebrow,
.cbcp-teach.cbcp-no-anim .cbcp-teach-lead,
.cbcp-teach.cbcp-no-anim .cbcp-teach-intro,
.cbcp-teach.cbcp-no-anim .cbcp-teach-frame,
.cbcp-teach.cbcp-no-anim .cbcp-teach-approach,
.cbcp-teach.cbcp-no-anim .cbcp-teach-subhead,
.cbcp-teach.cbcp-no-anim .cbcp-teach-item{opacity:1; transform:none; transition:none;}
.cbcp-teach.cbcp-no-anim .cbcp-check path{stroke-dashoffset:0; transition:none;}
.cbcp-teach.cbcp-no-anim .cbcp-sheet{opacity:1; transform:none; transition:none;}
.cbcp-teach.cbcp-no-anim .cbcp-beam{opacity:.12;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cbcp-teach .cbcp-teach-body{grid-template-columns:1fr; gap:34px;}
  .cbcp-teach .cbcp-teach-body[data-pos="right"] .cbcp-teach-visual{order:0;}
  .cbcp-teach .cbcp-teach-frame{aspect-ratio:16/10; max-height:360px;}
}
@media (max-width:560px){
  .cbcp-teach .cbcp-teach-list{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .cbcp-teach .cbcp-teach-aura{animation:none;}
  .cbcp-teach [class*="cbcp-teach-"],
  .cbcp-teach .cbcp-teach-item,
  .cbcp-teach .cbcp-sheet,
  .cbcp-teach .cbcp-beam{opacity:1 !important; transform:none !important; transition:none !important;}
  .cbcp-teach .cbcp-check path{stroke-dashoffset:0 !important;}
}