/*
 * Course-wide layout balance pass.
 * Loaded after the density layers on /learn/data-analyst routes.
 * Fixes repeated negative-space patterns without shrinking true workspaces.
 */

/* ---------- Narrative rhythm: tighter, calmer, easier to scan ---------- */
.lesson-section.lesson-section{padding-block:56px}
.lesson-section-head.lesson-section-head{margin-bottom:24px}
.lesson-section-head .eyebrow{color:var(--blue);font-weight:700}
.lesson-section-head h2{max-width:1080px}
.lesson-prose.lesson-prose{max-width:860px}
.lesson-prose p{max-width:72ch}

/* Emphasis should be intentional, not everywhere. */
.lesson-band strong,.lesson-callout strong{color:var(--blue);font-weight:800}
.lesson-prose strong{
  font-weight:750;
  background:linear-gradient(transparent 72%,color-mix(in srgb,var(--acid) 70%,transparent) 72%);
}
.lesson-dark .lesson-prose strong{background:none;color:var(--acid)}

/* ---------- Core-idea band: eliminate the repeated empty-column bug ---------- */
.lesson-band.lesson-band{padding-block:30px}
.lesson-band-grid.lesson-band-grid{
  grid-template-columns:96px minmax(330px,.82fr) minmax(500px,1.18fr);
  column-gap:24px;
  row-gap:18px;
  align-items:start;
}
.lesson-band-grid>.eyebrow{grid-column:1;grid-row:1;padding-top:4px}
.lesson-band-grid>p{
  grid-column:2/-1;
  grid-row:1;
  max-width:1220px;
  align-self:center;
  font-size:clamp(31px,2.75vw,48px);
  line-height:1.04;
  text-wrap:balance;
}
/* LessonConceptVisual is injected between the eyebrow and paragraph.
   Put the paragraph beside it rather than marooning it in a narrow second row. */
.lesson-band-grid>.lesson-concept-visual{
  grid-column:3;
  grid-row:1;
  min-width:0;
  min-height:0;
  padding:14px;
  border-radius:16px;
  align-self:stretch;
}
.lesson-band-grid>.lesson-concept-visual + p{
  grid-column:2;
  grid-row:1;
  max-width:620px;
  margin:0;
  align-self:center;
}
.concept-visual-head{margin-bottom:12px}
.concept-visual-head strong{font-size:clamp(18px,1.45vw,25px);line-height:1.08}
.concept-visual-flow{gap:7px}
.concept-visual-step{min-height:86px;padding:10px 11px;border-radius:11px}
.concept-visual-step span{font-size:13px;line-height:1.25}

/* ---------- Oversized single-purpose panels ---------- */
/* Long prompts contain intentional line breaks, so full-bleed width only creates dead space. */
.prompt-card.prompt-card{
  width:min(100%,1240px);
  margin-inline:auto;
}
.prompt-label.prompt-label{color:var(--acid);font-weight:700}
.prompt-card pre{padding:18px 20px}
.prompt-card code{font-size:clamp(12.5px,.85vw,14.5px);line-height:1.62}

/* Reveals and briefs should read like focused learning objects, not wall-to-wall panels. */
.lesson-reveal.lesson-reveal,.analysis-brief.analysis-brief{
  width:min(100%,1320px);
  margin-left:auto;
  margin-right:auto;
}
.lesson-reveal>summary{min-height:54px}

/* Keep actual tools wide; they are workspaces, not decorative cards. */
.sql-runner,.sql-playground,.sheet-app-shell,.pivot-lab,.power-lab,.query-lab,.pq-editor-shell{
  width:100%;
  max-width:none;
}

/* ---------- Card/content balance ---------- */
.scenario-card blockquote{max-width:62ch;text-wrap:pretty}
.exercise-questions{max-width:900px}
.lesson-callout.lesson-callout{max-width:1180px}
.lesson-callout p{max-width:62ch}
.framework-grid article,.driver-grid article,.solution-grid article{align-content:start}
.framework-grid article>strong,.solution-grid article>strong{color:var(--blue)}

/* Dense grids should use the available width instead of tall empty cards. */
.framework-grid.framework-grid,.driver-grid.driver-grid,.solution-grid.solution-grid{align-items:stretch}
.framework-grid article,.driver-grid article{min-height:0}
.solution-grid article{min-height:0}

/* ---------- Ultra-wide screens ---------- */
/* On very wide monitors, cap narrative surfaces while leaving spreadsheet/SQL workspaces full-width. */
@media(min-width:1560px){
  .lesson-section>.lesson-section-head,
  .lesson-section>.lesson-prose,
  .lesson-section>.scenario-card,
  .lesson-section>.exercise-card,
  .lesson-section>.framework-grid,
  .lesson-section>.driver-grid,
  .lesson-section>.solution-grid,
  .lesson-section>.lesson-callout{
    max-width:1420px;
  }
  .lesson-section>.scenario-card,
  .lesson-section>.exercise-card,
  .lesson-section>.framework-grid,
  .lesson-section>.driver-grid,
  .lesson-section>.solution-grid{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ---------- Mid-size / course rail open ---------- */
@media(max-width:1180px){
  .lesson-band-grid.lesson-band-grid{
    grid-template-columns:92px minmax(0,1fr);
    row-gap:16px;
  }
  .lesson-band-grid>.eyebrow{grid-column:1;grid-row:1}
  .lesson-band-grid>.lesson-concept-visual{grid-column:2;grid-row:1}
  .lesson-band-grid>p,
  .lesson-band-grid>.lesson-concept-visual + p{
    grid-column:1/-1;
    grid-row:2;
    max-width:980px;
    margin-top:2px;
  }
}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  .lesson-section.lesson-section{padding-block:48px}
  .lesson-band.lesson-band{padding-block:26px}
  .lesson-band-grid.lesson-band-grid{grid-template-columns:1fr;gap:12px}
  .lesson-band-grid>.eyebrow,
  .lesson-band-grid>.lesson-concept-visual,
  .lesson-band-grid>p,
  .lesson-band-grid>.lesson-concept-visual + p{
    grid-column:1;
    grid-row:auto;
    max-width:none;
  }
  .lesson-band-grid>.lesson-concept-visual{order:2}
  .lesson-band-grid>p{order:3;font-size:clamp(27px,5.4vw,39px)}
  .concept-visual-step{min-height:76px}
  .prompt-card.prompt-card,.lesson-reveal.lesson-reveal,.analysis-brief.analysis-brief{width:100%}
}

/* ---------- Mobile ---------- */
@media(max-width:620px){
  .lesson-section.lesson-section{padding-block:40px}
  .lesson-section-head.lesson-section-head{margin-bottom:20px}
  .lesson-band.lesson-band{padding-block:22px}
  .lesson-band-grid>p{font-size:clamp(25px,7.8vw,34px);line-height:1.07;text-wrap:pretty}
  .lesson-band-grid>.lesson-concept-visual{padding:12px;border-radius:13px}
  .concept-visual-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .concept-visual-step{min-height:68px;padding:9px}
  .prompt-card pre{padding:16px}
  .prompt-card code{font-size:12px;line-height:1.58}
  .lesson-callout.lesson-callout{max-width:none}
  .lesson-prose strong{background:linear-gradient(transparent 76%,color-mix(in srgb,var(--acid) 66%,transparent) 76%)}
}