/* ==========================================================================
   CALLA — pojedyncza realizacja (single-realizacja.php)
   Mobile: jedna kolumna, kolejność wg grid-template-areas (h1 -> sidebar ->
   content -> gallery). Desktop (1140px+): sidebar sticky po lewej, treść
   i galeria po prawej. Galeria — ten sam mechanizm karuzeli mobile co
   realizacje-cards.css/audience.css (assets/js/carousel.js), breakpoint 639px.
   ========================================================================== */

.realizacja {
  padding-block: var(--section-spacing);
}

/* Header jest position:fixed — bez tego kotwica "Przejdź do formularza"
   ląduje z nagłówkiem zasłaniającym górę sekcji (ten sam wzorzec co
   footer.css/wiedza-archive.css używają dla własnych kotwic). */
#realizacja-formularz {
  scroll-margin-top: var(--header-height);
}

/* Formularz na tej stronie ma być w całości na białym tle — .cooperation
   domyślnie dzieli tło 50/50 (biała/--color-bg-alt) na desktopie i ma szare
   tło formularza poniżej 1140px (patrz cooperation.css); nadpisujemy tylko
   tu, bez zmiany współdzielonego pliku. */
#realizacja-formularz .cooperation__form {
  background-color: var(--color-white);
}

@media (min-width: 1140px) {
  #realizacja-formularz .cooperation {
    background: var(--color-white);
  }
}

/* Treść podzielona na content1/content2 (patrz single-realizacja.php) —
   na mobile między nimi wypada box "Skonsultuj projekt" (cta--mobile), na
   desktopie oba kawałki płyną jako jedna ciągła treść (patrz breakpoint
   1140px niżej), a CTA wraca do sidebaru (cta--sidebar). */
.realizacja__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "h1"
    "sidebar"
    "content1"
    "cta-mobile"
    "content2"
    "gallery";
  row-gap: var(--space-7);
}

.realizacja__title {
  grid-area: h1;
}

.realizacja__content--1 {
  grid-area: content1;
}

.realizacja__content--2 {
  grid-area: content2;
}

.realizacja__content--1,
.realizacja__content--2 {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--color-text);
}

.realizacja__content--1 > * + *,
.realizacja__content--2 > * + * {
  margin-top: var(--space-5);
}

.realizacja__content--1 h2,
.realizacja__content--1 h3,
.realizacja__content--2 h2,
.realizacja__content--2 h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.realizacja__content--1 img,
.realizacja__content--2 img {
  border-radius: 8px;
}

/* cta-mobile: box "Skonsultuj projekt" samodzielnie w połowie treści
   (mobile), zamiast wewnątrz sidebaru — patrz cta--sidebar/cta--mobile
   niżej. */
.realizacja__cta--mobile {
  grid-area: cta-mobile;
}

/* Sidebar — na mobile trzy bloki (dane / wyzwanie / skonsultuj) razem, jako
   jedna sekcja rozdzielająca między tytułem a treścią. */
.realizacja__sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Dane projektowe + Wyzwanie: jeden box (rozdzielone linią). Skonsultuj
   projekt: BEZ tła, osobno, z większym odstępem od boxu powyżej. Na mobile
   box wychodzi poza padding .container do obu krawędzi ekranu (ten sam
   mechanizm co .cooperation__content w cooperation.css: ujemny margin-inline
   równy paddingowi kontenera, ten sam padding z powrotem na treść), bez
   zaokrąglenia rogów — od 1140px wraca do zwykłego, wcinanego boxu.  */
.realizacja__info-box {
  padding-block: var(--space-6);
  padding-inline: var(--container-padding);
  margin-inline: calc(-1 * var(--container-padding));
  border-radius: 0;
  background-color: var(--color-bg-alt);
}

.realizacja__cta {
  margin-top: var(--space-4);
}

/* Box "Skonsultuj projekt" istnieje w DOM dwa razy (patrz single-realizacja.php)
   — na mobile widoczna jest wyłącznie wersja w połowie treści, na desktopie
   wyłącznie wersja w sidebarze (przełącznik niżej, w breakpoincie 1140px). */
.realizacja__cta--sidebar {
  display: none;
}

.realizacja__info-heading {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-text);
}

.realizacja__challenge .eyebrow,
.realizacja__cta .eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}

.realizacja__info-divider {
  margin: var(--space-5) 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-primary-dark) 15%, transparent);
}

.realizacja__info-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.realizacja__info-row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-body);
}

.realizacja__info-row dt {
  margin: 0;
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.realizacja__info-row dd {
  margin: 0;
  font-weight: var(--fw-light);
}

/* Podkreślenie pod etykietą "Skonsultuj projekt" — ten sam akcent co
   .audience__label w template-parts/audience/ (mark pod tekstem-linkiem). */
.realizacja__cta-label::after {
  content: '';
  display: block;
  margin-top: var(--space-2);
  width: 24px;
  height: 1px;
  background-color: var(--color-primary-dark);
}

.realizacja__challenge-text,
.realizacja__cta-text {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.realizacja__cta-text {
  margin-bottom: var(--space-5);
}

.realizacja__cta-btn {
  display: inline-flex;
  align-items: center;
}

.realizacja__cta-btn-arrow {
  margin-left: var(--space-3);
}

/* Wersja mobilna (w połowie treści) ma ramkę góra/dół w zieleni marki —
   desktopowa wersja w sidebarze zostaje bez tła/ramki, jak dotychczas. */
.realizacja__cta--mobile {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary-dark);
}

/* Galeria ---------------------------------------------------------------- */
.realizacja__gallery-wrap {
  grid-area: gallery;
}

.realizacja__gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.realizacja__gallery-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.realizacja__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 639px) {
  .realizacja__gallery-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;
  }

  .realizacja__gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .realizacja__gallery-item {
    flex: 0 0 85%;
    max-width: 360px;
    scroll-snap-align: center;
  }
}

@media (min-width: 1140px) {
  .realizacja__grid {
    grid-template-columns: minmax(280px, 360px) 1fr;
    grid-template-areas:
      "sidebar h1"
      "sidebar content1"
      "sidebar content2"
      "sidebar gallery";
    column-gap: var(--space-10);
    row-gap: var(--space-7);
    align-items: start;
  }

  /* content1/content2 mają wyglądać jak jedna ciągła treść (podział istnieje
     wyłącznie pod mobilny CTA w połowie artykułu) — odejmujemy nadmiarowy
     row-gap gridu (--space-7) i wracamy do zwykłego odstępu międzyakapitowego
     (--space-5), zamiast zostawiać widocznie większą przerwę w środku tekstu. */
  .realizacja__content--2 {
    margin-top: calc(var(--space-5) - var(--space-7));
  }

  .realizacja__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  /* Powyżej 1140px box wraca do zwykłego, wciętego wyglądu (bez full-bleed
     z mobile, patrz komentarz przy bazowej regule). */
  .realizacja__info-box {
    padding-inline: var(--space-6);
    margin-inline: 0;
    border-radius: 8px;
  }

  /* CTA: desktop pokazuje wersję w sidebarze, chowa samodzielną wersję
     mobile z połowy treści. */
  .realizacja__cta--sidebar {
    display: block;
  }

  .realizacja__cta--mobile {
    display: none;
  }
}