/**
 * Gallery landing page + single work template — decorative/layout touches
 * theme.json cannot express. Color, type, and spacing come from theme.json
 * global styles; kept deliberately neutral here so real work photography
 * stays the visual hero (see brief: "let the quilt photography provide
 * the color").
 */

/* Editorial rhythm: every third item is larger (spans 2x2), the rest stay
   a consistent square — a controlled repeatable composition rather than
   true masonry. */
.almagzal-gallery-main-grid {
	grid-auto-flow: dense;
}

.almagzal-gallery-main-grid .wp-block-post,
.almagzal-work-item,
.almagzal-work-item__media {
	min-width: 0; /* prevents an intrinsic image size from overflowing the grid track */
}

.almagzal-work-item__media {
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--beige);
}

.almagzal-gallery-main-grid .wp-block-post:nth-child(3n+1) {
	grid-column: span 2;
	grid-row: span 2;
}

.almagzal-gallery-main-grid .wp-block-post:nth-child(3n+1) .almagzal-work-item__media {
	aspect-ratio: 3/4;
}

.almagzal-work-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.almagzal-work-item__media img {
		transition: none;
	}
}

.almagzal-work-item__media a:hover img,
.almagzal-work-item__media a:focus-visible img {
	transform: scale(1.03);
}

/* Optional "year" meta hides itself cleanly when the field is empty. */
.almagzal-work-item__year:empty {
	display: none;
}

.almagzal-work-item__year--with-divider:not(:empty)::before {
	content: "· ";
}

@media (max-width: 600px) {
	.almagzal-gallery-main-grid .wp-block-post:nth-child(3n+1) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.almagzal-gallery-main-grid .wp-block-post:nth-child(3n+1) .almagzal-work-item__media {
		aspect-ratio: 1;
	}
}

/* Empty-state artistic context only: native images, never fake Work cards. */
.almagzal-gallery-context {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 grid-template-rows: repeat(2, minmax(0, 1fr));
 gap: clamp(0.75rem, 2vw, 1.5rem);
 width: 100%; max-width: none !important;
 aspect-ratio: 3 / 2;
 margin-bottom: 2.5rem;
}
.almagzal-gallery-context > figure {
 position: relative; min-width: 0; min-height: 0;
 width: 100%; height: 100%; margin: 0; overflow: hidden;
}
.almagzal-gallery-context > .almagzal-gallery-context-main { grid-row: span 2; }
.almagzal-gallery-context img {
 position: absolute; inset: 0; width: 100%; height: 100% !important;
 object-fit: cover; display: block;
}
@media (max-width: 600px) {
 .almagzal-gallery-context { grid-template-columns: 1fr !important; grid-template-rows: none; aspect-ratio: auto; gap: 1rem; }
 .almagzal-gallery-context > figure { aspect-ratio: 4 / 3; height: auto; }
 .almagzal-gallery-context > .almagzal-gallery-context-main { grid-row: auto; aspect-ratio: 4 / 5; }
}

/* Works section: slightly tighter vertical padding while the empty state
   is showing. Kept out of the wp:group block's own declared attributes
   (which now always stay fixed at "md") to avoid a block-validation
   mismatch between what's declared and what's rendered. */
.almagzal-gallery-works-shell.is-empty > .wp-block-group.alignwide {
	padding-top: var(--wp--preset--spacing--sm) !important;
	padding-bottom: var(--wp--preset--spacing--sm) !important;
}

/* Single work template */
.almagzal-media-placeholder {
	max-width: 100%;
}