/* ============================================================================
   BLOG DETAIL PAGE STYLES
   Mobile-first responsive design with BEM naming
   ============================================================================ */

/* Blog Detail Container */
.blog-detail {
    padding: var(--spacing-8) 0;
    background-color: var(--color-neutral-50);
}

.blog-detail__container {
    max-width: var(--max-width-7xl); /* 1536px - increased from 800px to accommodate sidebar */
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    background-color: var(--color-neutral-50);
}

/* Layout container: CSS Grid for responsive article + sidebar positioning (AC3) */
.blog-detail__layout {
	display: grid;
	grid-template-columns: 1fr; /* Mobile/Tablet: single column (sidebar below article) */
	gap: var(--spacing-8); /* 32px gap between article and sidebar */
	padding: 0 var(--spacing-4); /* Horizontal padding for mobile */
	max-width: var(--max-width-7xl); /* Max container width (1536px) */
	margin: 0 auto; /* Center the layout */
}

/* Desktop breakpoint: Two-column layout (article left, sidebar right) */
@media (min-width: 1024px) {
	.blog-detail__layout {
		grid-template-columns: 1fr 320px; /* Main content (flexible) + Sidebar (fixed 320px) */
		gap: var(--spacing-12); /* 48px gap on desktop */
		padding: 0 var(--spacing-8); /* Larger horizontal padding on desktop */
	}
}

/* Article Structure */
.blog-detail__article {
    background-color: var(--color-neutral-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
    width: 100%; /* Full width of grid column */
}

/* Header Section */
.blog-detail__header {
    margin-bottom: var(--spacing-6);
}

.blog-detail__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.blog-detail__meta {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    margin-bottom: 0;
}

/* Thumbnail Image */
.blog-detail__image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

/* Content Section */
.blog-detail__content {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

/* Content HTML Elements (from Airtable) */
.blog-detail__content h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.blog-detail__content h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
}

.blog-detail__content p {
    margin-bottom: var(--spacing-4);
}

.blog-detail__content ul,
.blog-detail__content ol {
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

.blog-detail__content li {
    margin-bottom: var(--spacing-2);
}

.blog-detail__content a {
    color: var(--color-primary-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-detail__content a:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.blog-detail__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--spacing-6) 0;
}

/* Footer Section */
.blog-detail__footer {
    padding-top: var(--spacing-6);
    border-top: var(--border-width-default) solid var(--color-neutral-300);
}

.blog-detail__back-link {
    display: inline-block;
    color: var(--color-primary-500);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: color 0.2s ease, transform 0.2s ease;
}

.blog-detail__back-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateX(-4px);
}

.blog-detail__back-link:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.blog-detail__back-link:active {
    color: var(--color-primary-800);
}

/* Not Found State */
.blog-detail__not-found {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.blog-detail__not-found-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-4);
}

.blog-detail__not-found-message {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    margin-bottom: var(--spacing-6);
}

/* Error State */
.blog-detail__error {
    margin-bottom: var(--spacing-6);
}

/* ==============================================
   RESPONSIVE: TABLET (≥640px)
   ============================================== */
@media (min-width: 640px) {
    .blog-detail__container {
        padding: 0 var(--spacing-6);
    }

    .blog-detail__article {
        padding: var(--spacing-8);
    }

    .blog-detail__title {
        font-size: var(--font-size-4xl);
    }
}

/* ==============================================
   RESPONSIVE: DESKTOP (≥1024px)
   ============================================== */
@media (min-width: 1024px) {
    .blog-detail__container {
        padding: 0 var(--spacing-8);
    }

    .blog-detail__article {
        padding: var(--spacing-10);
    }

    .blog-detail__title {
        font-size: var(--font-size-5xl);
    }

    .blog-detail__content {
        font-size: var(--font-size-lg);
    }
}

/* ============================================
   Blog Detail Sidebar Styles (US-023)
   ============================================ */

/* Sidebar container (AC1, AC5: background, padding, shadow) */
.blog-detail__sidebar {
	background-color: var(--color-neutral-50); /* Subtle background tint for visual separation */
	border-radius: var(--border-radius-lg); /* Rounded corners (8px) */
	padding: var(--spacing-6); /* 24px padding all sides */
	box-shadow: var(--shadow-sm); /* Subtle shadow for depth */
	align-self: start; /* Align to top of grid cell (prevent stretching) */
}

/* Sidebar heading (AC1, AC5: typography) */
.blog-detail__sidebar-heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl); /* 20px */
	font-weight: var(--font-weight-semibold); /* 600 */
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-4); /* 16px space below heading */
	line-height: var(--line-height-tight); /* Vertical rhythm consistency */
	border-bottom: 2px solid var(--color-neutral-200); /* Subtle separator line */
	padding-bottom: var(--spacing-3); /* 12px padding before border */
	margin-top: 0; /* Remove default top margin */
}

