/*
 * Styles for the Portfolio Page (portfolio-styles.css)
 */

/* ===== Page Hero ===== */
/* This just makes the hero on this page shorter than the homepage hero */
.page-hero {
  min-height: min(40vh, 400px); /* Shorter height */
  text-align: center; /* Center the text */
}

/* Give the wide container slightly less padding on the sides */
.container--wide {
  max-width: min(1440px, 96vw);
}

/* ===== Filter Buttons ===== */
.filter-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: 0.75rem; /* Space between buttons */
  justify-content: center; /* Center buttons horizontally */
  margin-bottom: clamp(2rem, 4vw, 3rem); /* Space below buttons */
  padding-bottom: clamp(1.5rem, 3vw, 2rem); /* More space */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
}

.filter-btn {
  /* Inherits from .btn--ghost */
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease; /* Smooth transition */
  /* ADD THIS LINE to make inactive buttons readable */
  color: var(--ink-2); /* Use dark text by default */
}

/* Style for the active button */
.filter-btn.is-active {
  background: var(--accent);
  color: var(--ink-2);
  border-color: var(--accent);
}

/* ===== Portfolio Grid ===== */
.portfolio-grid {
  /* Using CSS Columns for a simple masonry-like layout */
  column-count: 1;
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0 auto;
  /* This ensures the grid appears below the hero */
  position: relative;
  z-index: 1;
}

/* ===== Portfolio Item ===== */
.showcase-item {
  position: relative;
  display: inline-block; /* Important for column layout */
  width: 100%;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(28, 28, 31, 0.9); /* Dark background, matches .section--tinted */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px; /* Matches .post and .faq__item */
  overflow: hidden; /* Ensures image corners are rounded */
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  break-inside: avoid; /* Prevents items from breaking across columns */
}

/* Add the hover effect from your .card style */
.showcase-item:hover,
.showcase-item:focus-within {
  transform: translateY(-6px);
  border-color: rgba(237, 135, 45, 0.9);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 0 25px -5px var(--accent);
}

/* Style for hidden portfolio items */
.showcase-item.hidden {
  display: none; /* Hide the item */
}

.showcase-item img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.showcase-item__content {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.showcase-item h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 3vw, 1.3rem);
  letter-spacing: 0.04em;
  color: var(--paper);
  margin: 0 0 0.75rem;
}

.showcase-item p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(242, 242, 242, 0.78); /* Matches .card__text */
  margin: 0;
}

.showcase-item p strong {
  color: var(--accent-2);
}

/* ===== Responsive Columns ===== */
@media (min-width: 640px) {
  .portfolio-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    column-count: 3;
  }
}

@media (min-width: 1400px) {
  .portfolio-grid {
    column-count: 4;
  }
}

/* ===== Lightbox Styles ===== */

/* This makes the gallery items clickable */
.showcase-item.card {
  cursor: pointer;
}

/* The fullscreen overlay */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(17, 18, 20, 0.96); /* Dark background */
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 1rem;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* The "is-open" class makes it visible */
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* The "X" close button */
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 4vw, 2.5rem);
  right: clamp(1rem, 4vw, 2.5rem);
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 2.5rem;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
  opacity: 0.7;
  transition: opacity 150ms ease, transform 150ms ease;
}

.lightbox__close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* The image inside the lightbox */
.lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* This class gets added to the <body> to prevent scrolling */
body.lightbox-open {
  overflow: hidden;
}