/* ==========================================================================
   Track One Core — Portfolio Module
   Structural only — no decorative colors or typography. Child theme styles
   the aesthetic layer, including lightbox background and button icons.
   ========================================================================== */

/* ---- Project Grid ---- */

.toc-project-grid {
	display: grid;
	gap: var(--wp--style--block-gap, 1.5rem);
}

.toc-project-grid--cols-1 { grid-template-columns: 1fr; }
.toc-project-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.toc-project-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.toc-project-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
	.toc-project-grid--cols-2,
	.toc-project-grid--cols-3,
	.toc-project-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 701px) and (max-width: 1024px) {
	.toc-project-grid--cols-3,
	.toc-project-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.toc-project-grid__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.toc-project-grid__thumb {
	display: block;
	overflow: hidden;
}

.toc-project-grid__thumb-img {
	display: block;
	width: 100%;
	height: auto;
}

.toc-project-grid__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.toc-project-grid__title {
	margin: 0;
}

.toc-project-grid__title-link {
	display: block;
}

.toc-project-grid__client,
.toc-project-grid__description {
	margin: 0;
}

.toc-project-grid__empty {
	text-align: center;
}

/* ---- Project Card ---- */

.toc-project-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.toc-project-card__thumb {
	display: block;
	overflow: hidden;
}

.toc-project-card__thumb-img {
	display: block;
	width: 100%;
	height: auto;
}

.toc-project-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.toc-project-card__title {
	margin: 0;
}

.toc-project-card__title-link {
	display: block;
}

.toc-project-card__client,
.toc-project-card__description {
	margin: 0;
}

.toc-project-card__empty {
	text-align: center;
}

/* ---- Project Gallery ---- */

.toc-project-gallery {
	display: grid;
	gap: var(--wp--style--block-gap, 1rem);
}

.toc-project-gallery--cols-1 { grid-template-columns: 1fr; }
.toc-project-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.toc-project-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.toc-project-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 600px) {
	.toc-project-gallery--cols-2,
	.toc-project-gallery--cols-3,
	.toc-project-gallery--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.toc-project-gallery__item {
	margin: 0;
	overflow: hidden;
}

.toc-project-gallery__link {
	display: block;
	cursor: pointer;
}

.toc-project-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Lightbox overlay ---- */

.toc-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.toc-lightbox--open {
	display: flex;
}

.toc-lightbox__img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 90vh;
}

.toc-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
}

.toc-lightbox__close,
.toc-lightbox__prev,
.toc-lightbox__next {
	position: absolute;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0.75rem;
	line-height: 1;
}

.toc-lightbox__close { top: 1rem; right: 1rem; }
.toc-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.toc-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---- Project Filter (structural; child themes style the chips) ---- */

.toc-project-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.toc-project-filter__chip {
	cursor: pointer;
	border: 1px solid currentColor;
	background: transparent;
	font: inherit;
}

/* Filtered-out cards. The item sets display:flex, which would defeat the
   native [hidden] behavior, so force it off here. */
.toc-project-grid__item[hidden] {
	display: none !important;
}

/* Horizontal-scroll chips on narrow screens so the filter never wraps tall. */
@media (max-width: 600px) {
	.toc-project-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.toc-project-filter__chip {
		flex: 0 0 auto;
	}
}