/* Shared fluid layout. Reading and checkout panels retain a readable measure. */
@media screen {
  :root {
    --page-gutter: clamp(12px, 2.3vw, 56px);
    --page-limit: 2560px;
    --edge-space: max(var(--page-gutter), calc((100% - var(--page-limit)) / 2 + var(--page-gutter)));
  }
  html, body { width: 100%; min-inline-size: 0; background: var(--paper); }
  .page-shell, .page-shell.public { width: 100%; max-width: var(--page-limit); padding-inline: var(--page-gutter); }
  .topbar, .footer { padding-inline: var(--edge-space); }
  .topbar { min-height: 84px; }
  .brand-logo { width: 52px; height: 52px; flex-shrink: 0; }
  .page-shell { gap: clamp(24px, 2.2vw, 52px); }
  .page-shell.public { padding-top: clamp(16px, 1.4vw, 28px); }
  .detail-grid, .lesson-layout { max-width: 1760px; margin-inline: auto; }
  .detail-grid > div > .lead, .reading p, .reading li { max-inline-size: 78ch; }
  .reading > section, .reading > .objectives { max-inline-size: 84ch; }
  .page-heading > p { max-inline-size: 78ch; }
  .course-card, .community-card, .process > *, .faq > * { min-width: 0; }
  .community-copy p, .league-promo p { max-inline-size: 60ch; }
  .table-wrap { max-width: 100%; }

  .academy-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: 0; padding: 0; align-items: stretch; background: #102035; border-radius: 20px;
  }
  .academy-hero:before { display: none; }
  .hero-photo {
    position: static; inset: auto; z-index: auto; grid-column: 2; grid-row: 1 / 3;
    width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: left center; opacity: 1;
  }
  .academy-hero-copy {
    grid-column: 1; grid-row: 1; width: 100%; max-width: none; min-width: 0;
    padding: clamp(28px, 3.2vw, 64px) clamp(28px, 3.4vw, 72px) 24px;
  }
  .academy-hero h1 { font-size: clamp(34px, 3.3vw, 62px); line-height: 1.4; letter-spacing: -1px; margin-bottom: 18px; }
  .academy-hero h1 > span, .academy-hero h1 > em { display: block; }
  .hero-overline { font-size: 10px; letter-spacing: 2.2px; margin: 14px 0 18px; }
  .hero-description { font-size: clamp(14px, 1.05vw, 17px); line-height: 2; max-width: 540px; margin-bottom: 24px; }
  .academy-hero .actions { gap: 12px 22px; }
  .hero-bottom {
    position: static; inset: auto; grid-column: 1; grid-row: 2; flex-wrap: wrap; gap: 12px;
    margin-inline: clamp(28px, 3.4vw, 72px); padding: 16px 0 22px;
  }
  .hero-bottom > span { display: none; }
  .hero-bottom p { font-size: 11px; }
  .hero-bottom i { margin-inline: 5px; }
  .hero-bottom > a { width: 44px; height: 44px; flex-shrink: 0; }
  .section { margin-block: clamp(40px, 3.8vw, 76px); }
  .section-heading h2 { font-size: clamp(23px, 1.9vw, 36px); }
  .course-grid { gap: clamp(20px, 1.8vw, 36px); }
  .photo-course { height: auto; aspect-ratio: 1.75; }
  .course-card-body { padding: clamp(23px, 1.8vw, 36px); }
  .course-card-body > p, .process-list p { font-size: 14px; }
  .course-card-body h3 { font-size: clamp(19px, 1.3vw, 26px); }
  .learning-note { padding: clamp(27px, 2.5vw, 48px); grid-column: auto; }
  .learning-note h3 { font-size: clamp(24px, 1.7vw, 32px); }
  .community-grid { gap: clamp(20px, 2vw, 36px); }
  .community-copy { padding: clamp(25px, 2.2vw, 44px); }
  .community-copy h3 { font-size: clamp(22px, 1.7vw, 32px); }
  .competition-card { background: #162731; color: white; border-color: #233947; }
  .competition-card .eyebrow, .competition-card .text-link { color: #a3ddef; }
  .competition-card p { color: #c8d6df; }
  .league-promo > div { padding: clamp(28px, 3.2vw, 64px); }
  .league-photo { min-height: 320px; }
  .about-photo { height: clamp(260px, 30vw, 480px); }
}
@media screen and (min-width: 681px) and (max-width: 1100px) {
  .learning-note { grid-column: 1 / -1; }
}
@media screen and (max-width: 900px) {
  .topbar { min-height: 76px; }
  .brand-logo { width: 44px; height: 44px; }
  .academy-hero { display: flex; flex-direction: column; }
  .academy-hero-copy { order: 0; padding: clamp(24px, 4vw, 40px); }
  .academy-hero h1 { font-size: clamp(34px, 5.3vw, 48px); }
  .hero-photo { order: 1; height: clamp(220px, 40vw, 340px); object-position: left 42%; }
  .hero-bottom { order: 2; margin-inline: 24px; padding-block: 14px; }
}
@media screen and (max-width: 560px) {
  .academy-hero { border-radius: 14px; }
  .academy-hero-copy { padding: 24px 22px; }
  .academy-hero h1 { font-size: clamp(30px, 8.8vw, 44px); }
  .hero-description { font-size: 14px; }
  .hero-photo { height: clamp(190px, 52vw, 285px); }
  .hero-bottom p { font-size: 11px; }
  .hero-overline { letter-spacing: 1.7px; }
  .topbar { column-gap: 10px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .header-actions > .button { min-height: 44px; }
  .community-grid { grid-template-columns: minmax(0, 1fr); }
  .league-photo { min-height: 0; height: 260px; }
}