/* DamTorty: podstrona pracownia.html (decyzja 2026-10-05). Ładowany po tokens.css i site.css, których nie zmienia.
   Wzory (layout/inspiracje/podstrony-wzorce.md, kompozycja A): wejście tekstowe Bernice About z pieczęcią i echem
   „SŁUPNO” z dawnej sekcji Pracowni, oś historii Bernice (Timeline_Section) z etykietami rozdziałów The Olly, motto jak
   deklaracja Le Pain Quotidien, zespół jak panel opowieści Levain (bez ciemnego tła). Pas liczb, osoby w zespole
   i sekcja „Dla firm” z faktów od klientki (2026-10-05); logo klientki w pieczęci i jej filmy (faworki, babeczki,
   pączki) od 2026-10-06. Nagłówek strony i kafle na koniec
   są wspólne z Cukiernią (site.css, 18b). Zero literałów kolorów. Punkty: md 768, lg 1024. */

/* ==========================================================================
   1. Nagłówek: echo „SŁUPNO” jak znak wodny przy dolnej krawędzi, pieczęć zamiast koła z doodle
   ========================================================================== */

.page-hero__echo { top: auto; bottom: -.12em; }
/* Echo stoi we własnym pasie pod tekstem: nie wchodzi pod napis pisany */
.page-hero--pracownia .page-hero__grid { padding-bottom: calc(var(--fs-echo) * .8 + var(--s-5)); }
.page-hero__deco--seal::before { display: none; }
.page-hero__seal { width: 220px; }
/* Pieczęć z logo klientki (2026-10-06): do lg naklejka w prawym dolnym rogu nagłówka, w połowie wystająca
   na pas liczb (siatka nagłówka ma z-index treści, więc pieczęć leży nad tłem kolejnej sekcji) */
@media (max-width: 1023px) {
  .page-hero--pracownia .page-hero__deco--seal {
    position: absolute;
    right: var(--gutter);
    bottom: -52px;
    display: block;
    width: 104px;
  }
  .page-hero--pracownia .page-hero__seal { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-hero--pracownia .page-hero__deco--seal { bottom: -56px; width: 128px; }
}

/* ==========================================================================
   1b. Pas liczb pod nagłówkiem: biały, duże cyfry jak tytuły (Bricolage zwężony), podpis wersalikami Apfel,
       kreska Kakao nad każdą pozycją zamiast ramki. Telefon 2 × 2, od lg cztery w rzędzie
   ========================================================================== */

.liczby { padding-block: var(--section-y) 0; }
.liczby__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--gap-tight);
}
.liczby__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-ink);
}
.liczby__value {
  font-family: var(--ff-display);
  font-size: clamp(48px, 3.2vw + 36px, 96px);
  line-height: .9;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  white-space: nowrap;
}
.liczby__label {
  font-family: var(--ff-nav);
  font-size: var(--fs-meta);
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .liczby__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .liczby__label { font-size: var(--fs-nav); }
}

/* ==========================================================================
   2. Oś historii. Telefon: linia przy lewej krawędzi, kółka na niej, zdjęcie nad tekstem.
      Od lg: linia przez środek, rozdziały naprzemiennie, kółko na wysokości środka rozdziału.
      Stan bazowy (bez JS, ograniczony ruch) = linia pełna i kółka zapalone; .is-live z site.js (initTimeline)
   ========================================================================== */

.historia { padding-bottom: calc(var(--section-y) + var(--s-5)); }
/* Napis pisany nad wyśrodkowanym tytułem: wyśrodkowany i obracany wokół środka (bazowo stoi przy lewej krawędzi) */
.historia .overline--script,
.firmy .overline--script { margin-inline: auto; transform-origin: center bottom; }
.timeline { position: relative; }
.timeline__line {
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 22px;
  width: 4px;
  border-radius: 4px;
  background: var(--c-pink-deep);
}
.timeline__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-brand);
  transform: scaleY(var(--tl, 1));
  transform-origin: top;
}
.timeline__list { display: grid; gap: var(--s-8); }
.timeline__item { position: relative; display: grid; gap: var(--s-5); padding-left: 72px; }
.timeline__dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-content);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--c-brand);
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-ink);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), scale .8s cubic-bezier(0, .43, .22, 1.37);
}
.timeline__dot svg { width: 24px; height: 24px; }
.timeline.is-live .timeline__dot:not(.is-passed) {
  border-color: var(--c-pink-deep);
  background: var(--c-white);
  color: var(--c-muted);
  scale: .75;
}
.timeline__photo { --photo-r: var(--r-md); }
.timeline__label {
  font-family: var(--ff-nav);
  font-size: var(--fs-label);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent);
}
.timeline__title {
  margin-top: var(--s-2);
  font-family: var(--ff-nav);
  font-size: clamp(24px, 1.2vw + 19px, 34px);
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
}
.timeline__text p { margin-top: var(--s-3); }
.timeline__link { margin-top: var(--s-3); }

@media (min-width: 768px) {
  .timeline__photo { --photo-r: var(--r-lg); }
}
@media (min-width: 1024px) {
  .timeline__line { top: 0; left: 50%; translate: -50% 0; }
  .timeline__list { gap: var(--s-9); }
  .timeline__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 160px;
    align-items: center;
    padding-left: 0;
  }
  .timeline__dot { top: 50%; left: 50%; translate: -50% -50%; width: 64px; height: 64px; }
  .timeline__dot svg { width: 30px; height: 30px; }
  .timeline__item:nth-child(even) .timeline__photo { grid-column: 2; grid-row: 1; }
  .timeline__item:nth-child(even) .timeline__text { grid-column: 1; grid-row: 1; }
}

