/* Career Advice article content styles */
/* Auto-extracted from article HTML files */

/* ── Cards ── */
    .card {
  background: #fff;
      border: 1px solid var(--js-gray-200);
      border-radius: var(--radius-card);
      padding: 1.75rem;
      margin: 1.75rem 0;
      box-shadow: var(--shadow-sm);
}

/* ── Highlight Box ── */
    .highlight-box {
  background: #EFF6FF;
      border-left: 4px solid var(--js-primary);
      border-radius: 0 12px 12px 0;
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
}

.highlight-box p {
  margin-bottom: 0; color: var(--js-gray-700);
}

.highlight-box strong {
  color: var(--js-primary);
}

.warning-box {
  background: #FFFBEB;
      border-left: 4px solid var(--js-warning);
      border-radius: 0 12px 12px 0;
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
}

.warning-box p {
  margin-bottom: 0;
}

.success-box {
  background: #F0FDF4;
      border-left: 4px solid var(--js-success);
      border-radius: 0 12px 12px 0;
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
}

.success-box p {
  margin-bottom: 0;
}

/* ── Checklist ── */
    .checklist {
  list-style: none; padding: 0;
}

.checklist li {
  padding: 0.55rem 0 0.55rem 2rem;
      border-bottom: 1px solid var(--js-gray-100);
      position: relative;
      color: var(--js-gray-700);
      font-size: 0.95rem;
}

.checklist li:last-child {
  border-bottom: none;
}

.checklist li::before {
  content: '✓';
      position: absolute;
      left: 0;
      color: var(--js-success);
      font-weight: 700;
}

/* ── Do / Don't ── */
    .do-dont {
  display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1.5rem 0;
}

.do-panel, .dont-panel {
  border-radius: 12px;
      padding: 1.25rem;
}

.do-panel {
  background: #F0FDF4; border: 1px solid #BBF7D0;
}

.dont-panel {
  background: #FEF2F2; border: 1px solid #FECACA;
}

.do-panel h4 {
  color: var(--js-success); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem;
}

.dont-panel h4 {
  color: var(--js-danger); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem;
}

.do-panel ul, .dont-panel ul {
  list-style: none; padding: 0;
}

.do-panel li, .dont-panel li {
  font-size: 0.9rem; padding: 0.3rem 0 0.3rem 1.4rem; position: relative; color: var(--js-gray-700);
}

.do-panel li::before {
  content: '✓'; position: absolute; left: 0; color: var(--js-success); font-weight: 700;
}

.dont-panel li::before {
  content: '✗'; position: absolute; left: 0; color: var(--js-danger); font-weight: 700;
}

/* ── Section Template ── */
    .cv-section-example {
  background: var(--js-gray-50);
      border: 1px solid var(--js-gray-200);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin: 1rem 0;
      font-size: 0.9rem;
}

.cv-section-example .ex-label {
  font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--js-primary);
      margin-bottom: 0.5rem;
}

.cv-section-example .ex-title {
  font-weight: 700;
      color: var(--js-secondary);
      font-size: 1rem;
}

.cv-section-example .ex-sub {
  color: var(--js-gray-500);
      font-size: 0.85rem;
      margin-bottom: 0.5rem;
}

.cv-section-example p {
  font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--js-gray-600);
}

.fact-row {
  display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.6rem 0;
      border-bottom: 1px solid var(--js-gray-100);
      font-size: 0.85rem;
}

.fact-row:last-child {
  border-bottom: none;
}

.fact-row .label {
  color: var(--js-gray-500);
}

.fact-row .value {
  font-weight: 700; color: var(--js-secondary);
}

/* ── Stat strip ── */
    .stat-strip {
  display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin: 2rem 0;
}

.stat-item {
  background: #fff;
      border: 1px solid var(--js-gray-200);
      border-radius: 12px;
      padding: 1.25rem;
      text-align: center;
      box-shadow: var(--shadow-sm);
}

