/* Dyrektor Marketingu Roku — historia konkursu (2.10.2026): wyniki edycji I–XIII (pasek edycji, informacja o Gali),
   oś czasu /historia, ściana „Zaufali nam” (/zaufali-nam i skrót na stronie głównej) i zdjęcie pełnej sali Gali XII edycji.
   Obie skórki i oba motywy: kolory z tokenów (style.css, klasyczna.css), tytuły i liczby Playfair w skórce Klasyczna
   (--font-serif), w Gradiencie — Space Grotesk. Ruch tylko opacity/transform, wyłączony przy prefers-reduced-motion. */
:root { --hist-waga: 700; }
:root[data-skorka="klasyczna"] { --hist-waga: 400; }

/* ---------- Wyniki: pasek trzynastu edycji ---------- */
.edycje__pasek { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); margin-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--linia-2); }
.edycje__etykieta { flex: none; padding-bottom: 17px; font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--akcent-tekst); }
.zakladki--edycje { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; margin-bottom: 0; border-bottom: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.zakladki--edycje::-webkit-scrollbar { display: none; }
.zakladki--edycje .zakladka { flex: none; padding: 14px clamp(10px, 1.1vw, 18px); scroll-snap-align: center; outline-offset: -3px; }
.zakladki--edycje .zakladka::after { bottom: 0; }

/* Gala edycji, liczba nagród i laureatów, źródło wyników I–IX */
.edycja-info { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 40px; margin-bottom: clamp(24px, 3vw, 40px); padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--linia-2); }
.edycja-info__fakty { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 64px); }
.edycja-info__fakty div { display: flex; flex-direction: column; gap: 6px; }
.edycja-info__fakty dt { font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--akcent-tekst); }
.edycja-info__fakty dd { font-size: 15px; line-height: 1.5; color: var(--tekst); }
.edycja-info__komunikat { flex-basis: 100%; max-width: 80ch; padding: 14px 18px; border-left: 2px solid var(--akcent); background: var(--pole); font-size: 15px; line-height: 1.6; color: var(--tekst-2); }
.edycja-info__zrodlo { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--tekst-2); }
.edycja-info__zrodlo a { border-bottom: 1px solid var(--linia); transition: color 0.2s ease, border-color 0.2s ease; }
.edycja-info__zrodlo a:hover { color: var(--akcent-tekst); border-bottom-color: currentColor; }
/* Stanowisko i lider zespołu z dnia nagrody (edycje I–IX) — zwykłe litery, bez wersalików firmy. */
.laury__kto .laury__stanowisko { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--tekst-2); }
.gp__stanowisko { font-size: 14px; line-height: 1.45; color: var(--tekst-2); }
/* Wiele Grand Prix w jednej edycji (V: osiem wg budżetu) — rzędy kart wypełnione do końca, bez pustych pól tła siatki. */
.gp { display: flex; flex-wrap: wrap; }
.gp__karta { flex: 1 1 260px; }

