/* 03-components.css
   Component styles for Armonea V2 using design tokens.
   Includes button variants and badge variants with all states. */

  
/* ── Navigation Section  — global utility ───────────────────────────────────── */
@media (min-width: 1024px) {
  /* two-tier stack on the right */
  .site-header-main-section-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--site-space-xs);
  }
  .site-header-main-section-left { margin-right: auto; } /* logo hard-left, centred full height */
}

/* tier sizing */
.secondary-navigation .menu > li > a { font-size: var(--site-size-small); }
.main-navigation .menu > li > a      { font-size: var(--site-size-h4); font-family: var(--site-font-heading); }

/* Jobs CTA pill — needs .menu-btn-jobs on the item */
/* the button itself — centre the label */
#secondary-navigation .menu-btn-jobs > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-color-primary);
  color: var(--site-color-text);
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: var(--site-size-small);
  line-height: 1;                              /* kills the extra height */
  padding: var(--site-space-xs) var(--site-space-s);
  border-radius: var(--site-radius-m);
  transition: background .2s ease;
}
#secondary-navigation .menu-btn-jobs > a:hover {
  background: var(--site-color-secondary-light-yellow);
  color: var(--site-color-text);
}

/* clearance from NL | FR — put it on the LI, not the anchor */
#secondary-navigation .menu-btn-jobs { margin-right: var(--site-space-m); }

/* language switcher (inline in secondary menu) */
.secondary-navigation .arm-lang-li { display: flex; align-items: center; }
.arm-lang-switcher { display: inline-flex; align-items: center; white-space: nowrap; }
.arm-lang-link { font-size: var(--site-size-small); text-decoration: none; color: var(--site-color-text); }
.arm-lang-link.is-active { font-weight: 500; color: var(--site-color-primary); }
.arm-lang-link + .arm-lang-link::before {
  content: "|"; margin: 0 var(--site-space-xs);
  color: var(--site-color-border); opacity: 0.5;
}

  /* ── Section eyebrow — global utility ───────────────────────────────────── */
