/* Sekcje strony głównej dołożone po makiecie 1a: Rankingi i Nadchodzące premiery.
   Arkusz ładuje się PO redesign.css, korzysta z jego zmiennych --gb-* i z tych
   samych komponentów (nagłówek sekcji, ramka "dane demo", chipy).
   Kontrasty zmierzone na realnym renderze - patrz raport w opisie zadania. */

/* ==================================================== RANKINGI (dane realne) */

/* Karta rankingu = panel z tytułem + podium trzech pierwszych pozycji z ich
   okładkami, ocenami i cenami. Sama lista tytułów rankingów nie mówiła nic o
   zawartości i przy jednym rankingu wyglądała jak pusty wiersz. */
.gb-rk-list { display: flex; flex-direction: column; gap: 14px; }

.gb-rk-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  background: var(--gb-card);
  border: 1px solid var(--gb-line);
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  /* Zdjęcie kończy się na krawędzi wnętrza karty. Bez tego malowało się także
     pod 1-pikselową ramką, a ta jest półprzezroczysta (biel 7%), więc jasne
     fragmenty okładki prześwitywały przez obramowanie jak poświata. */
  background-clip: padding-box;
}
/* Okładka pod całą kartą, przykryta jednolitym przyciemnieniem. Wcześniej
   zdjęcie siedziało tylko w lewej kolumnie i urywało się pionową krawędzią
   w środku karty - wyglądało jak obcy element wklejony pod panel. */
.gb-rk-card.has-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 30, .96);
  z-index: 0;
}
/* Na karcie ze zdjęciem linie działowe muszą być kryjące. Półprzezroczysta biel
   przepuszczała okładkę i każda kreska świeciła jaśniej niż na kartach bez
   grafiki. Wartość to ta sama biel 7% policzona na tle karty, tyle że na sztywno. */
.gb-rk-card.has-art {
  --gb-line: #2a2d35;
  --gb-line2: #383b44;
}
.gb-rk-card > * { position: relative; z-index: 1; }
/* Przy kilku rankingach podium ląduje pod nagłówkiem, żeby karty zmieściły się
   obok siebie w dwóch kolumnach. */
.gb-rk-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb-rk-multi .gb-rk-card { grid-template-columns: minmax(0, 1fr); }

/* Lewa kolumna: kolor sekcji jako subtelna poświata pod tekstem, na okładce
   rankingu, gdy taka jest. Bez glow i bez cienia - tylko przyciemnienie. */
.gb-rk-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 20px;
  border-right: 1px solid var(--gb-line);
}
/* Przyciemnienie okładki przeniesione na całą kartę (.gb-rk-card.has-art::before).
   Bez gradientu: użytkownik go odrzucił. */
.gb-rk-lead > * { position: relative; }

/* Lżejsze wagi i mniejsze światło: przy 800 i 1,6 px odstępu napisy na zdjęciu
   okładki robiły się nieczytelne. */
.gb-rk-lead-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  color: var(--gb-sec, var(--gb-accent));
}
.gb-rk-title { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: .2px; }
.gb-rk-title a { color: var(--gb-text); text-decoration: none; }
.gb-rk-title a:hover { color: var(--gb-sec, var(--gb-accent)); }
.gb-rk-meta { font-size: 13px; line-height: 1.45; color: var(--gb-text2); }
.gb-rk-cta { margin-top: auto; }

/* Prawa kolumna: trzy pozycje jeden pod drugim. */
.gb-rk-podium { display: flex; flex-direction: column; }
.gb-rk-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--gb-line);
  transition: background .18s;
}
.gb-rk-item:last-child { border-bottom: none; }
/* Kanon hoverow (opis w :root w redesign.css): podswietlenie + zoom samego zdjecia. */
.gb-rk-item:hover { background: var(--gb-hover); }

/* Numer miejsca to element czysto liczbowy w duzym stopniu - 900 jest tu
   swiadome i ma wlasny plik (TitilliumWeb-900), wiec nic sie nie syntetyzuje. */
.gb-rk-place {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  color: var(--gb-line2);
  font-variant-numeric: tabular-nums;
}
/* Tylko pierwsze miejsce dostaje kolor sekcji - inaczej kolumna cyfr krzyczy. */
.gb-rk-p1 .gb-rk-place { color: var(--gb-sec, var(--gb-accent)); }
.gb-rk-p2 .gb-rk-place { color: var(--gb-text2); }

