/* =========================================================================
   TuMedytuj — layout tej jednej historii
   System mieszka w ../system/. Tutaj tylko to, czego nie da się sensownie
   uogólnić na pozostałe case studies. Surowych kolorów i rozmiarów czcionek
   tu nie ma; brakujące wartości trafiają do tokens.css.
   ========================================================================= */

/* --- Hero (wzór Mercury) ----------------------------------------------------
   Kadr jest pionowy (karta generatora), więc stoi obok tekstu, a nie pod nim
   jak poziome makiety Bookingu. Poniżej 1000 px wraca pod tekst. */

.hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Tytuł stoi nad dwiema kolumnami: tekst wprowadzenia po lewej, kadr po prawej. */
.hero__grid {
  display: grid;
  grid-template-areas:
    "head head"
    "copy media";
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-l) clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.hero__head {
  display: grid;
  grid-area: head;
  gap: var(--space-s);
}

.hero__head h1 {
  max-width: 18ch;
}

.hero__copy {
  display: grid;
  grid-area: copy;
  gap: var(--space-s);
  justify-items: start;
}

.hero__copy .t-lead,
.hero__copy .t-body {
  max-width: 36rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-xs);
}

.hero__media {
  display: grid;
  grid-area: media;
  width: min(100%, 30rem);
  gap: var(--space-s);
  justify-self: end;
}

/* --- Wspólne dla sekcji ------------------------------------------------------
   Nagłówek jeden pod drugim (.section__head--stacked, .line, .head-body) żyje
   w system/components.css od 06.10.2026. Tu zostaje zdjęty limit 26ch także
   z krótkich nagłówków bez ręcznych łamań i z nagłówka w bloku uczciwości. */

.section__head--stacked h2,
.section__head--stacked .honesty__title {
  max-width: none;
}

.label {
  color: var(--muted);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.label--warn {
  color: var(--warn);
}

code {
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  background: rgba(29, 29, 31, 0.06);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}

.section--night code {
  background: var(--line-invert);
  color: #fff;
}

/* Lewa połowa pary (wzór V7) jest wyszarzona, prawa w pełnym kontraście.
   Nie stosujemy tego tam, gdzie kolor jest samym dowodem (tabele w „Pomiarze”). */
.compare--v7 > figure:first-child img,
.pair--v7 > figure:first-child img {
  filter: grayscale(1);
  opacity: 0.78;
}

/* Cennik przed i po ma różną długość. Kadr rośnie do wysokości obrazu, a dopiero
   powyżej limitu z system/.compare przewija się w środku, zamiast zostawiać pustą
   ramkę pod krótszym cennikiem. */
.compare--v7 .compare__media {
  height: auto;
  max-height: clamp(24rem, 62vh, 42rem);
}

/* Para kadrów o naturalnej wysokości. System .compare trzyma stałą wysokość
   z przewijaniem, co pasuje do całych stron, ale nie do wycinków. */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}

.pair--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}