/* Sidebar list container (AC2: flexbox vertical layout) */
.blog-detail__sidebar-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4); /* 16px space between items */
}

/* Sidebar item wrapper (AC5: border separator) */
.blog-detail__sidebar-item {
	padding-bottom: var(--spacing-4); /* 16px padding below item */
	border-bottom: 1px solid var(--color-neutral-200); /* Subtle separator line */
}

/* Remove border from last item */
.blog-detail__sidebar-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Sidebar title link (AC4, AC5: clickable with hover effect) */
.blog-detail__sidebar-title {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-base); /* 16px (smaller than grid tile titles) */
	font-weight: var(--font-weight-medium); /* 500 */
	color: var(--color-primary-900); /* Primary link color */
	text-decoration: none; /* No underline by default */
	margin-bottom: var(--spacing-2); /* 8px space above date */
	line-height: 1.4; /* Comfortable reading line height */
	transition: color 0.2s ease; /* Smooth color transition on hover */
}

/* Hover state (AC4: color change) */
.blog-detail__sidebar-title:hover {
	color: var(--color-primary-700); /* Lighter shade on hover */
	text-decoration: underline; /* Underline on hover for clarity */
}

/* Sidebar date (AC2, AC5: muted color) */
.blog-detail__sidebar-date {
	font-family: var(--font-body);
	font-size: var(--font-size-sm); /* 14px (smaller than title) */
	font-weight: var(--font-weight-normal); /* 400 */
	color: var(--color-neutral-600); /* Muted gray color (WCAG AA contrast ≥4.5:1) */
	margin-bottom: 0; /* No bottom margin (item has padding-bottom) */
	margin-top: 0; /* Remove default top margin */
}

/* ============================================
   Blog Detail Navigation (US-024)
   Previous/Next post navigation with responsive layout
   ============================================ */

/* Navigation container (AC1, AC7: semantic nav with flexible layout) */
.blog-detail__navigation {
	display: flex;
	flex-direction: column; /* Mobile: stacked vertical layout */
	gap: var(--spacing-4); /* 16px gap between links (mobile) */
	margin-top: var(--spacing-6); /* 24px space above navigation */
	padding: 0; /* No padding (footer provides padding) */
}

/* Tablet breakpoint: reduce gap, maintain vertical layout */
@media (min-width: 640px) {
	.blog-detail__navigation {
		gap: var(--spacing-3); /* 12px gap (compact for tablet) */
	}
}

/* Desktop breakpoint: horizontal three-column layout (AC7) */
@media (min-width: 1024px) {
	.blog-detail__navigation {
		flex-direction: row; /* Horizontal layout */
		justify-content: space-between; /* Space links evenly (prev | back | next) */
		align-items: center; /* Vertical center alignment */
		gap: var(--spacing-6); /* 24px gap between links */
	}
}

/* Placeholder span for maintaining layout when links hidden (AC5, AC6) */
.blog-detail__navigation-placeholder {
	display: none; /* Hidden on mobile (no layout impact) */
}

@media (min-width: 1024px) {
	.blog-detail__navigation-placeholder {
		display: block; /* Visible on desktop to maintain 3-column layout */
		flex: 1; /* Equal flex to match link flex */
		min-width: 0; /* Allow flex shrinking */
	}
}

/* Base link styles (AC2, AC3, AC4, AC8: all navigation links) */
.blog-detail__navigation-link {
	display: inline-flex; /* Inline-flex for arrow + text alignment */
	align-items: center; /* Vertical center alignment */
	gap: var(--spacing-2); /* 8px gap between arrow and text */
	color: var(--color-primary-500); /* Wine red #661652 */
	text-decoration: none; /* No underline by default */
	font-family: var(--font-body); /* DM Sans */
	font-weight: var(--font-weight-medium); /* 500 */
	font-size: var(--font-size-base); /* 16px */
	line-height: var(--line-height-normal); /* 1.5 */
	transition: color 0.2s ease, transform 0.2s ease; /* Smooth hover transition */
	cursor: pointer;
}

/* Hover state (AC8: clear interactive feedback) */
.blog-detail__navigation-link:hover {
	color: var(--color-primary-700); /* Darker wine red #480437 */
	text-decoration: underline; /* Underline on hover */
	text-underline-offset: 4px; /* Offset for readability */
}

/* Focus state for keyboard navigation (AC8: WCAG AA accessibility) */
.blog-detail__navigation-link:focus {
	outline: 2px solid var(--color-primary-500); /* Wine red outline */
	outline-offset: 2px; /* Space between outline and element */
	border-radius: var(--radius-sm); /* Rounded outline */
}