.section-eyebrow {
	font-family: var(--site-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin: 0 0 var(--site-space-xs);
}

/* base button reset */
.btn {
  display: inline-block;
  font-family: var(--site-font-body);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: var(--site-radius-m);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:focus {
  outline: 3px solid var(--site-color-secondary-light-yellow);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* primary */
.btn--primary {
  background: var(--site-color-primary);
  color: var(--site-color-text);
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--primary:hover:not(:disabled) {
  background: var(--site-color-secondary-light-yellow);
}
.btn--primary:active:not(:disabled) {
  filter: brightness(0.9);
}


/* secondary */
.btn--secondary {
  background: transparent;
  color: var(--site-color-text);
  border: 2px solid var(--site-color-primary);
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--site-color-primary);
  color: var(--site-color-primary-dark);
}
.btn--secondary:active:not(:disabled) {
  filter: brightness(0.9);
}

/* ghost */
.btn--ghost {
  background: transparent;
  color: var(--site-color-text);
  border: 1px solid var(--site-color-border);
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--site-color-surface);
}
.btn--ghost:active:not(:disabled) {
  filter: brightness(0.9);
}

/* ghost inverse (for dark backgrounds) */
.btn--ghost-inv {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.35);
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--ghost-inv:hover:not(:disabled) {
  background: rgba(255,255,255,0.10);
}
.btn--ghost-inv:active:not(:disabled) {
  filter: brightness(0.9);
}

/* green (dark green bg, white text) */
.btn--green {
  background: var(--site-color-secondary-dark-green);
  color: #fff;
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--green:hover:not(:disabled) {
  background: color-mix(in srgb, var(--site-color-secondary-dark-green) 85%, #000);
  color: #fff;
}
.btn--green:active:not(:disabled) {
  filter: brightness(0.9);
}

/* outline (border only, primary colour) */
.btn--outline {
  background: transparent;
  color: var(--site-color-secondary-dark-green);
  border: 2px solid var(--site-color-secondary-dark-green);
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--outline:hover:not(:disabled) {
  background: var(--site-color-secondary-dark-green);
  color: #fff;
}
.btn--outline:active:not(:disabled) {
  filter: brightness(0.9);
}

/* sm size modifier */
.btn--sm {
  padding: var(--site-space-xs) var(--site-space-s);
  font-size: var(--site-size-small);
}

/* danger */
.btn--danger {
  background: var(--site-color-error);
  color: white;
  padding: var(--site-space-s) var(--site-space-l);
}
.btn--danger:hover:not(:disabled) {
  filter: brightness(0.84);
}
.btn--danger:active:not(:disabled) {
  filter: brightness(0.72);
}

/* badge base */
.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--site-radius-s);
  font-size: var(--site-size-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}

/* badge variants */
.badge-beige {
  background: var(--site-color-primary-light);
  color: var(--site-color-text);
}
.badge-beige:hover {
  background: #ddd4c4;
}

.badge-rose {
  background: var(--site-color-secondary-light-rose);
  color: var(--site-color-text);
}
.badge-rose:hover {
  background: var(--site-color-secondary-dark-prune);
  color: white;
}

.badge-yellow {
  background: var(--site-color-secondary-light-yellow);
  color: var(--site-color-text);
}
.badge-yellow:hover {
  background: var(--site-color-secondary-dark-green);
  color: white;
}

.badge-orange {
  background: var(--site-color-secondary-light-orange);
  color: var(--site-color-text);
}
.badge-orange:hover {
  background: var(--site-color-secondary-dark-blue);
  color: white;
}

/* ── WPGB card overlay elements ─────────────────────────────────────────── */
.wpgb-card,
.wpgb-card-media { position: relative; }

.arm-badge {
  position: absolute; top: var(--site-space-xs); left: var(--site-space-xs); z-index: 2;
  display: inline-flex; padding: var(--site-space-2xs) var(--site-space-xs) !important;
  background: var(--site-color-primary);
  color: var(--site-color-on-image) !important;
  font: 600 var(--site-size-caption)/1 var(--site-font-body);
  border-radius: var(--site-radius-m) !important;
  white-space: nowrap;
}

.wpgb-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--site-color-scrim) 0%, transparent 50%);
}

.arm-card-title {
  position: absolute; left: var(--site-space-xs); bottom: var(--site-space-xs); z-index: 2;
  color: var(--site-color-on-image);
  font: 600 var(--site-size-h4)/1.15 var(--site-font-heading);
}

/* ── arm-site-card — WPGB site listing card ─────────────────────────────── */
.arm-site-card {
  position: relative;
  display: block;
  background: var(--site-color-bg);
  border-radius: var(--site-radius-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  transition: box-shadow .2s, transform .2s;
}
.arm-site-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.arm-site-card:focus-visible {
  outline: 3px solid var(--site-color-secondary-dark-green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .arm-site-card { transition: none; }
  .arm-site-card:hover { transform: none; }
}


.arm-site-card__body { padding: var(--site-space-s); }

.arm-site-card__name {
  font: 600 var(--site-size-h5)/1.2 var(--site-font-heading);
  color: var(--site-color-text);
  margin: 0 0 var(--site-space-xs);
}
.arm-site-card__location {
  display: flex;
  flex-direction: column;
  gap: 2px !important;
  font-size: var(--site-size-small);
  color: var(--site-color-text-muted);
  margin-bottom: var(--site-space-xs);
  line-height: 1.4;
}
.arm-site-card__cta {
  font: 600 var(--site-size-small)/1 var(--site-font-body);
  color: var(--site-color-secondary-dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WPGB native inner elements — scoped to arm-site-card */
.wpgb-card:has(.arm-site-card) {
  overflow: visible;
}
.wpgb-card:has(.arm-site-card) .wpgb-card-wrapper {
  border-radius: var(--site-radius-l);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
  transition: box-shadow .2s, transform .2s;
}
.wpgb-card:has(.arm-site-card):hover .wpgb-card-wrapper {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .wpgb-card:has(.arm-site-card):hover .wpgb-card-wrapper { transform: none; }
}
.wpgb-card-inner.arm-site-card .wpgb-card-header {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 0;
  background: transparent;
}
.arm-site-card .wpgb-card-content,
.arm-site-card .wpgb-card-body,
.arm-site-card .wpgb-block-2 {
  padding: 0;
  margin: 0;
}
.wpgb-card-inner.arm-site-card .arm-site-card__body {
  padding: var(--site-space-xs) var(--site-space-s) var(--site-space-s);
}
.wpgb-card-inner.arm-site-card .arm-site-card__name {
  font: 700 var(--site-size-h5)/1.2 var(--site-font-heading);
  color: var(--site-color-text);
  margin: 0 0 var(--site-space-2xs);
}
.wpgb-card-inner.arm-site-card .arm-site-card__location {
  color: var(--site-color-text-muted);
  font-size: var(--site-size-small);
  margin-bottom: var(--site-space-xs);
}
.wpgb-card-inner.arm-site-card .arm-site-card__cta {
  background: transparent;
  color: var(--site-color-primary);
  font-weight: 600;
}

/* Pill colour — data-type attribute selectors (WPGB outputs label text, not slugs) */
.arm-badge[data-type="Woonzorgcentrum"]   { background: var(--site-color-primary);               color: var(--site-color-on-image); }
.arm-badge[data-type="Service Residentie"]{ background: var(--site-color-secondary-dark-blue);   color: var(--site-color-on-image); }
.arm-badge[data-type="Serviceflats"]      { background: var(--site-color-secondary-dark-green);  color: var(--site-color-on-image); }
.arm-badge[data-type="Dagopvang"]         { background: var(--site-color-secondary-light-rose);  color: var(--site-color-primary-dark); }
.arm-badge[data-type="Kortverblijf"]      { background: var(--site-color-secondary-dark-prune);  color: var(--site-color-on-image); }


/* ==========================================================================
   ARMONEA — Vacatures overview (Talentfinder React client)
   Append to: assets/css/03-components.css
   Rules: --site-* tokens only · 8pt grid · mobile-first · BEM
   Component-local derived colors use color-mix() on tokens (no raw hex).
   ========================================================================== */

.tf-overview-mount {
  /* Derived shades — single place to tune, all token-based */
  --tf-border: color-mix(in srgb, var(--site-color-primary-light) 72%, var(--site-color-text) 28%);
  --tf-border-soft: color-mix(in srgb, var(--site-color-primary-light) 88%, var(--site-color-text) 12%);
  --tf-surface-soft: color-mix(in srgb, var(--site-color-primary-light) 35%, var(--site-color-bg) 65%);
  font-family: var(--site-font-body);
  color: var(--site-color-text);

  /* Layout: respect the site container */
  max-width: var(--site-container-max);
  margin-inline: auto;
  padding-inline: var(--site-space-m);
}

/* --- Crawler fallback: in DOM for bots, invisible for humans (React
       replaces it on mount; this prevents a flash before hydration). --- */
.tf-fallback-list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------- Search */
.tf-searchbar {
  margin-bottom: var(--site-space-s);
}
.tf-searchbar__input {
  width: 100%;
  padding: var(--site-space-s);
  font-family: var(--site-font-body);
  font-size: var(--site-size-body);
  color: var(--site-color-text);
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-m);
}
.tf-searchbar__input:focus-visible {
  outline: 2px solid var(--site-color-border);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ Filterbar */
.tf-filterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-xs);
  padding: var(--site-space-xs) 0;
  background: var(--site-color-bg);
  border-bottom: 1px solid var(--tf-border-soft);
}
/* Grouped filters: Locatie (province + gemeente) | Functie (functie + chips) */
.tf-filterbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-xs);
}
/* Province dropdown — matches the filter buttons, native select chevron */
.tf-filterbar__select {
  padding: 8px 16px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text);
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-m);
  cursor: pointer;
}
.tf-filterbar__select:hover {
  background: var(--site-color-primary-light);
}
.tf-filterbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-xs);
  padding: 8px 16px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text);
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-m);
  cursor: pointer;
}
.tf-filterbar__btn:hover,
.tf-filterbar__btn.is-open {
  background: var(--site-color-primary-light);
}
.tf-filterbar__btn::after {
  content: "▾";
  font-size: var(--site-size-caption);
}
.tf-filterbar__btn.is-open::after {
  content: "▴";
}
.tf-filterbar__count {
  min-width: 20px;
  padding: 1px 6px;
  font-size: var(--site-size-caption);
  text-align: center;
  color: var(--site-color-text);
  background: var(--site-color-primary);
  border-radius: var(--site-radius-l);
}
.tf-filterbar__sep {
  width: 1px;
  height: 24px;
  background: var(--tf-border-soft);
}
.tf-filterbar__result {
  margin-left: auto;
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text-muted);
}

