/* gax studio v10: jeden system na bazie /nowa/ (v4.css). Plan: design/v10/PLAN.md
   Tylko kroje z /nowa/ (Big Shoulders, Familjen), jej rysowana kreska jako jedyny ruch po najechaniu.
   Z /nowa5/ przełożone na ten język: Co kręcę jako tabela, opinie jako karty. Formularz w takiej samej karcie. */

:root {
  --card: #1b1b1a;
  --card-line: rgba(242, 241, 238, .14);
}

/* karta: tylko opinia i formularz (osobna rzecz do przeczytania albo wypełnienia), zaokrąglenie jak kafelki filmów */
.review, .form--card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); }

/* ------------------------------------------------------------------ co kręcę: nagłówek jak inne sekcje, usługi w tabeli */
.what__h2 { margin-bottom: clamp(28px, 4vh, 44px); color: var(--ink); font-size: clamp(76px, 13vw, 230px); font-weight: 900; }
.what .table { margin: 0; }
.what .table > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(24px, 4vw, 64px); align-items: baseline; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.what .table > div:last-child { border-bottom: 1px solid var(--line); }
/* nazwa usługi: Big Shoulders jak tytuły filmów; po najechaniu rysuje się pod nią kreska jak pod linkami */
.what .table dt { justify-self: start; font: 900 clamp(32px, 2.8vw + 8px, 54px)/.95 var(--display); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; padding-bottom: 6px; transition: background-size .5s var(--out); }
.what .table > div:hover dt { background-size: 100% 3px; }
.what .table dd { margin: 0; color: var(--dim); font-size: 17px; line-height: 1.6; max-width: 56ch; }

/* ------------------------------------------------------------------ opinie: karty, lekko przekrzywione jak na /nowa5/ */
.reviews__list { gap: 22px; }
.review { padding: 24px 26px 22px; gap: 14px; }
.review:nth-child(odd) { transform: rotate(.7deg); }
.review:nth-child(even) { transform: rotate(-.5deg); }
.review__top { color: var(--dim); }
.review__text { font-size: clamp(18px, 1.2vw, 21px); }
.review__avatar--initials { border: 0; background: var(--ink); color: #000; }
.review__film, .review__src { color: var(--dim); }

/* ------------------------------------------------------------------ formularz w karcie: czytelne pola, wyraźne granice */
.form--card { padding: clamp(24px, 3vw, 40px); gap: 28px; }
.form--card .field label, .form--card .toggles legend { color: #cfcdc8; }
.form--card .field input, .form--card .field textarea { border-bottom-color: rgba(242, 241, 238, .5); }
.form--card .field textarea { border: 1px solid rgba(242, 241, 238, .5); border-radius: 10px; padding: 12px 14px; margin-top: 4px; }
.form--card .field textarea:focus { border: 2px solid var(--ink); padding: 11px 13px; }
.form--card .toggles span { border-color: rgba(242, 241, 238, .5); }
.form--card .consent { color: #dcdad5; }

@media (max-width: 760px) {
  .what__h2 { font-size: 23vw; }
  .what .table > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .review:nth-child(odd) { transform: rotate(.4deg); }
  .review:nth-child(even) { transform: rotate(-.3deg); }
  .form--card { margin-inline: -4px; }
}
@media (prefers-reduced-motion: reduce) { .what .table dt { transition: none; } }