/* ==========================================================================
   3. Motto: akcent pisany nad wielkim napisem, fakty jako pigułki z obrysem jak kategorie w Realizacjach
   ========================================================================== */

.motto__inner { display: grid; justify-items: center; text-align: center; }
.motto__script { margin-bottom: var(--s-2); transform-origin: center bottom; }
.motto__title {
  max-width: 12ch;
  font-size: clamp(44px, 5.6vw + 22px, 112px);
  line-height: .92;
}
.motto__lead { max-width: 640px; margin-top: var(--s-5); }
.motto__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.motto__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 2px solid var(--c-ink);
  border-radius: var(--r-pill);
  font-family: var(--ff-nav);
  font-size: var(--fs-meta);
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
}
.motto__facts svg { width: 22px; height: 22px; }

@media (min-width: 768px) {
  .motto__facts li { min-height: 52px; padding: 0 26px; font-size: var(--fs-nav); }
}

/* ==========================================================================
   4. Zespół: biały panel z obrysem (Levain bez błękitu), zdjęcia przechylone jak polaroid, pierwsze wystaje ponad panel
   ========================================================================== */

.zespol { padding-top: calc(var(--section-y) + var(--s-7)); }
.zespol__panel {
  display: grid;
  gap: var(--s-8);
  padding: 0 var(--s-5) var(--s-7);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.zespol__block { display: grid; gap: var(--s-5); }
.zespol__photo {
  --photo-r: var(--r-md);
  width: min(280px, 78%);
  margin: calc(-1 * var(--s-7)) auto 0;
  rotate: -3deg;
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--c-ink) 16%, transparent));
}
/* Film z faworkami (2026-10-06): pion 4:5 jak zdjęcie w pierwszym bloku, przechylony w drugą stronę */
.zespol__video { --vc-ratio: 4 / 5; width: min(300px, 78%); margin-inline: auto; rotate: 2deg; }
.zespol__video .video-card__frame { overflow: hidden; border-radius: var(--r-md); }
.zespol__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 1.4vw + 22px, 44px);
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}
.zespol__text p { margin-top: var(--s-3); }
.zespol__people { margin-top: var(--s-5); border-top: var(--bw-hair) solid var(--c-hair); }
.zespol__people li {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: var(--bw-hair) solid var(--c-hair);
}
.zespol__name {
  font-family: var(--ff-nav);
  font-size: var(--fs-nav);
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}
.zespol__role { font-size: var(--fs-small); color: var(--c-muted); }
.zespol__quote { margin: var(--s-5) 0 0; }
.zespol__quote blockquote p {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 600;
}
.zespol__quote figcaption { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-muted); }

@media (min-width: 1024px) {
  .zespol { padding-top: calc(var(--section-y) + var(--s-8)); }
  .zespol__panel { gap: var(--s-9); padding: var(--s-8); }
  .zespol__block {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-8);
    align-items: center;
  }
  .zespol__block--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .zespol__block--rev .zespol__video { grid-column: 2; grid-row: 1; }
  .zespol__block--rev .zespol__text { grid-column: 1; grid-row: 1; }
  .zespol__photo { width: auto; margin: calc(-1 * var(--s-10)) 0 0 calc(-1 * var(--s-4)); }
  .zespol__video { width: min(380px, 100%); margin-inline: auto 0; }
}
@media (min-width: 768px) {
  .zespol__people li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-5); align-items: baseline; }
}

/* ==========================================================================
   5. Dla firm: Róż z falą jak motto, dwa filmy klientki obok siebie (babeczki, pączki: skala zamówień),
      cztery białe karty z ikoną w kole Różu, pod spodem dowóz chłodnią i kontakt.
      Telefon jedna kolumna (ikona obok tekstu), od md dwie, od lg cztery (ikona nad tytułem)
   ========================================================================== */

/* Filmy jak dwa zdjęcia z telefonu położone na stole: przechylone w przeciwne strony, drugie niżej */
.firmy__filmy {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: var(--s-7);
}
.firmy__film { --vc-ratio: 4 / 5; width: min(260px, calc(50% - var(--gap) / 2)); rotate: -2deg; }
.firmy__film + .firmy__film { margin-top: var(--s-5); rotate: 2deg; }
.firmy__film .video-card__frame { overflow: hidden; border-radius: var(--r-md); }
.firmy__film .video-card__caption { text-align: center; }

.firmy__list {
  display: grid;
  gap: var(--gap-tight);
}
.firmy__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  align-content: start;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.firmy__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-pink);
}
.firmy__icon svg { width: 28px; height: 28px; }
.firmy__title {
  font-family: var(--ff-nav);
  font-size: var(--fs-tile-title-sm);
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
}
.firmy__text { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 1.45; }
.firmy__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  max-width: none;
  margin-top: var(--s-6);
  font-weight: 600;
  text-align: left;
}
.firmy__note svg { flex: none; width: 26px; height: 26px; }
.firmy__actions { margin-top: var(--s-5); }

@media (min-width: 768px) {
  .firmy__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .firmy__filmy { gap: var(--s-8); }
}
@media (min-width: 1024px) {
  .firmy__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .firmy__item { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); padding: var(--s-6) var(--s-5); }
  .firmy__icon { grid-row: auto; width: 64px; height: 64px; }
  .firmy__icon svg { width: 32px; height: 32px; }
  .firmy__text { margin-top: 0; }
}

.pracownia-end { padding-top: var(--s-7); }

@media print {
  .timeline__line { display: none; }
  .zespol__photo,
  .zespol__video,
  .firmy__film { rotate: none; filter: none; }
}