/* layouts.css - shared page layout primitives */

/* Two-column: assessment form + side card */
.layout-form-sidebar {
  display: flex;
  justify-content: space-between;
  max-width: 1500px;
  margin: 64px auto;
  padding: 0 24px;
  gap: 48px;
}

.layout-form-sidebar__main {
  flex: 1;
  min-width: 0;
  max-width: 750px;
}

.layout-form-sidebar__aside {
  max-width: 600px;
  width: 100%;
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* Two-column: results content + sticky sidebar */
.layout-results {
  display: flex;
  justify-content: center;
  gap: 64px;
  padding: 64px 80px;
  max-width: 1920px;
  margin: 0 auto;
}

.layout-results__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 600px;
  max-width: 850px;
}

.layout-results__sidebar {
  max-width: 650px;
  width: 40%;
  min-width: 400px;
  flex-shrink: 0;
  position: sticky;
  top: -10px;
  height: fit-content;
}

@media screen and (max-width: 992px) {
  .layout-form-sidebar,
  .layout-results {
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
    margin: 30px auto;
  }

  .layout-form-sidebar__main,
  .layout-form-sidebar__aside,
  .layout-results__main,
  .layout-results__sidebar {
    max-width: 850px;
    width: 100%;
    min-width: unset;
    margin: 0 auto;
    position: static;
  }
}

/* Error pages (404, 500, etc.) */
.error-page {
  background-color: var(--surface);
  color: var(--text-color);
  text-align: center;
  padding: 120px var(--spacing-md);
}

.error-page__content {
  max-width: 700px;
  margin: 0 auto;
}

.error-page h1 {
  margin-bottom: var(--spacing-sm);
  font-size: clamp(32px, 6vw, 52px);
}

.error-page p {
  font-size: 18px;
  color: var(--text-color-muted);
  margin-bottom: var(--spacing-lg);
}

.error-page .button-primary {
  background-color: var(--primary);
  color: var(--text-color-secondary);
}

@media screen and (max-width: 768px) {
  .error-page {
    padding: 80px var(--spacing-sm);
  }
}