/* ============================================================
   FB redesign — Facebook-style theme (feed karty, topbar,
   reakce, share popup). Podle design handoffu fb_feed.css.
   ============================================================ */
:root {
 --fb-blue: var(--bs-primary); /* dřív FB modrá #1877F2 - byla světlejší než zbytek webu */
 --fb-love: #f33e58;
 --fb-amber: #f7b125;
 --fb-angry: #e9710f;
 --fb-bg: #f0f2f5;
 --fb-card: #ffffff;
 --fb-text: #050505;
 --fb-muted: #65676b;
 --fb-divider: #ced0d4;
 --fb-hover: #f2f2f2;
 --fb-bubble: #f0f2f5;
 --cmp-brand-red: #dc3545;
 --cmp-star: #ff613a;
 --cmp-success: #198754;
}

body {
 background: var(--fb-bg);
 color: var(--fb-text);
}

/* kotvy (#comments na detailu, #postNN ve feedu) nesmí skočit pod fixed-top menu */
#comments,
[id^="post"] {
 scroll-margin-top: 80px;
}

/* (FB bílý topbar zrušen 12.7.2026 — menu je zpět původní Bootstrap navbar-dark) */

/* ---- jednosloupcový feed na indexu ----
   Zužuje <main class="container"> na šířku FB feedu. Přebíjí Bootstrap
   breakpointy .container (fb.css se linkuje až po bootstrap.min.css).
   Šířka 500px = --fb-feed-w z návrhu fb_feed.css (claude.ai/design).
   Dvousloupcová varianta pro A/B test má v návrhu max-width 960px a gap 22px. */
/* 524px = vnější šířka .container včetně 2×12px Bootstrap paddingu, karta tedy
   vyjde přesně na 500px z návrhu (= šířka FB feedu; Instagram má 470px).

   Breakpointy, které sloupec roztahovaly na 580 a 700px, jsou pryč (19.8.2026).
   Návrh je nemá a ani FB/IG feed se šířkou monitoru neroste - extra místo nechají
   prázdné. Od chvíle, kdy jde fotka přes celou šířku karty, navíc dělaly z vysokých
   snímků na velkém monitoru 875px vysoký blok přes půl obrazovky. */
.fb-feed-main {
 max-width: 524px;
}

/* ---- intro karta (h1 + popisek hlavní stránky) ---- */
.fb-intro {
 background: var(--fb-card);
 border-radius: 10px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 padding: 14px 16px;
 margin-bottom: 14px;
}
/* Velikost = nadpis postu (.fb-title 1.42rem) + dalších 20 % => 1.7rem (přání
   uživatele 3. 10. 2026; návrh fb_feed.css má jen 1.05rem). Tloušťka bootstrapí
   (h1 = 500) - tučné 800 z návrhu se nelíbilo. Písmo taky bootstrapí, žádný vlastní
   font-family - je na zkoušku, případně se vymění centrálně.
   Na mobilu (pod ~400px) se do řádku nevejde: text-wrap: balance ho zalomí na dva
   vyrovnané řádky "Check my poo, / rate my poo" místo osamoceného "poo" na druhém.
   Starší prohlížeče bez podpory zalomí postaru, nic se nerozbije. */
.fb-intro h1 {
 font-size: 1.7rem;
 margin-bottom: 2px;
 text-wrap: balance;
}
.fb-intro p {
 font-size: .9rem;
 color: var(--fb-muted);
 margin-bottom: 4px;
}
/* "Upload new poop!" na indexu - stejně velký jako nadpis postu (.fb-title 1.42rem),
   tedy o 20 % menší než H1 (přání uživatele 3. 10. 2026). Dřív bootstrapí fs-3
   (až 1.75rem), který přerostl H1. Červená a tučné zůstávají (text-danger fw-bold). */
.fb-intro .fb-upload {
 font-size: 1.42rem;
}

/* ---- karta postu ---- */
.fb-card {
 border: 0;
 border-radius: 10px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .05);
 overflow: visible; /* reaction bar vyjíždí nad kartu */
}
.fb-rank {
 padding-top: 8px !important;
 color: var(--fb-muted);
}

