/* Paleta materiałów — lista prowadzi kadr sceny, próbkę i podpis */
.ax-palette {
  position: relative;
  padding: var(--ax-sec-pad-m) 0;
  background: var(--ax-paper);
  color: var(--ax-navy);
}

.ax-palette__inner {
  max-width: var(--ax-maxw);
  margin: 0 auto;
  padding: 0 var(--ax-gutter);
}

.ax-palette__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  margin-bottom: clamp(24px, 3vw, 44px);
}

.ax-palette__head-col {
  flex: 1 1 420px;
  max-width: min(100%, 720px);
}

.ax-palette__eyebrow {
  display: block;
  margin-bottom: var(--ax-label-gap);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(53, 59, 102, 0.5);
}

.ax-palette__heading {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: .92;
  letter-spacing: -.04em;
  text-wrap: pretty;
}

.ax-palette__intro {
  flex: 0 1 auto;
  margin: 0;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(53, 59, 102, 0.7);
  text-wrap: pretty;
}

.ax-palette__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
}

.ax-palette__stage {
  position: relative;
  min-height: clamp(380px, 52vw, 640px);
  border-radius: var(--ax-radius);
  overflow: hidden;
  background: var(--ax-sand-deeper);
}

/* Przyciemnienie dołu kadru — pod nim leżą podpis i próbka. */
.ax-palette__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 15, 34, 0.45), transparent 45%);
  pointer-events: none;
}

/* Karty leżą w kadrze sceny jedna na drugiej - przenikają się ich warstwy. */
.ax-palette__card {
  position: absolute;
  inset: 0;
  margin: 0;
}

.ax-palette__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.6s ease;
}

.ax-palette__scene[data-on="1"] {
  opacity: 1;
  transform: none;
}

.ax-palette__scene picture {
  display: block;
  height: 100%;
}

.ax-palette__scene-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadrowanie z pola redakcyjnego — scena bywa szeroka, a materiał siedzi
     w jej rogu. */
  object-position: var(--ax-palette-focus, 50% 50%);
}

.ax-palette__swatch {
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
  z-index: 2;
  /*
   * Wzornik jest przypisem do zdjęcia, nie drugim kadrem obok niego. Przy 38%
   * szerokości sceny zajmował na desktopie ćwierć kompozycji i zaczynał z nią
   * konkurować - zasłaniał elewację akurat tam, gdzie widać opisywany materiał
   * w skali budynku. Trzydzieści dwa procent zostawia go czytelnym (makro
   * struktury nadal widać) i oddaje zdjęciu główną rolę.
   */
  width: clamp(130px, 32%, 220px);
  aspect-ratio: 1;
  border-radius: var(--ax-radius-lg);
  overflow: hidden;
  /*
   * Cień rzucony i światło na górnej krawędzi są z projektu - karta ma leżeć
   * na zdjęciu jak wzornik przyłożony do elewacji. Włoskowaty pierścień w
   * środku jest naszym dodatkiem: makra mają skrajnie różne tony, od czarnej
   * stali po jasne szkło, i bez niego krawędź karty ginęła raz na ciemnym,
   * raz na jasnym fragmencie scenki.
   */
  box-shadow:
    0 40px 70px -30px rgba(11, 15, 34, 0.7),
    inset 0 1px 0 rgba(244, 241, 235, 0.4),
    inset 0 0 0 1px rgba(244, 241, 235, 0.22);
  transform: rotate(-4deg);
  opacity: 0;
  transition: transform 900ms ease, opacity 400ms ease;
}

.ax-palette__swatch[data-on="1"] {
  opacity: 1;
}

/* Przyciemnienie dołu próbki - pod nim leży jej numer i nazwa. */
.ax-palette__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 15, 34, 0.65), transparent 55%);
}

.ax-palette__swatch picture {
  position: absolute;
  inset: 0;
  display: block;
}

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

.ax-palette__swatch-lab {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  display: grid;
  color: var(--ax-paper);
}

