/* Foglight — layout.css
   Container, grid system and structural layout rules. Mobile-first. */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

section + section,
.site-main > * + * {
	margin-top: var(--space-9);
}

/* Sidebar layout: single column on mobile, content + aside on desktop */
.has-sidebar {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-8);
}

@media (min-width: 900px) {
	.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}
}

.widget-area {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Project grid: 1 col mobile -> 2 col tablet -> 4 col desktop */
.project-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--grid-gap);
}

@media (min-width: 640px) {
	.project-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	.project-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Portfolio index (archive-project.php, taxonomy-project_category.php):
   two-column grid of image+text entries, one column on mobile —
   distinct from the compact square .project-grid teaser on the homepage. */
.project-list {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-7);
	row-gap: var(--space-8);
	padding-block: var(--space-7) var(--space-9);
}

@media (min-width: 780px) {
	.project-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Blog post grid: 1 col mobile -> 2 col desktop */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 640px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Gallery page (template-gallery.php) AND the project gallery
   (single-project.php): true "shortest column" masonry — assets/js/masonry.js
   measures each item and absolutely positions it into whichever column is
   currently shortest, Pinterest-style. A CSS Grid row-span approximation
   was tried first but left visible gaps (grid auto-placement fills the
   first available slot in DOM order, not necessarily the shortest
   column); a fixed grid before that overflowed badly once a gallery held
   more than a handful of images. --masonry-gap here is read by the JS via
   getComputedStyle so the two stay in sync.
   No-JS fallback: items are plain stacked blocks (one per row). */
.gallery-masonry {
	padding-block: var(--space-7) var(--space-9);
}

.gallery-masonry > p {
	font-weight: 600;
	font-size: var(--step-1);
	max-width: 60ch;
	margin-bottom: var(--space-7);
}

.gallery-masonry :where(.wp-block-gallery, .blocks-gallery-grid),
.project-gallery {
	--masonry-gap: 12px;
}

@media (min-width: 640px) {
	.gallery-masonry :where(.wp-block-gallery, .blocks-gallery-grid),
	.project-gallery {
		--masonry-gap: 16px;
	}
}

.gallery-masonry :where(.wp-block-gallery, .blocks-gallery-grid) img {
	display: block;
	width: 100%;
	height: auto;
}

.project-gallery__item {
	display: block;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.project-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--duration-slow) var(--ease-out);
}

.project-gallery__item:hover .project-gallery__image,
.project-gallery__item:focus-visible .project-gallery__image {
	transform: scale(1.04);
}

/* About teaser: stacked mobile, two-column desktop */
.about-teaser__inner {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 860px) {
	.about-teaser__inner {
		grid-template-columns: 0.85fr 1fr;
		align-items: center;
		gap: var(--space-8);
	}
}

.about-teaser__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--color-bg-subtle);
}

/* Footer widget columns */
.footer-widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block: var(--space-8) var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 720px) {
	.footer-widgets {
		grid-template-columns: repeat(3, 1fr);
	}
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-block: var(--space-6);
}

@media (min-width: 720px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Visually hide but keep in DOM (used for honeypot field) */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}