/* =========================================================================
 * Sokol – Sociální sítě: styl bloku na úvodní stránce.
 * Je součástí pluginu → po přenosu na jiný WordPress vypadá blok stejně.
 * Barvy/rádiusy berou proměnné šablony, ale mají i vlastní záložní hodnoty.
 * ========================================================================= */
/* align-items:stretch → oba panely stejně vysoké. Instagram určuje výšku
   (Facebook má osu „vyjmutou z toku", viz níže), takže Facebook není delší. */
.sjm-social{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.sjm-social__panel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e6e8ec);border-radius:var(--radius,18px);box-shadow:var(--shadow,0 14px 34px -18px rgba(15,23,42,.28));padding:22px;}
.sjm-social__head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.sjm-social__net{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;flex:0 0 auto;}
.sjm-social__net svg{width:24px;height:24px;}
.sjm-social__net--ig{background:linear-gradient(45deg,#f09433,#e6683c 22%,#dc2743 50%,#cc2366 72%,#bc1888);}
.sjm-social__net--fb{background:#1877f2;}
.sjm-social__id{display:flex;flex-direction:column;line-height:1.25;}
.sjm-social__id strong{font-size:17px;}
.sjm-social__id span{font-size:13px;color:var(--muted,#64748b);}
.sjm-social__follow{margin-left:auto;padding:9px 18px;border-radius:999px;background:var(--red,#c9102f);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap;}
.sjm-social__follow:hover{transform:translateY(-2px);color:#fff;box-shadow:0 10px 22px -10px rgba(198,26,40,.7);}
.sjm-social__follow--fb{background:#1877f2;}
.sjm-social__follow--fb:hover{box-shadow:0 10px 22px -10px rgba(24,119,242,.7);}

/* Instagram mřížka */
.sjm-social__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sjm-social__cell{position:relative;aspect-ratio:1/1;border-radius:12px;background-size:cover;background-position:center;overflow:hidden;display:block;cursor:zoom-in;}
.sjm-social__cell::after{content:"";position:absolute;inset:0;background:rgba(15,23,42,0);transition:background .25s;}
.sjm-social__cell:hover::after{background:rgba(15,23,42,.28);}
.sjm-social__cellico{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;z-index:1;}
.sjm-social__cellico svg{width:26px;height:26px;}
.sjm-social__cell:hover .sjm-social__cellico{opacity:1;transform:scale(1);}

/* Reels/videa: trvalá „přehrát" značka, aby bylo poznat, že jde o video (otevře se na Instagramu). */
.sjm-social__cell--video .sjm-social__cellico{opacity:1;transform:scale(1);}
.sjm-social__cell--video .sjm-social__cellico svg{width:34px;height:34px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));}
.sjm-social__cell--video::after{background:rgba(15,23,42,.18);}
.sjm-social__cell--video:hover .sjm-social__cellico svg{transform:scale(1.08);}

/* Instagram – tlačítko „Načíst další fotky" */
.sjm-social__cell--more{display:none;}
.sjm-social__cell--more.is-shown{display:block;animation:sjmFade .35s ease;}
@keyframes sjmFade{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
.sjm-social__loadmore{display:block;margin:16px auto 0;padding:11px 26px;border:0;border-radius:999px;background:var(--red,#c9102f);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.sjm-social__loadmore:hover{background:#a60d27;transform:translateY(-1px);}
.sjm-social__loadmore[hidden]{display:none;}

/* Facebook – živá časová osa (oficiální Page Plugin) */
.sjm-social__fbbody{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;}
/* Osa je „vyjmutá z toku" (position:absolute), takže neurčuje výšku panelu –
   panel se roztáhne na výšku Instagramu a osa ho vyplní (přebytek se ořízne). */
.sjm-social__fbembed{position:relative;flex:1 1 auto;min-height:320px;width:100%;overflow:hidden;text-align:center;border-radius:12px;}
.sjm-social__fbembed #fb-root{display:none;}
/* Blokový (ne inline-block) kontejner na plnou šířku → FB SDK změří skutečnou
   šířku panelu a vykreslí časovou osu na celou šířku (ne zúženou). */
.sjm-social__fbembed .fb-page{position:absolute;inset:0;display:block;width:100%;max-width:100%;}
.sjm-social__fbembed .fb-page>span{display:block!important;width:100%!important;height:100%!important;margin:0 auto;}
.sjm-social__fbembed .fb-page span,.sjm-social__fbembed .fb-page iframe{max-width:100%!important;}

/* Facebook – náhradní karty (jen když ještě není nastavená stránka/token) */
.sjm-social__post{display:flex;gap:14px;align-items:flex-start;padding:12px;border:1px solid var(--line,#e6e8ec);border-radius:14px;text-decoration:none;color:var(--ink,#0f172a);cursor:zoom-in;transition:background .2s,border-color .2s;}
.sjm-social__post:hover{background:#f8fafc;border-color:#cfd8e3;color:var(--ink,#0f172a);}
.sjm-social__postimg{flex:0 0 64px;width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center;}
.sjm-social__posttxt{font-size:14px;line-height:1.45;}
.sjm-social__postdate{display:block;font-size:12px;color:var(--muted,#64748b);font-weight:600;margin-bottom:3px;}
.sjm-social__more{margin-top:4px;font-weight:700;color:#1877f2;text-decoration:none;font-size:14px;}
.sjm-social__more:hover{color:#1877f2;text-decoration:underline;}

@media (max-width:900px){
	.sjm-social{grid-template-columns:1fr;}
	.sjm-social__fbbody{display:block;}
	/* Facebook na mobilu/tabletu: pevně vysoký, PEVNĚ OHRANIČENÝ rámeček –
	   časová osa se uvnitř sama posouvá. Absolutní vyplnění + overflow:hidden
	   znamená, že se FB blok NIKDY nemůže „vylít" přes sekci kontaktu pod ním
	   (dřív se span fluid-widgetu složil na 0 a 720px iframe od FB přetékal). */
	.sjm-social__fbembed{position:relative;height:600px;min-height:0;width:100%;overflow:hidden;border-radius:12px;}
	.sjm-social__fbembed .fb-page,
	.sjm-social__fbembed .fb_iframe_widget{position:absolute!important;inset:0;display:block!important;width:100%!important;max-width:100%!important;height:100%!important;}
	.sjm-social__fbembed .fb-page>span,
	.sjm-social__fbembed .fb_iframe_widget>span{display:block!important;width:100%!important;height:100%!important;}
	.sjm-social__fbembed iframe{width:100%!important;height:100%!important;}
}