/* ==========================================================================
   CALLA — sekcja "W praktyce" (karty powiązanych realizacji, single.php)
   Layout i mechanizm karuzeli mobile lustrzane wobec template-parts/audience/.
   ========================================================================== */

.realizacje-cards {
  position: relative;
  padding-block: var(--section-spacing);
}

.realizacje-cards__bg {
  display: block;
  position: absolute;
  left: 0;
  width: 75%;
  bottom: 0;
  top: calc(var(--section-spacing) + 3.5em);
  z-index: -1;
  background-color: rgba(246, 244, 243, 0.5);
}

.realizacje-cards__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

/* .eyebrow — typografia w global.css. */

.realizacje-cards__heading {
  max-width: 460px;
  margin-bottom: 0;
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: clamp(24px, calc(0.78vw + 21.08px), 36px);
  line-height: 1.333;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.realizacje-cards__panel {
  padding-block: var(--space-6);
}

.realizacje-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.realizacje-cards__item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.realizacje-cards__media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-alt);
}

.realizacje-cards__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.realizacje-cards__item:hover .realizacje-cards__image,
.realizacje-cards__item:focus-visible .realizacje-cards__image {
  transform: scale(1.04);
}

/* Kształt i typografia 1:1 z .wiedza-archive__ebook-btn (tag "pobierz
   ebook" w Bazie wiedzy) — flaga przyklejona do dwóch krawędzi zdjęcia,
   BEZ marginesu, z jednym zaokrąglonym rogiem od strony wnętrza kadru (nie
   pływająca kapsuła jak wcześniej). Tu tylko mniejszy font-size. */
.realizacje-cards__pill {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-white);
  font-family: 'Jost', var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  color: #333333;
  white-space: nowrap;
}

/* Każdy pill przykleja się do swoich dwóch krawędzi zdjęcia. Zaokrąglone są
   DWA rogi: ten skierowany do wnętrza kadru (efekt "flagi") ORAZ ten, który
   pokrywa się z własnym rogiem .realizacje-cards__media (promień 8px musi
   być identyczny jak tam) — inaczej overflow:hidden rodzica przycina ostry
   róg pilla do swojej krzywizny i widać rysę/szew dokładnie w tym miejscu. */
.realizacje-cards__pill--location {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 8px 0 8px;
}

/* Kategoria + usługa: jeden pozycjonowany kontener zamiast dwóch niezależnie
   zakotwiczonych pilli — przy dłuższych nazwach terminów (np. "Przestrzenie
   handlowe", "Dachy i ściany zielone") osobne left:0/right:0 nachodziły
   na siebie na środkowych szerokościach kafelka. */
.realizacje-cards__pills-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.realizacje-cards__pill--kategoria {
  border-radius: 0 8px 0 8px;
}

.realizacje-cards__pill--usluga {
  border-radius: 8px 0 8px 0;
}

.realizacje-cards__pills-bottom .realizacje-cards__pill {
  max-width: calc(50% - var(--space-2) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: lowercase;
}

.realizacje-cards__title {
  margin: var(--space-4) 0 0;
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: normal;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

@media (min-width: 640px) {
  .realizacje-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1140px) {
  .realizacje-cards__inner {
    grid-template-columns: minmax(260px, 480px) 1fr;
    align-items: center;
    column-gap: var(--space-10);
  }

  .realizacje-cards__panel {
    padding: 0;
  }

  .realizacje-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Karuzela mobile — ten sam mechanizm co .audience (assets/js/carousel.js). */
@media (max-width: 639px) {
  .realizacje-cards {
    padding-block: calc(var(--section-spacing) / 2);
  }

  .realizacje-cards__bg {
    top: calc(var(--section-spacing) / 2 + 3.5em);
  }

  .realizacje-cards__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .realizacje-cards__grid::-webkit-scrollbar {
    display: none;
  }

  /* Scoped pod .realizacje-cards__grid (karuzela na single.php) — BEZ tego
     zakresu max-width:360px "wyciekało" też na siatkę archiwum realizacji
     (.realizacje-filters__grid, inny kontener, zwykły grid nie flex), gdzie
     kafelek zatrzymywał się na 360px zamiast rosnąć z szerokością kolumny —
     stąd rosnący pusty margines po prawej powyżej ~410px viewportu. */
  .realizacje-cards__grid .realizacje-cards__item {
    flex: 0 0 85%;
    max-width: 360px;
    scroll-snap-align: center;
  }
}