/* =============================================================================
   News Feed — Feed Styles
   ============================================================================= */

/* Container */
.pnf-news-feed {
	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}

/* List layout — single column, constrained width */
.pnf-layout--list {
	max-width: 800px;
}

/* Empty state */
.pnf-no-news {
	color: #757575;
	font-style: italic;
}


/* =============================================================================
   List reset + grid layouts
   ============================================================================= */
.pnf-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 2-column grid */
.pnf-layout--grid-2 .pnf-news-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-items: start;
}

/* 3-column grid */
.pnf-layout--grid-3 .pnf-news-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: start;
}

/* In grid mode, cards have no bottom margin (gap handles spacing) */
.pnf-layout--grid-2 .pnf-news-item,
.pnf-layout--grid-3 .pnf-news-item {
	margin-bottom: 0;
}

/* Collapse to single column on narrow viewports */
@media ( max-width: 768px ) {
	.pnf-layout--grid-2 .pnf-news-list,
	.pnf-layout--grid-3 .pnf-news-list {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 1024px ) {
	.pnf-layout--grid-3 .pnf-news-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =============================================================================
   News card
   ============================================================================= */
.pnf-news-item {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* New posts: accent left border */
.pnf-news-item.pnf-is-new {
	border-left: 4px solid #2271b1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Pinned: slightly elevated background */
.pnf-news-item.pnf-pinned {
	background: #f9f9f9;
}

/* =============================================================================
   Header row: badges + date
   ============================================================================= */
.pnf-news-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

/* "Pinned" badge */
.pnf-pin-badge {
	background: #f0f0f1;
	color: #50575e;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* "New" badge */
.pnf-new-badge {
	background: #2271b1;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Category label — colors are injected via inline style by PHP */
.pnf-category {
	font-size: 12px;
	font-weight: 500;
	padding: 2px 10px;
	border-radius: 3px;
	/* Fallback neutral if no inline style is present */
	background: #f6f7f7;
	color: #50575e;
}

/* Date — pushed to the right */
.pnf-date {
	margin-left: auto;
	color: #9ca3af;
	font-size: 13px;
	white-space: nowrap;
}

/* =============================================================================
   Title
   ============================================================================= */
.pnf-news-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #1d2327;
}

/* =============================================================================
   Category filter tabs
   (radio inputs are hidden; labels act as clickable tabs)
   ============================================================================= */
.pnf-filter-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pnf-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.pnf-filter-tab {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 20px;
	border: 1px solid #dcdcde;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	background: #fff;
	color: #50575e;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	user-select: none;
}

.pnf-filter-tab:hover {
	border-color: #2271b1;
	color: #2271b1;
}

/* "All" tab active state — toggled by :checked on #pnf-cat-filter-all */
#pnf-cat-filter-all:checked ~ .pnf-filter-tabs label[for="pnf-cat-filter-all"] {
	background: #1d2327;
	color: #fff;
	border-color: #1d2327;
}

/* =============================================================================
   Author attribution
   ============================================================================= */
.pnf-author {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f1;
}

.pnf-author-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.pnf-author-name {
	font-size: 13px;
	color: #50575e;
	font-weight: 500;
}

/* =============================================================================
   Public news additions: links, thumbnail, excerpt, single-page meta
   ============================================================================= */
.pnf-news-title a {
	color: inherit;
	text-decoration: none;
}

.pnf-news-title a:hover,
.pnf-news-title a:focus {
	text-decoration: underline;
}

.pnf-thumb {
	display: block;
	margin: -20px -24px 16px;
}

.pnf-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px 4px 0 0;
}

.pnf-excerpt p {
	margin: 0 0 12px;
}

.pnf-read-more {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pnf-read-more:hover,
.pnf-read-more:focus {
	text-decoration: underline;
}

/* Single page meta line (date, categories, author) */
.pnf-single-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.pnf-single-meta .pnf-date {
	margin-left: 0;
}

.pnf-single-meta a.pnf-category {
	text-decoration: none;
}

/* Single page: extra meta, notice, share, nav, related, back link */
.pnf-single-meta .pnf-updated,
.pnf-single-meta .pnf-reading-time,
.pnf-single-meta .pnf-author-name {
	font-size: 13px;
	color: #6b7280;
}

.pnf-expired-notice {
	background: #fef3c7;
	border-left: 4px solid #d97706;
	color: #92400e;
	padding: 10px 14px;
	margin: 0 0 16px;
	font-size: 14px;
}

.pnf-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 24px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.pnf-share-label {
	font-weight: 600;
	font-size: 14px;
}

.pnf-share-link {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #dcdcde;
	border-radius: 20px;
	font-size: 13px;
	text-decoration: none;
}

.pnf-share-link:hover,
.pnf-share-link:focus {
	border-color: #2271b1;
	color: #2271b1;
}

.pnf-adjacent {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

.pnf-adjacent a {
	flex: 1 1 0;
	max-width: 48%;
	text-decoration: none;
	font-weight: 600;
}

.pnf-adjacent a span {
	display: block;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
}

.pnf-adjacent-next {
	margin-left: auto;
	text-align: right;
}

.pnf-related {
	margin: 0 0 24px;
	padding: 16px 20px;
	background: #f9f9f9;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

.pnf-related-title {
	margin: 0 0 8px;
	font-size: 18px;
}

.pnf-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pnf-related li {
	padding: 6px 0;
}

.pnf-related time {
	color: #6b7280;
	font-size: 13px;
	margin-left: 6px;
}

.pnf-back a {
	text-decoration: none;
	font-weight: 600;
}

@media ( max-width: 600px ) {
	.pnf-adjacent {
		flex-direction: column;
	}
	.pnf-adjacent a {
		max-width: 100%;
	}
	.pnf-adjacent-next {
		text-align: left;
	}
}