/* ── Job Detail Page Styles ── */

.job-detail-hero { padding: calc(var(--vb-nav-height) + 3rem) 0 2rem; }

.job-hero-inner { display: flex; align-items: flex-start; gap: var(--vb-space-xl); flex-wrap: wrap; }
.job-hero-emoji { font-size: 4rem; flex-shrink: 0; }
.job-hero-content { flex: 1; min-width: 240px; }
.job-hero-title { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: var(--vb-space-sm); }
.job-hero-tagline { font-size: 1.05rem; color: var(--vb-text-secondary); margin-bottom: var(--vb-space-lg); }

.job-hero-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.job-hero-badge {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.9rem; border-radius: 2rem;
  background: var(--vb-glass); border: 1px solid var(--vb-glass-border);
  font-size: 0.82rem; font-weight: 500; color: var(--vb-text-secondary);
}

/* ── Content sections ── */
.job-section { margin-bottom: var(--vb-space-2xl); }
.job-section h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--vb-space-lg); color: var(--vb-primary-light); }

.job-card-glass {
  padding: var(--vb-space-xl);
  border-radius: var(--vb-radius-xl);
  margin-bottom: var(--vb-space-xl);
}

.job-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.job-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.95rem; line-height: 1.6; color: var(--vb-text-secondary);
}
.job-list li::before { content: "\2192"; color: var(--vb-primary-light); flex-shrink: 0; margin-top: 0.05em; }

/* ── Perks grid ── */
.perks-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vb-space-md); }
@media (max-width: 640px) { .perks-detail-grid { grid-template-columns: 1fr; } }

.perk-detail-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: var(--vb-space-md);
  background: var(--vb-glass); border: 1px solid var(--vb-glass-border);
  border-radius: var(--vb-radius-lg);
  font-size: 0.9rem; color: var(--vb-text-secondary); line-height: 1.5;
}
.perk-detail-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ── Skills tags ── */
.job-skill-tag {
  padding: 0.3rem 0.8rem; border-radius: 2rem;
  background: rgba(102,126,234,0.1); border: 1px solid rgba(102,126,234,0.2);
  color: #a5b4fc; font-size: 0.875rem;
}

/* ── Sticky apply bar ── */
.apply-sticky {
  position: sticky; bottom: 1.5rem; z-index: 100;
  text-align: center;
  margin-top: var(--vb-space-2xl);
  padding-bottom: var(--vb-space-3xl);
}

/* ── Related jobs ── */
.related-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vb-space-md); }
@media (max-width: 768px) { .related-jobs { grid-template-columns: 1fr; } }

.related-job-card {
  background: var(--vb-glass); border: 1px solid var(--vb-glass-border);
  border-radius: var(--vb-radius-lg); padding: var(--vb-space-lg);
  text-decoration: none; color: inherit; display: block;
  transition: transform var(--vb-duration) var(--vb-ease), border-color var(--vb-duration) var(--vb-ease);
}
.related-job-card:hover { transform: translateY(-3px); border-color: var(--vb-primary); }
.related-job-card .rj-emoji { font-size: 1.8rem; margin-bottom: var(--vb-space-sm); }
.related-job-card .rj-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
.related-job-card .rj-openings { font-size: 0.78rem; color: var(--vb-text-muted); }

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--vb-text-muted); margin-bottom: var(--vb-space-lg); flex-wrap: wrap; }
.breadcrumb a { color: var(--vb-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--vb-primary-light); }
.breadcrumb span { color: var(--vb-text-muted); }

/* ── Layout ── */
.job-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--vb-space-2xl); align-items: start; }
@media (max-width: 900px) { .job-layout { grid-template-columns: 1fr !important; } }

/* ── Sidebar ── */
.job-sidebar {
  padding: var(--vb-space-xl); border-radius: var(--vb-radius-xl);
  position: sticky; top: calc(var(--vb-nav-height) + 1rem);
}
.job-sidebar-emoji { font-size: 2rem; text-align: center; margin-bottom: var(--vb-space-md); }
.job-sidebar-title { text-align: center; margin-bottom: var(--vb-space-xs); font-size: 1.05rem; }
.job-sidebar-meta { text-align: center; color: var(--vb-text-muted); font-size: 0.85rem; margin-bottom: var(--vb-space-xl); }

/* ── Share section ── */
.job-share-section {
  text-align: center;
  padding: var(--vb-space-2xl) 0;
  max-width: 640px;
  margin: 0 auto;
}
.job-share-section h3 {
  font-size: 1.15rem; font-weight: 700;
  color: var(--vb-text-primary);
  margin-bottom: var(--vb-space-xs);
}
.job-share-section p {
  color: var(--vb-text-muted); font-size: 0.88rem;
  margin-bottom: var(--vb-space-lg);
}

.job-share-grid {
  display: flex; gap: 0.75rem;
  justify-content: center; flex-wrap: wrap;
}

.job-share-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.25rem; border-radius: var(--vb-radius-lg);
  font-size: 0.88rem; font-weight: 600;
  text-decoration: none; color: #fff;
  transition: transform var(--vb-duration) var(--vb-ease), box-shadow var(--vb-duration) var(--vb-ease);
  border: none; cursor: pointer;
}
.job-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.job-share-btn svg { flex-shrink: 0; }

.job-share-btn--linkedin { background: #0A66C2; }
.job-share-btn--linkedin:hover { background: #004182; }
.job-share-btn--x { background: #1d1d1f; border: 1px solid #333; }
.job-share-btn--x:hover { background: #2d2d2f; }
.job-share-btn--whatsapp { background: #25D366; color: #fff; }
.job-share-btn--whatsapp:hover { background: #1ebe57; }
.job-share-btn--email { background: rgba(102,126,234,0.15); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.3); }
.job-share-btn--email:hover { background: rgba(102,126,234,0.25); }

@media (max-width: 640px) {
  .job-share-grid { flex-direction: column; align-items: stretch; }
  .job-share-btn { justify-content: center; }
}