/**
 * DevElevate Layouts
 * Single templates, archive templates, sidebar grid
 */

/* Single post layout */
.de-single { padding-block: var(--de-space-10); }

.de-single__layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--de-space-8);
	align-items: start;
}

.de-single__layout--wide {
	grid-template-columns: 1fr;
}

.de-single__sticky {
	position: sticky;
	top: var(--de-space-6);
}

.de-single__header { margin-bottom: var(--de-space-6); }
.de-single__title  { font-size: var(--de-font-size-4xl); line-height: var(--de-line-height-tight); margin: 0 0 var(--de-space-3); }
.de-single__tagline { font-size: var(--de-font-size-xl); color: var(--de-text-secondary); margin: 0; }
.de-single__terms  { display: flex; flex-wrap: wrap; gap: var(--de-space-2); margin-top: var(--de-space-3); }
.de-single__gallery { margin-block: var(--de-space-6); }
.de-single__actions { display: flex; flex-wrap: wrap; gap: var(--de-space-3); margin-bottom: var(--de-space-6); }
.de-single__section { margin-top: var(--de-space-10); }
.de-single__section-title { font-size: var(--de-font-size-2xl); margin-bottom: var(--de-space-4); }
.de-single__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--de-space-5); margin: var(--de-space-3) 0 0; }
.de-single__meta-label { display: block; font-size: var(--de-font-size-xs); color: var(--de-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.de-single__meta-value { font-weight: var(--de-font-weight-medium); }
.de-single__stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--de-space-5); }

/* Archive */
.de-archive { padding-block: var(--de-space-10); }
.de-archive__header { margin-bottom: var(--de-space-8); }
.de-archive__title  { font-size: var(--de-font-size-5xl); margin: 0 0 var(--de-space-3); }
.de-archive__filters { display: flex; flex-wrap: wrap; gap: var(--de-space-2); margin-top: var(--de-space-4); }
.de-archive__filters--secondary { margin-top: var(--de-space-3); }

.de-filter-btn {
	padding: var(--de-space-2) var(--de-space-4);
	border-radius: var(--de-radius-full);
	font-size: var(--de-font-size-sm);
	background: var(--de-bg-muted);
	color: var(--de-text-secondary);
	border: none;
	cursor: pointer;
	transition: all var(--de-transition-fast);
	text-decoration: none;
}
.de-filter-btn:hover,
.de-filter-btn--active { background: var(--de-color-primary); color: var(--de-text-on-primary); }
.de-filter-btn--sm { font-size: var(--de-font-size-xs); padding: var(--de-space-1) var(--de-space-3); }

/* Checklist */
.de-checklist { list-style: none; padding: 0; }
.de-checklist__item { padding: var(--de-space-2) 0; padding-left: var(--de-space-6); position: relative; border-bottom: 1px solid var(--de-border-color); }
.de-checklist__item::before { content: '✓'; position: absolute; left: 0; color: var(--de-color-primary); font-weight: bold; }

/* Info panel (lab sidebar) */
.de-info-panel { background: var(--de-bg-subtle); border: 1px solid var(--de-border-color); border-radius: var(--de-radius-lg); padding: var(--de-space-5); }
.de-info-panel__title { font-size: var(--de-font-size-base); font-weight: var(--de-font-weight-semibold); margin: 0 0 var(--de-space-4); }
.de-info-panel__list { display: grid; gap: 0; margin: 0; }
.de-info-panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--de-space-2); padding: var(--de-space-2) 0; border-bottom: 1px solid var(--de-border-color); font-size: var(--de-font-size-sm); }
.de-info-panel__row dt { color: var(--de-text-muted); }
.de-info-panel__row dd { margin: 0; font-weight: var(--de-font-weight-medium); }
.de-info-panel__deps { list-style: none; padding: 0; margin: 0; }

/* Testimonial */
.de-testimonial { border-left: 4px solid var(--de-color-primary); padding-left: var(--de-space-5); margin: var(--de-space-8) 0; }
.de-testimonial__quote { font-size: var(--de-font-size-lg); font-style: italic; color: var(--de-text-secondary); margin: 0 0 var(--de-space-2); }
.de-testimonial__author { font-size: var(--de-font-size-sm); color: var(--de-text-muted); }

/* Changelog */
.de-changelog { display: grid; gap: var(--de-space-4); }
.de-changelog__entry { padding: var(--de-space-4); background: var(--de-bg-subtle); border-radius: var(--de-radius-md); border-left: 3px solid var(--de-color-primary); }
.de-changelog__meta { display: flex; gap: var(--de-space-3); align-items: center; margin-bottom: var(--de-space-2); }
.de-changelog__version { font-weight: var(--de-font-weight-bold); font-family: var(--de-font-mono); }
.de-changelog__date { font-size: var(--de-font-size-sm); color: var(--de-text-muted); }
.de-changelog__notes { margin: 0; color: var(--de-text-secondary); }

/* Breadcrumbs */
.de-breadcrumbs { margin-bottom: var(--de-space-6); }
.de-breadcrumbs__list { list-style: none; padding: 0; display: flex; gap: var(--de-space-2); font-size: var(--de-font-size-sm); color: var(--de-text-muted); }
.de-breadcrumbs__item + .de-breadcrumbs__item::before { content: '/'; margin-right: var(--de-space-2); }
.de-breadcrumbs__item--current { color: var(--de-text-primary); }

/* Pagination */
.de-pagination { margin-top: var(--de-space-10); text-align: center; }

@media (max-width: 768px) {
	.de-single__layout { grid-template-columns: 1fr; }
	.de-single__title  { font-size: var(--de-font-size-3xl); }
	.de-archive__title { font-size: var(--de-font-size-4xl); }
}