/* =========================================================
   Physics Presentation Engine

   Responsive Layout System

========================================================= */

/* =========================================================
   LARGE SCREENS

   1600px and above

========================================================= */

@media (min-width: 1600px) {
  :root {
    --left-panel-width: 300px;

    --right-panel-width: 380px;

    --slide-padding: 60px;
  }
}

/* =========================================================
   LAPTOPS

   1200px - 1599px

========================================================= */

@media (max-width: 1599px) {
  :root {
    --left-panel-width: 230px;

    --right-panel-width: 280px;
  }
}

/* =========================================================
   TABLETS LANDSCAPE

   768px - 1199px

========================================================= */

@media (max-width: 1199px) {
  .workspace {
    grid-template-columns:
      200px
      minmax(300px, 1fr)
      240px;
  }

  .slide-title {
    font-size: 2.2rem;
  }

  .control-bar {
    gap: var(--space-2);

    padding: 0 var(--space-3);
  }

  .control-bar button {
    padding: 7px 10px;

    font-size: 0.9rem;
  }
}

/* =========================================================
   TABLETS PORTRAIT

   600px - 767px

========================================================= */

@media (max-width: 767px) {
  body {
    overflow: auto;
  }

  .workspace {
    display: block;

    overflow: auto;
  }

  /*
       Side panels become overlays
    */

  .thumbnail-panel,
  .information-panel {
    position: fixed;

    top: var(--topbar-height);

    bottom: var(--control-height);

    width: 85%;

    max-width: 320px;

    z-index: var(--z-panel);

    box-shadow: var(--shadow-large);

    transform: translateX(-110%);
  }

  .information-panel {
    right: 0;

    transform: translateX(110%);
  }

  .thumbnail-panel.open {
    transform: translateX(0);
  }

  .information-panel.open {
    transform: translateX(0);
  }

  .slide-container {
    padding: var(--space-3);
  }

  .slide {
    aspect-ratio: auto;
    min-height: 80vh;
  }
  .control-bar {
    overflow-x: auto;
  }
}

/* =========================================================
   MOBILE DEVICES

   below 600px

========================================================= */

@media (max-width: 599px) {
  :root {
    --topbar-height: 56px;

    --control-height: 60px;

    --slide-padding: 20px;
  }

  .course-info h1 {
    font-size: 1rem;
  }

  #slide-counter {
    display: none;
  }

  .topbar {
    padding: 0 var(--space-3);
  }

  .control-bar {
    justify-content: space-between;
  }

  .control-bar button {
    min-width: 42px;

    padding: 8px;
  }

  .control-bar button:not(#previous-button):not(#next-button) {
    font-size: 0;
  }

  .control-bar button::first-letter {
    font-size: 1rem;
  }

  .slide-title {
    font-size: 1.7rem;
  }

  .slide-text {
    font-size: 1rem;
  }
}

/* =========================================================
   TOUCH DEVICES

========================================================= */

@media (hover: none) {
  button {
    min-height: 44px;

    min-width: 44px;
  }

  .thumbnail-card:hover {
    transform: none;
  }
}

/* =========================================================
   PRINT MODE

========================================================= */

@media print {
  body {
    overflow: visible;

    background: white;
  }

  .topbar,
  .control-bar,
  .thumbnail-panel,
  .information-panel {
    display: none;
  }

  .slide {
    box-shadow: none;

    page-break-after: always;
  }
}