/*
 * LUCRARI DETALIU — single-lucrare.php (§4.3). Reuses the shared
 * `.site-header` (components.css §7). Mobile-first: base = mobile values
 * (centered, stacked), `@media (min-width: 768px)` = desktop (title left /
 * price right, left-aligned content).
 *
 * Mobile visual order must be title → subtitle → price → description →
 * CTA → image, but the markup nests title+price together inside
 * `.work-detail__header` with `.work-detail__status` (subtitle) as a
 * SIBLING after it (single-lucrare.php never re-orders markup — that's a
 * CSS concern). `display: contents` on `.work-detail__header` unwraps it
 * on mobile so title/price become direct flex items of
 * `.work-detail__content` alongside status/body/cta/image, and `order`
 * places them in the required sequence — all pure CSS, no PHP/JS.
 * Desktop reverts `.work-detail__content` to normal block flow, which
 * naturally ignores `order` and restores DOM order (header, status, body,
 * cta, image) with the header itself back to a flex row.
 */

.site-header + .work-detail__content {
	margin-top: var(--sp-2xl); /* mobile: 60px */
}

@media (min-width: 768px) {
	.site-header + .work-detail__content {
		margin-top: var(--sp-4xl); /* desktop: 100px */
	}
}

/* Mobile: everything centered & stacked. Side gutters (client feedback-01,
   ~20px) so content never touches the screen edges; the desktop container
   below takes over past 768px. */
.work-detail__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-left: var(--sp-sm);
	padding-right: var(--sp-sm);
}

.work-detail__header {
	display: contents;
}

.work-detail__title {
	order: 1;
}

.work-detail__status {
	order: 2;
	margin-top: var(--sp-sm);
}

.work-detail__price {
	order: 3;
}

.work-detail__body {
	order: 4;
	margin-top: var(--sp-md); /* mobile: 30px below subtitle */
	/* Client feedback: description body copy at 18px (was 24px desktop /
	   16px mobile via .type-detail-body). Same size both breakpoints; comfy
	   line-height for 18px body text. */
	font-size: var(--fs-18);
	line-height: 1.6;
}

/* Client feedback (§4.3): status subtitle text is WHITE on the detail page,
   overriding the blue/red text color from .badge--disponibil / .badge--vandut
   (components.css). Scoped to .work-detail__status so listing-card badges keep
   their blue/red. Combined selector = specificity (0,2,0) beats the single
   .badge--{status} class (0,1,0). */
.work-detail__status.badge--disponibil,
.work-detail__status.badge--vandut {
	color: var(--c-white);
}

.work-detail__cta {
	order: 5;
	margin-top: var(--sp-xs); /* mobile: 16px gap above */
	margin-bottom: var(--sp-xs); /* mobile: 16px gap below */
	--btn-pad-y: var(--sp-xs);
	--btn-pad-x: var(--sp-md);
}

.work-detail__image {
	order: 6;
	width: 100%;
	border: var(--bd-strong) solid var(--c-white);
}

@media (min-width: 768px) {
	/* Desktop: normal block flow, left-aligned; header becomes a flex row.
	   Container (client feedback-01): constrain the content to a centered
	   1140px column (shared --container-max token, same as the Lucrari
	   listing in lucrari.css) instead of the fixed full-screen
	   `.site-background` layer, which stays edge-to-edge. */
	.work-detail__content {
		display: block;
		text-align: left;
		max-width: var(--container-max);
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.work-detail__header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}

	.work-detail__body {
		margin-top: var(--sp-2xl); /* desktop: 60px below the title block */
	}

	.work-detail__cta {
		margin-top: var(--sp-md); /* desktop: 30px above */
		margin-bottom: var(--sp-md); /* desktop: 30px below */
		--btn-pad-y: var(--sp-sm);
	}
}