/* assets/realizacje.css
   Purpose: portfolio + cennik — karty realizacji, tytuły działów, opieka, elastyczność,
            płatność (index, /realizacje, /cennik)
   NOT for: fundamentu wizualnego (→ base.css), układu wspólnego (→ site.css)

   ZASADA UKŁADU: kraśnickie karty mają INNY KSZTAŁT niż okoliczne (pionowy vs
   poziomy), nie tylko inny rozmiar. Równy grid 2×2 z jednakowych kafli to
   najczęstszy sygnał szablonu — różnica kształtu czyta się jako decyzja. */

.dzial-tyt { max-width: 22ch; margin-bottom: .9rem; }
.dzial-lead { color: var(--ink-soft); max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Uprzedzenie o nowej karcie — jedno zdanie dla całej siatki zamiast
   dziewięciu ukrytych dopisków przy każdym odnośniku z osobna. */
.nowa-karta { font-family: var(--mono); font-size: var(--t-fine); color: var(--ink-faint); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* ── karty realizacji = panele ─────────────────────────────── */
/* Karty NIE siedzą w kolejnym panelu: biel na bieli gubi krawędź. Same są panelami. */
.siatka-blisko { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 880px) { .siatka-blisko { grid-template-columns: 1fr 1fr; } }
.praca {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-pure); border-radius: var(--panel-r); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--cien-panel);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.praca:hover { transform: translateY(-5px); box-shadow: var(--cien-unos); }
/* Zrzut przybliża się o 3 % pod opisem; opis ma własne tło i leży wyżej, więc
   przybliżenie nie wyłazi spod niego. */
.praca img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.praca:hover img { transform: scale(1.03); }
.praca-opis {
  position: relative; background: var(--paper-pure);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--rule);
}
.praca-opis h3 { margin: .25rem 0 .45rem; }
.praca-opis p { color: var(--ink-soft); font-size: .97rem; margin-bottom: .8rem; }
.praca-gdzie { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); }
.praca-link { font-family: var(--mono); font-size: .82rem; color: var(--ink-faint); word-break: break-all; }
.praca:hover .praca-link { color: var(--amber); }

/* Okoliczne (nie kraśnickie) — kształt poziomy zamiast pionowego. */
@media (min-width: 880px) {
  .praca:not(.praca-duza) { display: flex; align-items: stretch; }
  /* Kadr od lewej, nie ze środka: nagłówki stron zaczynają się przy lewej krawędzi,
     a środkowe przycięcie robiło z „MELINOR” „ELINOR” (review 07.10.2026). */
  .praca:not(.praca-duza) img { width: 42%; flex-shrink: 0; object-fit: cover; object-position: left center; }
  .praca:not(.praca-duza) .praca-opis {
    display: flex; flex-direction: column; justify-content: center;
    border-top: 0; border-left: 1px solid var(--rule);
  }
  .praca:not(.praca-duza) .praca-opis p { margin-bottom: .55rem; }
}

/* Jedna karta na całą szerokość (strona daleko od domu): zrzut i opis pół na pół,
   opis z większym oddechem — przy 42 % zrzutu 1180 px szerokości to była pusta biel.
   `.praca.praca-szeroka`, bo `.praca:not(.praca-duza)` wyżej ma dwie klasy specyficzności. */
.praca.praca-szeroka { margin-top: clamp(1.4rem, 3vw, 2.2rem); } /* tu nie ma zdania-wstępu, które gdzie indziej robi odstęp pod tytułem */
@media (min-width: 880px) {
  .praca.praca-szeroka img { width: 50%; }
  .praca.praca-szeroka .praca-opis { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.8rem, 3.5vw, 3rem); }
  .praca.praca-szeroka .praca-opis p { max-width: 46ch; }
}

/* Karta bez odnośnika — strona klienta ma jeszcze stopkę innego wykonawcy.
   Bez efektu kliknięcia, żeby nie obiecywała czegoś, czego nie zrobi. */
.praca-bez-linku:hover { transform: none; box-shadow: var(--cien-panel); }
.praca-bez-linku:hover img { transform: none; }

/* Odnośnik pod sekcją — tekstowy, nie kolejny przycisk na ekranie */
.dalej {
  display: inline-block; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  color: var(--amber); text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: .15rem; transition: color .25s;
}
.dalej:hover { color: var(--ink); }
.dzial-lead + .dalej { margin-top: 0; }

/* ── cennik ───────────────────────────────────────────── */
/* Cena to tu główna informacja, więc jest większa niż w /sprawdz-strone,
   gdzie była dopiskiem do opisu usługi. */
.cennik .price { font-size: 1.32rem; letter-spacing: -.02em; }
.cennik .price small { margin-top: .25rem; }

.opieka {
  display: grid; gap: clamp(1.4rem, 3vw, 2.8rem); grid-template-columns: 1fr;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paper-pure); border-radius: var(--panel-r);
  border-left: 3px solid var(--amber); box-shadow: var(--cien-panel);
}
@media (min-width: 880px) { .opieka { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.opieka h3 { margin-bottom: .6rem; }
.opieka p { color: var(--ink-soft); font-size: .99rem; }

/* Odpowiedź na „za drogo”. Inny kształt niż .opieka (obramowanie zamiast białego
   panelu z kreską) — dwa jednakowe bloki pod sobą czytałyby się jak wygenerowana
   para, a to są dwie różne sprawy. Proporcja kolumn też odwrotna (tam 1,5/1). */
.elastycznosc {
  display: grid; gap: clamp(1rem, 2.5vw, 2.4rem); grid-template-columns: 1fr;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--rule-hard); border-radius: var(--panel-r);
}
@media (min-width: 880px) { .elastycznosc { grid-template-columns: .78fr 1.22fr; } }
.elastycznosc h3 { margin-bottom: .7rem; }
.elastycznosc p { color: var(--ink-soft); font-size: .99rem; max-width: 66ch; }
/* Selektor złożony, nie `!important`: „.elastycznosc p” ma wyższą specyficzność
   niż sama klasa, więc bez tego domknięcie zostałoby szare jak reszta. */
.elastycznosc p.elastycznosc-domkniecie {
  margin-top: 1.1rem; padding-top: .95rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}

.platnosc {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-fine);
  line-height: 1.7; color: var(--ink-faint); max-width: 68ch;
}
.platnosc strong { color: var(--ink-soft); }