/* =========================================================
   LinkedIn Feed Pro — frontend styles
   Colours come from CSS variables set inline per settings.
   ========================================================= */

.lfp-wrap{
	--lfp-brand:#0A66C2;
	--lfp-card-bg:#fff;
	--lfp-text:#1f2328;
	--lfp-radius:12px;
	--lfp-cols:3;
	--lfp-muted:#5f6b7a;
	--lfp-border:rgba(15,23,42,.08);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--lfp-text);
	position:relative;
	max-width:100%;
	box-sizing:border-box;
}
.lfp-wrap *{box-sizing:border-box}

/* ---------- header ---------- */
.lfp-title{
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
	letter-spacing:-.02em;
	line-height:1.25;
	margin:0 auto 14px;
	max-width:760px;
	color:var(--lfp-text);
}
.lfp-title-rule{
	display:block;width:54px;height:3px;border-radius:3px;
	background:var(--lfp-brand);opacity:.55;
	margin:0 auto 22px;
}

/* profile bar */
.lfp-profile{
	display:flex;align-items:center;gap:12px;
	justify-content:center;
	margin:0 auto 26px;
	flex-wrap:wrap;
}
.lfp-profile-avatar{
	width:42px;height:42px;border-radius:50%;overflow:hidden;
	background:var(--lfp-brand);flex:0 0 42px;
	display:flex;align-items:center;justify-content:center;
}
.lfp-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lfp-profile-meta{display:flex;flex-direction:column;line-height:1.3}
.lfp-profile-name{font-weight:700;font-size:.98rem}
.lfp-profile-followers{font-size:.82rem;color:var(--lfp-muted)}
.lfp-follow{
	display:inline-flex;align-items:center;gap:6px;
	background:var(--lfp-brand);color:#fff;text-decoration:none;
	font-weight:600;font-size:.88rem;
	padding:7px 18px;border-radius:999px;margin-left:6px;
	transition:filter .15s ease, transform .15s ease;
}
.lfp-follow:hover{filter:brightness(.92);transform:translateY(-1px);color:#fff}

/* ---------- track / layouts ---------- */
.lfp-track{display:grid;gap:18px}

.lfp-layout-grid .lfp-track{
	grid-template-columns:repeat(var(--lfp-cols),minmax(0,1fr));
}
.lfp-layout-list .lfp-track{
	grid-template-columns:1fr;
	max-width:620px;
}

/* slider */
.lfp-layout-slider .lfp-track{
	display:flex;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	gap:18px;
	padding-bottom:6px;
	-ms-overflow-style:none;scrollbar-width:none;
}
.lfp-layout-slider .lfp-track::-webkit-scrollbar{display:none}
.lfp-layout-slider .lfp-card{
	flex:0 0 calc((100% - (var(--lfp-cols) - 1) * 18px) / var(--lfp-cols));
	scroll-snap-align:start;
}

/* slider nav buttons */
.lfp-nav{
	position:absolute;top:50%;transform:translateY(-50%);
	z-index:5;width:42px;height:42px;border:none;cursor:pointer;
	border-radius:50%;background:#fff;color:var(--lfp-brand);
	font-size:24px;line-height:1;
	box-shadow:0 4px 14px rgba(2,8,23,.16);
	display:flex;align-items:center;justify-content:center;
	transition:transform .15s ease, box-shadow .15s ease;
}
.lfp-nav:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px rgba(2,8,23,.22)}
.lfp-prev{left:-12px}
.lfp-next{right:-12px}

/* ---------- card ---------- */
.lfp-card{
	background:var(--lfp-card-bg);
	border:1px solid var(--lfp-border);
	border-radius:var(--lfp-radius);
	padding:18px;
	display:flex;flex-direction:column;
	box-shadow:0 1px 2px rgba(2,8,23,.04), 0 8px 24px rgba(2,8,23,.05);
	transition:transform .18s ease, box-shadow .18s ease;
}
.lfp-card:hover{
	transform:translateY(-3px);
	box-shadow:0 2px 4px rgba(2,8,23,.06), 0 16px 36px rgba(2,8,23,.10);
}