/* hlavička: avatar + jméno + datum */
.fb-head {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 16px 6px; /* spodní 6px podle návrhu fb_feed.css */
}
.fb-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 flex: none;
 display: grid;
 place-items: center;
 color: #fff;
 font-size: .85rem;
 font-weight: 700;
 line-height: 1;
}
.fb-avatar.sm {
 width: 32px;
 height: 32px;
 font-size: .7rem;
}
/* vlastní profilovka místo iniciál - zdroj je zatím plný 512px avatar,
   prohlížeč ho zmenší na 40px (TODO: servírovat menší variantu) */
.fb-avatar-img {
 display: block;
 object-fit: cover;
 background: var(--fb-bubble);
}
/* paleta gradientů avatarů - třída se volí deterministicky podle jména */
.fb-av-0 { background: linear-gradient(135deg, #f09433, #dc2743); }
.fb-av-1 { background: linear-gradient(135deg, #8a3ab9, #cd486b); }
.fb-av-2 { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.fb-av-3 { background: linear-gradient(135deg, #16a34a, #65a30d); }
.fb-av-4 { background: linear-gradient(135deg, #b45309, #92400e); }
.fb-av-5 { background: linear-gradient(135deg, #be185d, #7c3aed); }
.fb-av-6 { background: linear-gradient(135deg, #0891b2, #0e7490); }
.fb-av-7 { background: linear-gradient(135deg, #ea580c, #dc2626); }
.fb-head .who {
 min-width: 0;
 flex: 1;
 line-height: 1.3;
}
/* Jméno bez tučného písma (přání uživatele 3. 10. 2026, návrh má 700) - od šedého
   data pod ním ho odliší velikost a barva. Detail postu má zatím v šabloně fw-bold,
   tam zůstává tučné. */
.fb-head .name {
 font-size: .95rem;
 color: var(--fb-text);
 display: inline-flex;
 align-items: center;
 gap: 5px;
}
/* registrovaní uživatelé = modrý klikací odkaz na profil (jako v původním designu) */
.fb-head a.name {
 color: #0d6efd;
}
.fb-head a.name:hover {
 text-decoration: underline !important;
}
.fb-head .name .verified {
 color: var(--fb-blue);
}
.fb-head .sub {
 color: var(--fb-muted);
 font-size: .78rem;
 display: flex;
 align-items: center;
 gap: 5px;
}
.dot-sep {
 padding: 0 1px;
}

/* meta blok nad fotkou - padding podle návrhu fb_feed.css
   (dřív ho řídily bootstrapí p-3 pt-1 v šabloně) */
.fb-meta {
 padding: 2px 16px 5px;
}
/* Prázdný <p id="postNN"> je jen kotva pro flash zprávy. Bootstrap mu dává
   margin-bottom 1rem, což dělalo velkou mezeru mezi jménem a nadpisem.
   Nesmí se smazat - skáče na něj JS z Home/default.latte. */
.fb-meta > p[id^="post"]:empty {
 margin: 0;
}
/* Velikost podle návrhu fb_feed.css (1.18rem), o 20 % větší (přání uživatele
   3. 10. 2026) => 1.42rem. Tloušťka i písmo bootstrapí (h2 = 500) - semibold 600
   z návrhu vypadal jako tučné a nelíbil se. Stejně velké je "Upload new poop!"
   v intru indexu (.fb-upload). */
.fb-title {
 font-size: 1.42rem;
 line-height: 1.3;
 margin: 2px 0 2px;
}
/* Titulek je odkaz na detail - černý jako v návrhu (přání uživatele 3. 10. 2026,
   předtím modrý); že je klikací, ukáže podtržení při najetí.
   font-size: inherit ruší h2 a { font-size: .8em } ze style.css - jinak by odkaz
   vyšel na 80 % velikosti nadpisu. */
.fb-title a {
 color: var(--fb-text);
 font-size: inherit;
 text-decoration: none;
}
.fb-title a:hover {
 text-decoration: underline;
}
.fb-meta .average {
 font-size: .88rem;
 color: #333;
}
.fb-meta .fb-loc {
 color: var(--fb-muted);
 font-size: .8rem;
 margin: 6px 0;
}
/* segment lokace (ikona + text) ve feedu - zalomí se jen celý, ne mezi ikonou a textem */
.fb-meta .fb-loc .seg {
 white-space: nowrap;
}
.fb-meta .stars svg {
 width: 17px;
 height: 17px;
}

/* Fotka ve feedu — vždycky přes celou šířku karty (Instagram).
   Dřív tu bylo max-height:40vh + object-fit:contain, takže se úzká vysoká fotka
   scvrkla doprostřed a po stranách zůstal bílý pruh — u každé fotky jinak široký
   (naměřeno 121 / 135 / 169 px), takže feed při scrollování třepil.

   Teď: width:100% + height:auto => fotky na šířku a čtverce se zobrazí CELÉ,
   bez ořezu. Teprve když je fotka vyšší než strop, narazí na max-height a
   object-fit:cover ji ořízne shora/zdola místo aby ji zmenšil.

   Strop je 125cqw = 1,25 násobek šířky karty, takže nejužší možný tvar je 4:5
   stejně jako na Instagramu — a drží to na všech třech breakpointech karty
   (500 / 580 / 700 px), což pevná hodnota v px neumí. Řádek s px je fallback
   pro prohlížeče bez container query units, ty ho cqw řádek přepíše. */
.fb-photo {
 display: block;
 background: #f7f8fa;
 border-top: 1px solid #e9ebee;
 line-height: 0; /* jinak pod obrázkem zůstane proužek z řádkování */
 container-type: inline-size;
}
.fb-photo img {
 display: block;
 width: 100%;
 height: auto;
 max-height: 620px;
 max-height: 125cqw;
 object-fit: cover;
 object-position: center;
}

/* Emoji pile — top 3 nejčastější reakce, vpravo v action baru.
   BEZ bílého podkladu: emoji glyf přetéká svůj box, takže bílý prstenec
   souseda (původní FB trik) neukrojil prázdné místo, ale přímo kresbu
   obličeje. Žádný bílý podklad = žádné ukusování. */
.fb-react-pile {
 margin-left: auto;
 display: inline-flex;
 align-items: center;
}
.fb-react-pile span {
 display: inline-flex;
 font-size: 1.05rem;
 line-height: 1;
 background: none;
 box-shadow: none;
}
.fb-react-pile span + span {
 margin-left: -3px;
}

/* Počet hlasů vpravo v action baru — protějšek .fb-react-pile výš (vylučují se
   navzájem, řídí to {if $showReactions} v šabloně). Pravá strana baru je "co
   udělali ostatní", stejně jako na FB.

   ŽÁDNÝ rámeček, podklad ani hover: první verze měla tvar tlačítka a vedle
   Comment a Share vypadala jako třetí tlačítko, které nejde zmáčknout.
   Barva --fb-muted (#65676b) je o ~20 % světlejší šedá než tlačítka Comment
   a Share (#444343, viz .fb-act níž) - touhle šedou píše FB neklikací údaje
   (přání uživatele 3. 10. 2026, dřív černá). Kurzor zůstává šipka.
   Číslo má tenké (normální) písmo jako počty u Comment a Share vedle, ne tučné
   (přání uživatele 3. 10. 2026). */
.fb-votes {
 margin-left: auto;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 color: var(--fb-muted);
 font-weight: normal;
 font-size: .88rem;
 cursor: default;
 -webkit-user-select: none;
 user-select: none;
}

/* action bar: jeden řádek — vlevo akce (Comment, Share), vpravo údaj o tom, co
   udělali ostatní: .fb-votes s počtem hlasů, nebo .fb-react-pile když jsou
   zapnuté reakce. Oboje si pravou stranu bere přes margin-left: auto.
   Popisky Comment ani Share ve feedu nejsou záměrně (Share pryč od 3. 10. 2026) —
   ikony lidi znají z FB/Instagramu, název nese aria-label kvůli čtečkám.
   .fb-act-label má zatím jen Share na detailu postu (Post/show.latte).

   Reakční část (.fb-act-wrap se srdcem, .fb-react-bar, .fb-react-pile) je od
   21. 9. 2026 v šabloně schovaná pod {if $showReactions} — pravidla pro ni tady
   ZŮSTÁVAJÍ, aby přepnutí zpátky na true fungovalo bez sahání do CSS. */
.fb-actions {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 8px 16px;
 margin: 0 8px;
 border-top: 1px solid var(--fb-divider);
}
.fb-act-wrap {
 position: relative;
 display: inline-flex;
}

.fb-act-label {
 font-size: .88rem;
}
/* Úzké mobily: popisek ven, ať se bar nezalomí do dvou řádků (ikona + počet stačí) */
@media (max-width: 380px) {
 .fb-act-label {
  display: none;
 }
}
/* Tlačítka akcí jsou tmavě šedá, při najetí modrá jako odkazy na webu (Bootstrap
   --bs-link-hover-color) se šedým podkladem. Neklikací počet hlasů (.fb-votes výš)
   je o ~20 % světlejší šedá a hover nemá. */
.fb-act {
 background: none;
 border: 0;
 cursor: pointer;
 color: rgb(68, 67, 67);
 text-decoration: none; /* Comment na detailu je <a> - bez podtržení jako Share vedle */
 font-weight: normal;
 font-size: .88rem;
 height: 34px;
 padding: 0 8px;
 border-radius: 8px;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: background .12s;
 /* mobil: tap nesmí označovat text ani blikat highlightem */
 -webkit-user-select: none;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
}
.fb-act:hover {
 background: var(--fb-hover);
 color: #0a58ca; /* Bootstrap --bs-link-hover-color */
}
.fb-act .fb-flip {
 transform: scaleX(-1);
}
.fb-act .react-emoji {
 font-size: 1.05rem;
 line-height: 1;
}
.fb-act .cnt {
 font-size: .85rem;
}
/* barvy zvolené reakce (sada v1.0: ❤️💩😀🤢🤮🫣💪🏻) */
.fb-act.reacted[data-reaction="love"] { color: var(--fb-love); }
.fb-act.reacted[data-reaction="poop"] { color: #8a5a2b; }
.fb-act.reacted[data-reaction="happy"],
.fb-act.reacted[data-reaction="peek"] { color: var(--fb-amber); }
.fb-act.reacted[data-reaction="gross"],
.fb-act.reacted[data-reaction="puke"] { color: #4e9a2e; }
.fb-act.reacted[data-reaction="strong"] { color: var(--fb-blue); }

/* plovoucí reaction picker */
.fb-react-bar {
 position: absolute;
 bottom: calc(100% + 6px);
 left: 0;
 z-index: 30;
 display: flex;
 align-items: center;
 gap: 2px;
 padding: 6px 8px;
 background: #fff;
 border-radius: 999px;
 box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
 transform-origin: bottom left;
 animation: fb-pop-in .16s ease;
}
.fb-react-bar.d-none {
 display: none;
}
@keyframes fb-pop-in {
 from {
  transform: scale(.6) translateY(8px);
  opacity: 0;
 }
}
.fb-react-bar button {
 position: relative;
 background: none;
 border: 0;
 cursor: pointer;
 font-size: 1.85rem;
 line-height: 1;
 padding: 2px;
 border-radius: 50%;
 transition: transform .12s ease;
 transform-origin: bottom center;
 -webkit-user-select: none;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
}
.fb-react-bar button:hover {
 transform: scale(1.45) translateY(-6px);
}
.fb-react-bar button .tip {
 position: absolute;
 left: 50%;
 transform: translate(-50%, -220%);
 background: #222;
 color: #fff;
 font-size: .62rem;
 padding: 2px 7px;
 border-radius: 8px;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
}
.fb-react-bar button:hover .tip {
 opacity: 1;
}

/* komentáře - FB bubliny */
.fb-cmt {
 display: flex;
 gap: 8px;
 margin-top: 10px;
}
.fb-cmt .bubble {
 background: var(--fb-bubble);
 border-radius: 16px;
 padding: 8px 12px;
 max-width: 100%;
}
.fb-cmt .bubble .u {
 font-weight: 700;
 font-size: .82rem;
 display: block;
}
.fb-cmt .bubble .tx {
 font-size: .9rem;
 line-height: 1.35;
}
.fb-cmt .bubble .card-text {
 margin-bottom: 0;
 font-size: .9rem;
 line-height: 1.35;
}
.fb-cmt .cmeta {
 display: flex;
 gap: 14px;
 padding: 3px 12px 0;
 font-size: .72rem;
 color: var(--fb-muted);
 font-weight: 600;
}
.fb-nocomments {
 color: var(--fb-muted);
 font-size: .85rem;
 margin: 10px 0 0;
}
.fb-viewmore {
 display: inline-block;
 margin: 12px 0 2px;
 color: var(--fb-muted);
 font-weight: 600;
 font-size: .85rem;
 text-decoration: none;
}
.fb-viewmore:hover {
 text-decoration: underline;
 color: var(--fb-text);
}
.fb-comments.d-none {
 display: none;
}

/* tělo karty - padding podle návrhu (dřív bootstrapí .card-body pt-0) */
.fb-body {
 padding: 4px 16px 14px;
}

/* vote strip - oddělený od reakcí, hvězdy zůstávají */
.fb-vote {
 margin-top: 12px;
 padding-top: 12px;
 border-top: 1px solid #e9ebee;
}
.fb-vote .rating svg {
 width: 1.55rem;
 height: 1.55rem;
}
/* Vote! tlačítko: tvar, hover, focus i disabled řeší bootstrapí .btn .btn-primary,
   tohle jen přenastaví barvy přes bootstrapí proměnné.
   Obrysová varianta (ne plná výplň) - v klidu jen rámeček a modrý text,
   ztmavne (vybarví se) až po najetí, stejně jako btn-outline-* jinde na webu. */
.fb-vote-submit {
 --bs-btn-color: var(--fb-blue);
 --bs-btn-bg: transparent;
 --bs-btn-border-color: var(--fb-blue);
 --bs-btn-hover-color: #fff;
 --bs-btn-hover-bg: var(--fb-blue);
 --bs-btn-hover-border-color: var(--fb-blue);
 --bs-btn-active-color: #fff;
 --bs-btn-active-bg: #0a58ca;
 --bs-btn-active-border-color: #0a58ca;
 --bs-btn-font-weight: 700;
 /* Neaktivní, dokud není vybraná hvězda (js/feed.js): stejný modrý obrys, jen
    vybledlý přes bootstrapí opacity .65. Šedou výplň z návrhu (#cfd7e6 s bílým
    textem) uživatel nechtěl - skoro nebyla vidět. Bez těchhle řádků by se vzaly
    barvy z btn-primary a neaktivní tlačítko by vypadalo plné, výraznější než aktivní. */
 --bs-btn-disabled-color: var(--fb-blue);
 --bs-btn-disabled-bg: transparent;
 --bs-btn-disabled-border-color: var(--fb-blue);
}

/* Po hlasování přes AJAX (js/feed.js) podle návrhu FbVoteBox (.fb-vote .done):
   zelená hláška "You rated 4/5 — 24 votes" a pod ní už jen hvězdy s odevzdaným
   hlasem. Vote! a nápověda zmizí, hvězdy jsou zamčené - žádný hover ani klik. */
.fb-vote-done {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 8px;
 color: var(--cmp-success);
 font-size: .82rem;
 font-weight: 700;
}
.fb-vote-done svg {
 flex: none;
}
.fb-vote.voted .rating label {
 cursor: default;
 pointer-events: none;
}

/* ---- share popup ---- */
.ig-share-scrim {
 position: fixed;
 inset: 0;
 z-index: 1200;
 background: rgba(0, 0, 0, .55);
 display: grid;
 place-items: center;
 padding: 16px;
 animation: ig-fade .15s ease;
}
.ig-share-scrim.d-none {
 display: none;
}
@keyframes ig-fade {
 from { opacity: 0; }
}
.ig-sheet {
 background: #fff;
 border-radius: 14px;
 width: 100%;
 max-width: 380px;
 overflow: hidden;
 box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
 animation: ig-rise .18s ease;
}
@keyframes ig-rise {
 from {
  transform: translateY(12px);
  opacity: .6;
 }
}
.ig-sheet-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 16px;
 border-bottom: 1px solid #efefef;
}
.ig-sheet-head .ttl {
 font-weight: 700;
 font-size: .95rem;
}
.ig-sheet-head .x {
 background: none;
 border: 0;
 cursor: pointer;
 font-size: 1.1rem;
 color: #555;
 line-height: 0;
 padding: 4px;
}
.ig-share-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 6px;
 padding: 18px 12px 6px;
}
.ig-share-opt {
 background: none;
 border: 0;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 7px;
 padding: 8px 4px;
 border-radius: 10px;
 color: var(--fb-text);
 font-size: .72rem;
 transition: background .12s ease;
 text-decoration: none;
}
.ig-share-opt:hover {
 background: #f5f5f5;
 color: var(--fb-text);
}
.ig-share-opt .ic {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 color: #fff;
}
.ig-share-link {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 8px 14px 16px;
 border: 1px solid var(--fb-divider);
 border-radius: 10px;
 padding: 9px 12px;
}
.ig-share-link .url {
 flex: 1;
 min-width: 0;
 font-size: .78rem;
 color: #555;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.ig-share-link button {
 border: 0;
 background: var(--fb-text);
 color: #fff;
 border-radius: 7px;
 padding: 7px 13px;
 font-size: .78rem;
 font-weight: 600;
 cursor: pointer;
 white-space: nowrap;
}
.ig-share-link button.ok {
 background: var(--cmp-success);
}

/* ============================================================
   Detail postu (permalink) — návrh "CheckMyPoo Post Detail FB".
   Stejná karta jako ve feedu, jen širší a s většími texty:
   .fb-head / .fb-meta / .fb-actions / .fb-vote se dědí odsud
   shora, nové jsou jen selektory fbp-*.
   ============================================================ */
:root {
 --fbp-w: 700px;
}

/* Sloupec detailu — .fbp-wrap sedí na .MainContent v @post.show.latte */
.fbp-wrap {
 max-width: var(--fbp-w);
 padding-bottom: 40px;
}
.fbp-wrap a {
 color: var(--fb-blue);
}
.fbp-wrap a:hover {
 color: #0a58ca;
}

/* horní lišta: číslo postu, datum, zpět + mini mapa */
.fbp-crumb {
 background: var(--fb-card);
 border-radius: 10px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 padding: 12px 16px;
 margin-bottom: 16px;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
}
.fbp-crumb .num {
 font-size: .82rem;
 color: var(--fb-muted);
 margin: 0 0 3px;
}
.fbp-crumb .back {
 font-size: .9rem;
 font-weight: 600;
}
.fbp-map-link {
 display: block;
 cursor: pointer;
}
.fbp-map {
 width: 150px;
 height: 100px;
 flex: none;
 border: 2px solid #ddd;
 border-radius: 6px;
 overflow: hidden;
 background: #e8eef2;
}

/* karta detailu — větší paddingy a typografie než ve feedu */
.fbp-card {
 background: var(--fb-card);
 margin-bottom: 16px;
}
.fbp-card .fb-head {
 padding: 14px 18px 4px;
}
.fbp-card .fb-head .fb-avatar {
 width: 44px;
 height: 44px;
 font-size: .95rem;
}
.fbp-card .fb-meta {
 padding: 2px 18px 12px;
}
.fbp-card h1.fbp-title {
 font-size: 1.55rem;
 font-weight: 500; /* jako Bootstrap nadpisy ve starém designu */
 line-height: 1.22;
 letter-spacing: -.01em;
 margin: 2px 0 9px;
 color: var(--fb-text);
}
.fbp-card .average {
 font-size: .95rem;
 color: #333;
}
.fbp-card .average .who {
 color: var(--fb-muted);
}
.fbp-card .fb-loc {
 color: var(--fb-muted);
 font-size: .85rem;
 margin: 7px 0 0;
}
.fbp-card .fb-actions {
 padding: 10px 18px;
 margin: 0 6px;
}
.fbp-card .fb-body {
 padding: 4px 18px 16px;
}

/* Fotka — BEZ pevné výšky. Návrh měl box 620px a obrázek v něm vycentrovaný,
   jenže pak nad ním a pod ním zbýval prázdný pruh (na mobilu nejvíc) a muselo
   se zbytečně scrollovat. Box se proto přizpůsobí obrázku stejně jako ve feedu,
   výšku drží jen strop max-height. */
.fbp-photo {
 width: 100%;
 background: #f7f8fa;
 border-top: 1px solid #e9ebee;
 border-bottom: 1px solid #e9ebee;
 text-align: center;
 line-height: 0; /* jinak pod obrázkem zůstane proužek z řádkování */
}
.fbp-photo a {
 display: block; /* bylo inline-block - box se smrskl na fotku a pruhy zůstaly venku */
 position: relative;
 overflow: hidden;
}
/* Rozmazaná kopie téže fotky vyplňuje prázdno po stranách úzkých snímků.
   Na detailu se na rozdíl od feedu NIC neořezává - fotka musí zůstat celá -
   ale bílé pruhy byly u každé fotky jinak široké (naměřeno 121 / 135 / 169 px)
   a stránka tím třepila. Je to druhý <img> se stejným src, prohlížeč ho vezme
   z cache, takže žádné stahování navíc. Přes background-image ve style atributu
   to schválně NEJDE: Latte tam escapuje URL (past popsaná v claude-fb-redesign.md). */
.fbp-photo .fbp-blur {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(28px) saturate(1.25);
 transform: scale(1.12); /* aby rozmazané kraje nenechaly po obvodu průsvitný lem */
}
.fbp-photo img:not(.fbp-blur) {
 position: relative; /* nad rozmazaným podkladem */
 display: block;
 margin: 0 auto;
 max-width: 100%;
 max-height: 70vh;
 width: auto;
 height: auto;
}

/* popisek autora pod fotkou */
.fbp-text {
 font-size: 1.05rem;
 line-height: 1.45;
 padding: 14px 18px 0;
}
.fbp-text p:last-child {
 margin-bottom: 0;
}

/* řádek se sdílením, kopírováním odkazů a stažením */
.fbp-tools {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
 padding: 14px 18px 0;
}
.fbp-tools .pill {
 border: 1px solid var(--fb-divider);
 background: var(--fb-card);
 color: var(--fb-text);
 border-radius: 8px;
 font-size: .82rem;
 font-weight: 600;
 padding: 8px 12px;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: background .12s;
 text-decoration: none;
}
.fbp-tools .pill:hover {
 background: var(--fb-hover);
 color: var(--fb-text);
}
.fbp-tools .pill.ok {
 border-color: var(--cmp-success);
 color: var(--cmp-success);
}
.fbp-tools .spacer {
 flex: 1;
}

/* sekce komentářů */
.fbp-comments {
 padding: 16px 18px 18px;
 border-top: 1px solid #e9ebee;
 margin-top: 16px;
}
.fbp-comments h2 {
 font-size: 1.12rem;
 font-weight: 700;
 margin: 0 0 12px;
}
.fbp-comments .list {
 margin-top: 16px;
}

/* Nette vykresluje commentForm jako tabulku - tady se jen učeše do FB vzhledu.
   Markup formuláře se nemění, aby zůstala validace i n:name vazby. */
.fbp-form-classic table {
 border-collapse: separate;
 border-spacing: 0 8px;
}
.fbp-form-classic th {
 text-align: left;
 vertical-align: top;
 padding: 6px 12px 0 0;
 font-weight: 600;
 font-size: .9rem;
 white-space: nowrap;
}
.fbp-form-classic label.required::after {
 content: " *";
 color: var(--cmp-brand-red);
}
.fbp-form-classic input.text,
.fbp-form-classic textarea {
 border: 1px solid var(--fb-divider);
 border-radius: 8px;
 padding: 7px 10px;
 font: inherit;
 font-size: .9rem;
 min-width: 260px;
 max-width: 100%;
}
.fbp-form-classic input.text:focus,
.fbp-form-classic textarea:focus {
 outline: 2px solid rgba(24, 119, 242, .35);
 border-color: var(--fb-blue);
}
.fbp-form-classic textarea {
 min-height: 72px;
 width: 100%;
}
.fbp-form-classic input[type="submit"] {
 border: 0;
 border-radius: 8px;
 background: var(--fb-blue);
 color: #fff;
 font: inherit;
 font-weight: 700;
 font-size: .85rem;
 padding: 8px 18px;
 cursor: pointer;
}
.fbp-form-classic input[type="submit"]:hover {
 background: #0a58ca;
}

/* karta Dr. Poop */
.fbp-doc-head {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 12px 18px 0;
}
.fbp-doc-head img {
 height: 132px;
 width: auto;
}
.fbp-doc-body {
 margin: 12px 18px 18px;
 padding: 16px 18px;
 background: #f8f9fa;
 border: 1px solid var(--fb-divider);
 border-radius: 10px;
}
.fbp-doc-body h3 {
 font-size: .98rem;
 font-weight: 700;
 margin: 16px 0 5px;
}
.fbp-doc-body h3:first-child {
 margin-top: 0;
}
.fbp-doc-body p,
.fbp-doc-body li {
 font-size: .92rem;
 line-height: 1.5;
 margin: 0 0 8px;
}
.fbp-doc-body ul {
 margin: 0 0 10px;
 padding-left: 20px;
}

/* mobil: karta na celou šířku, nižší fotka, menší nadpis */
@media (max-width: 740px) {
 .fbp-card,
 .fbp-crumb {
  border-radius: 0;
 }
 .fbp-card h1.fbp-title {
  font-size: 1.3rem;
 }
 .fbp-photo img:not(.fbp-blur) {
  max-height: 60vh; /* na mobilu nižší strop, ať se nemusí tolik scrollovat */
 }
 .fbp-doc-head img {
  height: 96px;
 }
}