/* Contract chips */
.tf-chip {
  padding: 8px 16px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text);
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-m);
  cursor: pointer;
}
.tf-chip:hover {
  background: var(--site-color-primary-light);
}
.tf-chip.is-on {
  background: var(--site-color-primary);
  border-color: var(--site-color-primary);
}

/* --------------------------------------------------------------- Panels */
.tf-panel {
  padding: var(--site-space-s) var(--site-space-s) var(--site-space-xs);
  margin-bottom: var(--site-space-s);
  background: var(--tf-surface-soft);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--site-radius-m);
}
.tf-panel__search {
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--site-space-s);
  padding: var(--site-space-xs) var(--site-space-s);
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-m);
  background: var(--site-color-bg);
}
.tf-panel__group {
  margin-bottom: var(--site-space-s);
}
.tf-panel__heading {
  margin: 0 0 var(--site-space-xs);
  font-family: var(--site-font-body);
  font-size: var(--site-size-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-color-text-muted);
}
.tf-panel__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-xs);
}
.tf-opt {
  padding: 5px 12px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  color: var(--site-color-text);
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border);
  border-radius: var(--site-radius-s);
  cursor: pointer;
}
.tf-opt:hover {
  border-color: var(--site-color-border);
}
.tf-opt.is-on {
  color: var(--site-color-bg);
  background: var(--site-color-border);
  border-color: var(--site-color-border);
}
.tf-opt--group {
  font-weight: 500;
  margin-bottom: var(--site-space-xs);
}

