/* LI Publishing Ad Network — front end */
.lipan-board {
	--lipan-advertisers: #1d4ed8;
	--lipan-local-stores: #047857;
	--lipan-flyers: #c2410c;
	--lipan-spiritual: #7c3aed;
	--lipan-job-listings: #0e7490;
	--lipan-ink: #1f2933;
	--lipan-muted: #5f6b76;
	--lipan-line: #e3e7eb;
	--lipan-card: #fff;
	--lipan-radius: 12px;
	margin: 1.5em 0;
	color: var(--lipan-ink);
	font-size: 16px;
	line-height: 1.5;
}
.lipan-board *, .lipan-board *::before, .lipan-board *::after { box-sizing: border-box; }
.lipan-cat-advertisers  { --lipan-c: var(--lipan-advertisers); }
.lipan-cat-local-stores { --lipan-c: var(--lipan-local-stores); }
.lipan-cat-flyers       { --lipan-c: var(--lipan-flyers); }
.lipan-cat-spiritual    { --lipan-c: var(--lipan-spiritual); }
.lipan-cat-job-listings { --lipan-c: var(--lipan-job-listings); }

.lipan-board-title { margin: 0 0 .75em; }

/* Tabs */
.lipan-tabs {
	display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px;
	scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.lipan-tab {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border: 2px solid var(--lipan-c); border-radius: 999px;
	background: #fff; color: var(--lipan-c); font: inherit; font-weight: 700; cursor: pointer; line-height: 1.2;
	transition: background .15s, color .15s;
}
.lipan-tab:hover { background: color-mix(in srgb, var(--lipan-c) 10%, #fff); }
.lipan-tab[aria-selected="true"] { background: var(--lipan-c); color: #fff; }
.lipan-tab:focus-visible { outline: 3px solid var(--lipan-c); outline-offset: 2px; }
.lipan-tab-count {
	min-width: 1.6em; padding: 1px 6px; border-radius: 999px; font-size: 12px; text-align: center;
	background: var(--lipan-c); color: #fff;
}
.lipan-tab[aria-selected="true"] .lipan-tab-count { background: #fff; color: var(--lipan-c); }

/* Grid */
.lipan-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.lipan-cols-2, .lipan-cols-3, .lipan-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.lipan-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.lipan-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.lipan-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--lipan-card); border: 1px solid var(--lipan-line); border-top: 4px solid var(--lipan-c);
	border-radius: var(--lipan-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
	transition: box-shadow .15s, transform .15s;
}
.lipan-card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .10); transform: translateY(-2px); }
.lipan-card.is-featured { box-shadow: 0 0 0 2px var(--lipan-c), 0 8px 24px rgba(16, 24, 40, .10); }

.lipan-media { display: block; position: relative; background: #f1f3f5; aspect-ratio: 16 / 9; overflow: hidden; }
.lipan-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.lipan-media.is-flyer { aspect-ratio: 4 / 5; background: #fafafa; }
.lipan-media.is-flyer img { object-fit: contain; }
.lipan-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lipan-play { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; position: relative; }
.lipan-play:focus-visible { outline: 3px solid var(--lipan-c); outline-offset: -3px; }
.lipan-play-icon {
	position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .72); border-radius: 12px; transition: background .15s;
}
.lipan-play-icon::after {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
	border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}
.lipan-play:hover .lipan-play-icon { background: #e11d2e; }

.lipan-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.lipan-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.lipan-chip {
	display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
	background: color-mix(in srgb, var(--lipan-c) 12%, #fff); color: var(--lipan-c);
}
.lipan-chip-featured { background: #fef3c7; color: #92400e; }
.lipan-title { margin: 0; font-size: 1.15em; line-height: 1.3; }
.lipan-org { margin: 0; color: var(--lipan-muted); font-weight: 600; }
.lipan-desc { color: var(--lipan-ink); }
.lipan-desc p { margin: 0 0 .6em; }
.lipan-desc p:last-child { margin-bottom: 0; }

.lipan-info { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; color: var(--lipan-muted); }
.lipan-info li { position: relative; padding-left: 22px; margin: 4px 0; word-break: break-word; }
.lipan-info li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; }
.lipan-i-extra::before   { content: "★"; }
.lipan-i-hours::before   { content: "🕘"; }
.lipan-i-address::before { content: "📍"; }
.lipan-i-phone::before   { content: "📞"; }
.lipan-i-email::before   { content: "✉"; }
.lipan-info a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.lipan-btn {
	margin-top: auto; align-self: flex-start; display: inline-block; padding: 10px 18px; border-radius: 8px;
	background: var(--lipan-c); color: #fff !important; font-weight: 700; text-decoration: none !important;
	transition: filter .15s;
}
.lipan-btn:hover, .lipan-btn:focus { filter: brightness(1.12); }
.lipan-body > .lipan-btn { margin-top: 8px; }

.lipan-empty {
	padding: 28px; text-align: center; color: var(--lipan-muted);
	border: 2px dashed var(--lipan-line); border-radius: var(--lipan-radius);
}

@media (prefers-reduced-motion: reduce) {
	.lipan-card, .lipan-tab, .lipan-btn { transition: none; }
	.lipan-card:hover { transform: none; }
}