/* W1 „Herold" — pasek ogłoszenia. Arkusz `template-parts/ogloszenie-pasek.php`.
 *
 * Transkrypcja `AnnouncementBarVariant1Herold.tsx`. Breakpointy Tailwinda
 * przeliczone na piksele: `md:` = 768px, `lg:` = 1024px; `px-6` = 24px,
 * `md:px-12` = 48px, `lg:px-20` = 80px, `pr-12` = 48px, `pl-11`/`pr-11` = 44px.
 *
 * ⚠︎ NIGDZIE NIE MA WYSOKOŚCI PASKA I NIE MA JEJ BYĆ. Wysokości są trzy —
 * 45px desktop, 74px na 390px, 95px przy przepełnieniu CTA — a trzecia zależy
 * od TREŚCI, nie od breakpointu. Nota canvasu „w motywie wystarczy jedna zmienna
 * CSS na wysokość paska" jest w tym miejscu nieprawdziwa. Wysokość wychodzi
 * z `min-height: 44px` plus to, co zawinie treść; mierzy ją `navbar.js`.
 *
 * ══════════════════════════════════════════════════════════════════════════
 * ⚠︎ PRÓG UKŁADU JEDNOWIERSZOWEGO TO 1024px, NIE 768px — I TO JEST ŚWIADOME
 * ODEJŚCIE OD REACTA (10.08.2026, pomiar Playwrightem, zrzuty właściciela).
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Źródło ma `md:flex-nowrap md:py-0`, czyli przełącza na jeden wiersz przy
 * 768px. Komponent oglądano wyłącznie przy 390px i 1440px, więc nikt nie
 * zobaczył, że pasmo pomiędzy nie działa. Rachunek: jeden wiersz potrzebuje
 * 759px na samą zawartość (etykieta 94 + treść 540 + CTA 88 + gapy 37), do
 * tego 88px rezerwy bocznej i 96px paddingu kontenera — czyli ~960px dla
 * treści 78-znakowej i ~1200px dla dozwolonego maksimum 90 znaków.
 *
 * Zmierzone PRZED naprawą, treść realna (78 zn.):
 *     767px → 56,5px, jedna linia, 8px luzu
 *     768px → 45,0px, DWIE linie, 3,1px luzu   ← pasek KURCZY SIĘ o 11px
 *     900px → 45,0px, dwie linie, 3,1px luzu      i dostaje drugą linię
 *     960px → 45,0px, jedna linia, 12,5px luzu
 * Uklad mobilny był w całym paśmie 768–959 LEPSZY od tego, który go zastępował.
 *
 * Po naprawie 768–1023 zostaje przy układzie piętrowym (56,5px, jedna linia,
 * 8px luzu dla każdej z trzech testowanych długości), a `padding-block: 8px`
 * w układzie jednowierszowym daje 93-znakowej treści 54,8px zamiast 45px
 * z trzema pikselami oddechu. Desktop przy jednej linii zostaje na 45px —
 * `min-height: 44px` pochłania te 16px paddingu.
 *
 * ⚠︎ Progi w `__srodek` i `__zamknij` ZOSTAJĄ na 768/1024: to padding kontenera
 * (`px-6 md:px-12 lg:px-20`), wspólny z navbarem i hero, a nie próg tego układu.
 */

.szewko-ogloszenie-pasek {
  position: relative;
  width: 100%;
  background: var(--color-dark-mahogany);
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);
}

/* Tło pilnego na Terracocie. Sama zmiana tła NIE niesie znaczenia — wagę widać
   po ikonie ciężarówki i po słowie „LOGISTYKA". Kolor jej tylko towarzyszy. */
.szewko-ogloszenie-pasek--pilne {
  background: var(--color-terracotta);
  border-bottom-color: color-mix(in srgb, var(--color-parchment) 30%, transparent);
}

/* Cały pasek jest jedną kotwicą. Bez adresu ten sam element jest `<div>` —
   selektor klasowy obsługuje oba, więc znacznik może się zmienić bez arkusza. */
.szewko-ogloszenie-pasek__kotwica {
  display: block;
  color: inherit;
  text-decoration: none;

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: -2px;
  }
}