/* Province header — full-width, clickable: selects all cities in the province.
   Always white text on Blue Profond (a Secondary — Dark colour) in every
   state, so the label stays legible on hover and when active. */
.tf-opt--province {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--site-size-caption);
  color: var(--site-color-bg);
  background: var(--site-color-secondary-dark-blue);
  border-color: var(--site-color-secondary-dark-blue);
}
.tf-opt--province:hover,
.tf-opt--province.is-on,
.tf-opt--province.is-partial {
  color: var(--site-color-bg);
  background: var(--site-color-secondary-dark-blue);
  border-color: var(--site-color-secondary-dark-blue);
}
/* Active province keeps an inset outline to read as "selected" without
   losing the white-on-blue contrast. */
.tf-opt--province.is-on {
  outline: 2px solid var(--site-color-bg);
  outline-offset: -3px;
}
.tf-opt--province .tf-opt__n {
  opacity: 0.8;
}

/* Group header pills — match the card badge colors */
.tf-opt--badge-beige  { background: var(--site-color-primary-light); border-color: var(--site-color-primary-light); }
.tf-opt--badge-rose   { background: var(--site-color-secondary-light-rose); border-color: var(--site-color-secondary-light-rose); }
.tf-opt--badge-yellow { background: var(--site-color-secondary-light-yellow); border-color: var(--site-color-secondary-light-yellow); }
.tf-opt--badge-orange { background: var(--site-color-secondary-light-orange); border-color: var(--site-color-secondary-light-orange); }
.tf-opt--badge-beige.is-on,
.tf-opt--badge-rose.is-on,
.tf-opt--badge-yellow.is-on,
.tf-opt--badge-orange.is-on {
  outline: 2px solid var(--site-color-border);
  outline-offset: -2px;
}


.tf-opt__n {
  opacity: 0.65;
  font-size: var(--site-size-caption);
  margin-left: 4px;
}

