/* ==========================================================================
   ZedHome — Company presentation shared by the employer profile and job pages
   The photo/initials tile, the overlapping header card, job rows and the
   last-date-to-apply chip. A thin layer over tokens.css/components.css (both
   left untouched); nothing here introduces a colour that is not a token.
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Photo / initials tile -------------------------------------------------------------- */
.co-avatar-wrap { position: relative; display: inline-flex; flex: none; justify-self: start; align-self: center; }
.co-avatar-wrap .co-avatar {
  display: flex; align-items: center; justify-content: center; width: 116px; height: 116px; overflow: hidden;
  border-radius: 22px; background: var(--color-paper); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(30, 27, 26, 0.06), 0 6px 16px rgba(30, 27, 26, 0.06);
}
.co-avatar-wrap .co-avatar img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.co-avatar-wrap .co-avatar--mono { background: var(--color-brand-50); color: var(--color-brand-dark); font-family: var(--font-display); font-size: 2.375rem; font-weight: 700; letter-spacing: 0.02em; }
.co-avatar-wrap .co-avatar--md { width: 56px; height: 56px; border-radius: 14px; font-size: 1.1875rem; box-shadow: none; }
.co-avatar-wrap .co-avatar--sm { width: 44px; height: 44px; border-radius: 12px; font-size: 0.9375rem; box-shadow: none; }
.co-avatar-wrap .co-avatar__check {
  margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none;
  position: absolute; right: -7px; bottom: -7px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-verified); color: #fff;
}
.co-avatar-wrap .co-avatar__check svg { width: 13px; height: 13px; stroke-width: 3.2; }
.co-avatar-wrap.co-avatar-wrap--md .co-avatar__check, .co-avatar-wrap.co-avatar-wrap--sm .co-avatar__check { width: 20px; height: 20px; right: -5px; bottom: -5px; border-width: 2px; }
.co-avatar-wrap.co-avatar-wrap--md .co-avatar__check svg, .co-avatar-wrap.co-avatar-wrap--sm .co-avatar__check svg { width: 10px; height: 10px; }

/* ---- Header card that overlaps the banner ------------------------------------------------- */
.co-head {
  position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  margin-top: -64px; padding: 28px 32px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
.co-head__title { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.0625rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.co-head__sub { margin: 8px 0 0; font-size: 1rem; font-weight: 700; color: var(--color-brand-dark); }
.co-head__sub a { color: inherit; text-decoration: none; }
.co-head__sub a:hover { text-decoration: underline; }
.co-head__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.875rem; font-weight: 600; color: var(--color-text-soft); }
.co-head__meta li { display: inline-flex; align-items: center; gap: 7px; }
.co-head__meta svg { width: 16px; height: 16px; flex: none; }
.co-head__meta a { color: inherit; text-decoration: none; }
.co-head__meta a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.co-head__meta .is-verified { color: var(--color-verified); }
.co-head__meta .is-soon { color: var(--color-brand-dark); }
.co-head__meta .is-closed { color: var(--color-danger); }
.co-head__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.co-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: var(--radius-sm); background: var(--color-surface);
  font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--color-ink); cursor: pointer;
  transition: border-color var(--dur-fast, 120ms) var(--ease-standard, ease), background-color var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.co-share:hover { border-color: var(--color-ink); background: var(--color-paper); }
.co-share svg { width: 16px; height: 16px; }
.co-share.is-done { border-color: var(--color-verified); color: var(--color-verified); }

/* ---- Last-date-to-apply chip -------------------------------------------------------------- */
.job-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.55; white-space: nowrap; }
.job-chip--open { background: var(--color-paper); color: var(--color-text-soft); border: 1px solid var(--color-border); padding: 1px 9px; }
.job-chip--soon, .job-chip--today { background: var(--color-brand-50); color: var(--color-brand-dark); }
.job-chip--closed { background: var(--color-danger-light); color: #9E2D22; }
/* on the job page the "open" chip is a positive signal, so it keeps the green treatment there */
.job-page .job-chip--open { background: var(--color-verified-light); color: #14603A; border: 0; padding: 2px 10px; }

/* ---- Job rows -------------------------------------------------------------------------------- */
.job-list { display: grid; gap: 10px; }
.job-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 8px 18px; padding: 18px 20px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast, 120ms) var(--ease-standard, ease), box-shadow var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.job-row:hover { border-color: var(--color-brand); box-shadow: var(--shadow-card); }
.job-row:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.job-row[hidden] { display: none; }
.job-row__main { min-width: 0; }
.job-row__title { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--color-ink); overflow-wrap: anywhere; }
.job-row:hover .job-row__title { color: var(--color-brand-dark); }
.job-row__company { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: var(--color-brand-dark); }
.job-row__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); }
.job-row__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.job-row__meta svg { width: 14px; height: 14px; }
.job-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; }
.job-row__salary { font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.job-row__go { width: 18px; height: 18px; color: var(--color-text-soft); transition: transform var(--dur-fast, 120ms) var(--ease-standard, ease), color var(--dur-fast, 120ms) var(--ease-standard, ease); }
.job-row:hover .job-row__go { color: var(--color-brand-dark); transform: translateX(3px); }

/* ---- Smaller screens ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .co-head { grid-template-columns: auto minmax(0, 1fr); gap: 20px 22px; padding: 24px; }
  .co-head__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .co-head { grid-template-columns: 1fr; margin-top: -48px; padding: 22px 20px; gap: 16px; text-align: left; }
  .co-avatar-wrap .co-avatar { width: 88px; height: 88px; border-radius: 18px; font-size: 1.875rem; }
  .co-avatar-wrap .co-avatar--md { width: 56px; height: 56px; border-radius: 14px; font-size: 1.1875rem; }
  .co-avatar-wrap .co-avatar--sm { width: 44px; height: 44px; border-radius: 12px; font-size: 0.9375rem; }
  .co-head__actions .btn, .co-head__actions .co-share { flex: 1 1 0; justify-content: center; }
  .job-row { grid-template-columns: minmax(0, 1fr) 18px; padding: 16px; }
  .job-row__side { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 8px 12px; }
  .job-row__go { grid-column: 2; grid-row: 1; align-self: start; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .job-row, .job-row__go, .co-share { transition: none; }
  .job-row:hover .job-row__go { transform: none; }
}