/* =========================
   LARGE DESKTOP
========================= */

@media (max-width: 1400px) {

  .project-window {

    max-width:
      calc(100vw - 80px);

  }

}

/* =========================
   TABLET / SMALL DESKTOP
========================= */

@media (max-width: 1100px) {

  .project-window {

    width:
      calc(100vw - 40px) !important;

    left: 20px !important;

  }

}

/* =========================
   MOBILE / TABLET
========================= */

@media (max-width: 900px) {

  html,
  body {

    overflow: auto;

  }

  /* =========================
     TOPBAR
  ========================= */

  .topbar {

    height: auto;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    padding: 12px;

  }

  .topbar-left,
  .topbar-center,
  .topbar-right {

    width: 100%;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

  }

  /* =========================
     HERO
  ========================= */

  .hero-screen {

    position: relative;

    min-height:
      calc(100vh - 120px);

    padding:
      120px 20px 80px;

  }

  .hero-inner {

    width: 100%;

    max-width: 100%;

  }

  .hero-inner h1 {

    font-size:
      clamp(42px, 14vw, 82px);

  }

  /* =========================
     FOOTER
  ========================= */

  .footer {

    position: relative;

    height: auto;

    grid-template-columns: 1fr;

    gap: 10px;

    text-align: center;

    padding: 12px;

  }

  .footer-right {

    justify-content: center;

    flex-wrap: wrap;

  }

  /* =========================
     WORKSPACE
  ========================= */

  .workspace {

    height: auto;

    min-height:
      calc(100vh - 200px);

  }

  /* =========================
     WINDOWS
  ========================= */

  .project-window {

    position: relative !important;

    width:
      calc(100vw - 20px) !important;

    height:
      calc(100vh - 180px) !important;

    left: 10px !important;

    top: auto !important;

    margin-bottom: 14px;

    min-width: unset;

  }

  .window-header {

    height: auto;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    padding: 12px;

    cursor: default;

  }

  .window-controls {

    flex-wrap: wrap;

  }

  .window-controls button {

    flex: 1;

  }

  .project-title {

    width: 100%;

  }

  .resize-handle {

    display: none;

  }

  /* =========================
     PANELS
  ========================= */

  .side-panel {

    left: 10px;
    right: 10px;

    width: auto;

    top: 140px;

    bottom: 10px;

  }

  .floating-panel {

    width:
      calc(100vw - 20px);

    left: 10px;

    transform: none;

    top: 140px;

    max-height:
      calc(100vh - 160px);

  }

  /* =========================
     MOBILE WARNING
  ========================= */

  .mobile-warning {

    display: block;

  }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 560px) {

  button {

    width: 100%;

  }

  .topbar-center,
  .topbar-right,
  .footer-right {

    flex-direction: column;

  }

  .window-controls {

    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 8px;

  }

  .editor {

    padding:
      20px 18px 26px;

    font-size:
      calc(var(--font-size) - 1px);

  }

  .panel-content {

    padding: 14px;

  }

  .floating-panel,
  .side-panel {

    top: 160px;

  }

}

/* =========================
   VERY SMALL SCREENS
========================= */

@media (max-width: 420px) {

  .hero-inner h1 {

    font-size:
      38px;

  }

  .hero-inner p {

    font-size:
      13px;

  }

  .brand {

    font-size:
      11px;

  }

  .window-controls {

    grid-template-columns:
      1fr;

  }

}