.gb-rk-shot {
  height: 56px;
  border-radius: 8px;
  background: var(--gb-panel) center/cover no-repeat;
  border: 1px solid var(--gb-line);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gb-rk-item:hover .gb-rk-shot { transform: scale(1.06); }

.gb-rk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gb-rk-badge {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 4px;
  /* Cieńsza waga i mniejsze światło: przy 800 i 0,8 px litery zlewały się
     w jedną plamę na żółtym tle. */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  /* Ciemny tekst na żółtym: biały dawał 3,2:1 i nie przechodził AA. */
  background: var(--gb-sec, var(--gb-accent));
  color: var(--gb-panel);
}
.gb-rk-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-rk-item:hover .gb-rk-name { color: var(--gb-sec, var(--gb-accent)); }
.gb-rk-price { font-size: 12.5px; font-weight: 600; color: var(--gb-muted); }
.gb-rk-score { display: flex; align-items: center; }

/* ==================================================== PREMIERY (dane demo) */

/* Pas idzie przez całą szerokość siatki strony głównej, tak jak sekcja serwerów. */
.gb-prem-band {
  grid-column: 1 / -1;
}

.gb-prem {
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
}

/* Wielki napis z obrysem w tle - z mokapu gb3. Czysto dekoracyjny (aria-hidden),
   obrys w kolorze o dwa tony jaśniejszym od tła, żeby nie zbijał kontrastu
   napisów, które przez niego przechodzą (najgorszy przypadek zmierzony: 5,3:1). */

/* ----------------------------------------------------- pasek najbliższej premiery */

.gb-prem-next {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--gb-card);
  border: 1px solid var(--gb-line);
  border-left: 3px solid var(--gb-sec, var(--gb-accent));
  border-radius: 10px;
}

.gb-prem-next-cap {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--gb-sec, var(--gb-accent));
}

.gb-prem-next-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gb-text);
}

.gb-prem-next-meta {
  font-size: 13px;
  color: var(--gb-muted);
}

.gb-prem-next-spacer {
  flex: 1;
}

.gb-prem-next-date {
  font-size: 13.5px;
  color: var(--gb-text2);
  white-space: nowrap;
}

.gb-prem-chip {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--gb-text2);
  white-space: nowrap;
}

.gb-prem-chip.is-next {
  background: var(--gb-accent);
  color: var(--gb-panel);
}

/* ----------------------------------------------------- oś czasu */

.gb-prem-rail {
  position: relative;
  z-index: 1;
  /* Przewijanie strzalkami, nie paskiem: pasek przewijania psul kompozycje sekcji. */
  overflow: hidden;
  scroll-behavior: smooth;
}

.gb-prem-rail:focus-visible {
  outline: 2px solid var(--gb-sec, var(--gb-accent));
  outline-offset: 4px;
  border-radius: 10px;
}

.gb-prem-track {
  position: relative;
  display: flex;
  gap: 20px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Oś: kreska przechodząca dokładnie przez środki kropek. 39,5 px to wysokość
   bloku z datą (28 px) plus górny odstęp kropki (6 px) plus jej połowa (5,5 px),
   minus połowa grubości kreski. */
.gb-prem-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 38.5px;
  height: 2px;
  background: rgba(255, 255, 255, .08);
}

.gb-prem-item {
  flex: none;
  width: 212px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gb-prem-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  height: 28px;
  color: var(--gb-text2);
}

.gb-prem-date b {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gb-prem-date > span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

/* Termin orientacyjny nie udaje konkretnego dnia: zamiast liczby stoi zakres.
   Selektor musi być mocniejszy od `.gb-prem-date > span` powyżej. */
.gb-prem-date > .gb-prem-approx {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--gb-muted);
}

/* Premiera w ciągu 30 dni dostaje kolor akcji - jedyne wyróżnienie na osi. */
.gb-prem-item.is-soon .gb-prem-date {
  color: var(--gb-accent);
}

.gb-prem-dot {
  position: relative;
  z-index: 2;
  width: 11px;
  height: 11px;
  margin: 6px 0 14px;
  border: 2px solid var(--gb-bg);
  border-radius: 50%;
  background: #39414f;
}

.gb-prem-item.is-soon .gb-prem-dot {
  background: var(--gb-accent);
}