.szewko-ogloszenie-pasek__srodek {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 24px;

  @media (min-width: 768px) {
    padding-inline: 48px;
  }

  @media (min-width: 1024px) {
    padding-inline: 80px;
  }
}

/* OŚ GRUPY = OŚ KONTENERA, nie oś pola po odjęciu krzyżyka.
   Na desktopie treść jest wyśrodkowana, a strefa zamknięcia zabiera 44px
   z prawej — bez tej samej rezerwy po lewej krótki komunikat („Nowa mapa
   w sprzedaży.") siedziałby ~22px w lewo od środka i wyglądałby na źle
   wyrównany. Stąd symetryczne 44px po obu stronach powyżej 1024px.
   W układzie piętrowym problem nie istnieje: układ jest do lewej krawędzi,
   więc zostaje sam prawy odstęp 48px pod krzyżyk.

   ⚠︎ `padding-block: 8px` OBOWIĄZUJE TAKŻE W UKŁADZIE JEDNOWIERSZOWYM.
   Źródło ma tam `md:py-0` i przy jednej linii to bez znaczenia (`min-height`
   pochłania padding, pasek zostaje na 45px) — ale najdłuższa dozwolona treść
   zawija się na dwie linie aż do ~1200px i bez tego paddingu dostaje 3,1px
   oddechu w pionie. To jest ta ciasnota widoczna na zrzucie z 800px. */
.szewko-ogloszenie-pasek__grupa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  padding-right: 48px;
  column-gap: 12px;
  row-gap: 4px;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
    justify-content: center;
    padding-inline: 44px;
  }
}

/* Kolejnością steruje `order`, nie duplikat elementu: w układzie piętrowym
   etykieta → CTA → treść, powyżej 1024px etykieta → kreska → treść → CTA.
   Renderowanie CTA dwa razy dałoby ten sam obraz i zostawiło dwa miejsca
   do rozjechania. */
.szewko-ogloszenie-pasek__typ {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  order: 1;
  color: var(--color-sand-gold);
}

/* Sand Gold na Terracocie ma 3,7:1, czyli PONIŻEJ progu 4,5:1 dla małego
   tekstu — dlatego etykieta schodzi wtedy na Parchment (6,9:1). */
.szewko-ogloszenie-pasek--pilne .szewko-ogloszenie-pasek__typ {
  color: var(--color-parchment);
}

/* 12px, nie 11 — szczebel `mikro` (`docs/TYPOGRAFIA.md` §4, pakiet 1). Nazwa
   typu mówi, czego ogłoszenie dotyczy („LOGISTYKA”), więc jest daną. */
.szewko-ogloszenie-pasek__typ-nazwa {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.szewko-ogloszenie-pasek__kreska {
  display: none;
  flex-shrink: 0;
  order: 2;
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--color-sand-gold) 30%, transparent);

  @media (min-width: 1024px) {
    display: block;
  }
}

.szewko-ogloszenie-pasek--pilne .szewko-ogloszenie-pasek__kreska {
  background: color-mix(in srgb, var(--color-parchment) 30%, transparent);
}

/* `flex-basis: 100%` spycha treść do własnego wiersza w układzie piętrowym —
   to jest cała różnica między układem trzywierszowym (74px) a czterowierszowym
   (95px).

   ⚠︎ TREŚĆ ODZYSKUJE REZERWĘ KRZYŻYKA — ALE NIE W PIERWSZEJ SWOJEJ LINII.
   Grupa rezerwuje 48px z prawej, żeby CTA nie wjechało pod X. X zajmuje jednak
   tylko JEDEN 44-pikselowy wycinek przy górze paska, a rezerwa obcinała
   wszystkie linie treści naraz: zostawała pusta kolumna po prawej (widoczna na
   zrzucie z 360px) i o jedną linię tekstu więcej, niż potrzeba.

   Mechanizm jest dwuczęściowy i obie części są konieczne:

   1. `flex-basis: calc(100% + 48px)` + `margin-right: -48px` — sama baza 100%
      liczy się od pola JUŻ pomniejszonego o padding grupy, więc ujemny margines
      bez powiększonej bazy skraca tylko pudełko, nie szerokość wiersza.
      (Sprawdzone pomiarem: wersja z samym marginesem nie zmieniła niczego.)
   2. `::before` pływający w prawo o wysokości jednej linii — cofa rezerwę
      wyłącznie w PIERWSZEJ linii treści, która jako jedyna leży na wysokości
      44-pikselowego celu dotykowego X. Bez tego prawy koniec pierwszej linii
      wjeżdżałby pod przycisk zamknięcia i tam kliknięcie zamykałoby pasek
      zamiast otwierać link.

   Zysk jest ten sam co przy pełnej szerokości wszystkich linii, bo 264 + 312
   mieści 540px treści tak samo jak 312 + 312. Zmierzone przy 360px:
   91,6px / trzy linie → 74,1px / dwie linie. */
