/* =========================================================
   Support4u v6 — miniatury realizacji jak portfolio
   Cel: na stronie głównej zdjęcia mają wyglądać jak kadry/kafelki,
   a nie jak całe pionowe fotografie z paskami po bokach.
   Wklej na sam KONIEC assets/project-scaling-fix.css
   albo dołącz jako osobny plik po wcześniejszych CSS-ach.
   ========================================================= */

.projects-grid,
.projects-grid.compact{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(300px, 360px)) !important;
  gap:24px !important;
  justify-content:start !important;
  align-items:start !important;
}

.project-card{
  max-width:360px !important;
  border-radius:24px !important;
}

/* Najważniejsza zmiana:
   miniatura zawsze jest kadrem 16:10, jak w portfolio.
   Całe zdjęcie oglądamy dopiero w lightboxie. */
.project-media{
  aspect-ratio:16/10 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  background:#071126 !important;
  background-image:none !important;
  overflow:hidden !important;
}

/* Wyłączamy tryb contain/portretowy z poprzedniej poprawki */
.project-media::before{
  display:none !important;
}

.project-media.has-bg,
.project-media.is-portrait,
.project-media.is-tall{
  background-image:none !important;
}

.project-media img,
.project-media.is-portrait img,
.project-media.is-tall img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  display:block !important;
}

/* dla bardzo pionowych zdjęć lepszy kadr jest trochę wyżej,
   bo zwykle najważniejszy element jest w górnej/środkowej części */
.project-media.is-portrait img{
  object-position:center 42% !important;
}

.project-body{
  padding:22px 24px 24px !important;
}

.project-body h3{
  font-size:24px !important;
  line-height:1.14 !important;
  margin:18px 0 12px !important;
}

.project-body p{
  font-size:16px !important;
  line-height:1.55 !important;
  -webkit-line-clamp:3 !important;
}

.project-more{
  font-size:17px !important;
  margin-top:16px !important;
}

.photo-count{
  right:14px !important;
  top:14px !important;
  z-index:3 !important;
}

/* W lightboxie zostawiamy CAŁE zdjęcie — bez ucinania */
.modal-image-wrap img,
.project-modal [data-modal-img]{
  object-fit:contain !important;
  object-position:center center !important;
  max-height:72vh !important;
}

/* Desktop: jeżeli jest tylko jedna realizacja, niech nadal wygląda jak karta,
   ale nie będzie ogromnym banerem */
.projects-grid.compact:has(.project-card:only-child),
.projects-grid:has(.project-card:only-child){
  grid-template-columns:minmax(300px, 360px) !important;
}

/* Gdy przeglądarka nie obsługuje :has, karta i tak ma max-width */
@media(max-width:1200px){
  .projects-grid,
  .projects-grid.compact{
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
  .project-card{
    max-width:none !important;
  }
}

@media(max-width:700px){
  .projects-grid,
  .projects-grid.compact{
    grid-template-columns:1fr !important;
  }

  .project-card{
    max-width:none !important;
  }

  .project-media{
    aspect-ratio:16/11 !important;
  }
}