/* Proporcja okładki gry (pudełko), nie kadru z artykułu. Kalendarz premier ma
   pokazywać to samo, co biblioteka gier, więc i kształt musi być ten sam. */
.gb-prem-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--gb-line);
  border-radius: 10px;
  background: var(--gb-card2);
  text-decoration: none;
}
a.gb-prem-cover:hover { border-color: var(--gb-sec, var(--gb-accent)); }
.gb-prem-title a { color: inherit; text-decoration: none; }
.gb-prem-title a:hover { color: var(--gb-sec, var(--gb-accent)); }

.gb-prem-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gb-prem-item:hover .gb-prem-cover img {
  transform: scale(1.06);
}

/* Plakietka statusu leży na zdjęciu, więc tło musi być prawie kryjące: przy
   rgba(0,0,0,.55) z kart treści czerwony na jasnym kadrze schodził do 3,4:1.
   Przy .93 najgorszy przypadek (biały kadr pod spodem) to 4,98:1. */
.gb-prem-status {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(14, 16, 21, .93);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .7px;
  color: var(--gb-text2);
}

/* Zielony = data potwierdzona, czerwony = przesunieta. To sa dwie informacje,
   ktorych nie ma nigdzie indziej, wiec kolor zostaje. "Wkrotce" nie niesie
   zadnej decyzji ani ostrzezenia, wiec traci niebieski i idzie w neutral. */
.gb-prem-status.potwierdzona { color: var(--gb-green); }
.gb-prem-status.przesunieta  { color: var(--gb-red); }
.gb-prem-status.wkrotce      { color: var(--gb-text2); }

.gb-prem-title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gb-text);
  transition: color .18s;
}
/* Tytul zmienia kolor tak samo jak w podium rankingu i w kaflach na stronie glownej. */
.gb-prem-item:hover .gb-prem-title { color: var(--gb-sec, var(--gb-accent)); }

.gb-prem-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--gb-text2);
}

.gb-prem-genre {
  font-size: 11.5px;
  color: var(--gb-muted);
}

.gb-prem-item .gb-prem-chip {
  margin-top: 9px;
}

.gb-prem-item.is-soon .gb-prem-chip {
  background: rgba(255, 194, 51, .15);
  color: var(--gb-accent);
}

/* ==================================================== responsive */

@media (max-width: 1024px) {
  .gb-prem-item { width: 190px; }
  /* Poniżej tej szerokości panel z tytułem i podium nie mieszczą się obok siebie. */
  .gb-rk-card, .gb-rk-multi { grid-template-columns: minmax(0, 1fr); }
  .gb-rk-lead { border-right: none; border-bottom: 1px solid var(--gb-line); }
  .gb-rk-cta { margin-top: 4px; }
}

@media (max-width: 640px) {
  .gb-rk-item { grid-template-columns: 26px 64px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .gb-rk-place { font-size: 22px; }
  .gb-rk-shot { height: 46px; }
  .gb-rk-title { font-size: 18px; }
  .gb-prem-next-spacer { display: none; }
  .gb-prem-next { gap: 8px 12px; }
  .gb-prem-item { width: 158px; }
  .gb-prem-title { font-size: 14px; }
  }

@media (prefers-reduced-motion: reduce) {
  .gb-rk-shot,
  .gb-rk-item:hover .gb-rk-shot,
  .gb-prem-cover img,
  .gb-prem-item:hover .gb-prem-cover img {
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------- strzalki osi premier */
.gb-prem-nav { position: absolute; top: -46px; right: 0; display: flex; gap: 6px; z-index: 2; }
.gb-prem-arrow {
  width: 34px; height: 34px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--gb-line2); color: var(--gb-text2);
  transition: background .18s, border-color .18s, color .18s;
}
.gb-prem-arrow svg { width: 17px; height: 17px; display: block; }
.gb-prem-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: var(--gb-sec); color: var(--gb-sec); }
.gb-prem-arrow:disabled { opacity: .35; cursor: default; }

/* Zastępnik zdjęcia produktu: inicjał na przygaszonym kolorze sekcji.
   Pusty szary prostokąt czytał się jak niedoładowany obrazek. */
.gb-rk-shot.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--gb-sec, var(--gb-accent));
  background: color-mix(in srgb, var(--gb-sec, var(--gb-accent)) 12%, var(--gb-panel));
  border-color: color-mix(in srgb, var(--gb-sec, var(--gb-accent)) 28%, var(--gb-line));
}