/* November 2026 polish pass. Loaded last so it can refine earlier rules. */

/* 1. Cards show a soft surface, not a black void, while their image loads. */
.project-card .project-media,
.project-card .photo-project-media {
  background: var(--surface, #1c1c1c);
}

/* 2. Live website embeds show a still of the site until the iframe is ready. */
.case-prototype-viewport[style*='--prototype-poster'] {
  background: var(--surface) var(--prototype-poster) top center / cover no-repeat;
}
.case-prototype-viewport[style*='--prototype-poster'] .case-prototype-status:not([hidden]) {
  inset: auto auto 14px 50%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--ink, #f5f5f5);
  background: rgba(18, 18, 18, .84);
  backdrop-filter: blur(8px);
  text-align: center;
}

.case-prototype-viewport[style*='--prototype-poster'][aria-busy='true'] .case-prototype-frame { opacity: 0; }
.case-prototype-viewport[style*='--prototype-poster'] .case-prototype-frame { transition: opacity 240ms ease; }

/* 4. Phones: one swipeable row of filters instead of two wrapped rows. */
@media (max-width: 809px) {
  .work-toolbar,
  .work-toolbar[data-has-concepts],
  .work-toolbar[data-has-behance] {
    flex-wrap: nowrap;
    min-height: 0;
    padding: 8px 0;
    margin-bottom: 16px;
  }
  .work-toolbar > .work-filters,
  .work-toolbar[data-has-concepts] .work-filters,
  .work-toolbar[data-has-behance] .work-filters {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 24px;
  }
  .work-toolbar .work-filters::-webkit-scrollbar { display: none; }
  .work-toolbar .work-filters a { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .work-toolbar .toolbar-utilities { flex: none; }
}