/* [project]/src/modules/creatorfit/components/workflow-detail-layout.css [app-client] (css) */
.cf-recommendation-stack {
  gap: var(--alvo-space-5, 20px);
  min-width: 0;
  display: grid;
}

.cf-recommendation-stack-sm {
  gap: var(--alvo-space-3, 12px);
  min-width: 0;
  display: grid;
}

.cf-recommendation-cell {
  gap: var(--alvo-space-1, 4px);
  min-width: 0;
  display: grid;
}

.cf-recommendation-row {
  align-items: center;
  gap: var(--alvo-space-3, 12px);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cf-recommendation-row-between {
  justify-content: space-between;
  align-items: center;
  gap: var(--alvo-space-3, 12px);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cf-recommendation-creator {
  align-items: flex-start;
  gap: var(--alvo-space-3, 12px);
  min-width: 0;
  display: flex;
}

.cf-recommendation-actions {
  align-items: center;
  gap: var(--alvo-space-2, 8px);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cf-recommendation-hero-facts {
  gap: var(--alvo-space-6, 24px);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  min-width: 0;
  display: grid;
}

.cf-recommendation-body {
  gap: var(--alvo-space-5, 20px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
  min-width: 0;
  display: grid;
}

.cf-recommendation-body-wide {
  grid-template-columns: minmax(0, 1fr);
}

.cf-recommendation-aside {
  top: var(--alvo-space-4, 16px);
  max-height: calc(100vh - 2 * var(--alvo-space-4, 16px));
  min-width: 0;
  position: sticky;
  overflow-y: auto;
}

.cf-recommendation-toolbar {
  align-items: flex-end;
  gap: var(--alvo-space-3, 12px);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cf-recommendation-select {
  min-width: 160px;
  max-width: 240px;
  display: block;
}

.cf-recommendation-platforms {
  align-items: center;
  column-gap: var(--alvo-space-3, 12px);
  row-gap: var(--alvo-space-1, 4px);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cf-recommendation-platform {
  align-items: center;
  gap: var(--alvo-space-1, 4px);
  min-width: 0;
  display: inline-flex;
}

.cf-recommendation-tab {
  padding-top: var(--alvo-space-4, 16px);
  min-width: 0;
}

@media (max-width: 1023px) {
  .cf-recommendation-hero-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .cf-recommendation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cf-recommendation-aside {
    max-height: none;
    position: static;
    overflow: visible;
  }
}

@media (max-width: 639px) {
  .cf-recommendation-select {
    width: 100%;
    max-width: none;
  }
}