/**
 * Projects hub — desktop card overlap (separate from home/cluster console shell).
 *
 * Do not put the card grid in grid row 2 with the hero — the row grows to fit all
 * cards and the band reads as full-viewport dark. Hero alone = 520px; cards pull
 * up via negative margin; white paper full-bleed from the band line.
 *
 * @see docs/HERO_LAYOUT.md §5d-projects
 */

@media (min-width: 768px) {
	body.studio-projects-hub-page .wp-site-blocks {
		display: grid;
		grid-template-columns: 100%;
		gap: 0 !important;
		row-gap: 0 !important;
	}

	body.studio-projects-hub-page .wp-site-blocks > header,
	body.studio-projects-hub-page .wp-site-blocks > .site-header {
		grid-row: 1;
		grid-column: 1;
	}

	/* Band row — hero only (520px) */
	body.studio-projects-hub-page .wp-site-blocks > .studio-hero.studio-hero--video {
		grid-row: 2;
		grid-column: 1;
		display: block !important;
		height: var(--studio-hero-band-height, 520px) !important;
		min-height: var(--studio-hero-band-height, 520px) !important;
		max-height: var(--studio-hero-band-height, 520px) !important;
		margin: 0 !important;
		padding-bottom: 0 !important;
		overflow: hidden !important;
	}

	body.studio-projects-hub-page .wp-site-blocks > .studio-hero.studio-hero--video .cluster-hero__content {
		display: block !important;
		flex: none !important;
		justify-content: flex-start !important;
		min-height: 0 !important;
		padding-top: var(--wp--preset--spacing--40, 1.5rem) !important;
		padding-bottom: 0 !important;
	}

	/* Card grid — own row; overlap via pull (not translateY on a tall grid) */
	body.studio-projects-hub-page .projects-hub-wrap {
		grid-row: 3;
		grid-column: 1;
		position: relative;
		z-index: 10;
		margin-top: calc(-1 * var(--studio-console-landing, clamp(120px, 14vh, 200px))) !important;
		padding-top: 0 !important;
		background-color: transparent !important;
		transform: none !important;
	}

	/* Full-bleed white from band line (wrap top is band − landing) */
	body.studio-projects-hub-page .projects-hub-wrap::before {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		top: var(--studio-console-landing, clamp(120px, 14vh, 200px));
		bottom: 0;
		background-color: #ffffff;
		z-index: -1;
	}

	body.studio-projects-hub-page #projects-hub.projects-hub {
		margin-top: 0 !important;
		background-color: transparent !important;
		position: relative;
		z-index: 1;
	}

	body.studio-projects-hub-page main.wp-block-group {
		grid-row: 4;
		grid-column: 1;
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0;
		background-color: #ffffff !important;
	}

	body.studio-projects-hub-page .wp-site-blocks > footer {
		grid-row: 5;
		grid-column: 1;
		background-color: #ffffff;
	}
}