/* Layout refinements for compact screens and generated imagery. */
img { max-width: 100%; }
.app, .layout, .main, .card, .grid > *, .right-stack, .row-main { min-width: 0; }
.card-head > *, .heading-row > *, .course-line > div { min-width: 0; }
.card, .row-main, .course-line, .page-heading { overflow-wrap: break-word; }

.mobile-nav, .mobile-more-backdrop, .mobile-more-sheet { display: none; }

.course-line { grid-template-columns: 112px minmax(0, 1fr) auto; }
.course-line > .primary { grid-column: auto; }
.teacher-course-row {
  display: grid;
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #edf0f6;
  background: transparent;
  padding: 10px 2px;
  color: var(--ink);
  text-align: left;
}
.teacher-course-row:last-child { border-bottom: 0; }
.teacher-course-row small { color: var(--muted); font-size: 11px; }
.teacher-course-row i { color: var(--purple); font-style: normal; }

/* Photos occupy their own area instead of covering copy. */
.auth-visual { min-width: 0; }
.auth-visual img {
  display: block;
  position: static;
  width: min(100%, 500px);
  height: clamp(210px, 31vh, 360px);
  flex: none;
  margin: 22px auto 18px;
  border-radius: 22px;
  object-fit: cover;
  object-position: center 58%;
  mix-blend-mode: normal;
}
.auth-quote { margin-top: 0; }
.course-hero > div:first-child { max-width: 58%; }
.course-hero-art { width: 39%; }
.course-hero-art img {
  width: 100%;
  height: 100%;
  border-radius: 0 12px 12px 0;
  object-fit: cover;
  mask-image: none;
  mix-blend-mode: normal;
  opacity: .9;
}
.achievement-hero {
  height: auto;
  min-height: 170px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .8fr);
  grid-template-rows: auto auto;
  gap: 8px 14px;
}
.achievement-hero > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
.achievement-hero blockquote { grid-column: 2; grid-row: 1; margin: 0; }
.achievement-hero .level { grid-column: 1 / 3; grid-row: 2; }
.mountain-art {
  position: static;
  grid-column: 3;
  grid-row: 1 / 3;
  display: block;
  width: 100%;
  height: 135px;
  max-width: none;
  border-radius: 9px;
  object-fit: cover;
  mix-blend-mode: normal;
  opacity: 1;
}

@media (max-width: 1050px) {
  .student .content-grid, .content-grid, .two-grid { grid-template-columns: minmax(0, 1fr); }
  .content-grid > :last-child, .teacher .right-stack { grid-column: auto; }
  .catalog-layout, .course-detail-layout, .homework-layout, .quiz-layout,
  .achievements-page-grid, .certificate-layout, .notifications-layout,
  .schedule-layout, .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card { position: static; }
  .course-detail-layout aside, .homework-layout aside { grid-row: auto; }
}

