/* Slot geometry is independent from DOM order (Work.SortOrder). */
@media screen and (min-width: 761px) {
  .feature-grid {
    display: flex;
    align-items: flex-start;
  }
  .feature-grid > .feature-card--wide { flex: 1.34 1 0%; }
  .feature-grid > .feature-card--tall { flex: .73 1 0%; }
  .feature-grid > .feature-card--compact { flex: 1.10 1 0%; }
}
@media screen and (min-width: 761px) and (max-width: 1040px) {
  .feature-grid > .feature-card--wide { flex-grow: 1.12; }
  .feature-grid > .feature-card--tall { flex-grow: .88; }
  .feature-grid > .feature-card--compact { flex-grow: 1; }
}
/* Fill cover frames proportionally, without image distortion or letterboxing. */
.feature-grid .card-media img,
.page-main .filterable-list .listing-media img,
.page-main .detail-layout .detail-media img {
  object-fit: cover;
}
/* Gallery artwork and screenshots must remain fully visible. */
.page-main #gallery .listing-media img {
  object-fit: contain;
}
/* Placeholder surfaces retain their existing styling in the base stylesheet. */

/* Public Work catalog status: one accessible label per card, with a visual flag
   over the cover. Use logical inset for RTL; keep the same component reusable
   on the detail hero. Status is not a purchase/sale indicator. */
.work-status-flag {
  position: absolute;
  z-index: 2;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 32px);
  min-height: 29px;
  padding: 6px 11px;
  border: 1px solid rgb(233 239 235 / .27);
  border-inline-start: 3px solid var(--work-status-color, #9aa69c);
  background: rgb(3 6 5 / .91);
  color: var(--text);
  box-shadow: 0 5px 17px rgb(0 0 0 / .24);
  font: 10px/1.5 var(--mono);
  letter-spacing: .035em;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.work-status-flag--available { --work-status-color: var(--red); }
.work-status-flag--portfolio { --work-status-color: #aab6ac; }
.work-status-flag--in_progress { --work-status-color: #cba874; }
@media screen and (max-width: 760px) {
  .work-status-flag {
    inset-block-start: 12px;
    inset-inline-start: 12px;
    max-width: calc(100% - 24px);
  }
}
@media (forced-colors: active) {
  .work-status-flag { border-color: CanvasText; background: Canvas; color: CanvasText; }
}