/* =========================================================
   muzammilimtiaz.com — "laptop tabs" theme
   responsive.css — below this breakpoint, disable scroll-jack
   and fall back to normal page flow
   ========================================================= */

@media (max-width: 860px), (max-height: 620px) {
  /* the chassis pins to the viewport just like desktop — only the content
     *inside* the active panel scrolls, the page itself never scrolls */
  html, body { height: 100%; overflow: hidden; }
  .stage {
    position: fixed;
    inset: 0;
    height: 100%;
    display: block;
    padding: 76px 8px 10px;
    perspective: none;
  }
  .laptop {
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
  .desk-shadow { display: none; }
  .desk-character { display: none; }
  .notch { display: none; }
  .laptop-base { display: none; }
  .laptop-screen-unit {
    border-radius: 14px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .bezel {
    padding: 0;
    border-radius: 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* clips both children to the rounded corners regardless of the order
       swap below, so the relocated tab bar doesn't poke square corners
       past the bezel's rounded edge */
    overflow: hidden;
  }
  /* thumb-reachable nav: drop the tab strip to the bottom of the screen on
     phones instead of leaving it up top — same iOS/Android bottom-tab-bar
     pattern users already expect. Pure order swap, same markup/JS. */
  .browser-chrome {
    order: 2;
    border-radius: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--paper-line);
    flex: 0 0 auto;
  }
  .tab-strip { align-items: center; }
  .tab { border-radius: 8px; }
  /* address bar + the whole breadcrumb/view-toggle title bar are decorative —
     drop them completely on phones, the active tab already shows where you are */
  .address-bar { display: none; }
  .finder-toolbar { display: none; }
  .finder-sidebar { display: none; }
  .finder-body { order: 1; flex: 1; min-height: 0; display: flex; }
  .screen-body {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  .panel {
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
  }
  .panel.active { display: block; }
  .panel-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 40px;
  }

  /* trim content that doesn't earn its space on a phone screen */
  .about-image { display: none; }
  .scroll-hint { display: none; }

  /* projects only show one card at a time on a phone, so make it obvious
     there's more: a visible peek of the next card at the edge, plus a
     small animated swipe hint */
  .carousel-hint { display: flex; }
  .projects-scroll .finder-file-tile { flex-basis: 78vw; }

  .about-grid, .finder-icon-grid { grid-template-columns: 1fr; }
  .tab-strip { overflow-x: auto; }
  .finder-list-head .col-kind, .finder-list-head .col-level,
  .file-kind, .file-level,
  .folder-list-head .col-kind, .folder-list-head .col-date,
  .folder-kind, .folder-date { display: none; }
  .finder-folder-contents { padding-left: 20px; }

  /* make the expand/collapse affordance unmistakable on touch screens —
     same caret icon as desktop, just bigger and with a roomier tap target */
  .finder-group-header, .finder-folder-header {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .group-caret, .folder-caret {
    font-size: 13px;
    color: var(--accent);
  }
}

@media (max-width: 520px) {
  .site-header { padding: 14px 16px; }
  .brand-name { font-size: 13px; }
  .hero h1 { font-size: 28px; }
}