/* ---------- Historia: liczby i oś czasu ---------- */
.historia__liczby { margin: 0 0 clamp(56px, 7vw, 104px); }
.historia__liczby a { display: flex; flex-direction: column; gap: 8px; color: inherit; }
.historia__liczby a b { transition: color 0.2s ease; }
.historia__liczby a:hover b { color: var(--akcent-tekst); }
.historia__glowa { margin-bottom: clamp(24px, 3vw, 40px); }
.os-czasu { position: relative; list-style: none; border-top: 1px solid var(--linia); }
/* Oś: złota linia przez kolumnę numerów i punkt przy każdej edycji. */
.os-czasu::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: var(--linia); }
.os-czasu__el { position: relative; display: grid; grid-template-columns: minmax(104px, 0.55fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(176px, 0.7fr); gap: 16px clamp(20px, 3vw, 48px); padding: clamp(22px, 2.6vw, 34px) 0 clamp(22px, 2.6vw, 34px) 36px; border-bottom: 1px solid var(--linia-2); scroll-margin-top: calc(var(--naglowek-wys) + 24px); }
.os-czasu__el::before { content: ""; position: absolute; left: 3px; top: calc(clamp(22px, 2.6vw, 34px) + 0.9em); width: 9px; height: 9px; border-radius: 50%; background: var(--tlo); box-shadow: 0 0 0 1px var(--akcent); }
.os-czasu__znak { display: flex; flex-direction: column; gap: 6px; }
.os-czasu__nr { font: var(--hist-waga) clamp(2.2rem, 1.5rem + 2.2vw, 3.8rem)/1 var(--font-serif, var(--font-display)); letter-spacing: -0.01em; color: var(--akcent-tekst); }
.os-czasu__rok { font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.14em; color: var(--tekst-2); }
.os-czasu__etykieta { margin-bottom: 8px; font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--akcent-tekst); }
.os-czasu__gala p:not(.os-czasu__etykieta) { font-size: 14px; line-height: 1.55; color: var(--tekst-2); }
.os-czasu__gala .os-czasu__data { font: var(--hist-waga) 1.2rem/1.3 var(--font-serif, var(--font-display)); color: var(--tekst); }
.os-czasu__gp { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px 28px; list-style: none; }
.os-czasu__gp li { display: flex; flex-direction: column; gap: 2px; }
.os-czasu__gp b { font: 600 15.5px/1.35 var(--font-ui); }
.os-czasu__gp span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
.os-czasu__gp i { font-style: normal; font-size: 13px; line-height: 1.4; color: var(--tekst-2); }
.os-czasu__brak, .os-czasu__teraz { max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: var(--tekst-2); }
.os-czasu__wyniki { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.os-czasu__liczba { font-size: 13px; color: var(--tekst-2); }
.os-czasu__liczba b { margin-right: 6px; font: var(--hist-waga) clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1 var(--font-serif, var(--font-display)); color: var(--tekst); }
.os-czasu__osoby { font-size: 13px; color: var(--tekst-2); }
.os-czasu__wyniki .link-strzalka { margin-top: 8px; font-size: 11.5px; }
.os-czasu__wyniki .btn { margin-bottom: 6px; }
.os-czasu__el--teraz { background: color-mix(in srgb, var(--akcent) 9%, transparent); }
.os-czasu__el--teraz::before { background: var(--akcent); }
.os-czasu__el--teraz .os-czasu__nr { color: var(--tekst); }
.historia__zrodla { max-width: 90ch; margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--tekst-2); }

/* ---------- Zaufali nam: spokojna siatka z cienkimi liniami ---------- */
.zaufali__glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: 18px; }
.zaufali__liczby { font: var(--hist-waga) clamp(1.4rem, 1.1rem + 1vw, 2.1rem)/1.2 var(--font-serif, var(--font-display)); }
.zaufali__wskazowka { font-size: 14px; color: var(--tekst-2); }
.zaufali__uwaga { max-width: 90ch; margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--tekst-2); }
.zaufali__uwaga a { color: var(--tekst-2); border-bottom: 1px solid var(--linia); }
.zaufali__uwaga a:hover { color: var(--akcent-tekst); }
/* Skórka Klasyczna ustawia .sekcja z wyższą swoistością (:root[data-skorka] .sekcja) — tu ta sama i więcej. */
:root[data-skorka] .sekcja.zaufali--start { padding-bottom: clamp(36px, 4vw, 64px); }
.zaufali--start .sekcja__lead { margin-top: -12px; }