/* Active state (clicked) */
.blog-detail__navigation-link:active {
	color: var(--color-primary-800); /* Very dark wine red #3A032D */
}

/* Desktop layout: increase link size for better clickability */
@media (min-width: 1024px) {
	.blog-detail__navigation-link {
		font-size: var(--font-size-lg); /* 18px on desktop */
		flex: 1; /* Equal flex distribution for 3-column layout */
		min-width: 0; /* Allow flex shrinking */
	}
}

/* Previous link modifier (left-aligned on desktop, AC2) */
.blog-detail__navigation-link--prev {
	text-align: left; /* Left-align text */
}

/* Previous link hover: slide left animation */
.blog-detail__navigation-link--prev:hover {
	transform: translateX(-4px); /* Move 4px left on hover */
}

/* Back link modifier (center-aligned on all viewports, AC4) */
.blog-detail__navigation-link--back {
	text-align: center; /* Center-align text */
	justify-content: center; /* Center flex content */
}

/* Desktop: no text-align override needed (flex handles centering) */
@media (min-width: 1024px) {
	.blog-detail__navigation-link--back {
		flex: 0 1 auto; /* Do not grow, allow shrink, auto basis (center column compact) */
		min-width: fit-content; /* Maintain natural width */
	}
}

/* Next link modifier (right-aligned on desktop, AC3) */
.blog-detail__navigation-link--next {
	text-align: right; /* Right-align text */
	justify-content: flex-end; /* Right-align flex content */
}

/* Next link hover: slide right animation */
.blog-detail__navigation-link--next:hover {
	transform: translateX(4px); /* Move 4px right on hover */
}

/* Arrow styling (← and → characters, AC8: visual direction indicators) */
.blog-detail__navigation-arrow {
	display: inline-block; /* Block for transform */
	font-size: var(--font-size-xl); /* 20px (larger than text) */
	line-height: 1; /* Tight line height for vertical centering */
	color: inherit; /* Inherit color from parent link */
	transition: transform 0.2s ease; /* Smooth arrow animation */
}

/* Arrow hover enhancement (scale up slightly) */
.blog-detail__navigation-link:hover .blog-detail__navigation-arrow {
	transform: scale(1.2); /* 20% scale increase on hover */
}

/* Text wrapper for label hierarchy (AC8: semantic structure) */
.blog-detail__navigation-text {
	display: inline-flex; /* Inline-flex for layout */
	flex-direction: column; /* Stack label above/below (if needed) */
	align-items: inherit; /* Inherit alignment from parent link */
	gap: var(--spacing-1); /* 4px gap (minimal) */
}

/* Label text (e.g., "Vorheriger Artikel", "Nächster Artikel") */
.blog-detail__navigation-label {
	display: block; /* Block for full width */
	font-size: var(--font-size-sm); /* 14px (smaller than link base) */
	font-weight: var(--font-weight-medium); /* 500 */
	color: var(--color-neutral-700); /* Muted gray #6B5361 for hierarchy */
	line-height: var(--line-height-tight); /* 1.2 compact */
	transition: color 0.2s ease; /* Smooth color transition */
}

/* Label hover: match link hover color */
.blog-detail__navigation-link:hover .blog-detail__navigation-label {
	color: var(--color-primary-700); /* Darker wine red on hover */
}

/* Desktop: larger label text for readability */
@media (min-width: 1024px) {
	.blog-detail__navigation-label {
		font-size: var(--font-size-base); /* 16px on desktop */
	}
}

/* Mobile touch target sizing (AC8: WCAG AAA 44x44px minimum) */
@media (max-width: 1023px) {
	.blog-detail__navigation-link {
		min-height: 44px; /* Minimum touch target height */
		padding: var(--spacing-2) var(--spacing-3); /* 8px vertical, 12px horizontal padding */
	}
}

/* Small mobile adjustments (320px-639px) */
@media (max-width: 639px) {
	.blog-detail__navigation-link {
		font-size: var(--font-size-sm); /* 14px on small mobile */
	}

	.blog-detail__navigation-arrow {
		font-size: var(--font-size-lg); /* 18px arrow on small mobile */
	}

	.blog-detail__navigation-label {
		font-size: var(--font-size-xs); /* 12px label on small mobile */
	}
}

/* High contrast mode support (AC8: accessibility for Windows High Contrast Mode) */
@media (forced-colors: active) {
	.blog-detail__navigation-link {
		forced-color-adjust: auto; /* Allow browser to adjust colors */
	}

	.blog-detail__navigation-link:focus {
		outline: 2px solid currentColor; /* High contrast outline */
		outline-offset: 2px;
	}
}

/* Print styles: hide navigation (not relevant for printed articles) */
@media print {
	.blog-detail__navigation {
		display: none; /* Hide navigation in print view */
	}
}