/* ---- sekce LinkedIn profil (jmenný prostor pf-*, soubory v /profil/, skládá thumbnaily/web_profil.py) ---- */
.pf{--pk:#fff;--pr:#d9dde2;--pt:#191919;--ps:#666;--psk:#e9e7e3;--pb:#f2f2f2;--pmod:#0a66c2}
.pf[data-rezim="tmavy"]{--pk:#1b1f23;--pr:#38434f;--pt:rgba(255,255,255,.92);--ps:rgba(255,255,255,.6);--psk:#2f3942;--pb:#293138;--pmod:#71b7fb}
.pf-horni{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(24px,4vw,64px);align-items:start}
.pf-scena{border-radius:6px;padding:clamp(18px,4vw,56px);background:radial-gradient(60% 70% at 40% 30%,var(--pf-zare,color-mix(in srgb,var(--ink) 7%,transparent)),transparent 72%)}

/* velká karta profilu */
.pf-karta{background:var(--pk);border:1px solid var(--pr);border-radius:10px;overflow:hidden;color:var(--pt);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,var(--f);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--gold) 10%,transparent);
  transition:background .35s,border-color .35s,color .35s}
.pf-banner{position:relative;aspect-ratio:4/1;background:#000}
.pf-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.pf-banner img.on{opacity:1}
.pf-telo{padding:0 4% 22px}
.pf-ava{width:19%;aspect-ratio:1;margin-top:-11.5%;border-radius:50%;border:4px solid var(--pk);background:#000;overflow:hidden;position:relative;transition:border-color .35s}
.pf-ava img,.pf-mava img,.pf-mini-ava img{display:block;width:100%;height:100%;object-fit:cover}
.pf-jmeno{margin:12px 0 8px;font-size:clamp(18px,2.4vw,24px);font-weight:600;line-height:1.2}
.pf-sk{display:block;height:9px;border-radius:5px;background:var(--psk);margin:0 0 8px;transition:background .35s}
.pf-tlac{display:flex;gap:8px;margin-top:14px}
.pf-pil{display:block;width:96px;height:30px;border-radius:999px;border:1.5px solid var(--pmod)}
.pf-pil.plna{background:var(--pmod)}
.pf-feed{border-top:1px solid var(--pr);padding:16px 4% 18px;display:grid;gap:14px;transition:border-color .35s}
.pf-radek{display:flex;align-items:flex-start;gap:10px}
.pf-mava{flex:0 0 auto;border-radius:50%;overflow:hidden;background:#000}
.pf-mava.m48{width:48px;height:48px}.pf-mava.m32{width:32px;height:32px}
.pf-radek b{display:block;font-size:14px;font-weight:600;margin:2px 0 7px}
.pf-radek .pf-sk{height:7px;margin-bottom:6px}
.pf-bublina{flex:1 1 auto;max-width:74%;background:var(--pb);border-radius:0 8px 8px 8px;padding:8px 12px 4px;transition:background .35s}
.pf-radek>div:not(.pf-mava){flex:1 1 auto;min-width:0}

/* ovládání */
.pf-ctrl{display:flex;flex-direction:column;gap:22px}
.pf-bannery{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pf-bannery button{display:block;width:100%;padding:3px;border:1px solid transparent;border-radius:5px;background:none;cursor:pointer;opacity:.55;
  transition:opacity .25s,border-color .25s,transform .25s}
.pf-bannery button:hover{opacity:.9;transform:translateY(-2px)}
.pf-bannery button.on{opacity:1;border-color:var(--gold)}
.pf-bannery img{display:block;width:100%;aspect-ratio:4/1;object-fit:cover;border-radius:3px}
.pf-akt{display:flex;align-items:baseline;gap:14px;font-size:20px;font-weight:300;line-height:1.2}
.pf-akt .c{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--gold)}

/* mřížka 20 profilovek, každá v malé kartě profilu */
.pf-mrizka{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,22px);margin-top:clamp(40px,6vw,72px)}
.pf-mini{position:relative;cursor:pointer;outline:none;opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.pf-mini.je{opacity:1;transform:none}
.pf-mkarta{background:var(--pk);border:1px solid var(--pr);border-radius:8px;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background .35s}
.pf-mini:hover .pf-mkarta,.pf-mini:focus-visible .pf-mkarta{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb,var(--gold) 22%,transparent)}
.pf-mini.on .pf-mkarta{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 18px 44px color-mix(in srgb,var(--gold) 25%,transparent)}
/* malá karta = „Lidé, které možná znáte“: pruh banneru, velká profilovka uprostřed, jméno, tlačítko */
.pf-mini .pf-mb{display:block;width:100%;aspect-ratio:4/1;object-fit:cover}
.pf-mtelo{padding:0 8% 14px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pf-mini-ava{width:50%;aspect-ratio:1;margin-top:-19%;border-radius:50%;border:3px solid var(--pk);overflow:hidden;background:#000;transition:border-color .35s}
.pf-mjm{margin-top:9px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,var(--f);font-size:13.5px;font-weight:600;color:var(--pt)}
.pf-mtelo .pf-sk{height:6px;margin:7px auto 0}
.pf-mtelo .pf-pil{width:74%;height:24px;margin-top:12px}
.pf-pop{display:flex;align-items:baseline;gap:9px;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.25}
.pf-pop b{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--gold)}
.pf-mini.on .pf-pop{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pf-mini{opacity:1;transform:none;transition:none}}
@media (max-width:980px){.pf-mrizka{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.pf-horni{grid-template-columns:1fr}.pf-bannery{flex-direction:row}.pf-bannery li{flex:1 1 0;min-width:0}}
@media (max-width:640px){.pf-mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-scena{padding:0;background:none}.pf-ava{border-width:3px}}