/* Compact visual scale for the modern learning pages. Load after academy-theme.css. */

.academy-header { height: 78px; }

.mt-modern-page,
.pw-modern-page,
.sql-modern-page { max-width: 1280px; padding: 28px 4% 56px; }

.mt-hero,
.pw-hero,
.sql-hero { gap: 30px; padding: 40px 42px; border-radius: 22px; }

.mt-hero h1,
.pw-hero h1,
.sql-hero h1 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -1.3px; }

.mt-hero > div > p:not(.eyebrow),
.pw-hero > div > p:not(.pw-eyebrow),
.sql-hero > div > p:not(.sql-eyebrow) { font-size: 16px; line-height: 1.55; }

.mt-hero-progress,
.pw-hero-progress,
.sql-hero-progress { padding: 25px; border-radius: 18px; }

.mt-hero-progress strong,
.pw-hero-progress strong,
.sql-hero-progress strong { font-size: 40px; }

.primary-btn,
.secondary-btn,
.reset-btn,
.sql-primary,
.sql-secondary { padding: 12px 18px; font-size: 14px; }

.mt-tabs,
.pw-tabs,
.sql-tabs { gap: 10px; margin: 22px 0 30px; padding: 10px; border-radius: 14px; }

.mt-tab,
.pw-tab,
.sql-tab { padding: 10px 17px; font-size: 14px; }

.section-heading { margin-bottom: 21px; }
.section-heading h2,
.sql-section-heading h2 { font-size: 26px; }
.section-heading > p:not(.eyebrow):not(.pw-eyebrow),
.sql-section-heading > p:not(.sql-eyebrow) { font-size: 15px; }

.roadmap-grid { gap: 15px; }
.roadmap-grid article { padding: 20px; border-radius: 16px; }
.roadmap-grid h3 { margin: 13px 0 6px; }

.mt-learning-layout,
.pw-learning-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }

.mt-reader-card > #mtReader,
.pw-reader-card > #pwReader { min-height: 300px; padding: 26px; }

.mt-reader-card h2,
.pw-reader-card h2 { font-size: 27px; }

.mt-reader-card p,
.pw-reader-card p { font-size: 15px; }

.sql-workspace-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
.sql-card,
.sql-challenge-card,
.sql-learning-card,
.sql-score-card { padding: 24px; border-radius: 16px; }
.sql-database-explorer { min-height: 440px; border-radius: 16px; }

@media (max-width: 700px) {
  .academy-header { height: auto; }
  .mt-modern-page,
  .pw-modern-page,
  .sql-modern-page { padding: 20px 4% 44px; }
  .mt-hero,
  .pw-hero,
  .sql-hero { padding: 28px 23px; }
  .mt-hero h1,
  .pw-hero h1,
  .sql-hero h1 { font-size: 36px; }
  .mt-learning-layout,
  .pw-learning-layout,
  .sql-workspace-grid { grid-template-columns: 1fr; }
}