.stat-item .num {
  font-size: 2rem;
      font-weight: 800;
      color: var(--js-primary);
      line-height: 1;
      display: block;
}

.stat-item .desc {
  font-size: 0.8rem; color: var(--js-gray-500); margin-top: 0.35rem;
}

/* ── Step indicator ── */
    .steps {
  counter-reset: step;
}

.step {
  display: flex;
      gap: 1.25rem;
      margin-bottom: 1.75rem;
      align-items: flex-start;
}

.step-num {
  counter-increment: step;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      background: var(--js-primary);
      color: #fff;
      font-weight: 800;
      font-size: 0.9rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.15rem;
}

.step-content h3 {
  margin-top: 0; font-size: 1.05rem;
}

/* ── Related articles ── */
    .related-grid {
  display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin: 1.5rem 0;
}

.related-card {
  background: #fff;
      border: 1px solid var(--js-gray-200);
      border-radius: 12px;
      padding: 1.25rem;
      text-decoration: none;
      transition: box-shadow var(--transition), border-color var(--transition);
}

.related-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--js-primary);
}

.related-card .tag {
  font-size: 0.7rem; font-weight: 700; color: var(--js-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem;
}

.related-card h5 {
  font-size: 0.95rem; color: var(--js-secondary); line-height: 1.4; margin-bottom: 0.4rem;
}

.related-card .read {
  font-size: 0.8rem; color: var(--js-gray-400);
}

.card {
  background:#fff;border:1px solid var(--js-gray-200);border-radius:var(--radius-card);padding:1.75rem;margin:1.75rem 0;box-shadow:var(--shadow-sm)
}

.highlight-box {
  background:#EFF6FF;border-left:4px solid var(--js-primary);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.5rem 0
}

.highlight-box p {
  margin-bottom:0;color:var(--js-gray-700)
}

.warning-box {
  background:#FFFBEB;border-left:4px solid var(--js-warning);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.5rem 0
}

.warning-box p {
  margin-bottom:0
}

.success-box {
  background:#F0FDF4;border-left:4px solid var(--js-success);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.5rem 0
}

.success-box p {
  margin-bottom:0
}

.checklist {
  list-style:none;padding:0
}

.checklist li {
  padding:.55rem 0 .55rem 2rem;border-bottom:1px solid var(--js-gray-100);position:relative;color:var(--js-gray-700);font-size:.95rem
}

.checklist li:last-child {
  border-bottom:none
}

.checklist li::before {
  content:'✓';position:absolute;left:0;color:var(--js-success);font-weight:700
}

.do-dont {
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0
}

.do-panel,.dont-panel {
  border-radius:12px;padding:1.25rem
}

.do-panel {
  background:#F0FDF4;border:1px solid #BBF7D0
}

.dont-panel {
  background:#FEF2F2;border:1px solid #FECACA
}

.do-panel h4 {
  color:var(--js-success);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem
}

.dont-panel h4 {
  color:var(--js-danger);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem
}

.do-panel ul,.dont-panel ul {
  list-style:none;padding:0
}

.do-panel li,.dont-panel li {
  font-size:.9rem;padding:.3rem 0 .3rem 1.4rem;position:relative;color:var(--js-gray-700)
}

.do-panel li::before {
  content:'✓';position:absolute;left:0;color:var(--js-success);font-weight:700
}

.dont-panel li::before {
  content:'✗';position:absolute;left:0;color:var(--js-danger);font-weight:700
}

.stat-strip {
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0
}

.stat-item {
  background:#fff;border:1px solid var(--js-gray-200);border-radius:12px;padding:1.25rem;text-align:center;box-shadow:var(--shadow-sm)
}

.stat-item .num {
  font-size:2rem;font-weight:800;color:var(--js-primary);line-height:1;display:block
}

.stat-item .desc {
  font-size:.8rem;color:var(--js-gray-500);margin-top:.35rem
}

.steps {
  counter-reset:step
}

.step {
  display:flex;gap:1.25rem;margin-bottom:1.75rem;align-items:flex-start
}

.step-num {
  counter-increment:step;flex-shrink:0;width:36px;height:36px;background:var(--js-primary);color:#fff;font-weight:800;font-size:.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:.15rem
}

.step-content h3 {
  margin-top:0;font-size:1.05rem
}

.fact-row {
  display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--js-gray-100);font-size:.85rem
}

