/* index.screens.css — every screen size for the public terminal site (index.html). Standalone: loaded last, in the "responsive" layer, which sits
   above "page" and "element", so a rule here always wins over the rest of this family's styles without touching them.

   Breakpoints used in this file (CSS pixels, i.e. after the device's own scaling):
     up to 480px   phones (portrait)          481px–900px   phones (landscape) and small tablets
     901px–1200px  tablets and small laptops  1201px–2199px laptops and desktops: the design as drawn
     2200px and up 1440p / 4K / ultra-wide: the whole page is scaled up, so it never ends up as a small strip in the middle */
@layer page, element, responsive;

@layer responsive {
  /* ── very large screens: the page is scaled up instead of stretched; the viewport-unit sizes below are the family's own, divided by the zoom so they stay true ── */
  @media (min-width: 2200px) {
    html { zoom: 1.2; }
    body { min-height: calc(100vh / 1.2); }
    100% { transform: translateY(calc(100vh / 1.2)); }
    .lightbox img, .lightbox video { max-width: calc(90vw / 1.2); }
    .lightbox img, .lightbox video { max-height: calc(80vh / 1.2); }
    .tool-modal-content { max-height: calc(80vh / 1.2); }
  }
  @media (min-width: 2800px) {
    html { zoom: 1.45; }
    body { min-height: calc(100vh / 1.45); }
    100% { transform: translateY(calc(100vh / 1.45)); }
    .lightbox img, .lightbox video { max-width: calc(90vw / 1.45); }
    .lightbox img, .lightbox video { max-height: calc(80vh / 1.45); }
    .tool-modal-content { max-height: calc(80vh / 1.45); }
  }
  @media (min-width: 3600px) {
    html { zoom: 1.85; }
    body { min-height: calc(100vh / 1.85); }
    100% { transform: translateY(calc(100vh / 1.85)); }
    .lightbox img, .lightbox video { max-width: calc(90vw / 1.85); }
    .lightbox img, .lightbox video { max-height: calc(80vh / 1.85); }
    .tool-modal-content { max-height: calc(80vh / 1.85); }
  }

  /* ── phones and tablets: nothing may be wider than the screen (laptops and up keep the design exactly as drawn) ── */
  @media (max-width: 1200px) {
    img, video, canvas, iframe, svg, embed, object { max-width: 100%; }
    pre, code, textarea { max-width: 100%; }
    pre { overflow-x: auto; }
    table { max-width: 100%; }
  }
  /* phones: the layout is already single-column; keep long words, urls and code from forcing a wider page */
  @media (max-width: 480px) {
    body { overflow-x: hidden; }
    .terminal-body, .post-content, .project-desc, .tool-desc { overflow-wrap: anywhere; }
    .lightbox-nav button { min-width: 44px; min-height: 36px; }
  }
  /* phones held sideways: the terminal and hero stay usable in little height */
  @media (max-height: 420px) and (orientation: landscape) {
    .hero { padding-top: 8px; padding-bottom: 8px; }
    .profile-pic { width: 80px; height: 80px; }
    .terminal-body { min-height: 120px; max-height: 40vh; }
  }
}