/*
 * Full-width studio surface.
 * The marketing/reading surfaces keep their original 1220px measure; only the
 * browser studio expands so the native DSP rack has room for precise editing.
 */
:root {
  --studio-wide-max: 1760px;
  --studio-wide-gutter: clamp(18px, 2.2vw, 42px);
}

.studio-section {
  padding-right: var(--studio-wide-gutter);
  padding-left: var(--studio-wide-gutter);
}

.studio-section > .section-heading,
.studio-section > .studio-shell {
  width: min(var(--studio-wide-max), 100%);
  max-width: 100%;
}

.studio-shell,
.studio-grid,
.workspace,
#workbench,
#phase-four-ten-suite,
.pro-mode-panel--rack,
.pdx-rack,
.pdx-console,
.pdx-workbench,
.pdx-chain-editor,
.pdx-detail-console {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 1500px) {
  .studio-grid {
    grid-template-columns: 118px minmax(0, 1fr) 270px;
  }

  .workspace {
    padding: clamp(28px, 1.8vw, 36px);
  }

  .pdx-console {
    grid-template-columns: 268px minmax(0, 1fr);
  }

  .pdx-detail-body {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr);
  }

  .pdx-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  :root {
    --studio-wide-gutter: clamp(12px, 2.4vw, 24px);
  }
}

@media (max-width: 760px) {
  :root {
    --studio-wide-gutter: 12px;
  }

  .studio-section {
    padding-right: var(--studio-wide-gutter);
    padding-left: var(--studio-wide-gutter);
  }

  .studio-section > .section-heading,
  .studio-section > .studio-shell {
    width: 100%;
  }
}