/* =========================================================================
   Booking — 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) ----------------------------------------------------
   Tekst nad kadrem, jak w Smyczkach. Kadr ma 1024 px szerokości i to jest
   jego granica: rozciągnięty na całą kolumnę robiłby się miękki, a makieta
   ma być czytelna, nie efektowna. */

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

.hero > .shell {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__copy {
  display: grid;
  gap: var(--space-s);
}

.hero__copy h1 {
  max-width: 20ch;
}

/* Przyciski wisiały samotnie na prawej krawędzi, daleko od tekstu, do którego
   należą (uwaga Cypriana przy Smyczkach, 06.10.2026). Jedna oś: nagłówek,
   lead, przyciski, każdy pod poprzednim. */
.hero__row {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
  margin-top: var(--space-2xs);
}

.hero__row .t-lead {
  max-width: 40rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__media {
  display: grid;
  width: min(100%, 64rem);
  gap: var(--space-s);
}

/* Etykieta konceptu stoi w podpisie, nie na obrazie: nie zasłania makiety,
   a czytnik ekranu dostaje ją w tym samym zdaniu co opis kadru. */
.concept-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* --- Wspólne dla sekcji ------------------------------------------------------ */

/* .source-note i .pull mieszkają od 06.10.2026 w system/components.css. */

.inline-link {
  color: var(--accent);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- 01 Problem ----------------------------------------------------------------
   Dwie mapy w identycznej proporcji i skali podpisu (wzór V7). Różnicę niesie
   treść kadrów: trasa bez cen po jednej stronie, ceny bez trasy po drugiej. */

.maps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 64rem;
}

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

.maps__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.maps__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maps figcaption {
  display: grid;
  gap: 0.45rem;
}

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

.maps figcaption > strong {
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
}

.maps figcaption > p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Wątpliwość po rezerwacji. Wyróżnione zdanie, nie drugi nagłówek: stoi
   wyraźnie ponad akapitem, ale poniżej „Lato 2026”, z którym wcześniej
   konkurowało w tej samej skali (uwaga Cypriana, 05.10.2026). */

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

/* --- 02 Diagnoza ------------------------------------------------------------------ */

.reframe__label,
.scope__label,
.variants__label,
.rejected__label,
.task__label {
  color: var(--muted);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

/* Pierwsze pytanie zostaje czytelne, ale wyszarzone: nie było błędem, tylko
   zbyt szerokim ujęciem. Przekreślenie robiłoby z niego pomyłkę. */
.reframe__q--old {
  color: var(--muted);
}

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

.discovery__title {
  max-width: 22ch;
}

/* Pojedynczy kadr w przełączniku: obraz na całą szerokość, podpis pod spodem
   w tej samej skali co podpisy zestawień przed/po. */

.shot {
  display: grid;
  gap: var(--space-s);
}

.shot .frame {
  border-radius: var(--radius-m);
  box-shadow: none;
}

.shot figcaption {
  display: grid;
  max-width: var(--measure);
  gap: 0.45rem;
}

.shot figcaption > strong {
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
}

.shot figcaption > p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.verdict {
  max-width: 50rem;
  margin-top: var(--space-xl);
}

.verdict strong {
  color: var(--ink);
  font-weight: 650;
}

/* --- 03 Rozwiązanie ------------------------------------------------------------------ */

.scope__list {
  display: grid;
  gap: 0.45rem;
  color: var(--ink-soft);
}

.scope__list li {
  padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
}

.scope__label--new {
  color: var(--accent);
}

.scope__new {
  max-width: 22ch;
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Anatomia: numery na kadrze, opisy obok. Pinezki są ciemne, bo makieta sama
   jest niebieska (trasa, ceny, przyciski) i akcent portfolio by w niej zginął. */

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

.anatomy__media {
  display: grid;
  gap: var(--space-s);
}

.anatomy__canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.anatomy__canvas img {
  width: 100%;
}

.anatomy__pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
  color: var(--surface);
  font-size: var(--t-eyebrow);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  transform: translate(-50%, -50%);
}

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

.anatomy__legend {
  border-top: 1px solid var(--line);
  counter-reset: pin;
}

.anatomy__legend li {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: var(--space-s) 0 var(--space-s) 2.6rem;
  border-bottom: 1px solid var(--line);
  counter-increment: pin;
}

/* Ten sam znak co na kadrze, żeby oko łączyło numer bez szukania. */
.anatomy__legend li::before {
  position: absolute;
  top: var(--space-s);
  left: 0;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  content: counter(pin);
  font-size: var(--t-eyebrow);
  font-weight: 760;
}

.anatomy__legend strong {
  font-weight: 650;
}

.anatomy__legend p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.filters-note {
  margin-top: var(--space-l);
}

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

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

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

.variants__media {
  display: grid;
  gap: var(--space-s);
}

.variants__media .frame {
  border-radius: var(--radius-m);
}

/* --- 04 Iteracja ----------------------------------------------------------------------- */

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

.step-media {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

.step-media .frame {
  border-radius: var(--radius-m);
  box-shadow: none;
}

/* Odrzucone i robocze makiety nie mogą być większe od finału. Kadr kroku
   kończy się na szerokości, przy której da się przeczytać błąd. */
.step-media:not(.step-media--portrait) {
  max-width: 46rem;
}

/* Źródło i reguły obok siebie: to jedna czynność, dostarczenie materiału
   razem z tym, czego ekran ma pilnować. */
.source-pair {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
  margin-top: var(--space-2xs);
}

.source-pair .step-media {
  margin-top: 0;
}

.rules {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-s) 0 0;
  border-top: 1px solid var(--line);
}

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

.rules ul {
  display: grid;
  gap: 0.6rem;
}

.rules li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--ink);
  font-weight: 600;
}

.rules li::before {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  transform: translateY(-0.1em);
}

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

.rejected > h3 {
  max-width: 30ch;
}

.rejected__rule {
  max-width: var(--measure);
}

.hammer {
  max-width: 38rem;
  margin-top: var(--space-xl);
}

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

.task {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.task__text {
  max-width: 36ch;
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.criteria dt {
  font-size: var(--t-h3);
  font-weight: 620;
  letter-spacing: -0.02em;
}

.criteria dd {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.after {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.after__title {
  font-weight: 650;
}

.after__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.after__list li {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 600;
}

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

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

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

.closing-question {
  color: var(--surface);
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

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

/* --- Detale ------------------------------------------------------------------------------- */

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

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

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

  .anatomy__media {
    max-width: 48rem;
  }
}

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

  .source-pair .step-media {
    max-width: 22rem;
  }
}

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

  .anatomy__pin {
    width: 1.4rem;
    height: 1.4rem;
    border-width: 1.5px;
    font-size: 0.62rem;
  }
}