/* ==========================================================================
   V20 — blog-detail.css
   Single blog post (/blog/<slug>): article + product recommendations +
   "Andere blogs" grid + back link. Reuses .blog-card from section-news.css.
   ========================================================================== */

.blog-single {
	padding-block: 3rem;
}

.blog-detail {
	margin-inline: auto;
}

/* ---- Article: light card (matches v20's `article` box) ----
   Direct child only, so the `.blog-card` <article>s in "Andere blogs" stay dark. */
.blog-detail > article {
	color: #1f2937;
	background: #f9fafb;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 20px;
	padding: 2.5rem 3rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}

/* Tighter padding on mobile so content isn't squeezed by the card gutters. */
@media (max-width: 600px) {
	.blog-detail > article {
		padding: 1.5rem 1.25rem;
	}
}

.blog-detail__title {
	margin: 0 0 1rem;
	color: #000;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.blog-detail__meta {
	margin-bottom: 1.5rem;
	color: #a9b0c2;   /* --text-soft */
	font-size: .95rem;
}

.blog-detail__meta-sep {
	margin-inline: .5rem;
}

.blog-detail__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
	border-radius: 16px;
	box-shadow: 0 9px 18px rgba(0, 0, 0, .25);
}

/* ---- Article body typography (fs-5 lh-lg) ---- */
.blog-detail__body {
	padding-top: 50px;
	color: #565555;
	font-size: 1.1rem;
	line-height: 1.8;
}

@media (max-width: 600px) {
	.blog-detail__body {
		padding-top: 24px;
	}
}

.blog-detail__body p {
	margin: 0 0 1.4rem;
}

.blog-detail__body h2 {
	margin: 2.25rem 0 1rem;
	color: #1f2937;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
}

.blog-detail__body ul {
	margin: 0 0 1.4rem;
	padding-left: 1.25rem;
}

.blog-detail__body li {
	margin-bottom: .4rem;
}

.blog-detail__body strong {
	color: #1f2937;
}

.blog-detail__body a {
	color: #4da3ff;   /* --accent */
	text-decoration: none;
}

.blog-detail__body a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Product recommendations (v20-side-card)
   ========================================================================== */
.blog-recommend {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 3rem 0;
}

.v20-side-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 60%;
	padding: 1rem;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: .5rem;
	color: inherit;
	transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}

/* Stagger the 3 cards: 1st right, 2nd centered, 3rd right. */
.blog-recommend .v20-side-card:nth-child(1) {
	align-self: flex-end;
}

.blog-recommend .v20-side-card:nth-child(2) {
	align-self: center;
}

.blog-recommend .v20-side-card:nth-child(3) {
	align-self: flex-end;
	margin-right: 5%;
}

.v20-side-card:hover {
	border-color: rgba(0, 255, 136, .4);
	background: rgba(255, 255, 255, .03);
	transform: translateY(-2px);
}

.v20-side-card__thumb {
	flex-shrink: 0;
	width: 90px;
	height: 70px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(108, 117, 125, .25);
	border-radius: .25rem;
}

.v20-side-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v20-side-card__body {
	flex-grow: 1;
	min-width: 0;
}

.v20-side-card__title {
	display: block;
	margin-bottom: .25rem;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .95rem;
	line-height: 1.3;
}

.v20-side-card__specs {
	display: flex;
	gap: .5rem;
	color: #9ca3af;
	font-size: .75rem;
}

.v20-side-card__spec {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}

.v20-side-card__spec--sep {
	padding-left: .5rem;
	border-left: 1px solid rgba(108, 117, 125, .4);
}

.v20-side-card__spec .ico {
	width: 1em;
	height: 1em;
	fill: #ffc107;   /* text-warning bolt */
}

.v20-side-card__price {
	flex-shrink: 0;
	text-align: right;
	line-height: 1.2;
}

.price-old {
	display: block;
	color: #9ca3af;
	font-size: .75rem;
	text-decoration: line-through;
}

.price-tag {
	display: block;
	color: var(--v20-neon);
	font-weight: 700;
}

.v20-side-card__chev {
	flex-shrink: 0;
	display: inline-flex;
	color: #6c757d;
}

.v20-side-card__chev .ico {
	width: .9em;
	height: .9em;
	fill: currentColor;
}

/* ==========================================================================
   Andere blogs
   ========================================================================== */
.andere-blogs {
	margin-top: 3rem;
}

/* Match the "Andere V20 bikes" heading (product page): big, uppercase,
   white with a muted second word, centered, with a divider under it. */
.andere-blogs__title {
	margin: 0;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.andere-blogs__title span {
	color: rgba(255, 255, 255, .5);
}

.andere-blogs .section-divider {
	margin: .75rem 0 1.5rem;
}

/* ---- Back link ---- */
.back-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 2.5rem;
	padding: .5rem 1rem;
	color: #9ca3af;
	border: 1px solid rgba(108, 117, 125, .5);
	border-radius: 8px;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.back-link .ico {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.back-link:hover {
	color: #fff;
	background: rgba(108, 117, 125, .15);
	border-color: rgba(108, 117, 125, .8);
}