/* expert-join.css – widżet Expert Match („Jesteś ekspertem? / Potrzebujesz eksperta?").
   Jeden komponent dla strony głównej (pod kartami ekspertów) i bazy ekspertów
   (eksperci/index.html). Znaczniki: assets/js/expert-join.js. Wydzielone 2026-09-18 z <style>
   portal.html bez zmiany wartości.

   Specyficzność `.expert.expert--join` (0,2,0): na stronie głównej wbudowany <style> ma później
   ogólne `.expert { background: var(--card-bg) }` i przykryłby tło widżetu. Warstwa Aero
   (`[data-surface] .expert`, też 0,2,0) stoi w aero.css ładowanym po tym pliku i wygrywa
   kolejnością – tak jak przed wydzieleniem. */

.expert.expert--join {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: 1.8rem clamp(1.5rem,4vw,2.6rem);
  /* 2026-09-15: tło nieprzezroczyste (--expert-join-bg w tokens.css) – półprzezroczysty tint
     przepuszczał bg-energy.webp i akapit w --ink-60 schodził do 4,38:1. */
  background: var(--expert-join-bg);
  border: 1px dashed var(--a-teal-25);
  border-radius: var(--card-radius);
}
.expert-join__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,4vw,3rem); }
.expert-join__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding-inline: clamp(.5rem,2vw,1.5rem); }
.expert-join__col + .expert-join__col { border-left: 1px solid var(--a-teal-18); }
.expert-join__col svg { opacity: .7; color: var(--c-teal); }
.expert-join__h { font-family: var(--f-head); font-size: 1rem; font-weight: 800; color: var(--c-fg); margin: 0; }
.expert--join p { font-size: .78rem; color: var(--c-fg-muted); font-weight: 300; line-height: 1.55; max-width: 34ch; margin: 0; }
.expert-join__col .btn { margin-top: .3rem; }

/* Miejsce na widżet na podstronie (eksperci/index.html) – odstęp od listy ekspertów. */
.expert-join-slot { margin-top: calc(var(--gap) * 2); }

/* Telefon: kolumny jedna pod drugą, linia rozdzielająca u góry. */
@media (max-width: 480px) {
  .expert-join__grid { grid-template-columns: 1fr; }
  .expert-join__col + .expert-join__col { border-left: 0; border-top: 1px solid var(--a-teal-18); padding-top: 1.3rem; }
}