/* --------------------------------------------------------- Active tags */
.tf-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-xs);
  margin: var(--site-space-s) 0;
}
.tf-tag {
  padding: 5px 12px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text);
  background: var(--site-color-primary-light);
  border: none;
  border-radius: var(--site-radius-s);
  cursor: pointer;
}
.tf-tag:hover {
  background: var(--site-color-secondary-light-yellow);
}
.tf-active__clear {
  padding: 5px var(--site-space-xs);
  font-family: var(--site-font-body);
  font-size: var(--site-size-small);
  color: var(--site-color-text-muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* ----------------------------------------------------------------- Grid */
.tf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-space-s);
  margin-top: var(--site-space-m);
}
@media (min-width: 768px) {
  .tf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--site-space-m);
  }
}
@media (min-width: 1024px) {
  .tf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- Card */
.tf-card {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-xs);
  padding: var(--site-space-m);
  color: var(--site-color-text);
  text-decoration: none;
  background: var(--site-color-bg);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--site-radius-m);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.tf-card:hover {
  transform: translateY(-3px);
  border-color: var(--site-color-primary);
}
.tf-card:focus-visible {
  outline: 2px solid var(--site-color-border);
  outline-offset: 2px;
}
.tf-card__top {
  display: flex;
  gap: var(--site-space-xs);
  align-items: center;
}
.tf-card__title {
  margin: 0;
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--site-color-text);
}
.tf-card__meta {
  margin: 0;
  font-size: var(--site-size-small);
  color: var(--site-color-text-muted);
}
.tf-card__house {
  font-weight: 500;
}
.tf-card__teaser {
  margin: 0;
  font-size: var(--site-size-small);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tf-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-xs);
  margin-top: auto;
  padding-top: var(--site-space-s);
  border-top: 1px solid var(--tf-border-soft);
}
.tf-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-xs);
}
.tf-card__link {
  font-size: var(--site-size-small);
  font-weight: 500;
  color: var(--site-color-text-muted);
  white-space: nowrap;
}
.tf-card:hover .tf-card__link {
  color: var(--site-color-primary);
}

/* --------------------------------------------------------- Badges/pills */
.tf-badge {
  padding: 5px 12px;
  font-size: var(--site-size-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--site-color-text);
  border-radius: var(--site-radius-s);
}
.tf-badge--beige  { background: var(--site-color-primary-light); }
.tf-badge--rose   { background: var(--site-color-secondary-light-rose); }
.tf-badge--yellow { background: var(--site-color-secondary-light-yellow); }
.tf-badge--orange { background: var(--site-color-secondary-light-orange); }
.tf-badge--new {
  background: var(--site-color-success);
  color: var(--site-color-secondary-light-orange); /* approved Vert × Orange pairing */
}
.tf-pill {
  padding: 5px 12px;
  font-size: var(--site-size-caption);
  font-weight: 500;
  color: var(--site-color-text);
  background: var(--site-color-primary-light);
  border-radius: var(--site-radius-s);
}

/* ------------------------------------------------------ Empty / status */
.tf-empty {
  margin-top: var(--site-space-m);
  padding: var(--site-space-l) var(--site-space-m);
  text-align: center;
  background: var(--tf-surface-soft);
  border-radius: var(--site-radius-m);
}
.tf-empty__title {
  margin: 0 0 var(--site-space-xs);
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h4);
  font-weight: 600;
}
.tf-empty__hint {
  margin: 0;
  font-size: var(--site-size-small);
  color: var(--site-color-text-muted);
}
.tf-empty__link {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.tf-status {
  padding: var(--site-space-l) 0;
  text-align: center;
  font-size: var(--site-size-body);
  color: var(--site-color-text-muted);
}

/* ------------------------------------------------------------ Load more */
.tf-more {
  margin: var(--site-space-m) 0 var(--site-space-l);
  text-align: center;
}
.tf-more__btn {
  padding: 12px 24px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-body);
  font-weight: 500;
  color: var(--site-color-text);
  background: transparent;
  border: 2px solid var(--site-color-primary);
  border-radius: var(--site-radius-m);
  cursor: pointer;
}
.tf-more__btn:hover {
  background: var(--site-color-primary);
}

