/* VITA compact layout, v1. Load AFTER styles.css. No JavaScript required.
   Shared template classes only; no course IDs, page numbers or content changes.
   All overrides are screen-only, leaving the original print layout intact. */
@media screen {
  :root {
    --compact-top-space: 24px;
    --compact-block-space: 1.2rem;
    --compact-card-padding: 1.2rem;
    --compact-footer-height: 60px;
    --compact-image-height: clamp(200px, 38vh, 400px);
    --compact-title-size: clamp(1.8rem, 2.5vw, 2.25rem);
    --compact-counter-width: 3.5rem;
  }

  html {
    scroll-padding-top: 160px;
    scroll-padding-bottom: calc(var(--compact-footer-height) + 1.5rem);
  }
  /* A solid canvas prevents the body gradient from repeating below short pages. */
  html, body { background: var(--canvas); }
  body { line-height: 1.55; }

  /* Approximately 140px header, with the progress row below the menu. */
  .brand-row { min-height: 62px; padding-block: .35rem; gap: 1rem; }
  .vita-brand .vita-mark { flex-basis: 44px; width: 44px; height: 44px; }
  .vita-title-local { font-size: clamp(.72rem, 1.3vw, .9rem); }
  .eu-brand img { width: min(240px, 32vw); }
  .course-bar { min-height: 0; padding-inline: 0; }
  .chapter-nav { width: min(1180px, calc(100% - 40px)); height: auto; min-height: 44px; gap: .4rem; padding: 4px 0; margin-inline: auto; }
  .chapter-nav button { min-height: 36px; padding: .2rem .6rem; }
  /* The track fills the row from the left; the counter occupies the right column.
     Keep both elements in normal flow, outside the horizontally scrolling menu. */
  .progress-shell {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--compact-counter-width);
    align-items: center;
    gap: .5rem;
    padding: 8px 0 5px;
  }
  .progress-track { grid-column: 1; grid-row: 1; }
  .progress-meta {
    width: auto;
    position: static;
    grid-column: 2;
    grid-row: 1;
    padding: .12rem 0;
    background: transparent;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .lesson-stage {
    min-height: 0;
    padding-top: var(--compact-top-space);
    padding-bottom: calc(var(--compact-footer-height) + 1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .lesson-stage h1 { font-size: var(--compact-title-size); margin-bottom: .7rem; }
  .section-heading { margin-bottom: var(--compact-block-space); }
  .eyebrow, .section-kicker, .question-kicker { margin-bottom: .45rem; }
  .subtitle { font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-bottom: 1rem; }
  .lesson-page p { margin-bottom: .75rem; }

  .hero-grid, .reading-layout, .image-text-band, .credits-grid,
  .reinforcement-grid { gap: 1.4rem; }
  .content-card, .question-card, .fact-card, .reinforcement-text,
  .quiz-card, .three-cards article, .application-grid article {
    padding: var(--compact-card-padding);
  }
  .objective-card, .image-text-band, .three-cards,
  .application-grid, .icon-pair, .panorama { margin-top: var(--compact-block-space); }
  .objective-card h2 { margin-top: 1rem; }
  .contributors-inline { margin-top: 1rem; }
  .contributors-inline > div { min-height: 0; padding: .7rem .8rem; }
  .check-list li, .source-list li { margin-bottom: .35rem; }
  .timeline-card div { padding: .85rem 1rem; }
  .definition { padding: .85rem 1rem; }
  blockquote { margin: 1rem 0; padding: 1rem 1.2rem; font-size: 1.3rem; }
  .big-quote { font-size: 1.3rem; }
  .term-note { margin-top: 1rem; }
  .term-note-toggle { padding: .8rem 1rem; }
  .faq-grid .term-note-toggle { min-height: 80px; }
  .faq-grid .term-note.is-open { min-height: 0; }

  /* Strong enough to override the template's specialised image layouts.
     Keep object-fit from styles.css (contain for diagrams, cover for photos). */
  .lesson-stage .lesson-page .media-card img { max-height: var(--compact-image-height); }
  .media-card.contained img, .hero-media img, .wide-figure img { padding: .75rem; }
  .media-card figcaption { padding: .6rem .8rem; }
  .lesson-stage .reinforcement-grid .media-card img {
    height: min(280px, var(--compact-image-height));
  }
  /* Retain the existing JS height sync, but stop an unusually long title
     from making the hero image taller than the available image budget. */
  .page-home .hero-media { max-height: calc(var(--compact-image-height) + 4rem); }
  .lesson-stage .lesson-page .cost-illustration img { height: auto; flex: 0 0 auto; }
  .cost-illustration { align-self: start; }
  .icon-pair { gap: 1.4rem; }
  .icon-pair img { height: 72px; }

  .lesson-controls, .home-start-action {
    min-height: var(--compact-footer-height);
    padding-top: 7px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  }
  .lesson-controls .primary-action, .lesson-controls .secondary-action,
  .home-start-action .primary-action {
    min-height: 44px;
    padding: .45rem .8rem;
  }
}

/* Height matters as well as width: 768px laptop screens and embedded lessons. */
@media screen and (max-height: 900px) {
  :root {
    --compact-card-padding: 1rem;
    --compact-title-size: clamp(1.8rem, 2.5vw, 2rem);
  }
  body { line-height: 1.5; }
}

@media screen and (max-width: 900px) {
  /* Leave the template's single-column grids and natural reading order intact. */
  .faq-grid .term-note-toggle { min-height: 0; }
}

@media screen and (max-width: 640px) {
  :root {
    --compact-top-space: 20px;
    --compact-title-size: clamp(1.7rem, 7vw, 2rem);
  }
  .brand-row { gap: .6rem; }
  .chapter-nav { width: min(1180px, calc(100% - 24px)); }
  /* Shared wrapping rules for longer translated headings and attachment names. */
  .lesson-stage h1, .lesson-stage h2 { overflow-wrap: break-word; }
  .credits-grid { grid-template-columns: minmax(0, 1fr); }
  .credits-grid > * { min-width: 0; }
  .credits-list dd, .download-link small { overflow-wrap: anywhere; }
  .license-row { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  .lesson-controls { gap: .35rem; }
  .lesson-controls .primary-action, .lesson-controls .secondary-action {
    padding-inline: .5rem;
    font-size: .85rem;
  }
}

/* At narrow widths keep the dots on a separate row, without covering content. */
@media screen and (max-width: 400px) {
  :root { --compact-footer-height: 82px; }
  .lesson-controls { flex-wrap: wrap; }
  .lesson-controls .dot-nav { order: 1; flex-basis: 100%; min-height: 16px; }
}

/* Let the header scroll away on very short windows and landscape phones. */
@media screen and (max-height: 500px) {
  :root { --compact-top-space: 16px; }
  .course-header { position: relative; }
  html { scroll-padding-top: 16px; }
}

/* Multimodal course: retain the full-width heading and the existing media grids. */
@media screen {
  .page-home .home-heading { margin-bottom: var(--compact-block-space); }
  .page-home .home-heading h1 { font-size: var(--compact-title-size); }
  .page-home .hero-media { height: min(300px, calc(var(--compact-image-height) + 4rem)); }
  .spaced, .source-note { margin-top: var(--compact-block-space); }
  .pair-grid { gap: 1.2rem; margin-top: var(--compact-block-space); }
  .modality-list { gap: .5rem 1.2rem; }
  .application-grid { margin-top: 0; }
}
@media screen and (max-width: 900px) {
  .page-home .hero-media { height: auto; }
}

/* Keep page focus invisible and the fixed navigation edge flat. */
@media screen {
  .lesson-stage:focus { outline: none; }
  .lesson-controls, .home-start-action {
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: var(--canvas);
    backdrop-filter: none;
  }
}

/* Translation course: compact the specialised contributor and practice cards. */
@media screen {
  .page-home .contributors-inline > div { min-height: 0; padding: .7rem .8rem; }
  .stack-cards, .practice-grid, .quality-grid, .takeaway-tips { gap: 1rem; }
}