/* =========================================================================
   CJNDESIGN — strona główna portfolio i ekran po zeskanowaniu kodu QR
   Wszystko, co powtarza się z case studies, pochodzi z system/. Tu mieszka
   tylko to, co ma jedno użycie: karuzela hero (sekcja 15, hero A), lista
   projektów, „O mnie”, stopka z kodem QR i easter egg. Karuzela przechodzi do
   system/ dopiero przy drugim użyciu (zasada z system/README.md).
   ========================================================================= */

/* --- Hero ----------------------------------------------------------------
   Wyśrodkowane jak w Mercury, bo pod spodem stoi wyśrodkowana karuzela:
   tekst przy lewej krawędzi nad kadrem na środku wyglądał jak niedokończona
   makieta (uwaga Cypriana, 06.10.2026). Tytuł większy niż w case studies,
   bo strona główna ma jedno zdanie do powiedzenia, a nie historię. Tło
   bez animacji (decyzja Cypriana 14.10.2026); jedyny ruch to reveal z system/. */

.hero--home {
  --hero-title: clamp(var(--t-display), 7.2vw, calc(var(--t-display) * 1.4));

  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
}

.hero--home .hero__copy {
  display: grid;
  gap: var(--space-s);
  justify-items: center;
  text-align: center;
}

.hero--home h1 {
  max-width: none;
  font-size: var(--hero-title);
}

.hero--home .t-lead {
  max-width: 38rem;
  margin-top: var(--space-2xs);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: var(--space-s);
}

.hero .facts {
  margin-top: var(--space-l);
}

/* --- Karuzela (wzór Mercury) ---------------------------------------------
   Środkowy kadr w pozycji zrzutu z Mercury, dwa sąsiednie niżej, mniejsze
   i przycięte krawędzią kadru, z odstępem od środkowego. Pozostałe czekają
   poza kadrem po tej stronie, z której wejdą. Wszystkie kadry leżą w jednej
   komórce siatki, a pozycję niesie wyłącznie transform: wysokość karuzeli
   nie zależy od ruchu i nic nie startuje od opacity: 0.

   Przesunięcie kadru bocznego liczone jest w szerokościach kadru środkowego:
   połowa środkowego + odstęp + połowa pomniejszonego bocznego. --drag to
   przesunięcie palca albo myszy w trakcie przeciągania. */

.showcase {
  --slide-w: min(66%, 64rem);
  --side-scale: 0.8;
  --side-gap: 0.035;
  --side-drop: 12%;
  --step: calc((0.5 + var(--side-gap) + var(--side-scale) / 2) * 100%);
  --slide-dur: calc(var(--dur-reveal) * 1.4);

  margin-top: var(--space-xl);
  /* Boczne kadry są przycięte krawędzią kadru, ale cień środkowego może
     wychodzić w dół. Dlatego clip tylko w poziomie. */
  overflow-x: clip;
}

.showcase__stage {
  --drag: 0px;

  display: grid;
}

.showcase.is-ready .showcase__stage {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.showcase.is-dragging .showcase__stage {
  cursor: grabbing;
}

.showcase__slide {
  grid-area: 1 / 1;
  width: var(--slide-w);
  justify-self: center;
  transform-origin: 50% 0;
  transition: transform var(--slide-dur) var(--ease);
}

.showcase.is-dragging .showcase__slide,
.showcase__slide.is-instant {
  transition: none;
}

.showcase__slide[data-slot="center"] {
  z-index: 2;
  transform: translateX(var(--drag));
}

.showcase__slide[data-slot="left"] {
  z-index: 1;
  transform: translateX(var(--drag)) translateX(calc(var(--step) * -1)) translateY(var(--side-drop)) scale(var(--side-scale));
}

.showcase__slide[data-slot="right"] {
  z-index: 1;
  transform: translateX(var(--drag)) translateX(var(--step)) translateY(var(--side-drop)) scale(var(--side-scale));
}

.showcase__slide[data-slot="parked-left"] {
  transform: translateX(var(--drag)) translateX(calc(var(--step) * -2)) translateY(var(--side-drop)) scale(var(--side-scale));
}

.showcase__slide[data-slot="parked-right"] {
  transform: translateX(var(--drag)) translateX(calc(var(--step) * 2)) translateY(var(--side-drop)) scale(var(--side-scale));
}

.showcase__link {
  display: block;
  border-radius: var(--radius-l);
  -webkit-user-drag: none;
}

.showcase__link .frame {
  display: block;
  transition: box-shadow var(--dur) var(--ease);
}

.showcase__slide[data-slot="center"] .showcase__link:hover .frame {
  box-shadow: var(--shadow-lift);
}

.showcase__link .frame__bar {
  display: flex;
}

.showcase__link img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  pointer-events: none;
}

