/* EMDL LinkedIn Feeds — front-end styles
   Scoped under .emdl-lif so it never bleeds into the theme. */

.emdl-lif {
	--emdl-lif-accent: #0a66c2;
	--emdl-lif-cols: 3;
	--emdl-lif-bg: #ffffff;
	--emdl-lif-fg: #1d2226;
	--emdl-lif-muted: #56687a;
	--emdl-lif-border: #e3e6ea;
	--emdl-lif-text: #1f4d77;          /* post body colour (LinkedIn-style navy) */
	--emdl-lif-tile: #1b1f23;          /* header logo tile background */
	--emdl-lif-radius: 12px;
	--emdl-lif-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
	color: var(--emdl-lif-fg);
	box-sizing: border-box;
}

.emdl-lif *,
.emdl-lif *::before,
.emdl-lif *::after { box-sizing: border-box; }

.emdl-lif--dark {
	--emdl-lif-bg: #1b1f23;
	--emdl-lif-fg: #f1f3f5;
	--emdl-lif-muted: #9aa7b3;
	--emdl-lif-border: #2c333a;
	--emdl-lif-text: #cfe0f2;
	--emdl-lif-tile: #0a66c2;
	--emdl-lif-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
}

/* ---------- feed header (logo tile + page name) ---------- */
.emdl-lif-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
}
.emdl-lif-header__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--emdl-lif-tile);
	flex: 0 0 auto;
}
.emdl-lif-header__name {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--emdl-lif-fg);
	text-decoration: none;
}
.emdl-lif-header__name:hover { color: var(--emdl-lif-accent); }

/* ---------- grid / list ---------- */
.emdl-lif-grid {
	display: grid;
	grid-template-columns: repeat(var(--emdl-lif-cols), minmax(0, 1fr));
	gap: 20px;
}
.emdl-lif--list .emdl-lif-grid { grid-template-columns: 1fr; max-width: 640px; }

@media (max-width: 980px) { .emdl-lif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .emdl-lif-grid { grid-template-columns: 1fr; } }

/* ---------- card ---------- */
.emdl-lif-card {
	display: flex;
	flex-direction: column;
	background: var(--emdl-lif-bg);
	border: 1px solid var(--emdl-lif-border);
	border-radius: var(--emdl-lif-radius);
	box-shadow: var(--emdl-lif-shadow);
	overflow: hidden;
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.emdl-lif-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }

.emdl-lif-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 10px;
}
.emdl-lif-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--emdl-lif-border);
}
.emdl-lif-avatar--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	background: var(--emdl-lif-accent);
}
.emdl-lif-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.emdl-lif-name {
	font-weight: 700;
	color: var(--emdl-lif-fg);
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.emdl-lif-name:hover { color: var(--emdl-lif-accent); text-decoration: underline; }
.emdl-lif-tagline,
.emdl-lif-date { font-size: 12.5px; color: var(--emdl-lif-muted); }
.emdl-lif-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.emdl-lif-brand { margin-left: auto; color: var(--emdl-lif-accent); flex: 0 0 auto; }

.emdl-lif-card__body { padding: 4px 16px 12px; }
.emdl-lif-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--emdl-lif-text); }
.emdl-lif-more {
	display: inline-block;
	margin-top: 6px;
	color: var(--emdl-lif-muted);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
}
.emdl-lif-more:hover { color: var(--emdl-lif-accent); text-decoration: underline; }

.emdl-lif-card__media { display: block; line-height: 0; }
.emdl-lif-card__media img { width: 100%; height: auto; display: block; }

.emdl-lif-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--emdl-lif-border);
}
.emdl-lif-actions { display: inline-flex; align-items: center; gap: 18px; }
.emdl-lif-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--emdl-lif-muted);
	font-size: 13px;
	font-weight: 600;
}
.emdl-lif-act .emdl-lif-ico { width: 20px; height: 20px; }
.emdl-lif-count { line-height: 1; }
.emdl-lif-share {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--emdl-lif-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.emdl-lif-share .emdl-lif-ico { width: 18px; height: 18px; }
.emdl-lif-share:hover { color: var(--emdl-lif-accent); }
.emdl-lif-act--like:hover { color: #e0245e; }
.emdl-lif-act--comment:hover { color: var(--emdl-lif-accent); }

/* ---------- follow CTA ---------- */
.emdl-lif-follow { margin-top: 20px; text-align: center; }
.emdl-lif-follow-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--emdl-lif-accent);
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: filter .15s ease;
}
.emdl-lif-follow-btn:hover { filter: brightness(1.08); color: #fff; }
.emdl-lif-follow-btn .emdl-lif-li { color: #fff; }

/* ---------- carousel ---------- */
.emdl-lif-swiper { padding-bottom: 30px; }
.emdl-lif-swiper .swiper-slide { height: auto; display: flex; }
.emdl-lif-swiper .swiper-slide .emdl-lif-card { width: 100%; }

/* Round, translucent arrows that sit over the slide like the reference design. */
.emdl-lif .swiper-button-prev,
.emdl-lif .swiper-button-next {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background .15s ease;
}
.emdl-lif .swiper-button-prev:hover,
.emdl-lif .swiper-button-next:hover { background: rgba(0, 0, 0, .7); }
.emdl-lif .swiper-button-prev::after,
.emdl-lif .swiper-button-next::after { font-size: 16px; font-weight: 700; }

/* Pagination dots under the slider. */
.emdl-lif .swiper-pagination { bottom: 0; }
.emdl-lif .swiper-pagination-bullet { background: var(--emdl-lif-muted); opacity: .5; }
.emdl-lif .swiper-pagination-bullet-active { background: var(--emdl-lif-accent); opacity: 1; }

/* ---------- admin notice ---------- */
.emdl-lif-notice {
	padding: 12px 16px;
	border: 1px dashed #c9ced4;
	border-radius: 8px;
	background: #f8f9fa;
	color: #56687a;
	font-size: 14px;
}