/* ═══════════════════════════════════════════════════════════════
   ЕКСПЕРТИЗА — каталог (секції провайдери/експерти) + профіль.
   Підключати після: fonts.css → tokens.css → site.css → servisy.css → ekspertyza.css
   Каталог перевикористовує класи servisy.css (.tiles/.tile/.chip/.filters).
   Кольори — лише токени tokens.css. Без inline-стилів (CSP).
   ═══════════════════════════════════════════════════════════════ */

/* ── Вкладки-перемикач: Провайдери / Експерти ── */
.extabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--tech-40)}
.extab{appearance:none;background:none;border:none;font:inherit;cursor:pointer;color:var(--ink-60);
  font-size:clamp(16px,2.2vw,19px);font-weight:600;letter-spacing:-.01em;padding:10px 14px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-ui) var(--ease)}
.extab:hover,.extab:focus-visible{color:var(--blue);outline:none}
.extab.on{color:var(--black);border-bottom-color:var(--blue)}
.extab-n{font-size:13px;font-weight:500;color:var(--ink-60);margin-left:3px}
.extab.on .extab-n{color:var(--blue)}

/* ── Каталог: панель фільтрів ліворуч + картки праворуч ── */
.excat{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;margin-top:22px;align-items:start}
@media(max-width:860px){.excat{grid-template-columns:1fr;gap:18px}}
.exaside{order:-1}
.exmain{min-width:0}
.exmain .fcount{margin:0 0 16px}
.exaside{position:sticky;top:18px;background:var(--white);border:1px solid var(--tech-40);border-radius:16px;padding:16px 18px}
@media(max-width:860px){.exaside{position:static;order:-1}}
.exaside-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);font-weight:600;margin:0 0 14px}
.exf-group{margin-bottom:16px}
.exf-group:last-child{margin-bottom:0}
.exf-lbl{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);font-weight:600;margin-bottom:9px}
.exf-chips{display:flex;flex-wrap:wrap;gap:8px}
.exf-select{width:100%;font:inherit;font-size:14px;color:var(--ink-80);padding:9px 11px;border:1px solid var(--tech-40);border-radius:10px;background:var(--white);cursor:pointer}
.exf-select:focus-visible{outline:none;border-color:var(--blue)}

/* Плитка-посилання: без типового підкреслення (у servisy були button) */
a.tile,a.tile:hover,a.tile:focus-visible{text-decoration:none}
a.tile .tt,a.tile .one,a.tile .tag,a.tile .fm,a.tile .go{text-decoration:none}

/* ── Секції каталогу ── */
.exsec{margin-top:34px}
.exsec[hidden]{display:none}
.exsec-h{font-size:clamp(18px,2.4vw,22px);font-weight:700;letter-spacing:-.02em;margin:0 0 16px;color:var(--black)}

/* ── Аватар (лого/фото або ініціали-заглушка) ── */
.avt{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--white);
  border:1px solid var(--tech-40);border-radius:14px}
.avt img{width:100%;height:100%;object-fit:contain;padding:10%}
.avt.ph{background:linear-gradient(135deg,var(--tech-10),var(--tech-40));color:var(--blue);font-weight:700;letter-spacing:.02em}
.avt.sm{width:48px;height:48px;border-radius:12px;font-size:16px}
.avt.md{width:60px;height:60px;font-size:19px}
.avt.lg{width:104px;height:104px;border-radius:18px;font-size:34px}
.avt.sm img,.avt.md img{padding:8%}

/* ── Плитка суб'єкта: аватар + текст (не «картинкова» плитка) ── */
.tile.subj{padding:18px 20px;gap:12px}
.subj-row{display:flex;align-items:center;gap:14px}
.subj-main{display:flex;flex-direction:column;min-width:0}
.subj-main .tt{font-size:17px;font-weight:700;color:var(--black);letter-spacing:-.02em;line-height:1.2}
.subj-sub{font-size:12.5px;color:var(--ink-60);margin-top:2px}
.subj-main .one{font-size:13px;color:var(--ink-80);line-height:1.4;margin-top:6px}
.subj-areas{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.achip.sm{font-size:11px;padding:3px 8px}
.subj-meta{font-size:12px;color:var(--ink-60);margin-top:2px}

/* У контентній колонці блоки розділені лінією (без подвійного відступу) */
.ph-col{gap:28px}
.ph-col .pblock{margin-top:0;padding-top:22px}
.ph-col > .pblock:first-child{padding-top:0}
.ph-col > .pblock:first-child::before{display:none}

/* ═══ ПРОФІЛЬ ═══ */
#profileView{display:block}
.crumbs{margin:clamp(18px,3vw,30px) 0 10px}
.crumbs a{font-size:14px;color:var(--blue);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{text-decoration:underline}

.phead{margin-bottom:18px}
.ph-cover{width:100%;aspect-ratio:21/7;overflow:hidden;border-radius:18px;background:var(--tech-10);margin-bottom:22px}
.ph-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ph-row{display:flex;align-items:flex-start;gap:22px}
.phead.has-cover .avt.lg{margin-top:-64px;box-shadow:0 10px 30px -16px rgba(16,86,169,.4)}
.ph-main{flex:1 1 auto;min-width:0}
.ph-kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 8px}
.ph-name{font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
.ph-tag{font-size:clamp(15px,2vw,18px);color:var(--ink-80);margin:10px 0 0;max-width:60ch}
.ph-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;color:var(--ink-60);margin:12px 0 0}
.ph-meta a{color:var(--blue);text-decoration:none}
.ph-meta a:hover{text-decoration:underline}
.ph-meta .sep{color:var(--tech-80);margin-right:10px}

/* Теги напрямів на картках і в профілі — тихі квадратні МІТКИ (не плутати з фільтром-пігулками) */
.achip{font-size:12px;color:var(--ink-80);padding:4px 10px;border-radius:6px;background:var(--tech-10);border:none}

.ph-desc{margin-top:22px;max-width:70ch}
.ph-desc p{font-size:15.5px;line-height:1.6;color:var(--ink-80);margin:0 0 12px}

/* Назва + бейдж верифікації */
.ph-nrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vbadge{font-size:11px;font-weight:600;color:#1b7a3d;background:#e6f6ec;border:1px solid #bfe6cc;
  padding:3px 10px;border-radius:20px;white-space:nowrap}

/* Профіль: контент + бічна панель «Коротко» */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:34px;margin-top:26px;align-items:start}
@media(max-width:820px){.ph-grid{grid-template-columns:1fr;gap:24px}}
.ph-col{display:flex;flex-direction:column;gap:6px;min-width:0}

