/* Give mobile text blocks a shared, narrower reading column. */
@media (max-width: 600px) {
  body { min-width: 0; }
  main .container {
    width: calc(100% - 72px);
    margin-inline: auto;
  }
  main :is(
    .promise-card, .comparison article, .qualification-grid article,
    .day-grid article, .career-grid article, .environment-card,
    .labs-grid article, .registration-card, .learning-chart,
    .universe-details, .equipment-note, .candidate-profile
  ) {
    min-width: 0;
    padding: 24px;
  }
  main :is(
    .promise-card, .comparison article, .qualification-grid article,
    .day-grid article, .career-grid article, .environment-card,
    .labs-grid article
  ) h3 {
    font-size: clamp(20px, 5.8vw, 26px);
    overflow-wrap: anywhere;
  }
  main :is(.chart-row, .field, .direction) { min-width: 0; }
  main :is(.chart-row span, .registration-card label, .direction h3) {
    overflow-wrap: anywhere;
  }

  main :is(.hero-grid, .college-universe > .container, .learning .container) {
    width: calc(100% - 40px);
  }
  /* First screen: video, headline, introduction, then two compact actions. */
  .hero { min-height: 100svh; padding-bottom: 22px; }
  .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    min-height: calc(100svh - 22px);
    padding-top: 110px;
    padding-bottom: 0;
    gap: 24px;
  }
  .hero-copy { display: block; align-self: auto; }
  .hero-media { order: -1; border-radius: 18px; }
  .hero-media video { aspect-ratio: 16 / 9; max-height: 230px; }
  .hero h1 {
    margin: 0;
    font-size: clamp(30px, 8.3vw, 38px);
    line-height: 1.04;
  }
  .hero .hero-lead {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  .hero .hero-actions .button {
    min-height: 44px;
    width: 100%;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }

  /* A rotating single-orbit menu with readable, upright touch targets. */
  .college-universe { padding: 32px 0; }
  .universe-heading h2 { font-size: 28px; }
  .universe-layout { margin-top: 16px; gap: 14px; }
  .planet-map-window {
    max-width: 360px;
    height: auto;
    overflow: hidden;
  }
  .planet-map {
    width: 100%;
    min-width: 0;
    transform: none;
  }
  .planet-map-help { display: none; }
  .planet-orbit { display: none; }
  .planet-orbit-work { display: block; opacity: .75; }
  .universe-planet { padding: 0; }
  .universe-planet-copy { display: block; padding: 3px 2px; }
  .universe-planet-diploma { width: 70px; height: 70px; }
  .universe-planet-diploma strong { font-size: 15px; }
  .universe-planet-work { width: 56px; height: 56px; }
  .universe-planet-work strong { font-size: 12px; }
  .universe-planet-practice { width: 66px; height: 66px; }
  .universe-planet-practice strong { font-size: 12px; }
  .universe-planet-career { width: 74px; height: 74px; }
  .universe-planet-career strong { font-size: 13px; }
  .universe-planet-campus { width: 82px; height: 82px; }
  .universe-planet-campus strong { font-size: 14px; }
  main .universe-details { padding: 18px; border-radius: 20px; }
  .universe-panel { min-height: 0; gap: 10px; }
  .universe-panel h3 { font-size: 22px; }
  .universe-panel p { font-size: 14px; line-height: 1.5; }
  .universe-panel a { margin-top: 14px; font-size: 12px; }

  /* Keep the whole course selector next to its statistics in a short section. */
  .learning { padding-block: 28px; }
  .learning-grid { gap: 16px; }
  .learning h2 { margin: 0; font-size: 26px; line-height: 1.1; }
  .learning .section-lead { display: none; }
  main .learning-chart { padding: 22px; gap: 18px; border-radius: 20px; }
  .learning-chart h3 { font-size: 17px; }
  .chart-row { gap: 5px; }
  .chart-row span { font-size: 14px; }
  .chart-row strong { font-size: 18px; }
  .chart-row i { height: 7px; }
  .learning-data-note { font-size: 11px; line-height: 1.4; }
  .student-day { margin-top: 16px; }
  .learning .day-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .learning .day-grid .course-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: 14px;
    outline-offset: 2px;
  }
  .learning .day-grid .course-card span { font-size: 11px; letter-spacing: .04em; }
  .learning .day-grid .course-card h3 { margin: 0; font-size: 16px; line-height: 1.25; }
  .learning .day-grid .course-card p { display: none; }
  .learning .course-select:focus-visible { outline-offset: 2px; }

  main .environment-card,
  main .environment-card:nth-child(2),
  main .environment-card:nth-child(3) {
    height: auto;
    min-height: 290px;
    padding: 20px;
    border-radius: 28px;
  }
  .environment-icon { width: 52px; height: 52px; font-size: 34px; }
  main .environment-card h3 { margin: 18px 0 12px; font-size: 23px; }
  main .environment-card p { font-size: 15px; line-height: 1.45; }
  main .environment-card.is-floating { will-change: auto; }
  main .environment-card p { color: #52647c; }
  main .environment-card:nth-child(n + 2) p { color: #edf3ff; }
  .environment-card .tag { padding: 8px 14px; font-size: 11px; }

  .registration-card .field label {
    font: 700 14px/1.4 "Segoe UI", Arial, sans-serif;
    margin-bottom: 10px;
  }
  .registration-card .field input,
  .registration-card .field select {
    font-size: 17px;
    padding-inline: 16px;
    min-width: 0;
  }
  .registration-card .consent label { font-size: 14px; line-height: 1.5; }
  .registration-card .form-note { font-size: 13px; }
}

/* The brand and menu wrap into two rows on very narrow phones. */
@media (max-width: 360px) {
  .hero .hero-grid { padding-top: 158px; }
}