/* ---------------------------------------------------------------------------
   Mobile and narrow-window overrides
   ---------------------------------------------------------------------------
   Loaded after site.css. Everything here is width-based only; nothing in this
   file applies at the full desktop width.

   Breakpoints, widest first, so the cascade runs from least to most narrow:

     1140px  the navigation bar stops fitting on one line and collapses
     1080px  two-column layouts fold to one
      900px  wide panels lose their side-by-side arrangement
      720px  phone layout, and the display type steps down

   Type sizes are not restated rule by rule. The 720px block redefines the
   scale tokens from site.css instead, so headings shrink everywhere at once.
   --------------------------------------------------------------------------- */

/* ===== 1140px ===== */
@media (max-width: 1140px) {
    :root { --header-offset: 90px; }
    .header-inner { min-height: 76px; }
    .nav-toggle { width: 44px; height: 44px; padding: 10px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; color: var(--violet-deep); background: white; }
    .nav-toggle > span:not(.sr-only) { height: 2px; display: block; background: currentColor; }
    .site-nav { position: absolute; top: 96px; right: 20px; left: 20px; display: none; gap: 0; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(251,250,248,.98); box-shadow: var(--shadow); }
    .site-nav.open { display: grid; }
    .site-nav a { padding: 14px 16px; }
    .site-nav a::after { display: none; }
    .site-nav .account-link { margin-top: 10px; text-align: center; }
    /* A lone circle in a stacked menu reads as a stray bullet centred in the
       row; put it where the labels start. */
    .site-nav .unread-badge { justify-self: start; margin-top: 10px; }
    .site-nav .home-link { padding: 14px 16px; }
}

/* ===== 1080px ===== */
@media (max-width: 1080px) {
    .admin-posts { grid-template-columns: 1fr; }
    :root { --shell: min(100% - 40px, 920px); }
    .home-hero { grid-template-columns: 1fr; padding-top: 35px; }
    .hero-media { min-height: 480px; }
    .hero-media img { min-height: 480px; }
    .hero-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; align-items: end; }
    .hero-copy .status-pill { grid-column: 1 / -1; }
    .hero-copy h1 { grid-row: 2 / 5; }
    .hero-copy .button-stack { align-self: start; }
    .builder-section { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .builder-intro { grid-row: auto; grid-column: 1 / -1; }
    .builder-section .learning-card { min-height: 325px; }
    .discover-section { grid-template-columns: 1fr; }
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .learn-hero, .topic-hero { grid-template-columns: 1fr; }
    .learning-paths { grid-template-columns: 1fr; }
    .workflow-list { grid-template-columns: 1fr 1fr; }
    .workflow-list li:nth-child(3) { border-left: 0; }
    .workflow-list li:nth-child(4) { }
    .page-mast { grid-template-columns: 1fr; }
    .page-mast-media { transform: none; }
    .community-grid, .admin-grid { grid-template-columns: 1fr 1fr; }
    .technology-grid { grid-template-columns: 1fr 1fr; }
    .technology-grid article:nth-child(2) { border-right: 1px solid var(--line); }
    .article-card.featured { grid-template-columns: 1fr; }
    .lesson-index { max-height: none; overflow-y: visible; }
    .admin-accounts { grid-template-columns: 1fr; }
    .account-panels { grid-template-columns: 1fr; }
}

/* ===== 900px ===== */
@media (max-width: 900px) {
    .demo:has(.demo-media) { grid-template-columns: 1fr; }
    .panel-cards { grid-template-columns: 1fr; }
}

