/* The order card, as the mockup names it: "Компонент - Карточка заказа".
   Photo, urgency, title, city, price, then views and responses.

   Shared because more than one page shows it: the home page rails, and the similar-orders block
   closing an order's detail page. It used to live inside home-desktop.css, which meant the board
   could not use it without either loading the whole home stylesheet or keeping a second copy --
   and a second copy of a card is a pair of cards that drift apart.

   What belongs here is the card itself. The grid that arranges several of them does not: the home
   rail (.exp-row) and the similar block (.orders-similar__grid) step down at different widths,
   because one sits in a full-bleed row and the other under a detail page. Each keeps its own. */

.exp-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.exp-card:hover {
  box-shadow: var(--shadow-md);
  border-color: oklch(0.85 0 0);
}

.oc-photo {
  display: block;
  width: 100%;
  height: 160px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}

.oc-photo-wrap {
  position: relative;
}

.oc-photo--empty-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.oc-photo--empty-slot .slot-icon {
  width: 28px;
  height: 28px;
  opacity: 0.55;
}

.oc-photo--empty-slot .cap {
  font-size: 13px;
  font-weight: 500;
}

/* A real photograph fills the same box the placeholder occupies. `cover` rather than `contain`:
   a site photo is rarely the tile's aspect ratio, and letterboxing one in a grid of four reads
   as a broken image. The size comes from `.oc-photo`, which this element also carries, so the
   narrow-viewport override that shortens the frame keeps photo and placeholder the same height;
   restating it here would silently win against that override. Only `width` is set, to override
   the intrinsic width Next/Image writes onto the element. */
.oc-photo--image {
  object-fit: cover;
  width: 100%;
}

.oc-urgent {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  background: var(--destructive);
  color: #fff;
  border-color: var(--destructive);
}

.oc-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
}

.oc-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-cat {
  font-size: var(--text-sm);
  font-weight: 600;
}

.oc-cat-row .sb-badge {
  margin-left: auto;
}

.oc-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 2px;
}

.oc-loc i,
.oc-loc svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.oc-divider {
  height: 1px;
  background: oklch(0.9 0 0);
  margin: 11px -16px 10px;
}

/* Two lines, then ellipsis, with the height reserved either way: titles vary from four words to
   twenty, and without the reservation the cards in a row stop lining up. */
.oc-title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.oc-price {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
}

.oc-foot {
  display: flex;
  align-items: center;
  gap: 18px;
}

.oc-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.oc-foot i,
.oc-foot svg {
  width: 13px;
  height: 13px;
}

/* On a page that swaps screens in place the card is a button rather than a link, so the control
   chrome has to be stripped for it to read as the same card. `white-space: normal` undoes the
   `nowrap` the button primitive sets for labels: a card holds a wrapping title, not a label. */
.oc-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  /* Border and background stay: they come from the card, not from the control, and dropping them
     left the button form 2px shorter than the same card rendered as a link. */
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  /* The primitive centres and shrinks its children, which is right for a label and wrong for a
     card: it left the photo 89px wide in the middle of a 312px card. Stretch puts every row back
     on the card's full width. */
  align-items: stretch;
  justify-content: flex-start;
}