/* Wide desktop application layout
   Expands the application canvas while preserving the existing responsive
   structure and mobile breakpoints from styles.css. */

.app {
  max-width: 1760px;
}

/* Keep long introductory/help copy readable even when its parent spans a
   much wider desktop canvas. */
.hero-card p {
  max-width: 920px;
}

.status-wrap .help,
.status-wrap .shortcut-help {
  max-width: 1280px;
}

/* At desktop widths, use the extra space deliberately instead of allowing
   auto-fit grids to create five, six, or seven narrow control columns. */
@media (min-width: 1180px) {
  .event-grid[aria-label="Premium Events"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .settings-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .premium-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Keep the media cards the same size, but give substantially more of each
     Green/Red/Yellow card to its preview pane. The stronger selector is
     intentional because the preview component injects its own base layout
     styles later at runtime. */
  .uploads-card.uploads .otl-media-preview-card,
  .yellow-config .otl-media-preview-card {
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  }
}

/* The base stylesheet already switches these areas to compact layouts at
   narrower widths. This final safeguard makes the outer app fully fluid on
   small screens regardless of desktop max-width rules above. */
@media (max-width: 760px) {
  .app {
    max-width: 100%;
  }
}