/* ------------------------------------------------------- Accessibility */
@media (prefers-reduced-motion: reduce) {
  .tf-card {
    transition: none;
  }
  .tf-card:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   JOB DETAIL  (.tf-jd) — server-rendered single vacancy.
   Mirrors the approved 20260615_job-detail-wireframe_v1.
═══════════════════════════════════════════════════════════════════════════ */
.tf-jd {
  --tf-border-soft: color-mix(in srgb, var(--site-color-primary-light) 88%, var(--site-color-text) 12%);
  max-width: var(--site-container-max);
  margin-inline: auto;
  padding-inline: var(--site-space-m);
  font-family: var(--site-font-body);
  color: var(--site-color-text);
}

/* --- Apply button (shared: hero, card, mobile bar) --- */
.tf-jd__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-xs);
  padding: 12px 24px;
  font-family: var(--site-font-body);
  font-size: var(--site-size-body);
  font-weight: 600;
  color: var(--site-color-primary-dark);
  background: var(--site-color-primary);
  border: 2px solid var(--site-color-primary);
  border-radius: var(--site-radius-m);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tf-jd__apply:hover {
  background: var(--site-color-secondary-light-yellow);
  border-color: var(--site-color-secondary-light-yellow);
  transform: translateY(-1px);
}
.tf-jd__apply:focus-visible {
  outline: 2px solid var(--site-color-border);
  outline-offset: 2px;
}
.tf-jd__apply--block {
  width: 100%;
}

/* --- Breadcrumb --- */
.tf-jd__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-xs);
  padding: var(--site-space-s) 0;
  font-size: var(--site-size-small);
}
.tf-jd__crumb {
  color: var(--site-color-secondary-dark-green);
  font-weight: 500;
  text-decoration: none;
}
.tf-jd__crumb:hover {
  text-decoration: underline;
}
.tf-jd__crumb--current {
  color: var(--site-color-text-muted);
  font-weight: 400;
}
.tf-jd__crumb-sep {
  color: var(--site-color-text-muted);
  opacity: 0.5;
}

/* --- Hero --- */
.tf-jd__hero {
  padding: var(--site-space-l);
  background: var(--site-color-primary-light);
  border-radius: var(--site-radius-l);
}
.tf-jd__eyebrow {
  display: inline-block;
  margin-bottom: var(--site-space-s);
}
.tf-jd__title {
  margin: 0 0 var(--site-space-s);
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h1);
  font-weight: 700;
  line-height: 1.12;
  color: var(--site-color-text);
}
.tf-jd__loc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2xs);
  margin: 0 0 var(--site-space-m);
  font-size: var(--site-size-h5);
  color: var(--site-color-text-muted);
}
.tf-jd__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-xs);
  margin: 0 0 var(--site-space-m);
  padding: 0;
  list-style: none;
}
.tf-jd__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-s);
}

/* --- Body grid --- */
.tf-jd__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--site-space-l);
  margin-top: var(--site-space-l);
}
.tf-jd__main {
  min-width: 0;
}

/* --- Content sections --- */
.tf-jd__section {
  margin-bottom: var(--site-space-l);
}
.tf-jd__section:last-child {
  margin-bottom: 0;
}
.tf-jd__h {
  margin: 0 0 var(--site-space-s);
  padding-bottom: var(--site-space-xs);
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h3);
  font-weight: 700;
  color: var(--site-color-secondary-dark-green);
  border-bottom: 2px solid var(--site-color-primary-light);
}
.tf-jd__prose {
  font-size: var(--site-size-body);
  line-height: 1.6;
}
.tf-jd__prose p {
  margin: 0 0 var(--site-space-s);
  max-width: var(--site-prose-max);
}
.tf-jd__prose ul,
.tf-jd__prose ol {
  margin: 0 0 var(--site-space-s);
  padding-left: var(--site-space-m);
  max-width: var(--site-prose-max);
}
.tf-jd__prose li {
  margin-bottom: var(--site-space-xs);
}
.tf-jd__prose ul {
  list-style: none;
  padding-left: 0;
}
.tf-jd__prose ul li {
  position: relative;
  padding-left: var(--site-space-m);
}
.tf-jd__prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--site-radius-s);
  background: var(--site-color-primary);
}
.tf-jd__prose iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: var(--site-space-s) 0;
  border: 0;
  border-radius: var(--site-radius-m);
}
.tf-jd__prose a {
  color: var(--site-color-secondary-dark-green);
  text-decoration: underline;
}

