/**
 * Work single — responsive layout breakpoints.
 * Typography and spacing scale via clamp() in detail.css.
 * Breakpoints: 1200, 992, 768, 640, 480 (see ai summary/breakpoints.md).
 */

/* ─── 1200px — narrow desktop column tightening ─ */
@media (max-width: 1200px) {
	:root {
		--sp-work-detail-info-width: 400px;
		--sp-work-detail-section-label-width: 400px;
		--sp-work-detail-right-content-max: calc(
			var(--spaciefy-container) - var(--sp-work-detail-info-width) - var(--sp-work-detail-hero-gap)
		);
	}

	.sp-work-detail__hero-grid {
		grid-template-columns: minmax(0, var(--sp-work-detail-info-width)) minmax(0, 1fr);
		justify-content: stretch;
	}

	.sp-work-detail__banner {
		max-width: 100%;
	}
}

/* ─── 992px — tablet stack (theme-standard stack point) ─ */
@media (max-width: 992px) {
	:root {
		--sp-work-detail-info-width: 100%;
		--sp-work-detail-right-content-max: 100%;
		--sp-work-detail-section-label-width: auto;
		--sp-work-detail-tech-width: 100%;
		--sp-work-detail-section-layout-gap: 12px;
	}

	.sp-work-detail__hero-grid {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.sp-work-detail__title-row {
		order: 1;
		width: 100%;
		margin-bottom: 14px;
	}

	.sp-work-detail__banner {
		order: 2;
		width: 100%;
		max-width: none;
		margin-bottom: 32px;
		align-self: stretch;
		min-height: 0;
		aspect-ratio: auto;
	}

	.sp-work-detail__banner-image {
		position: static;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.sp-work-detail__info {
		order: 3;
		width: 100%;
	}

	.sp-work-detail__excerpt {
		max-width: none;
	}

	.sp-work-detail__section-layout {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--sp-work-detail-section-layout-gap);
	}

	.sp-work-detail__section-label {
		flex: none;
		width: auto;
	}

	.sp-work-detail__overview-content,
	.sp-work-detail__block-content {
		max-width: none;
		width: 100%;
	}

	.sp-work-detail__technology-text {
		width: 100%;
		max-width: none;
	}

	.sp-work-detail__gallery-grid {
		grid-template-columns: 1fr;
	}

	.sp-work-detail__gallery--stacked .sp-work-detail__gallery-item:nth-child(n + 2),
	.sp-work-detail__gallery--quad .sp-work-detail__gallery-item {
		grid-column: 1 / -1;
	}
}

/* ─── 768px — mobile ─ */
@media (max-width: 768px) {
	:root {
		--sp-work-detail-meta-section-gap: 48px;
		--sp-work-detail-tech-lh: 1.5;
	}

	.sp-work-detail__title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.sp-work-detail__logo {
		align-self: flex-end;
	}

	.sp-work-detail__banner {
		margin-bottom: 28px;
	}

	.sp-work-detail__service-tag {
		white-space: normal;
		text-align: center;
	}
}

/* ─── 640px — small polish ─ */
@media (max-width: 640px) {
	.sp-work-detail__banner {
		margin-bottom: 24px;
		border-radius: var(--sp-work-detail-image-radius);
		overflow: hidden;
	}

	.sp-work-detail__banner-image {
		border-radius: var(--sp-work-detail-image-radius);
	}
}