/* Masonry Grid */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  grid-auto-flow: dense;
  margin-bottom: 32px;
}

.masonry-item {
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 0;
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform 0.3s ease;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.masonry-item:hover img {
  transform: scale(1.04);
}

/* Pseudo-masonry rhythm — alternate some taller tiles */
.masonry-item:nth-child(3n) {
  grid-row: span 2;
}

.masonry-item:nth-child(5n) {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .masonry-item:nth-child(3n),
  .masonry-item:nth-child(5n) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Lightbox */
.lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.lightbox-overlay.active { display: flex; }
.lightbox-content {
	max-width: 90%;
	max-height: 90%;
	position: relative;
}
.lightbox-image {
	max-width: 100%;
	max-height: 100%;
	display: block;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: absolute !important;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.lightbox-close { top: -44px; right: 0; }
.lightbox-prev { left: -54px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -54px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
	background: rgba(255,255,255,0.2);
}
@media (max-width: 900px) {
	.lightbox-prev { left: -10px; }
	.lightbox-next { right: -10px; }
	.lightbox-close { top: -50px; }
}

/* Project Cards in Grid */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.project-card { border: 1px solid rgba(0,0,0,0.08); padding: 0; overflow: hidden; transition: box-shadow 0.2s; }
.project-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.project-card a { text-decoration: none; color: inherit; display: block; }
.project-card img { width: 100%; height: 200px; object-fit: cover; }
.project-card .project-title { font-size: 16px; margin: 16px 16px 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 900px) {
	.projects-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
	.projects-grid { grid-template-columns: 1fr; }
}

/* Project Filters */
.project-filters { margin: 24px 0 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.filters a { padding: 8px 14px; border: 1px solid rgba(0,0,0,0.15); border-radius: 3px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 13px; transition: all 0.2s; color: #000; }
.filters a:hover { border-color: #000; }
.filters a.active { background: #000; color: #fff; border-color: #000; }

/* Single Project Layout */
.single-project .single-header h1 { margin: 0 0 24px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: clamp(24px, 4vw, 36px); }
.single-featured-image { margin-bottom: 32px; overflow: hidden; }
.single-featured-image img { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 1200px; }
.single-content { margin-bottom: 32px; line-height: 1.6; }
.single-meta { margin-bottom: 32px; padding: 20px; background: #f9f9f9; border-left: 4px solid #000; }
.project-details { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.project-details li { font-size: 14px; }
.project-details strong { text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; margin-right: 5px; }
.back-link { margin-top: 24px; }
.back-link a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: #000; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.back-link a:hover { border-bottom-color: #000; }



.project-filters {

	margin:1em 0;

	.filters {
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	  display: flex;
	  gap: 10px; 
	  flex-wrap: wrap;
	}
	
	.filters li a {
	  display: inline-block;
	  text-decoration: none;
	  padding: 8px 16px;
	  background-color: #000000;
	  color: #ffffff;
	  border-radius: 4px;
	  font-family: sans-serif;
	  font-size: 14px;
	  text-transform: uppercase;
	  transition: all 0.2s ease;
	  border: 3px solid transparent; 
	}

	.filters li a.active {
	  background-color: #ffffff;
	  color: #000000;
	  border: 3px solid #000000;
	}

	.filters li a:hover:not(.active) {
	  background-color: #0185c4;  
	  border: 3px solid #000000;
	}

	.filters li a:hover {
	  background-color: #0185c4;  
	  border: 3px solid #000000;
	}

}