/*
 * Theme additions layered on top of the verbatim design stylesheet
 * (assets/css/main.css is a byte-exact copy of the approved static design
 * and is never edited — WordPress-specific additions live here instead).
 */

/* ------------------------------------------------------------------
 * Classic blog layout: stacked post list + sidebar.
 * Used on the blog listing, category/date archives, search, and single
 * posts. Collapses to a single column under 900px like the design's
 * own .split breakpoint.
 * ---------------------------------------------------------------- */

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 900px) {
	.blog-layout { grid-template-columns: 1fr; }
}

.post-list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

/* One post: big full-width image on top, title, small meta line, excerpt. */
.post-item {
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--line-soft);
}

.post-item:last-child { padding-bottom: 0; border-bottom: none; }

.post-item-thumb { display: block; margin-bottom: 1.5rem; }

.post-item-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.post-item h2 {
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	margin: 0 0 0.6rem;
}

.post-item h2 a { color: var(--navy-900); text-decoration: none; }
.post-item h2 a:hover { color: var(--teal-600); }

.post-item p { margin: 0.9rem 0; color: var(--ink-soft); }

.post-meta {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ink);
}

.post-meta a { color: var(--teal-600); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }

/* "Read more" link: same treatment as the design's .card .card-link, which
   is scoped to .card in main.css and so doesn't reach these list rows. */
.post-item .card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--teal-600);
	text-decoration: none;
	transition: gap 0.2s ease;
}

.post-item .card-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--ease);
}

.post-item:hover .card-link { gap: 0.55rem; }
.post-item:hover .card-link svg { transform: translateX(2px); }

/* Sidebar */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: 90px;
}

@media (max-width: 900px) {
	.blog-sidebar { position: static; }
}

.blog-sidebar .panel h3 { margin-top: 0; }

.blog-sidebar ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.blog-sidebar ul li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.95rem;
}

.blog-sidebar ul li:last-child { border-bottom: none; }

.blog-sidebar ul a { color: var(--ink); text-decoration: none; }
.blog-sidebar ul a:hover { color: var(--teal-600); }

.blog-sidebar .search-form { display: flex; gap: 0.5rem; margin-top: 1rem; }

.blog-sidebar .search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0.55rem 0.8rem;
	font-size: 0.95rem;
}

/* Pagination */
.post-list-pagination { margin-top: 2.5rem; }
.post-list-pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.post-list-pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.95rem;
}

.post-list-pagination .page-numbers.current,
.post-list-pagination .page-numbers:hover {
	background: var(--navy-900);
	border-color: var(--navy-900);
	color: var(--white);
}

/* Featured image on the single post page, above the article. */
.post-thumb { margin: 0 0 1.75rem; }

.post-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* Single post: article column sits left, sidebar right; prose stays at
   its comfortable measure inside the wider column. */
.blog-layout .prose { margin-inline: 0; }