/* Pod środkowym kadrem: nazwa i status po lewej, sterowanie po prawej,
   w szerokości kadru. */
.showcase__bar {
  display: flex;
  width: var(--slide-w);
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  justify-content: space-between;
  margin: var(--space-s) auto 0;
}

.showcase__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem var(--space-s);
  align-items: baseline;
  font-size: var(--t-small);
  line-height: 1.5;
}

.showcase__caption strong {
  color: var(--ink);
  font-weight: 650;
}

.showcase__caption span {
  color: var(--muted);
}

/* Sterowanie pojawia się dopiero, kiedy skrypt potwierdzi, że umie je
   obsłużyć. Bez niego nie ma martwych przycisków. */
.showcase__controls {
  display: none;
  gap: var(--space-2xs);
}

.showcase.is-ready .showcase__controls {
  display: flex;
}

.showcase__btn {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.showcase__btn:hover {
  border-color: var(--ink);
}

.showcase__btn:active {
  transform: scale(0.96);
}

.showcase__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* --- 01 Projekty ---------------------------------------------------------
   Pięć projektów w kolumnach rozdzielonych linią (.columns z system/): na
   szerokim ekranie trzy w rzędzie (3 + 2), bo przy pięciu kolumnach opisy
   miałyby po dwa słowa w wierszu. Status i link stoją na tej samej wysokości
   we wszystkich kolumnach rzędu, niezależnie od długości opisu. */

@media (min-width: 1181px) {
  .projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .projects > * {
    padding-bottom: var(--space-m);
  }

  .projects > :nth-child(3n + 1) {
    border-left: 0;
  }

  .projects > :nth-child(n + 4) {
    position: relative;
  }

  .projects > :nth-child(n + 4)::before {
    position: absolute;
    top: 0;
    right: var(--col-pad);
    left: var(--col-pad);
    height: 1px;
    background: var(--line);
    content: "";
  }
}

.project {
  grid-template-rows: auto auto 1fr auto auto;
  align-content: stretch;
}

.project__meta {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 650;
}

.project__num {
  color: var(--accent);
  font-size: var(--t-eyebrow);
  font-variant-numeric: tabular-nums;
  font-weight: 740;
  letter-spacing: var(--ls-eyebrow);
}

.project .t-body {
  max-width: none;
}

.project__status {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 620;
}

/* Dwie kolumny na średnich ekranach. Drugi rząd dostaje własną linię u góry,
   wciętą tak samo jak linia nad pierwszym rzędem w .columns. */
@media (min-width: 761px) and (max-width: 1180px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .projects > * {
    padding-bottom: var(--space-m);
  }

  .projects > :nth-child(odd) {
    border-left: 0;
  }

  .projects > :nth-child(n + 3) {
    position: relative;
  }

  .projects > :nth-child(n + 3)::before {
    position: absolute;
    top: 0;
    right: var(--col-pad);
    left: var(--col-pad);
    height: 1px;
    background: var(--line);
    content: "";
  }
}

/* --- 02 O mnie ------------------------------------------------------------ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-l);
  align-items: start;
}

.about__portrait {
  aspect-ratio: 4 / 5;
}

.about__portrait {
  margin: 0;
}

.about__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-m);
  object-fit: cover;
  object-position: 50% 35%;
}

.about__text {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.about__text .t-body {
  max-width: 38rem;
}

.about__text .source-note {
  max-width: 38rem;
  margin-top: var(--space-2xs);
}

/* Gwiazdka przy Smyczkach odsyła do przypisu, ale nie może przyciągać
   wzroku bardziej niż tekst, przy którym stoi. */
.about__mark {
  color: var(--ink-soft);
  font-weight: inherit;
}

.about__cols {
  margin-top: var(--space-xl);
}

/* „Jak pracuję” ma dwa akapity, pozostałe po jednym: szersza pierwsza
   kolumna zamiast trzech równych, z których jedna ciągnęłaby się w dół. */
@media (min-width: 1181px) {
  .about__cols {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  }
}

/* Na średnich ekranach trzy kolumny robiły się wąskimi, długimi pasami
   tekstu. „Jak pracuję” zajmuje wtedy cały rząd, a dwie krótsze kolumny
   stoją pod nim obok siebie. Linia nad drugim rzędem jak w liście projektów. */
@media (min-width: 761px) and (max-width: 1180px) {
  .about__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__cols > :first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--space-m);
  }

  .about__cols > :nth-child(2) {
    border-left: 0;
  }

  .about__cols > :nth-child(n + 2) {
    position: relative;
  }

  .about__cols > :nth-child(n + 2)::before {
    position: absolute;
    top: 0;
    right: var(--col-pad);
    left: var(--col-pad);
    height: 1px;
    background: var(--line);
    content: "";
  }
}

/* Gdy pełny rząd jest szeroki, dwa akapity „Jak pracuję” stoją obok siebie,
   żeby wiersze nie ciągnęły się przez całą sekcję. */
@media (min-width: 901px) and (max-width: 1180px) {
  .about__cols > :first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--col-pad) * 2);
  }

  .about__cols > :first-child h3 {
    grid-column: 1 / -1;
  }
}

.about__cols .t-body {
  max-width: none;
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__portrait {
    width: min(100%, 24rem);
  }
}

/* Zdjęcia z życia poza pracą: jedno szerokie, dwa węższe, w rzędzie pod
   kolumnami. Ożywiają sekcję, która bez nich była samym tekstem. */
.life {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--space-xl);
}

.life__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.life__item--wide {
  aspect-ratio: auto;
}

.life__item img,
.life__item .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.life__item img {
  display: block;
}

@media (max-width: 760px) {
  .life {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .life__item--wide {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

/* --- 03 Kontakt -----------------------------------------------------------
   Jedno wezwanie, dopóki nie ma drugiego (LinkedIn): kolumna na całą
   szerokość zamiast pustej prawej połowy. */

.cta-pair:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

#kontakt {
  padding-bottom: 0;
}

#kontakt .section__head:not(:last-child) {
  margin-bottom: 0;
}

/* Pełne odstępy .next-project są pomyślane na koniec case study; tu wezwanie
   stoi tuż pod nagłówkiem sekcji, więc dostaje rytm wewnątrz sekcji. */
#kontakt .cta-pair {
  margin-top: var(--space-l);
}

#kontakt .next-project {
  padding-block: var(--space-l) var(--space-xl);
  border-top: 1px solid var(--line-invert);
}

/* --- Stopka z kodem QR (wzór Cash App) ------------------------------------
   Kod zajmuje lewą połowę stopki zamiast logo, po prawej kolumny linków
   i drobny tekst, jak u Cash App. Kolory odwrócone względem wzoru: czarny
   kod na jasnym tle, bo jasny kod na ciemnym nie każdy skaner przeczyta
   (decyzja z planu wizualnego). Kod działa, gdy skanuje się go innym
   urządzeniem, więc poniżej 768 px znika razem z podpisem, a zostaje link
   tekstowy do tej samej wizytówki. */

.home-footer {
  padding-block: var(--space-xl) var(--space-l);
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--t-small);
}

.home-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-l) clamp(2rem, 5vw, 6rem);
  align-items: stretch;
}

.home-footer__qr {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.home-footer__qr img {
  width: min(100%, 30rem);
  /* Cichą strefę kodu niesie już margines w samym SVG. */
  margin-inline-start: -1.5rem;
}

.home-footer__qr figcaption {
  max-width: 24rem;
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.home-footer__side {
  display: grid;
  gap: var(--space-l);
  align-content: space-between;
}

.home-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--space-m) clamp(1.5rem, 3vw, 3.5rem);
  justify-content: start;
}

.home-footer__label {
  margin-bottom: var(--space-xs);
  color: var(--muted);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.home-footer__cols ul {
  display: grid;
  gap: 0.55rem;
}

.home-footer__cols a {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 620;
}

.home-footer__cols a:hover {
  color: var(--accent);
}

.home-footer__copy {
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 1100px) {
  .home-footer__cols {
    grid-template-columns: repeat(2, minmax(0, auto));
  }
}

@media (max-width: 767px) {
  .home-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-footer__qr {
    display: none;
  }

  .home-footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Responsywność --------------------------------------------------------- */

@media (max-width: 760px) {
  .showcase {
    --slide-w: 80%;
    --side-gap: 0.04;
  }

  .showcase__bar {
    width: calc(100% - var(--gutter) * 2);
  }
}

/* --- Ekran po zeskanowaniu (/easter-egg/) ----------------------------------
   Osobna prosta strona na tym samym systemie, bez szyny. */

.page-egg {
  --rail-w: 0rem;
  --header-h: 0rem;
}

.egg {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--space-s);
  padding-block: var(--space-xl);
}

.egg h1:has(.line) {
  max-width: none;
}

.egg .facts {
  margin-top: var(--space-m);
  max-width: 40rem;
}

.egg .hero__row {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
  margin-top: var(--space-2xs);
}

.egg .hero__row .t-lead {
  max-width: 40rem;
}

.egg .hero__actions {
  justify-content: start;
  margin-top: 0;
}