/* --- Sticky aside --- */
.tf-jd__aside {
  align-self: start;
  position: sticky;
  top: var(--site-space-l);
}
.tf-jd__card {
  padding: var(--site-space-m);
  background: var(--site-color-primary-light);
  border-radius: var(--site-radius-l);
}
.tf-jd__card-title {
  margin: 0 0 var(--site-space-2xs);
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h4);
  font-weight: 700;
}
.tf-jd__card-sub {
  margin: 0 0 var(--site-space-s);
  font-size: var(--site-size-small);
  color: var(--site-color-text-muted);
}
.tf-jd__facts-list {
  margin: var(--site-space-s) 0 0;
  padding-top: var(--site-space-s);
  border-top: 1px solid var(--tf-border-soft);
}
.tf-jd__fact {
  display: flex;
  gap: var(--site-space-s);
  margin-bottom: var(--site-space-s);
}
.tf-jd__fact:last-child {
  margin-bottom: 0;
}
.tf-jd__fact-k {
  flex: 0 0 96px;
  margin: 0;
  font-size: var(--site-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-color-text-muted);
}
.tf-jd__fact-v {
  margin: 0;
  font-size: var(--site-size-small);
  font-weight: 500;
}
.tf-jd__recruiter {
  display: flex;
  align-items: center;
  gap: var(--site-space-s);
  margin-top: var(--site-space-s);
  padding-top: var(--site-space-s);
  border-top: 1px solid var(--tf-border-soft);
}
.tf-jd__recruiter-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--site-radius-pill);
  background: color-mix(in srgb, var(--site-color-secondary-dark-green) 25%, var(--site-color-bg) 75%);
}
.tf-jd__recruiter-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tf-jd__recruiter-name {
  font-size: var(--site-size-small);
  font-weight: 600;
}
.tf-jd__recruiter-link {
  font-size: var(--site-size-caption);
  color: var(--site-color-text-muted);
  word-break: break-all;
}
.tf-jd__back {
  display: inline-block;
  margin-top: var(--site-space-s);
  font-size: var(--site-size-small);
  font-weight: 600;
  color: var(--site-color-secondary-dark-green);
  text-decoration: none;
}
.tf-jd__back:hover {
  text-decoration: underline;
}

/* --- Related jobs --- */
.tf-jd__related {
  margin-top: var(--site-space-xl);
  padding: var(--site-space-l);
  background: var(--site-color-primary-light);
  border-radius: var(--site-radius-l);
}
.tf-jd__related-title {
  margin: 0 0 var(--site-space-m);
  font-family: var(--site-font-heading);
  font-size: var(--site-size-h3);
  font-weight: 700;
  color: var(--site-color-secondary-dark-green);
}
.tf-jd__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--site-space-s);
}

/* --- Mobile sticky apply bar (hidden on desktop) --- */
.tf-jd__mobilebar {
  display: none;
}

/* --- Error state --- */
.tf-jd--error {
  padding: var(--site-space-xl) var(--site-space-m);
  text-align: center;
}
.tf-jd__error {
  font-size: var(--site-size-h5);
  color: var(--site-color-text-muted);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .tf-jd__title {
    font-size: var(--site-size-h2);
  }
  .tf-jd__body {
    grid-template-columns: 1fr;
  }
  .tf-jd__aside {
    position: static;
  }
  .tf-jd__related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tf-jd__mobilebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-s);
    padding: var(--site-space-xs) var(--site-space-m);
    background: var(--site-color-bg);
    border-top: 1px solid var(--tf-border-soft);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  }
  .tf-jd__mobilebar-title {
    font-family: var(--site-font-heading);
    font-size: var(--site-size-small);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tf-jd__mobilebar .tf-jd__apply {
    flex-shrink: 0;
    padding: 10px 18px;
  }
}

@media (max-width: 640px) {
  .tf-jd__hero {
    padding: var(--site-space-m);
  }
  .tf-jd__title {
    font-size: var(--site-size-h3);
  }
  .tf-jd__related-grid {
    grid-template-columns: 1fr;
  }
  .tf-jd__fact-k {
    flex-basis: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-jd__apply {
    transition: none;
  }
  .tf-jd__apply:hover {
    transform: none;
  }
}