.ph-aside{background:var(--white);border:1px solid var(--tech-40);border-radius:16px;padding:18px 20px;position:sticky;top:18px}
@media(max-width:820px){.ph-aside{position:static;order:-1}}
.ph-aside-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);font-weight:600;margin:0 0 12px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px}
.fact .fk{color:var(--ink-60)}
.fact .fv{color:var(--black);font-weight:500;text-align:right}
.fact .fv a{color:var(--blue);text-decoration:none}
.fact .fv a:hover{text-decoration:underline}
.ph-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--tech-40)}
.ph-link{font-size:13px;color:#fff;background:var(--blue);padding:7px 14px;border-radius:10px;text-decoration:none}
.ph-link:hover,.ph-link:focus-visible{background:var(--innovation-ink,var(--blue));filter:brightness(.95)}

/* Чипи компетенцій */
.chipset{display:flex;flex-wrap:wrap;gap:8px}

/* Послуги: короткий перелік */
.tblock-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.tblock-list li{font-size:14.5px;line-height:1.4;padding-left:16px;position:relative}
.tblock-list li::before{content:"—";position:absolute;left:0;color:var(--tech-80)}
.tblock-list a{color:var(--ink-80);text-decoration:none}
.tblock-list a:hover,.tblock-list a:focus-visible{color:var(--blue);text-decoration:underline}
.pblock-all{display:inline-block;margin-top:12px;font-size:13.5px;color:var(--blue);text-decoration:none}
.pblock-all:hover,.pblock-all:focus-visible{text-decoration:underline}

/* Команда */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.team-m{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;
  background:var(--white);border:1px solid var(--tech-40);border-radius:14px;transition:border-color var(--t-ui) var(--ease)}
.team-m:hover,.team-m:focus-visible{border-color:var(--blue);outline:none}
.team-info{display:flex;flex-direction:column;min-width:0}
.team-name{font-size:14.5px;font-weight:600;color:var(--black)}
.team-pos{font-size:12.5px;color:var(--ink-60);margin-top:2px}

/* Блоки профілю */
.pblock{position:relative;padding-top:26px;margin-top:34px}
.pblock::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--tech),rgba(196,203,255,0))}
.pblock-h{font-size:clamp(20px,2.8vw,26px);font-weight:700;letter-spacing:-.02em;margin:0 0 18px}

/* Картки проєктів */
.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:620px){.pcards{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;overflow:hidden;background:var(--white);
  border:1px solid var(--tech-40);border-radius:16px;box-shadow:0 1px 2px rgba(16,86,169,.05)}
.pcard-img{aspect-ratio:16/9;background:var(--tech-10);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.pcard-meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);font-weight:600;margin:0}
.pcard-tt{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--black);margin:0;line-height:1.2}
.pcard-sum{font-size:14px;color:var(--ink-60);line-height:1.5;margin:0}
.pcard-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:4px}
.pcard-tags-lbl{font-size:12px;color:var(--ink-60);font-weight:600}
.ptag{font-size:12px;color:var(--blue);text-decoration:none;padding:4px 10px;border-radius:14px;border:1px solid var(--tech-40);background:var(--tech-10)}
.ptag:hover,.ptag:focus-visible{border-color:var(--blue)}

@media(max-width:560px){
  .ph-row{gap:16px}
  .ph-logo{width:72px;height:72px}
  .phead.has-cover .ph-logo{margin-top:-48px}
}

/* Заклик для провайдерів долучитися */
.ex-join{margin-top:40px}
.ex-join-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;
  background:var(--tech-10);border:1px solid var(--tech-40);border-radius:18px;padding:24px 28px}
.ex-join-in h2{margin:0 0 6px;font-size:clamp(18px,2.4vw,22px)}
.ex-join-in p{margin:0;max-width:60ch;font-size:14.5px;color:var(--ink-80);line-height:1.5}