/* head */
.lfp-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.lfp-avatar{
	flex:0 0 48px;width:48px;height:48px;border-radius:50%;
	overflow:hidden;background:var(--lfp-brand);
	display:flex;align-items:center;justify-content:center;
}
.lfp-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lfp-avatar-fallback{color:#fff;font-weight:700;font-size:1.1rem;text-transform:lowercase}
.lfp-meta{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.lfp-author{font-weight:700;font-size:.95rem}
.lfp-author-title{font-size:.8rem;color:var(--lfp-muted)}
.lfp-date{font-size:.75rem;color:var(--lfp-muted);margin-top:2px}
.lfp-in-badge{color:var(--lfp-brand);flex:0 0 auto}

/* content */
.lfp-content{
	font-size:.92rem;line-height:1.55;
	white-space:normal;word-wrap:break-word;
	margin-bottom:12px;
}

/* image */
.lfp-image{
	margin:0 0 4px;
	border-radius:8px;
	overflow:hidden;
}
.lfp-image img{width:100%;height:auto;display:block;cursor:zoom-in}

/* card footer (heart / comment / share) */
.lfp-card-foot{
	display:flex;align-items:center;gap:18px;
	padding-top:10px;margin-top:auto;
	border-top:1px solid var(--lfp-border);
	color:var(--lfp-muted);
}
.lfp-foot-item{
	display:inline-flex;align-items:center;gap:5px;
	font-size:.82rem;
}
.lfp-foot-like svg{color:#e0245e}
.lfp-foot-comment svg{color:var(--lfp-muted)}
.lfp-foot-num{font-weight:500}
.lfp-foot-share{
	margin-left:auto;
	display:inline-flex;align-items:center;gap:6px;
	color:var(--lfp-muted);text-decoration:none;
	font-size:.82rem;font-weight:600;
	transition:color .15s ease;
}
.lfp-foot-share:hover{color:var(--lfp-brand)}

/* empty (admin only) */
.lfp-empty{
	border:1px dashed #c7ccd4;border-radius:10px;
	padding:16px 18px;background:#f7f8fa;color:#5f6b7a;font-size:.9rem;
}

/* ---------- lightbox ---------- */
.lfp-lightbox{
	position:fixed;inset:0;z-index:99999;
	background:rgba(5,9,18,.86);
	display:flex;align-items:center;justify-content:center;
	padding:24px;cursor:zoom-out;
	opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
.lfp-lightbox.open{opacity:1;visibility:visible}
.lfp-lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ---------- News Wall (images only, masonry) ---------- */
.lfp-layout-wall .lfp-track{
	display:block;
	column-count:var(--lfp-cols);
	column-gap:14px;
}
.lfp-wall-card{
	break-inside:avoid;
	margin:0 0 14px;
	display:block;
}
.lfp-wall-link{
	position:relative;display:block;
	border-radius:var(--lfp-radius);
	overflow:hidden;
	background:#eef1f5;
}
.lfp-wall-img{
	width:100%;height:auto;display:block;
	transition:transform .4s ease;
}
.lfp-wall-link:hover .lfp-wall-img{transform:scale(1.05)}
.lfp-wall-overlay{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;
	color:#fff;background:rgba(10,102,194,.0);
	opacity:0;transition:opacity .25s ease, background .25s ease;
}
.lfp-wall-link:hover .lfp-wall-overlay{
	opacity:1;background:rgba(10,102,194,.42);
}
.lfp-wall-date{
	display:block;margin:7px 2px 0;
	font-size:.76rem;color:var(--lfp-muted);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
	.lfp-layout-grid .lfp-track{grid-template-columns:repeat(2,minmax(0,1fr))}
	.lfp-layout-slider .lfp-card{flex-basis:calc((100% - 18px) / 2)}
	.lfp-layout-wall .lfp-track{column-count:2}
}
@media (max-width:600px){
	.lfp-layout-grid .lfp-track{grid-template-columns:1fr}
	.lfp-layout-slider .lfp-card{flex-basis:86%}
	.lfp-layout-wall .lfp-track{column-count:1}
	.lfp-prev{left:-4px}
	.lfp-next{right:-4px}
}