@media (max-width: 760px) {
  .topbar {
    height: 58px;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar .brand { min-width: 0; }
  .topbar .brand-name { font-size: 18px; }
  .top-actions { gap: 5px; }
  .sidebar { display: none !important; }
  .layout { display: block; min-height: calc(100dvh - 58px); }
  .main {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px calc(92px + env(safe-area-inset-bottom));
  }
  .grid { min-width: 0; }
  .card { padding: 12px; }
  .welcome, .page-heading { max-width: 100%; }
  .welcome h1 { font-size: clamp(21px, 6vw, 25px); }
  .stats, .admin .stats, .parent-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-width: 0; padding: 8px; gap: 8px; }
  .stat-icon { width: 34px; height: 34px; }
  .stat strong { font-size: 19px; }
  .stat small, .delta { overflow-wrap: anywhere; }
  .content-grid, .student .content-grid, .teacher .content-grid,
  .two-grid, .course-detail-layout, .homework-layout, .quiz-layout,
  .achievements-page-grid, .certificate-layout, .notifications-layout,
  .schedule-layout, .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .course-line { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
  .course-line .course-art { width: 86px; height: 72px; }
  .course-line > .primary { grid-column: 2; justify-self: start; }
  .course-line .course-meta { display: block; }
  .teacher-course-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .teacher-course-row small { display: none; }
  .course-detail-layout aside, .homework-layout aside { grid-row: auto; }

  .mobile-nav {
    position: fixed;
    z-index: 12;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 4px max(5px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(5px, env(safe-area-inset-right));
    border-top: 1px solid #e7e8f2;
    background: #fff;
    box-shadow: 0 -5px 18px #25235112;
  }
  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #6f7893;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .mobile-tab svg { width: 22px; height: 22px; flex: none; }
  .mobile-tab.active { color: #603bdf; background: #f1edff; font-weight: 700; }
  .mobile-tab:focus-visible, .mobile-more-list button:focus-visible { outline: 2px solid #6841e8; outline-offset: -2px; }
  .mobile-more-backdrop.open {
    position: fixed;
    z-index: 10;
    display: block;
    inset: 0;
    background: #18133075;
  }
  .mobile-more-sheet.open {
    position: fixed;
    z-index: 11;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    display: block;
    max-height: min(65dvh, 520px);
    overflow-y: auto;
    padding: 15px 16px 20px;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -10px 35px #15152d22;
  }
  .mobile-more-heading { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 8px; }
  .mobile-more-heading button { border: 0; background: #f4f3fb; width: 32px; height: 32px; border-radius: 50%; color: #59627e; font-size: 23px; line-height: 1; }
  .mobile-more-list { display: grid; grid-template-columns: 1fr; }
  .mobile-more-list button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-bottom: 1px solid #eff0f6;
    background: transparent;
    text-align: left;
    color: #404961;
    font-size: 14px;
  }
  .mobile-more-list button.active { color: #603bdf; font-weight: 700; }
  .mobile-more-list button > span:last-child { margin-left: auto; font-size: 20px; color: #a3a9b9; }
  .mobile-more-list .more-icon { width: 25px; text-align: center; color: #7553e7; }

  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-copy, .hero-art { min-width: 0; }
  .hero-copy h1 { font-size: clamp(32px, 10vw, 42px); }
  .hero-art { display: block; height: auto; }
  .hero-art img { display: block; width: 100%; height: auto; max-width: none; max-height: none; object-fit: contain; }
  .hero-art .float-card { display: none; }
  .bottom-banner { flex-wrap: wrap; }
  .bottom-banner > div { min-width: 0; flex: 1 1 100%; }
  .bottom-banner .primary { width: 100%; }

  .course-hero { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; padding: 12px; min-height: 0; }
  .course-hero > div:first-child { width: 100%; max-width: none; }
  .course-hero-art { position: relative; right: auto; top: auto; width: 100%; height: 150px; overflow: hidden; border-radius: 9px; }
  .course-hero-art img { border-radius: 9px; opacity: 1; }
  .hero-buttons { flex-wrap: wrap; gap: 8px; }
  .hero-buttons > button { flex: 1 1 150px; white-space: normal; }

  .lesson-scene { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; }
  .lesson-scene > img { position: static; width: 100%; height: 180px; max-width: none; border-radius: 0; object-fit: cover; object-position: center 27%; }
  .screen-code { position: static; width: 100%; height: auto; min-height: 108px; border: 0; border-radius: 0; box-shadow: none; overflow-x: auto; }
  .screen-code pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .lesson-watermark { display: none; }
  .player-controls { height: auto; min-height: 44px; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .player-controls input { flex: 1 1 100%; order: 2; min-width: 0; }
  .lesson-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-footer button { min-width: 0; white-space: normal; }

  .achievement-hero { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .achievement-hero > div:first-child, .achievement-hero .level, .achievement-hero blockquote { width: 100%; }
  .achievement-hero .mountain-art { width: 100%; height: 125px; max-width: none; order: 4; }
  .achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earned-grid, .category-achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card { position: static; }
  .catalog-course { min-width: 0; }
  .catalog-cover { overflow: hidden; }
  .cover-photo { display: block; }
  .calendar-grid, .month-board { min-width: 600px; }
  .schedule-board { overflow-x: auto; }
  .schedule-controls { width: 100%; }
  .schedule-controls .view-tabs { margin-left: 0; }
  .schedule-controls > b { width: 100%; }
  .notification-card { grid-template-columns: 30px 8px minmax(0, 1fr) 42px; }
  .notification-card .row-main { min-width: 0; }
  .card:has(.table) { overflow-x: auto; }
  .card:has(.table) .table { min-width: 520px; }
  .breadcrumbs, .lesson-notes pre, .code-sample pre { overflow-wrap: anywhere; }
  .lesson-notes pre, .code-sample pre { overflow-x: auto; }
  .conversation span, .chat-head span { min-width: 0; }
  .send-row input { min-width: 0; }

  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { display: block; height: 180px; padding: 0; overflow: hidden; }
  .auth-visual > :not(img) { display: none; }
  .auth-visual img { width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: center 58%; }
  .auth-form-wrap { min-height: 0; padding: 14px 12px 26px; }
  .auth-card { margin: 18px auto; }
}

@media (max-width: 560px) {
  .topbar .search { display: none; }
  .topbar .brand { margin-right: auto; }
  .topbar .brand-name { font-size: 17px; }
  .top-actions .profile { padding: 0; }
  .top-actions .icon-btn { width: 27px; }
  .heading-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-head { flex-wrap: wrap; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-cover { height: 142px; }
  .course-line > .primary { grid-column: 1 / -1; width: 100%; }
  .course-art { align-self: start; }
  .benefit-grid, .materials-grid, .other-certs { grid-template-columns: minmax(0, 1fr); }
  .certificate-paper { padding: 18px 10px; }
  .certificate-top { gap: 10px; flex-wrap: wrap; }
  .certificate-foot { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
  .certificate-paper h3 { overflow-wrap: anywhere; }
  .auth-top { gap: 8px; font-size: 12px; }
  .role-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 370px) {
  .main { padding-inline: 10px; }
  .mobile-tab { font-size: 9px; }
  .mobile-tab svg { width: 20px; height: 20px; }
  .stat { gap: 5px; }
  .stat-icon { width: 30px; height: 30px; font-size: 17px; }
  .stat strong { font-size: 18px; }
}

@media print {
  .mobile-nav, .mobile-more-sheet, .mobile-more-backdrop { display: none !important; }
}