/* Portfolio Section */
.portfolio-section {
  padding-top: 25vh;
  background: none;
  z-index: 1;
}

/* Portfolio filters */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
  padding: 0px;
  border-radius: var(--ds-radius-md);
  margin-bottom: 0;
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ds-space-3);
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.filter-btn {
  padding: 8px 14px; /* Zmieniono na sztywne wartości, żeby były wyższe */
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background-color: var(--ds-light);
  color: var(--ds-primary);
  font-family: inherit;
  font-size: var(--ds-text-small);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-duration-fast) var(--ds-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto; /* Szerokość i tak dopasowuje się do zawartości w flex-wrap */
}

.filter-btn .material-icons-outlined,
.filter-btn svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}
.filter-btn svg { fill: currentColor; }

/* Grid dla Projektów (Zastępuje Karuzelę) */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

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

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.project-card {
  width: 100%;
  aspect-ratio: 5 / 7; /* Zachowujemy proporcję 5:7 */
  height: auto; /* Wysokość dostosowuje się automatycznie */
  background: transparent;
  border-radius: var(--ds-radius-md);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--ds-duration-medium) var(--ds-ease);
  cursor: pointer;
  border: none;
  outline: none;
}

.project-image-container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  transition: transform var(--ds-duration-medium) var(--ds-ease);
  z-index: 2;
  background: var(--ds-light);
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ds-duration-medium) var(--ds-ease);
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

/* Usunięto stare ukryte .project-info, zostawiono jako puste by nie psuć struktury z JS,
   ponieważ używamy teraz tooltipa przy kursorze. Można ukryć w ogóle z widoku. */
.project-info {
  display: none;
}

.project-category-overlay {
  display: none;
}

.load-more-container {
  text-align: center;
  display: none !important; /* Ukrywamy przycisk load more w przypadku karuzeli */
}

.project-card .card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  background: transparent;
}

/* ------------------------------------- */
/* MOBILE PROJECT TITLES                 */
/* ------------------------------------- */
.mobile-project-title {
  display: none; /* Domyślnie ukryte na desktopie (jest tooltip) */
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: var(--ds-text-body);
  color: var(--ds-medium-gray);
  margin-bottom: 4px; /* Zmniejszony odstęp między tytułem a zdjęciem do 4px */
  padding-left: 4px; /* Delikatne wcięcie względem zdjęcia */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  /* Ponieważ tooltip bazujący na myszce działa słabo na tabletach dotykowych i telefonach, 
     pokazujemy fizyczny tytuł nad kartą. */
  .mobile-project-title {
    display: block;
  }
  
  /* Ponieważ dodaliśmy element nad zdjęciem, wysokość karty nie może być rygorystycznie uzależniona od aspect-ratio samego kontenera głównego. */
  .project-card {
    aspect-ratio: auto;
  }
  
  /* Przypisujemy aspect-ratio bezpośrednio do kontenera ze zdjęciem */
  .project-image-container {
    aspect-ratio: 5 / 7;
    height: auto;
  }
}

/* ------------------------------------- */
/* CUSTOM CURSOR TOOLTIP                 */
/* ------------------------------------- */
.cursor-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: var(--ds-primary);
  color: var(--ds-light);
  padding: 12px 24px;
  border-radius: var(--ds-radius-button);
  font-size: var(--ds-text-body);
  font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transform: translate(15px, 15px); /* Lekki offset od kursora */
  transition: opacity 150ms var(--ds-ease);
}

.cursor-tooltip.visible {
  opacity: 1;
}

/* ------------------------------------- */
/* PROJECT ENTRANCE ANIMATION            */
/* ------------------------------------- */
@keyframes projectReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-card.is-animating {
  animation: projectReveal 500ms var(--ds-ease) forwards;
  opacity: 0; /* Start hidden */
}