/* WPI v65 — wide lesson canvas; only real content+notes lessons may use two columns */

/*
  v61 treated every .lesson-body as a two-column shell. Generated classes such as
  First Millionaire have direct <section> children instead, so entire sections were
  being auto-placed into a 235–285px right column. Keep the default lesson body wide.
*/
.wpi-route-lesson .lesson-body{
  display:block!important;
  width:100%!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding:clamp(32px,3.5vw,54px) clamp(24px,4.5vw,72px) clamp(54px,6vw,86px)!important;
  box-sizing:border-box!important;
}

.wpi-route-lesson .lesson-body>section{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 0 clamp(22px,2.5vw,34px)!important;
  box-sizing:border-box!important;
}

/* Only legacy/richer lesson pages that genuinely contain both columns get a side rail. */
@supports selector(.lesson-body:has(> .lesson-content)){
  .wpi-route-lesson .lesson-body:has(> .lesson-content):has(> .lesson-notes){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,310px)!important;
    gap:clamp(24px,3vw,42px)!important;
    align-items:start!important;
  }
}

/* The three teaching cards should be cards, never narrow skyscraper panels. */
.wpi-route-lesson .lesson-body>.deep-dive{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
}
.wpi-route-lesson .lesson-body>.deep-dive>article{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  padding:clamp(22px,2.2vw,30px)!important;
  box-sizing:border-box!important;
}
.wpi-route-lesson .lesson-body>.deep-dive>article p,
.wpi-route-lesson .lesson-body>.deep-dive>article h3{
  width:auto!important;
  max-width:none!important;
}

/* Keep the rest of a class wide and readable rather than becoming vertical strips. */
.wpi-route-lesson .objective-card,
.wpi-route-lesson .lesson-toolkit,
.wpi-route-lesson .implementation-plan,
.wpi-route-lesson .reflection,
.wpi-route-lesson .completion-standard,
.wpi-route-lesson .education-note,
.wpi-route-lesson .resource-pack,
.wpi-route-lesson .advisor-questions,
.wpi-route-lesson .mistake-list,
.wpi-route-lesson .vocabulary{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  box-sizing:border-box!important;
}

.wpi-route-lesson .assignment-list{
  width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.wpi-route-lesson .assignment-list>li{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
}

/* Large desktop: keep text comfortably wide but not edge-to-edge. */
@media(min-width:1500px){
  .wpi-route-lesson .lesson-body{max-width:1580px!important}
}

/* Laptop widths: two teaching cards per row instead of squeezing three. */
@media(max-width:1320px){
  .wpi-route-lesson .lesson-body>.deep-dive{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .wpi-route-lesson .lesson-body>.deep-dive>article:last-child{
    grid-column:1/-1!important;
  }
  .wpi-route-lesson .assignment-list{grid-template-columns:1fr!important}
}

/* On smaller laptop/tablet sizes there should be no side column at all. */
@media(max-width:1100px){
  .wpi-route-lesson .lesson-body,
  .wpi-route-lesson .lesson-body:has(> .lesson-content):has(> .lesson-notes){
    display:block!important;
    max-width:none!important;
  }
  .wpi-route-lesson .lesson-notes{
    position:static!important;
    width:100%!important;
    max-width:none!important;
    margin-top:26px!important;
  }
}

@media(max-width:820px){
  .wpi-route-lesson .lesson-body{
    display:block!important;
    padding:28px 16px 46px!important;
  }
  .wpi-route-lesson .lesson-body>.deep-dive{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .wpi-route-lesson .lesson-body>.deep-dive>article:last-child{grid-column:auto!important}
  .wpi-route-lesson .lesson-body>.deep-dive>article{padding:20px 18px!important}
  .wpi-route-lesson .assignment-list{grid-template-columns:1fr!important}
}