/**
 * cc/project-grid – front-end styles.
 *
 * Layout uses Masonry (WordPress core's bundled v4.2.2) for column packing.
 * CSS only declares item widths and aspect-ratios; Masonry positions items
 * absolutely based on those.
 *
 * Mobile (<768): single column, blanks hidden.
 * Tablet (768-991): 2 cols, blanks hidden, all bricks 50%.
 * Desktop (≥992): 6 cols (1-col bricks at 16.67%, 2-col landscape/portrait-large
 *   at 33.33%), blanks visible.
 */

/* Overlay container — inherits shared overlay positioning from theme.
   Horizontal padding is set so that (overlay-pad + brick-border) equals the
   toolbar's horizontal padding, aligning image edges with the logo and INFO
   text. Toolbar pad is 15px mobile / 35px desktop; brick border is 9px;
   overlay pad is the difference. */
.wp-block-cc-project-grid .overlay {
	background-color: var(--wp--preset--color--white, #fff);
	z-index: 5;
	padding: 90px 6px 45px;
	height: 100vh;
	position: fixed !important;
	width: 100%;
	top: 0;
	left: 0;
	overflow-y: scroll;
	scrollbar-width: none;
}

@media (min-width: 992px) {
	.wp-block-cc-project-grid .overlay {
		padding: 130px 26px 45px;
	}
}

/* Grid container — Masonry uses position: relative on its element.
   Hidden until JS lays out the bricks (.is-ready) so users never see the
   pre-Masonry stacked-block flow. */
.wp-block-cc-project-grid #grid-container {
	position: relative;
	opacity: 0;
	transition: opacity 200ms ease;
}

.wp-block-cc-project-grid #grid-container.is-ready {
	opacity: 1;
}

/* Sizer is read by Masonry to determine the unit column width.
   It must be in the DOM but should not contribute layout space. */
.wp-block-cc-project-grid .grid-sizer {
	width: 100%;
	height: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Default brick width (mobile) and aspect-ratio per orientation. */
.wp-block-cc-project-grid .brick {
	width: 100%;
	position: relative;
	overflow: hidden;
	opacity: 1;
	transition: opacity 400ms ease;
}

/* Bricks added via infinite scroll start invisible; view.js removes this
   class in the frame after Masonry positions them, triggering the fade. */
.wp-block-cc-project-grid .brick--lazy-load {
	opacity: 0;
}

.wp-block-cc-project-grid .brick[data-orientation="landscape"] {
	aspect-ratio: 4 / 3;
}

.wp-block-cc-project-grid .brick[data-orientation="portrait"],
.wp-block-cc-project-grid .brick.portrait-large {
	aspect-ratio: 2 / 3;
}

.wp-block-cc-project-grid .brick[data-orientation="square"] {
	aspect-ratio: 1;
}

/* Tablet: 2-col layout, all bricks 50%. */
@media (min-width: 768px) {
	.wp-block-cc-project-grid .grid-sizer,
	.wp-block-cc-project-grid .brick {
		width: 50%;
	}
}

/* Desktop: 6-col grid. 1-col bricks at 16.67%, 2-col bricks at 33.33%.
   Blanks become visible to scatter whitespace. */
@media (min-width: 992px) {
	.wp-block-cc-project-grid .grid-sizer,
	.wp-block-cc-project-grid .brick {
		width: 16.6667%;
	}
	.wp-block-cc-project-grid .brick[data-orientation="landscape"],
	.wp-block-cc-project-grid .brick.portrait-large {
		width: 33.3333%;
	}
}

/* Blanks: hidden on mobile/tablet, visible on desktop. */
.wp-block-cc-project-grid .brick.blank {
	display: none;
}

@media (min-width: 992px) {
	.wp-block-cc-project-grid .brick.blank {
		display: block;
	}
}

/* Inset border = the "gap" between bricks in the original classic theme. */
.wp-block-cc-project-grid .brick > a {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border: 9px solid var(--wp--preset--color--white, #fff);
}

.wp-block-cc-project-grid .brick img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 8s ease-out;
}

.wp-block-cc-project-grid .brick figcaption {
	color: var(--wp--preset--color--white, #fff);
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
}

.wp-block-cc-project-grid .brick figcaption h2 {
	font-size: 0.875em;
	font-weight: normal;
}

.wp-block-cc-project-grid .brick:hover figcaption {
	opacity: 1;
}

.wp-block-cc-project-grid .brick:hover img {
	transform: scale(1.2);
}

/* Lazy-load sentinel. */
.wp-block-cc-project-grid .grid-sentinel {
	height: 1px;
}