/*
 * JDP Theme — Blog index page styles.
 */

.jdp-archive-header {
	margin-bottom: var(--sp-12);
}
.jdp-archive-desc {
	color: var(--fg2);
	max-width: 700px;
	margin: var(--sp-4) auto 0;
	line-height: var(--lh-loose);
}

.jdp-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-8);
	margin-bottom: var(--sp-12);
}

.jdp-blog-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--dur-normal) var(--ease-out);
}
.jdp-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.jdp-blog-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.jdp-blog-card-image {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--bg-soft);
}
.jdp-blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jdp-blog-card-body {
	padding: var(--sp-5);
}
.jdp-blog-card-tag {
	display: inline-block;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 3px 10px;
	border-radius: var(--radius-full);
	font-size: var(--fs-micro);
	font-weight: 600;
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}
.jdp-blog-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--sp-2);
	color: var(--fg1);
}
.jdp-blog-card-excerpt {
	font-size: var(--fs-small);
	color: var(--fg2);
	line-height: var(--lh-normal);
	margin: 0 0 var(--sp-4);
}
.jdp-blog-card-meta {
	display: flex;
	gap: var(--sp-3);
	font-size: var(--fs-micro);
	color: var(--fg3);
}

/* Pagination */
.jdp-archive .pagination,
.navigation.pagination {
	margin-top: var(--sp-8);
	text-align: center;
}
.nav-links {
	display: inline-flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-content: center;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-md);
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--fg1);
	text-decoration: none;
	font-weight: 500;
	transition: all var(--dur-fast);
}
.page-numbers:hover {
	background: var(--accent);
	color: var(--jdp-white);
	border-color: var(--accent);
}
.page-numbers.current {
	background: var(--accent);
	color: var(--jdp-white);
	border-color: var(--accent);
}

@media (max-width: 900px) {
	.jdp-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.jdp-blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * BLOG v2 (v0.5.25) : archi V1 (2 colonnes + sidebar) habillée V2.
 * Bandeau titre + nav catégories (chips) + article à la une + grille 2 col + sidebar.
 * ============================================================ */

/* Bandeau titre */
.jdp-blog-head { padding: var(--sp-12, 48px) 0 var(--sp-8, 32px); }
.jdp-blog-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small, 14px); color: var(--fg3); margin-bottom: var(--sp-3); }
.jdp-blog-breadcrumb a { color: var(--accent); text-decoration: none; }
.jdp-blog-breadcrumb a:hover { text-decoration: underline; }
.jdp-blog-h1 { font-size: var(--fs-h1, 40px); font-weight: 700; line-height: 1.1; margin: 0 0 var(--sp-2); color: var(--fg1); }
.jdp-blog-lead { font-size: 17px; color: var(--fg2); max-width: 640px; margin: 0 0 var(--sp-6); line-height: var(--lh-normal); }

/* Nav catégories (chips) */
.jdp-blog-catnav { display: flex; flex-wrap: wrap; gap: 10px; }
.jdp-blog-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 14px; border-radius: var(--radius-full, 999px);
	background: var(--bg, #fff); border: 1px solid var(--border, #e7e7e7);
	color: var(--fg1, #1a1a1a); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), color var(--dur-fast, .15s) var(--ease-out, ease), background var(--dur-fast, .15s) var(--ease-out, ease);
}
.jdp-blog-chip:hover { border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); }
.jdp-blog-chip.is-active { background: var(--cat-color, var(--accent)); border-color: var(--cat-color, var(--accent)); color: #fff; }
.jdp-blog-chip-count { font-size: 12px; opacity: .75; font-weight: 700; }

/* Article à la une */
.jdp-blog-body { padding: var(--sp-9, 36px) 0 var(--sp-16, 64px); }
.jdp-blog-featured {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
	background: var(--bg, #fff); border: 1px solid var(--border, #e7e7e7); border-radius: var(--radius-lg, 18px);
	overflow: hidden; margin-bottom: var(--sp-10, 40px); text-decoration: none; color: inherit;
	box-shadow: var(--shadow-sm); transition: transform var(--dur-normal, .25s) var(--ease-out, ease), box-shadow var(--dur-normal, .25s) var(--ease-out, ease);
}
.jdp-blog-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.jdp-blog-featured-image { position: relative; aspect-ratio: 16/10; background: var(--bg-soft); }
.jdp-blog-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.jdp-blog-featured-badge { position: absolute; top: 14px; left: 14px; background: var(--cat-color, var(--accent)); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full, 999px); }
.jdp-blog-featured-body { padding: var(--sp-7); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.jdp-blog-featured-title { font-size: var(--fs-h3, 22px); font-weight: 700; line-height: 1.25; margin: 0; color: var(--fg1); }
.jdp-blog-featured-excerpt { font-size: var(--fs-small, 14px); color: var(--fg2); line-height: var(--lh-normal); margin: 0; }
.jdp-blog-featured-cta { font-weight: 700; color: var(--accent); font-size: 14px; }

/* Layout 2 colonnes */
.jdp-blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-12); align-items: start; }
.jdp-blog-grid--with-sidebar { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-10); }

