/**
 * Compact catalog headers — marketing browse pages (community, explore, trends, ai-models).
 * Target: row 1 = slim hero stripe, row 2 = filters/tools; minimal vertical space.
 */

body.ms-page-community-marketing .ms-studio-page,
body.ms-page-explore-marketing .ms-studio-page,
body.ms-page-trends-marketing .ms-studio-page,
body.ms-page-ai-models-marketing .ms-studio-page,
body.ms-page-movies-marketing .ms-studio-page,
body.ms-page-creations-marketing .ms-studio-page {
  margin-top: 4px;
  padding: 8px 0 32px;
}

/* —— Slim hero stripe (row 1) —— */
.creation-hero--catalog-strip {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  padding: 5px 12px !important;
  border-radius: 10px;
}

.creation-hero--catalog-strip .creation-hero-glow {
  display: none;
}

.creation-hero--catalog-strip .creation-hero-inner {
  margin-top: 0 !important;
  gap: 8px !important;
  flex-wrap: nowrap;
  align-items: center;
}

.creation-hero--catalog-strip .creation-hero-main {
  gap: 8px;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.creation-hero--catalog-strip .creation-hero-icon-badge {
  width: 32px;
  height: 32px;
  --badge-radius: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.creation-hero--catalog-strip .creation-hero-icon-badge::before,
.creation-hero--catalog-strip .creation-hero-icon-badge::after {
  display: none;
}

.creation-hero--catalog-strip .creation-hero-icon-wrap {
  width: 18px;
  height: 18px;
}

.creation-hero--catalog-strip .creation-hero-title {
  font-size: 1.125rem !important;
  margin: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creation-hero--catalog-strip .creation-hero-subtitle--strip-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.creation-hero--catalog-strip .creation-hero-pills {
  gap: 6px;
}

.creation-hero--catalog-strip .creation-hero-pill {
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.3;
}

.creation-hero--catalog-strip .creation-hero-right-wrap {
  flex-shrink: 0;
}

/* Per-page title overrides — keep stripe height consistent */
body.ms-page-community-marketing .creation-hero[data-type="community"].ms-panel,
body.ms-page-explore-marketing .creation-hero[data-type="explore"].ms-panel,
body.ms-page-trends-marketing .creation-hero[data-type="trends"].ms-panel,
body.ms-page-ai-models-marketing .creation-hero[data-type="ai-models"].ms-panel,
body.ms-page-movies-marketing .creation-hero[data-type="movie-maker"].ms-panel,
body.ms-page-creations-marketing .creation-hero[data-type="creations"].ms-panel {
  margin-bottom: 6px !important;
  padding: 5px 12px !important;
}

body.ms-page-community-marketing .creation-hero[data-type="community"] .creation-hero-title,
body.ms-page-explore-marketing .creation-hero[data-type="explore"] .creation-hero-title,
body.ms-page-trends-marketing .creation-hero[data-type="trends"] .creation-hero-title,
body.ms-page-ai-models-marketing .creation-hero[data-type="ai-models"] .creation-hero-title,
body.ms-page-movies-marketing .creation-hero[data-type="movie-maker"] .creation-hero-title,
body.ms-page-creations-marketing .creation-hero[data-type="creations"] .creation-hero-title {
  font-size: 1.125rem !important;
  margin: 0 !important;
}

/* —— Community toolbar (row 2) —— */
body.ms-page-community-marketing .ms-community-toolbar {
  position: static;
  top: auto;
  margin: 0;
  width: auto;
  padding: 0 0 10px;
  background: transparent;
  border-bottom: 1px solid var(--ms-comm-border-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.ms-page-community-marketing .ms-community-toolbar__inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

body.ms-page-community-marketing .ms-community-search {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 320px;
}

body.ms-page-community-marketing .ms-community-search__input {
  padding: 7px 12px 7px 36px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

body.ms-page-community-marketing .ms-community-search__icon {
  left: 11px;
  font-size: 0.8rem;
}

body.ms-page-community-marketing .ms-community-search__btn {
  padding: 7px 12px;
  font-size: 0.75rem;
  border-radius: 8px;
}

body.ms-page-community-marketing .ms-community-tabs {
  flex: 1 1 auto;
  gap: 4px;
}

body.ms-page-community-marketing .ms-community-tab {
  padding: 5px 10px;
  font-size: 0.75rem;
}

body.ms-page-community-marketing .ms-community-category-filter {
  flex: 0 1 200px;
  margin: 0;
}

body.ms-page-community-marketing .ms-community-category-filter__select {
  width: 100%;
  max-width: 220px;
  padding: 6px 8px;
  font-size: 0.75rem;
  border-radius: 8px;
}

/* —— Explore toolbar (row 2) —— */
body.ms-page-explore-marketing .ms-explore-toolbar {
  position: static;
  margin: 0;
  width: auto;
  padding: 0 0 10px;
  background: transparent;
  border-bottom: 1px solid var(--ms-exp-border-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.ms-page-explore-marketing .ms-explore-toolbar__inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

body.ms-page-explore-marketing .ms-explore-toolbar__row {
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
}

body.ms-page-explore-marketing .ms-explore-search {
  flex: 1 1 160px;
  max-width: 360px;
}

body.ms-page-explore-marketing .ms-explore-search__input {
  padding: 7px 12px 7px 36px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

body.ms-page-explore-marketing .ms-explore-filter-group {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

body.ms-page-explore-marketing .ms-explore-filter-label {
  margin: 0;
  font-size: 10px;
  white-space: nowrap;
}

body.ms-page-explore-marketing .ms-explore-filter-select {
  padding: 6px 8px;
  font-size: 0.75rem;
  min-height: 32px;
}

body.ms-page-explore-marketing .ms-explore-filter-group--sort {
  flex: 0 0 auto;
}

body.ms-page-explore-marketing .ms-explore-filter-group--model {
  flex: 0 0 auto;
  min-width: 120px;
}

body.ms-page-explore-marketing .ms-explore-tabs {
  flex: 0 1 auto;
  gap: 4px;
}

body.ms-page-explore-marketing .ms-explore-tab {
  padding: 5px 10px;
  font-size: 0.75rem;
}

/* —— Trends filter bar (row 2) —— */
body.ms-page-trends-marketing .trends-filter-bar {
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  gap: 8px 12px;
  align-items: center;
}

body.ms-page-trends-marketing .trends-filter-group {
  gap: 4px;
}

body.ms-page-trends-marketing .trends-filter-label {
  font-size: 10px;
  margin: 0;
}

body.ms-page-trends-marketing .trends-filter-select,
body.ms-page-trends-marketing .trends-filter-search {
  padding: 6px 10px;
  font-size: 0.8125rem;
  min-height: 32px;
  border-radius: 8px;
}

body.ms-page-trends-marketing .trends-filter-group--grow {
  flex: 1 1 200px;
  min-width: 140px;
}

/* —— AI Models toolbar (row 2) —— */
body.ms-page-ai-models-marketing .models-rank-toolbar {
  margin-bottom: 8px;
  padding: 6px 10px;
  gap: 6px 10px;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
}

body.ms-page-ai-models-marketing .models-rank-toolbar-label {
  font-size: 10px;
}

body.ms-page-ai-models-marketing .models-rank-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
}

body.ms-page-ai-models-marketing .models-rank-toolbar-hint {
  display: none;
}

body.ms-page-ai-models-marketing .models-catalog-toolbar-row {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
  gap: 6px 8px;
}

body.ms-page-ai-models-marketing .models-catalog-recommend-strip {
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 0.8125rem;
}

/* —— Creations / Movies row head (compact catalog strip) —— */
body.ms-page-movies-marketing .ms-movies-row__head,
body.ms-page-creations-marketing .ms-movies-row__head {
  margin-bottom: 8px;
  padding-bottom: 6px;
}

body.ms-page-movies-marketing .ms-movies-row__title,
body.ms-page-creations-marketing .ms-movies-row__title {
  font-size: 1rem;
  margin: 0;
}

body.ms-page-movies-marketing .ms-movies-category-filter__select,
body.ms-page-creations-marketing .ms-creations-filter {
  margin-bottom: 0;
}

body.ms-page-movies-marketing .creation-hero--catalog-strip .creation-hero-right-wrap,
body.ms-page-creations-marketing .creation-hero--catalog-strip .creation-hero-right-wrap {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

body.ms-page-movies-marketing .creation-hero--catalog-strip .creation-hero-actions,
body.ms-page-creations-marketing .creation-hero--catalog-strip .creation-hero-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .creation-hero--catalog-strip .creation-hero-inner {
    flex-wrap: wrap;
  }

  body.ms-page-movies-marketing .creation-hero--catalog-strip .creation-hero-right-wrap,
  body.ms-page-creations-marketing .creation-hero--catalog-strip .creation-hero-right-wrap {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 6px;
  }

  body.ms-page-movies-marketing .creation-hero--catalog-strip .ms-creations-hero-filter,
  body.ms-page-creations-marketing .creation-hero--catalog-strip .ms-creations-hero-filter {
    max-width: 100%;
    align-items: stretch;
  }

  body.ms-page-movies-marketing .creation-hero--catalog-strip .ms-creations-hero-filter__controls,
  body.ms-page-creations-marketing .creation-hero--catalog-strip .ms-creations-hero-filter__controls {
    justify-content: flex-start;
  }

  body.ms-page-movies-marketing .creation-hero--catalog-strip .ms-category-cascade--hero-strip,
  body.ms-page-creations-marketing .creation-hero--catalog-strip .ms-category-cascade--hero-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  body.ms-page-community-marketing .ms-community-toolbar__inner,
  body.ms-page-explore-marketing .ms-explore-toolbar__inner {
    flex-direction: column;
    align-items: stretch;
  }

  body.ms-page-community-marketing .ms-community-search,
  body.ms-page-explore-marketing .ms-explore-search {
    max-width: none;
  }
}