/**
 * Implementation Detail Component Styles
 *
 * Page-specific layout for the Implementation CPT single post view.
 * Composed with the breadcrumb, container, and wysiwyg-html-editor component styles.
 *
 * Container strategy:
 *   Breadcrumb and header sections each embed @project/container.twig for their
 *   own max-width + padding. The wysiwyg-html-editor component already renders
 *   its own container--wide internally, so .implementation-detail__content-grid
 *   must NOT duplicate container behaviour (no max-width / padding-inline here).
 *
 * Sidebar-ready grid:
 *   .implementation-detail__content-grid is a pure grid wrapper - no container styles.
 *   embed, add a .implementation-detail__sidebar sibling, and change
 *   grid-template-columns to "var(--implementation-sidebar-width, 18rem) 1fr".
 */

/* -- Article wrapper ------------------------------------------------------- */

.implementation-detail {
	--implementation-detail-dot-color: rgba(0, 0, 0, 0.12);
	--implementation-detail-dot-size: 1px;
	--implementation-detail-dot-spacing-x: 12px;
	--implementation-detail-dot-spacing-y: 10px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.implementation-detail::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(
		circle,
		var(--implementation-detail-dot-color) var(--implementation-detail-dot-size),
		transparent var(--implementation-detail-dot-size)
	);
	background-size: var(--implementation-detail-dot-spacing-x) var(--implementation-detail-dot-spacing-y);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 80%);
	mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 80%);
}

.implementation-detail > * {
	position: relative;
	z-index: 1;
}

/* -- Hero zone (breadcrumb + header) --------------------------------------- */

.implementation-detail__hero-zone {
	display: flow-root;
	padding: 4rem 0 0;
	position: relative;
}

@media (width >= 768px) {
	.implementation-detail__hero-zone {
		padding: 6rem 0 0;
	}
}

@media (width >= 1024px) {
	.implementation-detail__hero-zone {
		padding: 7rem 0 0;
	}
}

/* -- Breadcrumbs ----------------------------------------------------------- */

.implementation-detail__breadcrumb {
	padding-block: var(--spacing-4);
	color: #666666;
	font-size: 0.8125rem;
	font-style: normal;
	line-height: normal;
}

/* -- Post header ----------------------------------------------------------- */

.implementation-detail__header {
	padding-block: var(--spacing-8) var(--spacing-6);
}

.implementation-detail__title {
	color: var(--color-text-dark, currentColor);
	font-family: var(--font-heading-family);
	font-size: clamp(1.75rem, 3.33vw, 4rem); /* 28px mobile → 64px @ 1920px */
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	max-width: 73.5rem; /* 1176px */
}

.implementation-detail__supporting-copy {
	color: #666;
	font-family: var(--font-body-family);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6;
	margin: 1.0625rem 0 0;
	max-width: 56.8125rem; /* 909px */
}

/* -- Featured image -------------------------------------------------------- */

.implementation-detail__figure {
	margin: 0;
	overflow: hidden;
	border-radius: 0.5rem;
}

.implementation-detail__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* -- Article body ---------------------------------------------------------- */

.implementation-detail__body {
	flex: 1;
}

.implementation-detail__content-grid {
	display: grid;
	grid-template-columns: 1fr;
}

.implementation-detail__main {
	min-width: 0; /* Prevent grid blowout */
	display: flex;
	flex-direction: column;
	gap: 3.5rem; /* mobile */
	margin-bottom: 3.5rem;
}

@media (width >= 1025px) {
	.implementation-detail__main {
		gap: 6.5rem; /* desktop */
		margin-bottom: 6.5rem;
	}
}

/* Strip each block's own section padding so only the gap above controls spacing */
.implementation-detail__main > [class*="block-"] {
	padding-block: 0;
}

@media (width >= 1025px) {
	.implementation-detail__title {
		font-size: 4rem;
		line-height: 1.0625;
	}
}