/* Badge catégorie (carte + à la une), couleur de catégorie via --cat-color */
.jdp-blog-card-tag {
	align-self: flex-start;
	display: inline-block; padding: 3px 11px; border-radius: var(--radius-full, 999px);
	font-size: var(--fs-micro, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--cat-color, var(--accent)); background: color-mix(in srgb, var(--cat-color, var(--accent)) 12%, #fff);
}

/* Sidebar */
.jdp-blog-sidebar { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 90px; }
.jdp-blog-widget { background: var(--bg, #fff); border: 1px solid var(--border, #e7e7e7); border-radius: var(--radius-lg, 18px); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.jdp-blog-widget-title { font-size: 14px; font-weight: 700; margin: 0 0 var(--sp-3); color: var(--fg1); text-transform: uppercase; letter-spacing: .05em; }
.jdp-blog-search { display: flex; gap: 6px; }
.jdp-blog-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border, #e7e7e7); border-radius: var(--radius-md, 10px); font-size: 14px; background: #fff; color: var(--fg1); }
.jdp-blog-search input:focus { outline: none; border-color: var(--accent); }
.jdp-blog-search button { flex-shrink: 0; width: 42px; border: none; border-radius: var(--radius-md, 10px); background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.jdp-blog-search button:hover { background: var(--accent-hover, #cf7a16); }
.jdp-blog-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jdp-blog-catlist-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md, 10px); color: var(--fg1); text-decoration: none; font-weight: 500; font-size: 14px; transition: background var(--dur-fast, .15s), color var(--dur-fast, .15s); }
.jdp-blog-catlist-link:hover { background: var(--bg-soft, #f9f6f1); color: var(--cat-color, var(--accent)); }
.jdp-blog-catlist-link.is-active { color: var(--cat-color, var(--accent)); font-weight: 700; }
.jdp-blog-catlist-count { font-size: 12px; color: var(--fg3); background: var(--bg-soft, #f9f6f1); border-radius: var(--radius-full, 999px); padding: 1px 9px; }
.jdp-blog-about-text { font-size: 14px; color: var(--fg2); line-height: var(--lh-normal); margin: 0 0 var(--sp-3); }
.jdp-blog-about-link { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.jdp-blog-about-link:hover { text-decoration: underline; }

/* État vide */
.jdp-blog-empty { text-align: center; padding: var(--sp-12) var(--sp-4); }
.jdp-blog-empty-title { font-size: var(--fs-h3, 22px); margin: 0 0 var(--sp-2); }
.jdp-blog-empty-text { color: var(--fg2); margin: 0 0 var(--sp-5); }

/* Pagination centrée sous la colonne principale */
.jdp-blog-pagination { margin-top: var(--sp-8); }
.jdp-blog-pagination-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* Responsive */
@media (max-width: 1000px) {
	.jdp-blog-layout { grid-template-columns: 1fr; }
	.jdp-blog-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
	.jdp-blog-widget { flex: 1 1 240px; }
}
@media (max-width: 680px) {
	.jdp-blog-featured { grid-template-columns: 1fr; }
	.jdp-blog-grid--with-sidebar { grid-template-columns: 1fr; }
	.jdp-blog-sidebar { flex-direction: column; }
}