.marki-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.marki-filtr button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--linia); background: transparent; font: 500 12.5px/1.2 var(--font-ui); color: var(--tekst-2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.marki-filtr button span { font-size: 11px; font-weight: 600; color: var(--tekst-2); }
.marki-filtr button:hover { border-color: var(--akcent); color: var(--tekst); }
.marki-filtr button[aria-pressed="true"] { background: var(--akcent-tlo); border-color: var(--akcent-tlo); color: var(--na-akcencie); }
.marki-filtr button[aria-pressed="true"] span { color: inherit; opacity: 0.72; }

/* Linie tylko między kafelkami: prawa i dolna krawędź każdego pola, ostatnia kolumna i ostatni rząd przycięte
   o 1 px przez ramkę (overflow: hidden), u góry i u dołu ramka ma własną linię. */
.marki-ramka { overflow: hidden; border-block: 1px solid var(--linia); }
.marki { --kolumny: 6; display: grid; grid-template-columns: repeat(var(--kolumny), minmax(0, 1fr)); grid-auto-flow: row dense; margin: 0 -1px -1px 0; list-style: none; }
.marki--start { --kolumny: 8; }
.marka, .marka-panel { border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.marka[hidden], .marka-panel[hidden] { display: none !important; }
.marka__kafel { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 12 / 7; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color 0.35s ease; scroll-margin-top: calc(var(--naglowek-wys) + 24px); outline-offset: -4px; }
/* Obrys fokusu do środka — ramka ściany przycina wszystko, co wystaje (globalne a/button:focus-visible ma offset 3 px). */
.marka__kafel:focus-visible { outline: 2px solid var(--akcent-tekst); outline-offset: -4px; }
.marka__logo { position: relative; display: grid; place-items: center; width: 100%; transition: transform 0.5s var(--ease-out-expo); }
/* Szerokość z „optyki” manifestu (px dla kafla 240 × 140) jako ułamek szerokości kafla — znaki o podobnej wadze. */
.marka__logo img { grid-area: 1 / 1; width: calc(var(--w) * 100% / 240); max-width: 82%; height: auto; transition: opacity 0.35s ease; }
.marka__kolor { opacity: 0; }
.marka__ile { position: absolute; left: 0; right: 0; bottom: clamp(7px, 0.9vw, 14px); font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akcent-tekst); opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo); }
.marka__kafel:hover, .marka__kafel:focus-visible, .marka__kafel[aria-expanded="true"] { background: var(--powierzchnia); }
.marka__kafel:hover .marka__czarne, .marka__kafel:focus-visible .marka__czarne, .marka__kafel[aria-expanded="true"] .marka__czarne { opacity: 0; }
.marka__kafel:hover .marka__kolor, .marka__kafel:focus-visible .marka__kolor, .marka__kafel[aria-expanded="true"] .marka__kolor { opacity: 1; }
.marka__kafel:hover .marka__ile, .marka__kafel:focus-visible .marka__ile, .marka__kafel[aria-expanded="true"] .marka__ile { opacity: 1; transform: none; }
.marka__kafel:hover .marka__logo, .marka__kafel:focus-visible .marka__logo, .marka__kafel[aria-expanded="true"] .marka__logo { transform: translateY(-7px); }
/* Rozwinięta marka: ząbek łączy kafel z listą laureatów w rzędzie niżej. */
.marka__kafel[aria-expanded="true"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; z-index: 1; width: 13px; height: 13px; background: var(--powierzchnia); border-top: 1px solid var(--linia); border-left: 1px solid var(--linia); transform: translate(-50%, 50%) rotate(45deg); }

