/* ==========================================================================
   Teacher Jobs V3 — recruitment pages (online tutoring jobs, 20 languages)
   Matches home-v3 / translation-v3 brand system
   Namespace: .tj3
   ========================================================================== */

/* Break out of Astra container */
body.page-template-page-teacher-jobs-v3 #primary,
body.page-template-page-teacher-jobs-v3 #content,
body.page-template-page-teacher-jobs-v3 .ast-container,
body.page-template-page-teacher-jobs-v3 .entry-content,
body.page-template-page-teacher-jobs-v3 article.post { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.page-template-page-teacher-jobs-v3 #content > .ast-container { padding: 0 !important; }
body.page-template-page-teacher-jobs-v3.ast-separate-container #content { padding: 0 !important; background: transparent !important; }
body.page-template-page-teacher-jobs-v3 .site-content { padding: 0 !important; }
body.page-template-page-teacher-jobs-v3 .entry-header,
body.page-template-page-teacher-jobs-v3 .ast-article-single { padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
body.page-template-page-teacher-jobs-v3 .entry-title,
body.page-template-page-teacher-jobs-v3 .post-thumb-img-content { display: none !important; }

.tj3 { color: #1a1a2e; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.55; background: #fff; }
.tj3 * { box-sizing: border-box; }
.tj3 h1, .tj3 h2, .tj3 h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: #1a1a2e; margin: 0 0 .5em; }
.tj3 h1 em, .tj3 h2 em, .tj3 h3 em { font-style: normal; font-family: inherit; font-weight: 800; color: #D81818; }
.tj3 p { margin: 0 0 1em; }
.tj3 a { color: inherit; }

.tj3-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; }

/* Eyebrow */
.tj3-eyebrow {
  color: #1a1a2e; font-size: 12px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  margin: 0 0 20px; display: inline-flex; align-items: center; gap: 10px;
}
.tj3-eyebrow::before { content: ''; width: 36px; height: 3px; background: #D81818; flex: none; }
.tj3-eyebrow-light { color: #fff; }
.tj3-eyebrow-light::before { background: #F0D818; }

/* Buttons */
.tj3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-size: 13px; font-weight: 800;
  border-radius: 2px; text-decoration: none; border: 2px solid transparent;
  line-height: 1; text-transform: uppercase; letter-spacing: .12em;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.tj3-btn:hover { transform: translateY(-1px); }
.tj3 .tj3-btn-primary,
.tj3 .tj3-btn-primary:link,
.tj3 .tj3-btn-primary:visited { background: #D81818 !important; color: #fff !important; border-color: #D81818 !important; }
.tj3 .tj3-btn-primary:hover { background: #1a1a2e !important; border-color: #1a1a2e !important; color: #fff !important; }

.tj3 .tj3-btn-outline,
.tj3 .tj3-btn-outline:link,
.tj3 .tj3-btn-outline:visited { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.tj3 .tj3-btn-outline:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; }

.tj3 .tj3-btn-yellow,
.tj3 .tj3-btn-yellow:link,
.tj3 .tj3-btn-yellow:visited { background: #F0D818 !important; color: #1a1a2e !important; border-color: #F0D818 !important; }
.tj3 .tj3-btn-yellow:hover { background: #fff !important; color: #1a1a2e !important; border-color: #fff !important; }

/* ===== HERO ===== */
.tj3-hero { background: #fff; padding: 88px 0 72px; border-bottom: 2px solid #1a1a2e; position: relative; overflow: hidden; }
.tj3-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tj3-bg { position: absolute; mix-blend-mode: multiply; }
.tj3-bg-1 { top: 10%; left:  2%; width:  8%; opacity: .35; }
.tj3-bg-2 { bottom: 8%; left:  8%; width:  7%; opacity: .4; }
.tj3-bg-3 { top: 16%; left: 44%; width:  3%; opacity: .6; }
.tj3-bg-4 { top: 60%; right:  4%; width:  5%; opacity: .5; }
.tj3-bg-5 { top:  6%; right: 14%; width:  6%; opacity: .45; }
.tj3-bg-6 { bottom: 12%; right: 32%; width: 3.5%; opacity: .55; }

.tj3-hero .tj3-container { z-index: 1; }
.tj3-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.tj3-hero-copy .tj3-title { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 28px; }
.tj3-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.tj3-hero-photo img {
  display: block; width: 100%; height: auto;
  border: 2px solid #1a1a2e; box-shadow: 8px 8px 0 #1a1a2e;
}

/* ===== MAIN CONTENT (verbatim Elementor text block 1) ===== */
.tj3-body { padding: 80px 0 64px; background: #fff; }
.tj3-prose { max-width: 820px; font-size: 17px; line-height: 1.65; color: #333; }
.tj3-prose h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 .8em; }
.tj3-prose h2, .tj3-prose h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: 1.4em 0 .6em; }
.tj3-prose p { margin: 0 0 1.1em; }
.tj3-prose a { color: #D81818; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tj3-prose a:hover { color: #1a1a2e; }
.tj3-prose img { max-width: 100%; height: auto; }
.tj3-body-ctas { margin-top: 28px; }

/* ===== FINAL CTA (verbatim Elementor text blocks 2 + 3) ===== */
.tj3-cta { background: #1a1a2e; color: #fff; padding: 88px 0 96px; }
.tj3-cta-heading h1, .tj3-cta-heading h2, .tj3-cta-heading h3 { color: #fff; font-size: clamp(32px, 4vw, 54px); letter-spacing: -.03em; margin: 0 0 .5em; }
.tj3-cta-copy { max-width: 720px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.85); }
.tj3-cta-copy p { margin: 0 0 1em; }
.tj3-cta-copy a { color: #F0D818; }
.tj3-cta-btns { margin-top: 30px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .tj3-hero { padding: 56px 0 48px; }
  .tj3-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .tj3-hero-photo { max-width: 520px; }
  .tj3-body { padding: 56px 0 44px; }
  .tj3-cta { padding: 64px 0 72px; }
  .tj3-container { padding: 0 20px; }
}