/* ===== 720px ===== */
@media (max-width: 720px) {
    .board-card { flex-direction: column; align-items: flex-start; gap: 10px; }
    .board-count { justify-items: start; }
    .topic-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .topic-meta { justify-items: start; }
    .limit-row { grid-template-columns: minmax(0, 1fr); }
    .limit-row input { grid-row: auto; grid-column: 1; text-align: left; }
    /* No room to float 300px beside text; the clip goes full width instead. */
    .video-thumb { float: none; width: 100%; margin: 0 0 1.5em; }
    .video-thumb video { width: 100%; height: auto; aspect-ratio: 3 / 2; }
    .video-thumb .video-frame { border-radius: 12px; }
    :root { --fs-h1: clamp(48px, 13vw, 70px); --fs-h1-hero: clamp(52px, 14vw, 75px); --shell: calc(100% - 26px); --header-offset: 76px; }
    body::before { background-size: 32px 32px; }
    .site-header { padding-top: 8px; }
    .header-inner { min-height: 68px; padding: 0 15px; border-radius: 19px; }
    .brand-word { font-size: var(--fs-h3); }
    .brand-orb { width: 23px; height: 23px; }
    .site-nav { top: 82px; right: 13px; left: 13px; }
    .home-hero { padding-bottom: 42px; }
    .hero-media, .hero-media img { min-height: 330px; }
    .hero-copy { display: block; }
    .button-stack { max-width: none; }
    .builder-section { grid-template-columns: 1fr; padding: 11px; margin-bottom: 55px; }
    .builder-intro { grid-column: auto; padding: 28px 19px; }
    .learning-card { min-height: 315px; }
    .discover-section { padding: 30px 20px; margin-bottom: 55px; }
    .discover-preview { grid-template-columns: 1fr 1fr; }
    .discover-preview article { min-height: 190px; }
    .gameplay-section { margin-bottom: 55px; }
    .home-next, .path-cta, .cta-panel, .download-panel, .newsletter { margin-bottom: 55px; padding: 31px 22px; align-items: flex-start; flex-direction: column; }
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-card { min-height: 280px; }
    .learn-diagram { grid-template-columns: 1fr; }
    .learn-diagram > i { transform: rotate(90deg); }
    .learning-path { min-height: 430px; --path-pad: 25px; }
    .workflow-list { grid-template-columns: 1fr; }
    .workflow-list li, .workflow-list li:nth-child(2), .workflow-list li:nth-child(4) { border-left: 0; }
    .workflow-list li:first-child { border-top: 0; }
    .topic-visual { min-height: 350px; }
    .lesson-layout { grid-template-columns: 1fr; }
    .lesson-index { position: static; }
    .lesson-cards { grid-template-columns: 1fr; }
    .about-layout, .auth-shell, .contact-shell { grid-template-columns: 1fr; }
    .auth-art { min-height: 360px; }
    .contact-intro { min-height: 430px; }
    .community-grid, .admin-grid, .article-grid, .technology-grid { grid-template-columns: 1fr; }
    .article-card.featured { grid-column: auto; }
    .technology-grid article, .technology-grid article:nth-child(2) { border-right: 1px solid var(--line); }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .copyright { text-align: left; }
    .newsletter-form > div { flex-direction: column; gap: 10px; }
    .newsletter-form input, .newsletter-form .button { border-radius: 12px; }
    .confirm { flex-direction: column; align-items: flex-start; }
    .linedwrap .lines { width: 40px; }
    #wikieditor { min-height: 50vh; }
    .source-block { margin: 26px 0; border-radius: 14px; }
    .source-head { padding: 8px 10px 8px 14px; flex-wrap: wrap; gap: 8px; }
    .source-tools { flex-wrap: wrap; }
    .source-tools button { padding: 6px 10px; font-size: var(--fs-label); letter-spacing: .06em; }
    .source-lines .lineno, pre.source, .source-editor { font-size: var(--fs-ui); }
    .source-lines .lineno { padding: 0 9px; }
    pre.source, .source-editor { padding: 14px; }
    .admin-panel { padding: 20px 17px; }
    .admin-fields { grid-template-columns: 1fr; }
    .unread-badge { justify-self: start; }
    .message-when { margin-left: 0; width: 100%; }
    .lead-card { padding: 18px; gap: 15px; }
    .lead-card-icon { width: 46px; height: 46px; border-radius: 14px; }
}