/* LWD Social Feed — front-end styles.
   Vanilla CSS reimplementation of a few Magic UI effects (marquee, magic-card
   spotlight, blur-fade) so no React/build step is needed in the widget area. */

.lwd-feed {
	--lwd-accent: #1a2b4a;
	--lwd-columns: 4;
	--lwd-gap: 20px;
	--lwd-radius: 10px;
	position: relative;
	box-sizing: border-box;
}
.lwd-feed *,
.lwd-feed *::before,
.lwd-feed *::after { box-sizing: border-box; }

.lwd-empty {
	padding: 24px;
	text-align: center;
	color: #6b7280;
	font-style: italic;
}

/* ---------- Track / layouts ---------- */
.lwd-track {
	display: flex;
	gap: var(--lwd-gap);
}

/* Carousel: horizontal, fixed-width cards, JS-driven translate */
.lwd-layout-carousel { padding: 0 44px; }
.lwd-layout-carousel .lwd-track {
	overflow: hidden;
	scroll-behavior: smooth;
}
.lwd-layout-carousel .lwd-card {
	flex: 0 0 calc((100% - (var(--lwd-columns) - 1) * var(--lwd-gap)) / var(--lwd-columns));
}

/* Grid: wraps */
.lwd-layout-grid .lwd-track {
	display: grid;
	grid-template-columns: repeat(var(--lwd-columns), 1fr);
}

/* Marquee: infinite auto-scroll, pause on hover (ported from Magic UI marquee) */
.lwd-layout-marquee { overflow: hidden; }
.lwd-layout-marquee .lwd-track {
	width: max-content;
	animation: lwd-marquee 40s linear infinite;
}
.lwd-layout-marquee:hover .lwd-track { animation-play-state: paused; }
.lwd-layout-marquee .lwd-card { flex: 0 0 320px; }
@keyframes lwd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.lwd-layout-marquee .lwd-track { animation: none; }
}

/* ---------- Card ---------- */
.lwd-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: var(--lwd-radius);
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
}
.lwd-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.lwd-card:focus-visible { outline: 3px solid var(--lwd-accent); outline-offset: 2px; }

.lwd-card-media { position: relative; aspect-ratio: 1 / 1; background: #f3f4f6; }
.lwd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lwd-badge {
	position: absolute; top: 10px; right: 10px;
	width: 26px; height: 26px; border-radius: 5px;
	color: #fff; font-weight: 700; font-size: 13px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.lwd-card-body { padding: 14px 16px 18px; }
.lwd-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.lwd-author { font-weight: 700; color: #111827; font-size: 14px; }
.lwd-date { color: #6b7280; font-size: 12px; }
.lwd-caption { margin: 0; color: #374151; font-size: 14px; line-height: 1.5; }
.lwd-readmore { color: var(--lwd-accent); font-weight: 600; margin-left: 4px; white-space: nowrap; }

/* ---------- Nav arrows ---------- */
.lwd-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 2;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid #e5e7eb; background: #fff; color: var(--lwd-accent);
	font-size: 22px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	transition: background .15s ease;
}
.lwd-nav:hover { background: #f9fafb; }
.lwd-prev { left: 0; }
.lwd-next { right: 0; }

/* ---------- Style: magic (spotlight follows cursor) ---------- */
.lwd-style-magic .lwd-card::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	opacity: 0; transition: opacity .3s ease;
	background: radial-gradient(180px circle at var(--lwd-x, 50%) var(--lwd-y, 50%),
		color-mix(in srgb, var(--lwd-accent) 22%, transparent), transparent 60%);
	pointer-events: none;
}
.lwd-style-magic .lwd-card:hover::before { opacity: 1; }

/* ---------- Style: minimal ---------- */
.lwd-style-minimal .lwd-card { border: none; box-shadow: none; background: transparent; }
.lwd-style-minimal .lwd-card:hover { transform: none; box-shadow: none; }
.lwd-style-minimal .lwd-card-body { padding: 12px 4px; }

/* Blur-fade entrance animation was removed in 0.4.2: the opacity transition could
   freeze at 0 under some caching/optimization + page-load timing combinations
   (e.g. WP Rocket + Content Views Pro), leaving cards invisible. Cards now render
   immediately, which is bulletproof across hosting/optimization stacks. */

/* ---------- Lightbox ----------
   Default-hidden via an inline style="display:none" in the markup (survives CSS
   optimizers like WP Rocket RUCSS); JS toggles the inline display to open/close.
   No display declaration in the base rule so inline style always wins. */
.lwd-lightbox { position: fixed; inset: 0; z-index: 99999;
	align-items: center; justify-content: center; padding: 20px; }
.lwd-lightbox-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.7); }
.lwd-lightbox-panel {
	position: relative; z-index: 1;
	background: #fff; border-radius: 12px; overflow: hidden;
	max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
	box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.lwd-lightbox-media img { width: 100%; display: block; }
.lwd-lightbox-body { padding: 18px 20px 22px; }
.lwd-lightbox-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.lwd-lightbox-author { font-weight: 700; color: #111827; }
.lwd-lightbox-date { color: #6b7280; font-size: 13px; }
.lwd-lightbox-caption { color: #374151; line-height: 1.6; margin: 0 0 16px; white-space: pre-line; }
.lwd-lightbox-link {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--lwd-accent); color: #fff; text-decoration: none;
	padding: 9px 16px; border-radius: 6px; font-weight: 600; font-size: 14px;
}
.lwd-lightbox-close {
	position: absolute; top: 8px; right: 10px; z-index: 2;
	background: rgba(255,255,255,.9); border: none; border-radius: 50%;
	width: 34px; height: 34px; font-size: 22px; line-height: 1; cursor: pointer;
	color: #111827;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.lwd-layout-carousel .lwd-card,
	.lwd-layout-grid .lwd-track .lwd-card { flex-basis: calc((100% - var(--lwd-gap)) / 2); }
	.lwd-layout-grid .lwd-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.lwd-layout-carousel .lwd-card { flex-basis: 85%; }
	.lwd-layout-grid .lwd-track { grid-template-columns: 1fr; }
}