/* tutor_jobs.css — Tuition Job Board (public post/browse/detail pages).
   Sits alongside tutor_public.css on the same mkt-* design system; kept
   separate because job cards are a left-aligned text-dense layout
   (title/meta/budget), unlike .mkt-tutor-card's centered avatar layout. */

.mkt-job-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:768px){ .mkt-job-grid{grid-template-columns:repeat(2,1fr);} }

.mkt-job-card{
  display:block; text-align:left; padding:22px 24px; margin-top:5px;
  border:1px solid var(--mkt-border,#e5e7eb); border-radius:14px;
  background:var(--mkt-surface,#fff); transition:border-color .2s, box-shadow .2s, transform .2s;
}
/* box-shadow ring, not just border-color, for the hover highlight -- a 1px
   border can partially vanish on the transformed (translateY) edge due to
   subpixel rendering, most visible on the card's top edge. The ring stays
   crisp regardless of that subpixel shift. */
.mkt-job-card:hover{
  border-color:var(--mkt-primary);
  box-shadow:0 0 0 1px var(--mkt-primary);
  transform:translateY(-2px);
}
.mkt-job-card h4{font-size:16.5px; margin-bottom:8px;}
.mkt-job-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.mkt-job-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--mkt-primary-soft,rgba(71,178,228,.12)); color:var(--mkt-primary);
}
.mkt-job-badge .material-symbols-outlined{font-size:14px;}
.mkt-job-card-closed{opacity:.7;}
.mkt-job-badge-closed{background:var(--color-danger-bg); color:var(--color-danger-text); margin:10px; vertical-align:middle;}
.mkt-job-budget{font-size:13.5px; font-weight:700; color:var(--mkt-on-surface,#1f2937);}
.mkt-job-desc{font-size:13.5px; color:var(--mkt-on-surface-variant); margin:8px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mkt-job-posted{font-size:12px; color:var(--mkt-on-surface-variant); margin-top:10px;}

.mkt-job-detail-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:960px){ .mkt-job-detail-grid{grid-template-columns:2fr 1fr;} }
.mkt-job-detail-body{white-space:pre-line; line-height:1.7;}
.mkt-job-related-pills{margin:20px 0;}
.mkt-job-related-pills-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--mkt-on-surface-variant); font-weight:700; margin:0 0 20px;}
.mkt-pill-list{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding:0;}
.mkt-pill{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:600;
  padding:5px 12px; border-radius:999px; text-decoration:none;
  background:var(--mkt-primary-soft,rgba(71,178,228,.12)); color:var(--mkt-primary);
  transition:background .15s ease;
}
.mkt-pill:hover, .mkt-pill:focus-visible{background:var(--mkt-primary); color:#fff;}
.mkt-pill-similar{
  background:transparent; border:1px dashed var(--mkt-border,#e5e7eb);
  color:var(--mkt-on-surface-variant);
}
.mkt-pill-similar:hover, .mkt-pill-similar:focus-visible{
  background:var(--mkt-surface,#fff); border-color:var(--mkt-on-surface-variant); color:var(--mkt-on-surface-variant);
}
.mkt-job-sidebar{
  border:1px solid var(--mkt-border,#e5e7eb); border-radius:14px;
  padding:22px 24px; align-self:start; background:var(--mkt-surface,#fff);
}
.mkt-job-sidebar dl{margin:0;}
.mkt-job-sidebar dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--mkt-on-surface-variant); font-weight:700; margin-top:14px;}
.mkt-job-sidebar dt:first-child{margin-top:0;}
.mkt-job-sidebar dd{margin:2px 0 0; font-size:14px; font-weight:600;}

.mkt-job-privacy-note{
  font-size:12.5px; color:var(--mkt-on-surface-variant); margin-top:14px;
  padding-top:14px; border-top:1px solid var(--mkt-border,#e5e7eb);
}

/* Parent/student panel on the job detail page -- deliberately visually
   distinct (soft-tinted card, not the plain-bordered tutor sidebar) so a
   Google visitor who isn't a tutor can tell within a glance that a second,
   different CTA exists for them. See docs review: job pages are indexed
   and can surface for parent-intent searches, but had no contextual path
   for that audience -- only the generic sitewide header CTA. */
.mkt-job-parent-panel{
  margin-top:24px; padding:22px 24px; border-radius:14px;
  background:var(--mkt-primary-soft,rgba(71,178,228,.12));
  border:1px solid var(--mkt-primary);
}
.mkt-job-parent-panel h2{font-size:16.5px; margin:0 0 8px;}
.mkt-job-parent-panel p{font-size:13.5px; color:var(--mkt-on-surface-variant); margin:0 0 16px;}

/* Same audience-split banner, condensed for the jobs directory/listing page. */
.mkt-job-parent-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; padding:16px 20px; border-radius:14px;
  background:var(--mkt-primary-soft,rgba(71,178,228,.12));
  border:1px solid var(--mkt-primary);
}
.mkt-job-parent-banner p{font-size:13.5px; margin:0; color:var(--mkt-on-surface-variant);}
.mkt-job-parent-banner .mkt-btn{flex-shrink:0;}