.fact-row:last-child {
  border-bottom:none
}

.fact-row .label {
  color:var(--js-gray-500)
}

.fact-row .value {
  font-weight:700;color:var(--js-secondary)
}

.related-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1.5rem 0
}

.related-card {
  background:#fff;border:1px solid var(--js-gray-200);border-radius:12px;padding:1.25rem;text-decoration:none;transition:box-shadow var(--transition),border-color var(--transition)
}

.related-card:hover {
  box-shadow:var(--shadow-md);border-color:var(--js-primary)
}

.related-card .tag {
  font-size:.7rem;font-weight:700;color:var(--js-primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem
}

.related-card h5 {
  font-size:.95rem;color:var(--js-secondary);line-height:1.4;margin-bottom:.4rem
}

.related-card .read {
  font-size:.8rem;color:var(--js-gray-400)
}

.cv-section-example {
  background:var(--js-gray-50);border:1px solid var(--js-gray-200);border-radius:12px;padding:1.25rem 1.5rem;margin:1rem 0;font-size:.9rem
}

.cv-section-example .ex-label {
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--js-primary);margin-bottom:.5rem
}

.cv-section-example .ex-title {
  font-weight:700;color:var(--js-secondary);font-size:1rem
}

.cv-section-example .ex-sub {
  color:var(--js-gray-500);font-size:.85rem;margin-bottom:.5rem
}

.icon-card-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0
}

.icon-card {
  background:#fff;border:1px solid var(--js-gray-200);border-radius:12px;padding:1.25rem;box-shadow:var(--shadow-sm)
}

.icon-card .ic-icon {
  font-size:1.75rem;margin-bottom:.5rem
}

.icon-card h4 {
  font-size:.95rem;font-weight:700;color:var(--js-secondary);margin-bottom:.35rem
}

.icon-card p {
  font-size:.85rem;color:var(--js-gray-600);margin:0
}

.passport-tier {
  display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:12px;margin-bottom:.75rem;border:1px solid
}

.tier-platinum {
  background:#F5F3FF;border-color:#DDD6FE
}

.tier-gold {
  background:#FFFBEB;border-color:#FDE68A
}

.tier-silver {
  background:#F8FAFC;border-color:#CBD5E1
}

.tier-bronze {
  background:#FEF3C7;border-color:#FCD34D
}

.tier-badge {
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;flex-shrink:0
}

.badge-plat {
  background:#7C3AED;color:#fff
}

.badge-gold {
  background:#D97706;color:#fff
}

.badge-silv {
  background:#64748B;color:#fff
}

.badge-bron {
  background:#B45309;color:#fff
}

.tier-info h5 {
  font-size:.95rem;font-weight:700;margin-bottom:.15rem
}

.tier-info p {
  font-size:.82rem;color:var(--js-gray-500);margin:0
}

.industry-card {
  background:#fff;border:1px solid var(--js-gray-200);border-radius:12px;padding:1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)
}

.industry-card h3 {
  font-size:1rem;font-weight:700;color:var(--js-secondary);margin:0 0 .5rem
}

.industry-card .demand {
  display:inline-block;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem
}

.demand-high {
  background:#DCFCE7;color:#166534
}

.demand-medium {
  background:#FEF3C7;color:#92400E
}

.salary-bar {
  background:var(--js-gray-100);border-radius:999px;height:6px;margin:.5rem 0;position:relative;overflow:hidden
}

.salary-fill {
  height:100%;border-radius:999px;background:linear-gradient(90deg,var(--js-primary),var(--js-accent))
}