/* Hero (shorter than home, adjust if you like) */
.portfolio-hero {
  position: relative;
  display: flex;
  background: #292626;
  width: 100%;
  height: 40vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}


.portfolio-hero .hero-text {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  text-align: center;
  z-index: 2;
}

.portfolio-hero .hero-text h1 {
  font: 700 3rem 'Poppins', sans-serif;
  margin-bottom: 10px;
}

.portfolio-hero .hero-text p {
  font: 400 1.1rem 'Poppins', sans-serif;
  opacity: .95;
}

/* Filter bar */
.filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 24px 16px;
  background: #f5f5f5;
}

.filter-btn {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font: 600 .95rem 'Poppins', sans-serif;
  padding: 10px 16px;
  border-radius: 22px;
  cursor: pointer;
  text-decoration: none; /* for anchors */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.filter-btn:hover { background: #333; color: #fff; border-color: #333; }
.filter-btn.active { background: #333; color: #fff; border-color: #333; }

/* Category sections */
.category-section {
  width: 100%;
  max-width: none;  
  margin: 0;
  padding: 0;
}


.category-section h2 {
  font: 800 1.6rem 'Poppins', sans-serif;
  margin: 8px 0 16px;
  text-align: left;
}

/* Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 0 12px;           /* tiny page edge gutter so images don't touch the bezel */
}

@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* Tiles */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #e9e9e9;
  aspect-ratio: 3 / 4;       /* <-- consistent rectangle (try 16/10 or 4/3 if you prefer) */
}

.tile img {
  position: absolute;
  inset: 0;                  /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;     /* center crop; tweak per image if needed */
  display: block;
  transition: transform .3s ease, filter .3s ease;
}


.tile:hover img { transform: scale(1.02); filter: contrast(105%); }

/* Simple lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox.open { display: flex; }

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  font-size: 2rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

/* Make sure the header text is dark when it appears at bottom on inner pages */
.inner.at-bottom header .topnav a,
.inner.at-bottom header .logo { color: #222; }


/* Make header always visible on Portfolio page */
.portfolio header {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  background: transparent; /* still overlays the hero banner */
  box-shadow: none;
}

/* Logo + nav links should be bright on dark banner */
.portfolio header .logo,
.portfolio header .topnav a {
  color: #fff;  /* force white so it shows on black */
}

/* On hover */
.portfolio header .topnav a:hover {
  color: #aaa;
}