.pair figure {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.pair__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.pair__media img {
  width: 100%;
}

.pair__media--dark {
  background: var(--night);
}

/* Wycinki zrobione w skali 1 nie powinny rosnąć ponad swój rozmiar. */
.pair__media--narrow {
  max-width: 28rem;
}

.pair figcaption {
  display: grid;
  max-width: 40rem;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.pair figcaption > span {
  color: var(--ink);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- 01 Koszt ------------------------------------------------------------------- */

.stat {
  display: grid;
  max-width: 46rem;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.ripple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.ripple__list {
  border-top: 1px solid var(--line);
}

.ripple__list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
  font-weight: 620;
}

.ripple__list span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 740;
  letter-spacing: 0.06em;
  line-height: var(--lh-body);
}

/* --- 02 Audyt -------------------------------------------------------------------- */

.promise {
  display: grid;
  gap: var(--space-m);
}

.promise__head {
  display: grid;
  gap: var(--space-2xs);
}

.promise__head h3 {
  max-width: 30ch;
}

.honesty {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.honesty__head:not(:last-child) {
  margin-bottom: 0;
}

.honesty__title {
  font-size: var(--t-h2);
  letter-spacing: var(--ls-h2);
  word-spacing: var(--ws-h2);
  line-height: var(--lh-h2);
}

/* Trzy dowody jako wiersze rozdzielone linią (wzór Current): tekst po lewej,
   kadr po prawej. W trzech kolumnach wycinki byłyby za małe do przeczytania. */
.proofs {
  border-top: 1px solid var(--line);
}

.proof {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-l);
  align-items: start;
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--line);
}

.proof__copy {
  display: grid;
  gap: var(--space-xs);
}

.proof__copy h4 {
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.24;
}

.proof__media {
  display: grid;
  gap: var(--space-xs);
}

/* --- 03 Pomiar ------------------------------------------------------------------- */

.measure {
  margin-bottom: var(--space-l);
}

.voice {
  display: grid;
  max-width: 46rem;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

/* --- 04 iPhone --------------------------------------------------------------------
   Diagram z liczb z changeloga. Czerwień tylko na pasku „nagłówka”, bo to
   sygnał problemu w diagnozie (tokens.css, --warn). */

.mp3 {
  display: grid;
  gap: var(--space-l);
  max-width: 60rem;
}

.mp3__chart {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m) var(--space-l);
}

.mp3__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 5.5rem;
  gap: var(--space-s);
  align-items: center;
}

.mp3__label {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.35;
}

.mp3__track {
  position: relative;
  display: block;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--canvas);
}

.mp3__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 999px;
  background: var(--ink);
}

.mp3__bar--header {
  background: var(--warn);
}

.mp3__value {
  font-size: var(--t-h3);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: -0.02em;
  text-align: right;
}

/* Pionowa kreska w miejscu, gdzie kończy się plik według nagłówka. Leży
   w tej samej siatce co tory, więc procent liczy się od początku toru. */
.mp3__cut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(12rem + var(--space-s) + (100% - 12rem - 5.5rem - 2 * var(--space-s)) * var(--p));
  width: 0;
  border-left: 1px dashed var(--warn);
  pointer-events: none;
}

.mp3__cut span {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  color: var(--warn);
  font-size: var(--t-small);
  font-weight: 620;
  white-space: nowrap;
}

.mp3 .source-note {
  margin-top: 0;
}

.fix {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-l);
  align-items: start;
  margin-top: var(--space-xl);
}

.fix__copy {
  display: grid;
  gap: var(--space-m);
}

.fix__media {
  display: grid;
  gap: var(--space-xs);
}

/* --- 05 Rezultat ------------------------------------------------------------------ */

.flow {
  gap: var(--space-l);
}

.flow__media {
  margin-top: var(--space-2xs);
}

.usage {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.usage > .t-body {
  max-width: 46rem;
}

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

.result-note > div {
  display: grid;
  gap: var(--space-s);
}

/* Dodatek o systemie w Figmie: tekst z linkiem nad dwoma kadrami o naturalnej
   wysokości (.pair--stack). */
.figma {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.figma__copy {
  display: grid;
  max-width: 46rem;
  gap: var(--space-s);
  justify-items: start;
}

/* „Dlaczego tak” z pliku Figmy: trzy zdania własnymi słowami w trzech kolumnach,
   pod cienką linią, jak lista w audycie. */
.why {
  display: grid;
  gap: var(--space-m);
}

.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.why__list li {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-top: var(--space-m);
}

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

  .why__list li {
    padding-block: var(--space-m);
    border-bottom: 1px solid var(--line);
  }
}

/* --- Wniosek ------------------------------------------------------------------------ */

.rule--invert {
  margin-top: var(--space-xl);
  background: var(--line-invert);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

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

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-areas:
      "head"
      "copy"
      "media";
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__media {
    justify-self: start;
  }

  .proof,
  .fix,
  .ripple {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .mp3__row {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: 0.4rem var(--space-s);
  }

  .mp3__label {
    grid-column: 1 / -1;
  }

  .mp3__track {
    grid-row: 2;
  }

  /* Na wąskim ekranie tor zaczyna się od lewej krawędzi i kończy przed
     wartością, więc kreska liczy się tylko od szerokości toru. */
  .mp3__cut {
    left: calc((100% - 5.5rem - var(--space-s)) * var(--p));
  }
}