/* UrbanXentra Media Studio: container-responsive enterprise workspace. */
#media-workspace {
  min-width: 0;
  container-name: media-studio;
  container-type: inline-size;
}

.media-shell,
.media-header,
.media-toolbar,
.media-heading,
.media-actions,
.media-grid,
.media-grid > * {
  min-width: 0;
}

.media-header {
  flex: none;
  background: rgba(9, 9, 11, 0.96);
}

.media-toolbar {
  align-items: flex-start;
  flex-wrap: wrap;
}

.media-heading {
  flex: 1 1 220px;
}

.media-actions {
  display: flex;
  flex: 2 1 620px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.media-actions button {
  flex: 1 1 126px;
  min-height: 44px;
  max-width: 220px;
  white-space: normal;
  line-height: 1.25;
}

.media-grid {
  min-width: 0;
  overflow: hidden;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(250px, 300px);
}

.media-course-panel,
.media-edit-panel {
  overscroll-behavior: contain;
}

.media-preview-column {
  min-height: 420px;
  overflow: hidden;
}

@container media-studio (max-width: 1080px) {
  .media-header {
    padding: 14px 16px;
  }

  .media-actions {
    flex-basis: 100%;
    justify-content: stretch;
  }

  .media-actions button {
    max-width: none;
  }

  .media-grid {
    grid-template-columns: 180px minmax(0, 1fr) 250px;
  }
}

@container media-studio (max-width: 900px) {
  #media-workspace {
    overflow-y: auto;
  }

  .media-shell {
    height: auto;
    min-height: 100%;
  }

  .media-grid {
    flex: none;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: minmax(520px, 1fr) auto;
    overflow: visible;
  }

  .media-edit-panel {
    grid-column: 1 / -1;
    max-height: none;
    border-top: 1px solid #27272a;
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }

  .media-edit-panel > h3,
  .media-edit-panel > .mt-6,
  .media-edit-panel > label:has(textarea) {
    grid-column: 1 / -1;
  }
}

@container media-studio (max-width: 680px) {
  .media-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .media-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .media-actions button {
    width: 100%;
    max-width: none;
  }

  .media-status {
    grid-template-columns: 1fr auto;
  }

  .media-status > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .media-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(500px, 70vh) auto;
  }

  .media-course-panel {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #27272a;
  }

  .media-preview-column {
    min-height: 500px;
  }

  .media-edit-panel {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .media-edit-panel > * {
    grid-column: 1 !important;
  }
}