.szewko-ogloszenie-pasek__tresc {
  order: 3;
  flex-basis: calc(100% + 48px);
  margin: 0 -48px 0 0;
  color: var(--color-parchment);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;

  &::before {
    content: '';
    float: right;
    width: 48px;
    height: 1.35em;
  }

  @media (min-width: 1024px) {
    flex-basis: auto;
    margin-right: 0;
    font-size: 14px;

    &::before {
      content: none;
    }
  }
}

/* Etykieta linku, NIE przycisk — wypełniony przycisk zrobiłby z ogłoszenia
   drugą akcję pierwszorzędną strony. `margin-left: auto` odpycha CTA do prawej
   w pierwszym wierszu układu mobilnego. */
.szewko-ogloszenie-pasek__cta {
  flex-shrink: 0;
  order: 2;
  margin-left: auto;
  color: var(--color-brass-lantern);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration-fast) var(--ease-desert);

  @media (min-width: 1024px) {
    order: 4;
    margin-left: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.szewko-ogloszenie-pasek__kotwica:hover .szewko-ogloszenie-pasek__cta {
  text-decoration-color: currentcolor;
}

/* PRZY WADZE „PILNE" PODKREŚLENIE JEST STAŁE, nie na `hover`.
   Na Terracocie Brass Lantern nie przechodzi progu kontrastu, więc CTA dostaje
   ten sam kolor co treść — a wtedy sama barwa przestaje odróżniać wyjście od
   zdania. Hover nie istnieje dla dotyku ani dla czytania wzrokiem bez
   najeżdżania, a to jedyny typ, przy którym użytkownik naprawdę musi kliknąć
   dalej. (Usterka wskazana przez render W1 z canvasu, 30.07.2026.) */
.szewko-ogloszenie-pasek--pilne .szewko-ogloszenie-pasek__cta {
  color: var(--color-parchment);
  text-decoration-color: currentcolor;
}

/* 44 × 44px, BEZ WYJĄTKÓW — reguła okupiona wpadką 36px w banerze zgód
   (przegląd 22.07, błąd 27). X stoi POZA kotwicą, więc zamknięcie nie wyzwala
   przejścia.

   ⚠︎ X NALEŻY DO PIERWSZEGO WIERSZA, NIE DO ŚRODKA PASKA.
   Źródło ma `top-1/2 -translate-y-1/2` bezwarunkowo. Przy jednej linii to jest
   środek wiersza i wszystko się zgadza; przy trzech (360px) X lądował w połowie
   bloku tekstu, wizualnie oderwany od „CO TO ZNACZY" — a oba pełnią tę samą
   rolę wyjścia z paska i dzielą pierwszy wiersz. `top: 0` daje środek ikony na
   22px od góry przy środku wiersza na 19px; różnica jest niewidoczna, a cały
   44-pikselowy cel dotykowy zostaje wewnątrz paska (najniższy przypadek to
   56,5px). W układzie jednowierszowym wraca wyśrodkowanie. */
.szewko-ogloszenie-pasek__zamknij {
  position: absolute;
  top: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-parchment);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-desert);

  &:hover {
    opacity: 1;
  }

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
  }

  @media (min-width: 768px) {
    right: 24px;
  }

  @media (min-width: 1024px) {
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}