/* Representative city photography for market cards and the current market leader.
   Unknown live cities keep the tone gradients from styles.css as a fallback. */

.market[data-market-city='Galați'],
.leader[data-market-city='Galați'] {
  --market-photo: url('https://images.unsplash.com/photo-1664912879009-fcf1fb932009?auto=format&fit=crop&w=1200&q=78');
}

.market[data-market-city='Sibiu'],
.leader[data-market-city='Sibiu'] {
  --market-photo: url('https://images.unsplash.com/photo-1661023942644-e0efa4427263?auto=format&fit=crop&w=1200&q=78');
}

.market[data-market-city='Brașov'],
.leader[data-market-city='Brașov'] {
  --market-photo: url('https://images.unsplash.com/photo-1763900933046-001f2c67ae93?auto=format&fit=crop&w=1200&q=78');
  --market-photo-position: center 46%;
}

.market[data-market-city='Constanța'],
.leader[data-market-city='Constanța'] {
  --market-photo: url('https://images.unsplash.com/photo-1723010697619-61ceda06913f?auto=format&fit=crop&w=1200&q=78');
  --market-photo-position: center 52%;
}

.market[data-market-city='București'],
.leader[data-market-city='București'] {
  --market-photo: url('https://images.unsplash.com/photo-1600610513320-664e2c35ba67?auto=format&fit=crop&w=1200&q=78');
}

.market[data-market-city='Cluj'],
.market[data-market-city='Cluj-Napoca'],
.leader[data-market-city='Cluj'],
.leader[data-market-city='Cluj-Napoca'] {
  --market-photo: url('https://images.unsplash.com/photo-1570960107886-fe35233adb3f?auto=format&fit=crop&w=1200&q=78');
  --market-photo-position: center 48%;
}

.marketTop {
  background-color: #183958;
  background-image: var(--market-photo);
  background-position: var(--market-photo-position, center);
  background-repeat: no-repeat;
  background-size: cover;
}

.marketTop::after {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(4, 15, 31, 0.18) 0%,
    rgba(4, 15, 31, 0.08) 36%,
    rgba(4, 15, 31, 0.86) 100%
  );
}

.leader[data-market-city] {
  background-image: var(--market-photo);
  background-position: var(--market-photo-position, center);
  background-repeat: no-repeat;
  background-size: cover;
}

.leader[data-market-city]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  background: linear-gradient(
    180deg,
    rgba(4, 15, 31, 0.2) 0%,
    rgba(4, 15, 31, 0.38) 42%,
    rgba(4, 15, 31, 0.88) 100%
  );
}

.leader[data-market-city]::after {
  display: none;
}

.leader[data-market-city] > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .marketTop,
  .leader[data-market-city] {
    background-position: center;
  }
}

/* Mobile-only density overrides. Desktop presentation is intentionally unchanged. */
@media (max-width: 760px) {
  .marketGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .market {
    border-radius: 12px;
  }

  .marketTop {
    height: 104px;
    padding: 8px;
  }

  .rank {
    max-width: calc(100% - 94px);
    padding: 4px 5px;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scoreBadge {
    top: 7px;
    right: 7px;
    gap: 3px;
    padding: 4px 5px;
    font-size: 7px;
    border-radius: 6px;
  }

  .scoreBadge b {
    font-size: 12px;
  }

  .city {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .city strong {
    overflow: hidden;
    font-size: 18px;
    letter-spacing: -0.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .city small {
    margin-top: 3px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric {
    padding: 8px 7px;
  }

  .metric span {
    font-size: 7px;
  }

  .metric b {
    margin-top: 3px;
    font-size: 11px;
  }

  .metric:first-child b {
    font-size: 12px;
  }

  .tags {
    display: none;
  }

  .jobsBox {
    border-radius: 14px;
  }

  .jobRow {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 0.55fr) 34px 48px;
    gap: 8px;
    padding: 11px 12px;
  }

  .jobRow > :not(:first-child) {
    min-width: 0;
    justify-content: flex-start;
  }

  .jobRow > div:first-child {
    grid-row: 1;
    grid-column: 1 / 3;
    min-width: 0;
  }

  .jobRow > div:nth-child(2) {
    grid-row: 1;
    grid-column: 3 / -1;
    justify-content: flex-end;
    text-align: right;
  }

  .jobRow > div:nth-child(3) {
    grid-row: 2;
    grid-column: 1;
  }

  .jobRow > div:nth-child(4) {
    grid-row: 2;
    grid-column: 2;
  }

  .jobRow > div:nth-child(5) {
    grid-row: 2;
    grid-column: 3;
  }

  .jobRow > div:nth-child(6) {
    grid-row: 2;
    grid-column: 4;
    justify-content: flex-end;
  }

  .jobRow > div:nth-child(3),
  .jobRow > div:nth-child(4),
  .jobRow > div:nth-child(5) {
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
  }

  .jobRow > div:nth-child(3)::before,
  .jobRow > div:nth-child(4)::before,
  .jobRow > div:nth-child(5)::before {
    color: #8592a3;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.35px;
    text-transform: uppercase;
  }

  .jobRow > div:nth-child(3)::before {
    content: 'Cazare';
  }

  .jobRow > div:nth-child(4)::before {
    content: 'Program';
  }

  .jobRow > div:nth-child(5)::before {
    content: 'Job Score';
  }

  .jobTitle {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jobMeta {
    margin-top: 3px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .salary {
    font-size: 12px;
    line-height: 1.2;
  }

  .pill {
    padding: 4px 7px;
    font-size: 9px;
  }

  .jobRow strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .score {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .view {
    padding: 7px 8px;
    font-size: 10px;
  }
}