/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Job Header Component Styles === */
/* Reusable component for avatar + title + metadata pattern */
/* Mobile-first approach */

.job-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-items: start;
}

.job-header .profile-avatar-link {
  grid-row: 1 / 3;
  grid-column: 1;
  display: flex;
  flex-shrink: 0;
  align-self: center;
}

/* When no avatar, content should span full width */
.job-header:not(:has(.profile-avatar-link)) {
  grid-template-columns: 1fr;
}

.job-header:not(:has(.profile-avatar-link)) .job-header__title-row,
.job-header:not(:has(.profile-avatar-link)) .job-header__meta {
  grid-column: 1;
}

.job-header__title-row {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.job-header__title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: 0.1rem;
}

.job-header__title--truncate {
  overflow-x: clip;
  overflow-y: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-header__meta {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  min-width: 0;
}

.job-header__meta-item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.job-header__meta-item__text {
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-header__meta a.job-header__meta-item {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.job-header__meta a.job-header__meta-item:hover {
  color: var(--color-pink);
}

.job-header__meta svg {
  flex-shrink: 0;
}

.job-header__status {
  flex-shrink: 0;
}

/* Desktop-only status badge variant */
.job-header__status.desktop-only {
  display: none;
}

/* Desktop styles */
@media (min-width: 821px) {
  .job-header__title {
    font-size: var(--font-size-lg);
    margin-bottom: 0.15rem;
  }

  .job-header__meta {
    font-size: var(--font-size-sm);
    flex-wrap: nowrap;
    gap: 0.85rem;
  }

  .job-header__meta-item {
    flex-shrink: 1;
    gap: 0.25rem;
  }

  /* Show desktop-only status badge on desktop */
  .job-header__status.desktop-only {
    display: block;
  }
}