.marka-panel { grid-column: 1 / -1; background: var(--powierzchnia); }
.marka-panel__wnetrze { padding: clamp(22px, 2.6vw, 40px) clamp(18px, 3vw, 48px); animation: marka-wysun 0.5s var(--ease-out-expo); }
@keyframes marka-wysun { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.marka-panel__glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--linia); }
/* Kolorowy znak zawsze na jasnym polu — także nocą (ciemne logotypy, np. BMW, Mercedes-Benz). */
.marka-panel__logo { box-sizing: content-box; width: calc(var(--w) * 0.8px); height: auto; padding: 12px 18px; background: #fbf9f5; border: 1px solid var(--linia-2); }
.marka-panel__opis { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.marka-panel__opis h3 { font: var(--hist-waga) clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem)/1.15 var(--font-serif, var(--font-display)); }
.marka-panel__opis p { font-size: 13px; line-height: 1.5; color: var(--tekst-2); }
.marka-panel__zwin { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-left: auto; padding: 0 14px; border: 1px solid var(--linia); background: transparent; font: 600 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.marka-panel__zwin span { font-size: 15px; letter-spacing: 0; }
.marka-panel__zwin:hover { border-color: var(--akcent); color: var(--tekst); }
.marka-panel__lista { list-style: none; }
.marka-panel__lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: baseline; gap: 4px 28px; padding: 13px 0; border-bottom: 1px solid var(--linia-2); }
.marka-panel__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.marka-panel__kto b { display: block; font: 600 15px/1.35 var(--font-ui); }
.marka-panel__kto span { display: block; margin-top: 2px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
.marka-panel__kat { font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.marka-panel__edycja { font: 600 11.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--akcent-tekst); transition: color 0.2s ease; }
.marka-panel__edycja:hover { color: var(--tekst); }

/* Noc (obie skórki): czarne znaki białe, kafel pod kursorem jasny — kolorowe logotypy zostają czytelne. */
:root[data-motyw="noc"] .marka__czarne { filter: invert(1); }
:root[data-motyw="noc"] .marka__kafel:hover, :root[data-motyw="noc"] .marka__kafel:focus-visible, :root[data-motyw="noc"] .marka__kafel[aria-expanded="true"] { background: #f3eee6; }
:root[data-motyw="noc"] .marka__kafel:hover .marka__ile, :root[data-motyw="noc"] .marka__kafel:focus-visible .marka__ile, :root[data-motyw="noc"] .marka__kafel[aria-expanded="true"] .marka__ile { color: #86612b; }
:root[data-motyw="noc"] .marka__kafel[aria-expanded="true"]::after { background: var(--powierzchnia); }
:root[data-motyw="noc"] .marka-panel__logo { border-color: transparent; }

/* ---------- Pełna sala Gali XII edycji na całą szerokość ---------- */
.sala-gali { position: relative; margin: 0; }
.sala-gali__kadr { overflow: hidden; background: #121110; }
.sala-gali__kadr img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 44%; transform: scale(1.06); transition: transform 1.8s var(--ease-out-expo); }
.sala-gali__kadr.widoczne img { transform: none; }
.sala-gali__kadr.pojawia { transform: none; }
.sala-gali__podpis { display: flex; align-items: baseline; gap: 10px; padding-block: 14px clamp(28px, 3vw, 44px); font: 500 12px/1.45 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-2); }
.sala-gali--w-sekcji { margin-bottom: clamp(16px, 2vw, 28px); }
.sala-gali--w-sekcji .sala-gali__podpis { padding-bottom: clamp(24px, 3vw, 40px); }
.sala-gali--przed-gala .sala-gali__podpis, .sala-gali--po-filmach .sala-gali__podpis { padding-block: 16px 26px; }

/* ---------- Mniejsze ekrany ---------- */
@media (max-width: 1280px) {
  .marki { --kolumny: 5; }
  .marki--start { --kolumny: 8; }
}
@media (max-width: 1199px) {
  .marki--start { --kolumny: 4; }
}
@media (max-width: 1100px) {
  .zakladki--edycje { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .os-czasu__el { grid-template-columns: minmax(88px, 0.5fr) minmax(0, 1fr) minmax(0, 1.6fr); }
  .os-czasu__wyniki { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  .os-czasu__wyniki .link-strzalka { margin-top: 0; }
}
@media (max-width: 900px) {
  .marki { --kolumny: 4; }
  .os-czasu__el { grid-template-columns: 76px minmax(0, 1fr); padding-left: 30px; }
  .os-czasu__gala, .os-czasu__nagrody, .os-czasu__wyniki { grid-column: 2; }
  .marka-panel__lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .marka-panel__kat { grid-column: 1; grid-row: 2; }
  .marka-panel__edycja { grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 700px) {
  .marki, .marki--start { --kolumny: 3; }
  .marki--start .marka:nth-child(n + 13) { display: none; }
  .marka__ile { font-size: 9.5px; letter-spacing: 0.1em; }
  .sala-gali__kadr img { aspect-ratio: 3 / 2; }
  .edycje__etykieta { display: none; }
  .os-czasu__el { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .os-czasu__gala, .os-czasu__nagrody, .os-czasu__wyniki { grid-column: 1; }
  .os-czasu__znak { flex-direction: row; align-items: baseline; gap: 14px; }
  .marka-panel__glowa { gap: 12px 16px; }
  .marka-panel__zwin { margin-left: 0; }
}
@media (max-width: 340px) {
  .marki--strona { --kolumny: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .marka__kafel, .marka__logo, .marka__logo img, .marka__ile, .marki-filtr button { transition: none; }
  .marka__kafel:hover .marka__logo, .marka__kafel:focus-visible .marka__logo, .marka__kafel[aria-expanded="true"] .marka__logo { transform: none; }
  .marka-panel__wnetrze { animation: none; }
  .sala-gali__kadr img { transform: none; transition: none; }
}