/* ==========================================================================
   Mindful Careers — careers.css
   Bổ sung trên nền main.css (design system Mindful Holdings)
   ISSHO accent chỉ dùng trong khu vực [data-brand="issho"]
   ========================================================================== */

:root {
  /* ISSHO palette (Issho_Color_Book_v1) */
  --issho-light: #F8F1E6;
  --issho-tan: #EDD8BA;
  --issho-dark: #5A2B0E;
  --issho-ink: #2E2217;
  --issho-red: #921A22;
  --issho-gold: #D5A247;
}

/* ---------- Nav trên nền sáng (hero-cream): đảo màu khi chưa cuộn ---------- */
body:has(.hero-cream) .nav:not(.is-solid) .nav-menu a { color: var(--color-charcoal); }
body:has(.hero-cream) .nav:not(.is-solid) .nav-menu a:hover,
body:has(.hero-cream) .nav:not(.is-solid) .nav-menu a.active { color: var(--color-forest-deep); }
body:has(.hero-cream) .nav:not(.is-solid) .nav-logo .logo-light { display: none; }
body:has(.hero-cream) .nav:not(.is-solid) .nav-logo .logo-dark { display: block; }
body:has(.hero-cream) .nav:not(.is-solid) .nav-logo-tag { border-color: var(--color-charcoal); color: var(--color-charcoal); }
body:has(.hero-cream) .nav:not(.is-solid) .nav-toggle span { background: var(--color-charcoal); }

/* ---------- Nav logo tag: chữ "Career" sau logo ---------- */
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-tag {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--color-cream);
  color: var(--color-cream);
  border-radius: 999px;
  white-space: nowrap;
  opacity: .85;
}
.nav.is-solid .nav-logo-tag {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}
@media (max-width: 480px) { .nav-logo-tag { display: none; } }

/* ---------- Button alias: .btn-ghost (outline theo nền) ---------- */
.btn-ghost { background: transparent; color: var(--color-forest-deep); border-color: var(--color-forest-deep); }
.btn-ghost:hover { background: var(--color-forest-deep); color: var(--color-cream); }
.section-dark .btn-ghost, .hero:not(.hero-cream) .btn-ghost, .issho-hero .btn-ghost {
  color: var(--color-cream); border-color: var(--color-cream);
}
.section-dark .btn-ghost:hover, .hero:not(.hero-cream) .btn-ghost:hover, .issho-hero .btn-ghost:hover {
  background: var(--color-cream); color: var(--color-forest-deep);
}

/* ---------- Job filter bar ---------- */
.job-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.job-filters .chip {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-charcoal);
  background: transparent;
  border: 1px solid var(--color-charcoal-12);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.job-filters .chip:hover { border-color: var(--color-forest-deep); }
.job-filters .chip.is-active {
  background: var(--color-forest-deep);
  border-color: var(--color-forest-deep);
  color: var(--color-cream);
}
.job-filters .chip .count { opacity: .55; margin-left: 4px; }

/* ---------- Job card ---------- */
.job-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 960px;
  margin: 0 auto;
}
.job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--color-cream);
  border: 1px solid var(--color-charcoal-12);
  border-left: 4px solid var(--color-warm-amber);
  border-radius: 12px;
  padding: var(--space-5);
  transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.job-card:hover {
  box-shadow: 0 12px 32px rgba(28, 61, 40, 0.12);
  transform: translateY(-4px);
}
.job-card[data-brand="issho"] { border-left-color: var(--issho-red); }
.job-card .job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.job-card .job-meta .eyebrow { margin: 0; }
.job-card .job-meta .sep { opacity: .4; }
.job-card h3 { margin: 0 0 var(--space-2); }
.job-card h3 a { color: inherit; text-decoration: none; }
.job-card h3 a:hover { color: var(--color-forest-mid); }
.job-card .job-summary {
  margin: 0;
  color: var(--color-charcoal-60);
  font-size: var(--fs-caption);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-card .job-cta { display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 700px) {
  .job-card { grid-template-columns: 1fr; }
  .job-card .job-cta { flex-direction: row; }
}

/* ---------- Job detail ---------- */
.job-detail-head .quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.4;
  color: var(--color-forest-deep);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-5);
  margin: var(--space-5) 0;
}
.job-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  background: var(--color-cream-dim);
  border-radius: 12px;
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.job-facts .fact .label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-charcoal-60);
  display: block;
  margin-bottom: 4px;
}
.job-facts .fact .value { font-weight: var(--fw-medium); font-size: var(--fs-caption); }

.job-section { margin-bottom: var(--space-7); }
.job-section h2 { margin-bottom: var(--space-4); }
.job-section ul.job-items { list-style: none; padding: 0; margin: 0; }
.job-section ul.job-items li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--space-2);
  color: var(--color-charcoal);
  line-height: 1.65;
  font-size: var(--fs-caption);
}
.job-section ul.job-items li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}
.job-section ul.job-items li.group {
  padding-left: 0;
  margin-top: var(--space-5);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-forest-deep);
}
.job-section ul.job-items li.group::before { display: none; }
.job-section ul.job-items li.sub {
  padding-left: 0;
  margin-top: var(--space-4);
  font-weight: var(--fw-medium);
  color: var(--color-forest-deep);
}
.job-section ul.job-items li.sub::before { display: none; }

/* ---------- ISSHO page ---------- */
.issho-hero {
  position: relative;
  background: var(--issho-ink);
  color: var(--issho-light);
  overflow: hidden;
}
.issho-hero .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .38;
}
.issho-hero .container { position: relative; }
.issho-hero h1, .issho-hero h2 { color: var(--issho-light); }
.issho-hero .eyebrow { color: var(--issho-gold); }
.issho-hero .sub { color: rgba(248, 241, 230, 0.8); }

section[data-brand="issho"] .eyebrow { color: var(--issho-red); }
.issho-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.issho-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 700px) { .issho-gallery { grid-template-columns: 1fr; } }

.issho-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .issho-values { grid-template-columns: 1fr; } }
.issho-value {
  background: var(--issho-light);
  border: 1px solid rgba(46, 34, 23, 0.1);
  border-top: 3px solid var(--issho-red);
  border-radius: 12px;
  padding: var(--space-5);
}
.issho-value h3 { color: var(--issho-ink); margin: 0 0 var(--space-2); }
.issho-value p { margin: 0; color: rgba(46, 34, 23, 0.72); font-size: var(--fs-caption); line-height: 1.65; }

/* ---------- Stats band ---------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
  text-align: center;
}
.stats-band .stat .num {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-gold);
  display: block;
}
.stats-band .stat .label { color: var(--color-cream-70); font-size: var(--fs-caption); }

/* ---------- Empty / loading state ---------- */
.jobs-status {
  text-align: center;
  color: var(--color-charcoal-60);
  padding: var(--space-7) 0;
}

/* ---------- Brand chip on cards ---------- */
.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.brand-tag .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }