/* assets/sekcje.css
   Purpose: sekcje strony głównej — panel narzędzi (wiersze-odnośniki + ekrany telefonu), Zalew
   NOT for: nagłówka (→ naglowek.css), układu wspólnego (→ site.css), ruchu (→ ruch.css)

   Ładowane TYLKO przez index.html.

   ŁAMANIE RYTMU: każda sekcja ma INNY układ. Trzy bloki zbudowane tak samo
   (etykieta → nagłówek → akapit → notatka) to najczęstszy sygnał, że stronę
   składała maszyna. */

/* ── narzędzia: jeden panel, w nim spis i dwa ekrany ───────── */
.narzedzia-grid { display: grid; gap: clamp(2rem, 4vw, 3.4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  /* 1,14 / 0,86 zamiast 1/1 — równy podział czyta się jak szablon. */
  .narzedzia-grid { grid-template-columns: 1.14fr .86fr; align-items: center; }
}
.narzedzia-lewa .eyebrow { padding-inline: var(--wiersz-x, 1rem); }

/* Wiersz zamiast kafla: trzy kafle pod sobą to siatka kart (szablon), trzy wiersze
   to spis — jak rozkład jazdy. Kreska między wierszami jest pseudoelementem
   z wcięciem, bo border-top na zaokrąglonym pudełku zaginałby się na rogach. */
.kafel {
  --wiersz-x: clamp(.8rem, 1.6vw, 1.2rem);
  display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.4rem; align-items: center;
  position: relative; text-decoration: none; color: inherit;
  padding: clamp(1.1rem, 2vw, 1.5rem) var(--wiersz-x);
  border-radius: 14px; transition: background .3s var(--ease-out);
}
.kafel + .kafel::before { content: ''; position: absolute; top: 0; left: var(--wiersz-x); right: var(--wiersz-x); height: 1px; background: var(--rule); }
.kafel:hover { background: var(--amber-wash); }
.kafel h2 { grid-column: 1; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); letter-spacing: -.025em; line-height: 1.1; margin: .25rem 0 .35rem; }
.kafel p { grid-column: 1; color: var(--ink-soft); font-size: .98rem; max-width: 52ch; margin: 0; }
/* WHY nie zielona: zielona plakietka obok czerwonego akcentu to DWA kolory akcentowe —
   pierwszy sygnał „to składała maszyna”. Status niesie forma, nie kolejny kolor. */
.kafel-tag {
  grid-column: 1; justify-self: start;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--rule-hard); padding: .15rem .55rem; border-radius: 999px;
}
.kafel:hover .kafel-tag { border-color: var(--amber); color: var(--amber); }
/* Odnośnik w prawej kolumnie przez wszystkie wiersze siatki. Przesunięcie zamiast
   rozstrzelenia liter: `transform` idzie po kompozytorze, `letter-spacing` przelicza układ. */
.kafel-akcja {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  font-weight: 600; color: var(--amber); font-size: 1rem; white-space: nowrap;
  transition: transform .3s var(--ease-out);
}
.kafel:hover .kafel-akcja { transform: translateX(6px); }
@media (max-width: 560px) {
  .kafel { grid-template-columns: 1fr; }
  .kafel-akcja { grid-column: 1; grid-row: auto; margin-top: .45rem; }
}

/* ── zrzuty na telefonie ───────────────────────────────────── */
.ekrany { margin: 0; }
/* Kadr o stałej wysokości + zejście w tło u dołu. Bez maski zrzut kończy się twardą
   krechą w połowie wiersza i wygląda jak pomyłka, a nie decyzja. Zapas 5 % z boków
   na obrót: maska obcina WSZYSTKO poza pudełkiem, a obrócony zrzut wystaje narożnikiem. */
.ekrany-kadr {
  position: relative; height: clamp(300px, 34vw, 430px);
  padding-inline: 5%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.ekran {
  display: block; width: 74%; height: auto; border-radius: 18px;
  border: 4px solid var(--paper-pure); background: var(--paper-pure);
  box-shadow: var(--cien-unos);
}
/* Dwa ekrany jeden za drugim, lekko obrócone — obraz wychodzi z kadru. */
.ekran-tyl { transform: rotate(4.5deg) translate(14%, 4%); opacity: .85; }
/* `left: 5%`, nie 0: dla elementu absolutnego odsunięcia liczą się od PUDEŁKA rodzica. */
.ekran-przod { position: absolute; top: 0; left: 5%; transform: rotate(-3deg); }
.ekrany figcaption {
  position: relative; margin-top: .4rem;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-faint); max-width: 34ch;
}
@media (max-width: 899px) {
  /* Na telefonie obrót i nakładanie nie mają sensu — dwa ekrany obok siebie, prosto. */
  .ekrany-kadr { height: auto; display: flex; gap: 4%; align-items: flex-start; -webkit-mask-image: none; mask-image: none; }
  .ekran { width: 48%; }
  .ekran-tyl, .ekran-przod { position: static; transform: none; opacity: 1; }
  .ekrany figcaption { margin-top: .9rem; }
}

/* ── Zalew: pełna szerokość, bez ramki karty, kurtyną od dołu (ruch.css) ──
   Podpis jest częścią kompozycji, nie dopiskiem — to on jest tu treścią:
   pokazuje, jak traktujemy cudzą pracę. */
.foto { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.foto .wipe { border-radius: var(--panel-r); overflow: hidden; box-shadow: var(--cien-unos); }
.foto img { display: block; width: 100%; height: auto; }
.foto figcaption {
  margin-top: .9rem; font-family: var(--mono); font-size: .78rem; line-height: 1.6;
  color: var(--ink-faint); max-width: 74ch;
}
.foto figcaption strong { color: var(--ink-soft); font-weight: 500; }
.foto figcaption a { color: var(--ink-soft); }