.ax-palette__swatch-num {
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.ax-palette__swatch-name {
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ax-palette__cap {
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
  z-index: 2;
  margin: 0;
  max-width: 44%;
  text-align: right;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ax-paper);
  opacity: 0;
  transition: opacity 500ms ease;
}

.ax-palette__cap[data-on="1"] {
  opacity: 1;
}

.ax-palette__list {
  display: grid;
  align-content: stretch;
  border-top: 1px solid rgba(53, 59, 102, 0.18);
}

.ax-palette__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: clamp(12px, 1.4vw, 22px);
  align-items: start;
  margin: 0;
  padding: clamp(14px, 1.6vw, 22px) 4px;
  border: 0;
  border-bottom: 1px solid rgba(53, 59, 102, 0.18);
  background: none;
  color: var(--ax-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ax-palette__item:focus-visible {
  outline: 2px solid var(--ax-navy);
  outline-offset: -2px;
}

/* Kreska nad aktywną pozycją domyka ją od góry, bez skoku wysokości wiersza. */
.ax-palette__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ax-navy);
}

.ax-palette__item-num {
  grid-column: 1;
  padding-top: 6px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: rgba(53, 59, 102, 0.45);
}

.ax-palette__item-name {
  grid-column: 2;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  opacity: 0.55;
  transition: opacity 400ms ease;
}

.ax-palette__item[aria-current="true"] .ax-palette__item-name {
  opacity: 1;
}

.ax-palette__item-body {
  grid-column: 2;
  max-height: 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(53, 59, 102, 0.7);
  opacity: 0;
  transition: max-height 600ms ease, opacity 500ms ease, margin 500ms ease;
}

.ax-palette__item[aria-current="true"] .ax-palette__item-body {
  max-height: 120px;
  margin-top: 8px;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .ax-palette__stage:hover .ax-palette__swatch {
    transform: rotate(-2deg) translateY(-6px);
  }

  .ax-palette__item:hover .ax-palette__item-name {
    opacity: 1;
  }
}

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

  .ax-palette__stage {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /*
   * Podpis kadru znika razem z szeroką sceną — tę samą informację niesie
   * opis przy materiale na liście.
   */
  .ax-palette__cap {
    display: none;
  }
}

@media (max-width: 640px) {
  .ax-palette__swatch {
    /*
     * Na telefonie udział zostaje wyższy niż na desktopie: scena jest tu wąska,
     * a poniżej stu pikseli struktura materiału przestaje być rozpoznawalna i
     * wzornik zamienia się w kolorową plamkę.
     */
    width: clamp(104px, 34%, 150px);
  }

  .ax-palette__item {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 44px;
  }

  .ax-palette__item[aria-current="true"] .ax-palette__item-body {
    max-height: 200px;
  }
}

/*
 * Telefon i tablet: talia kart zamiast jednego kadru i listy pod nim.
 *
 * Układ z pulpitu na wąskim ekranie rozpadał się na dwie rzeczy, które nie
 * widzą się nawzajem: zdjęcie na górze i sześć nazw poniżej. Dotknięcie
 * "Zieleni" zmieniało kadr, który w tym momencie był już poza ekranem, więc
 * sekcja wyglądała jak wygaszona lista linków - pięć nazw przygaszonych,
 * opisy schowane pod dotknięciem, a jedno zdjęcie bez związku z tym, co
 * czytamy. Tutaj każdy materiał dostaje własny kadr z próbką i opis pod nim,
 * a talia przesuwa się w poziomie tak jak galeria i dziennik budowy. Nic nie
 * jest schowane, nic nie wymaga trafienia w wiersz.
 *
 * "display: contents" wpuszcza karty i wiersze listy do jednej siatki, więc
 * kolejność (kadr, opis, kadr, opis) powstaje bez dublowania treści w HTML.
 * Bez wsparcia dla tej własności zostaje układ powyżej - kadr i lista.
 */
@supports (display: contents) {
  @media (max-width: 1100px) {
    .ax-palette__grid {
      grid-template-columns: none;
      grid-template-rows: auto auto;
      /* Sąsiednia karta wystaje za krawędź - stąd wiadomo, że pas się przesuwa. */
      grid-auto-columns: min(82vw, 460px);
      column-gap: clamp(12px, 3.4vw, 22px);
      row-gap: 14px;
      align-items: start;
      /* Pas dojeżdża do krawędzi ekranu, ale pierwsza karta stoi w marginesie. */
      margin-inline: calc(-1 * var(--ax-gutter));
      padding: 0 var(--ax-gutter) 4px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--ax-gutter);
      scrollbar-width: none;
    }

    .ax-palette__grid::-webkit-scrollbar {
      display: none;
    }

    .ax-palette__stage,
    .ax-palette__list {
      display: contents;
    }

    /* Kadr sceny i kreska listy nie mają tu własnych pudełek. */
    .ax-palette__stage::after {
      display: none;
    }

    .ax-palette__card {
      position: relative;
      grid-row: 1;
      aspect-ratio: 4 / 3;
      border-radius: var(--ax-radius);
      overflow: hidden;
      background: var(--ax-sand-deeper);
      scroll-snap-align: start;
    }

    /* Widoczne są wszystkie karty naraz, więc stan "aktywny" nie gasi sąsiadów. */
    .ax-palette__scene[data-on] {
      opacity: 1;
      transform: none;
    }

    .ax-palette__swatch[data-on] {
      left: 12px;
      bottom: 12px;
      width: clamp(92px, 30%, 132px);
      /*
       * Promień z pulpitu na próbce o połowę mniejszej zjada jej narożniki i
       * makro zamienia się w pastylkę - tu trzyma ten sam udział co tam.
       */
      border-radius: 10px;
      opacity: 1;
      transform: rotate(-4deg);
      box-shadow:
        0 22px 36px -20px rgba(11, 15, 34, 0.6),
        inset 0 1px 0 rgba(244, 241, 235, 0.4),
        inset 0 0 0 1px rgba(244, 241, 235, 0.22);
    }

    /* Nazwa materiału stoi pod zdjęciem - na próbce byłaby drugim podpisem. */
    .ax-palette__swatch-lab,
    .ax-palette__swatch::after {
      display: none;
    }

    .ax-palette__item {
      grid-row: 2;
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      padding: 0;
      border: 0;
      cursor: default;
      scroll-snap-align: start;
    }

    .ax-palette__item[aria-current="true"]::before {
      display: none;
    }

    .ax-palette__item-num {
      grid-column: 1;
      padding-top: 0;
      margin-bottom: 6px;
    }

    .ax-palette__item-name {
      grid-column: 1;
      font-size: 20px;
      opacity: 1;
    }

    /* Opis jest częścią karty, nie nagrodą za dotknięcie wiersza. */
    .ax-palette__item-body,
    .ax-palette__item[aria-current="true"] .ax-palette__item-body {
      grid-column: 1;
      max-height: none;
      margin-top: 6px;
      overflow: visible;
      font-size: 14px;
      opacity: 1;
    }

    /* Kadr i opis tego samego materiału stoją w jednej kolumnie talii. */
    [data-pal-card="0"],
    [data-pal-item="0"] {
      grid-column: 1;
    }

    [data-pal-card="1"],
    [data-pal-item="1"] {
      grid-column: 2;
    }

    [data-pal-card="2"],
    [data-pal-item="2"] {
      grid-column: 3;
    }

    [data-pal-card="3"],
    [data-pal-item="3"] {
      grid-column: 4;
    }

    [data-pal-card="4"],
    [data-pal-item="4"] {
      grid-column: 5;
    }

    [data-pal-card="5"],
    [data-pal-item="5"] {
      grid-column: 6;
    }

    [data-pal-card="6"],
    [data-pal-item="6"] {
      grid-column: 7;
    }

    [data-pal-card="7"],
    [data-pal-item="7"] {
      grid-column: 8;
    }

    [data-pal-card="8"],
    [data-pal-item="8"] {
      grid-column: 9;
    }

    [data-pal-card="9"],
    [data-pal-item="9"] {
      grid-column: 10;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-palette__scene,
  .ax-palette__swatch,
  .ax-palette__cap,
  .ax-palette__item-name,
  .ax-palette__item-body {
    transition-duration: 1ms;
  }

  .ax-palette__scene,
  .ax-palette__scene[data-on="1"] {
    transform: none;
  }
}