/* ===========================================================================
   Speedway Manager — the public landing page at "/".

   Deliberately standalone. The app's own components.css assumes the manager
   shell around it (sidebar width, panel rhythm, table grids) and none of that
   applies here, so this file only leans on tokens.css for the palette.

   The layout is one column of full-bleed sections; `.shellwidth` is what keeps
   their contents lined up with each other.
   =========================================================================== */

body.home {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.shellwidth {
  width: min(1480px, 100% - 48px);
  margin-inline: auto;
}

/* ---- buttons -------------------------------------------------------------
   Their own, not components.css's: these are marketing buttons, wider and
   louder than the ones on a management screen. */

.home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}

.home .btn:active { transform: translateY(1px); }

.btn--red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn--red:hover { background: #f0404a; border-color: #f0404a; }

.btn--ghost {
  background: transparent;
  border-color: rgba(238, 242, 248, .55);
  color: var(--ink);
}

.btn--ghost:hover { border-color: var(--ink); background: rgba(238, 242, 248, .07); }

.btn--big { padding: 15px 30px; font-size: 13px; }

/* ---- top bar ------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 3;
  background: #05080d;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 92px;
}

/* The wordmark is type, not a logo file — the design project was never handed
   over, so this is an interpretation of it and is meant to be swapped for the
   real artwork when it arrives. */
.wordmark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: .86;
  padding-bottom: 10px;
}

.wordmark__one,
.wordmark__two {
  display: block;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.wordmark__one {
  position: relative;
  font-size: 34px;
  color: #fff;
  padding-right: 46px;
}

.wordmark__two {
  font-size: 25px;
  color: var(--red);
  margin-left: 26px;
}

/* the three speed streaks trailing the first word */
.wordmark__streaks {
  position: absolute;
  right: 0;
  top: 24%;
  width: 40px;
  height: 15px;
  background:
    linear-gradient(var(--red), var(--red)) 100% 0 / 40px 3px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 50% / 30px 3px no-repeat,
    linear-gradient(var(--red), var(--red)) 100% 100% / 36px 3px no-repeat;
  transform: skewX(-18deg);
}

/* the chequered flick under the mark */
.wordmark__flag {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 86px;
  height: 8px;
  transform: skewX(-18deg);
  background:
    repeating-linear-gradient(90deg, #fff 0 8px, #12161d 8px 16px) 0 0 / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #12161d 0 8px, #fff 8px 16px) 0 100% / 100% 4px no-repeat;
  opacity: .9;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-inline: auto;
}

.mainnav a,
.mainnav__soon,
.mainnav__here {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.mainnav a:hover { color: var(--accent); }

/* Nothing behind it yet: dimmed and not clickable, rather than a link that
   goes nowhere. */
.mainnav__soon { color: var(--ink-3); cursor: default; }

/* Strona, na ktorej czytelnik wlasnie stoi.

   Kolor i kreska pod spodem, nie sam kolor: zloto na bialym tle paska jest
   czytelne, ale komu barwy zlewaja sie ze soba, zostaje podkreslenie. Klasa
   istniala juz wczesniej w szablonie poradnika i nie miala ani jednej reguly,
   wiec biezaca pozycja wygladala tam jak zwykly, nieklikalny tekst. */
.mainnav__here {
  position: relative;
  color: var(--accent);
  cursor: default;
}

.mainnav__here::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.topbar__auth { display: flex; gap: 12px; flex: 0 0 auto; }

/* ---- hero ----------------------------------------------------------------
   The artwork is the key art with the box chrome cropped off (assets/home/
   hero.jpg). It sits behind the copy rather than beside it, and a gradient
   from the left keeps the headline legible over whatever part of the scene
   the viewport happens to show. */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: 0 26px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__art,
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__art {
  background: url('../assets/home/hero.jpg') center 42% / cover no-repeat;
}

.hero__veil {
  background:
    linear-gradient(90deg, rgba(5, 8, 13, .97) 0%, rgba(5, 8, 13, .88) 22%, rgba(5, 8, 13, .30) 48%, rgba(5, 8, 13, 0) 66%),
    linear-gradient(180deg, rgba(5, 8, 13, .55) 0%, rgba(5, 8, 13, 0) 26%, rgba(5, 8, 13, .55) 78%, rgba(5, 8, 13, .92) 100%);
}

.hero__inner {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-top: 74px;
}

.hero__title {
  margin: 0;
  font-size: clamp(38px, 4.1vw, 58px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .7);
}

.hero__title em { font-style: normal; color: var(--red); }

.hero__lead {
  margin: 22px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.hero__cta { display: flex; gap: 14px; margin-top: 30px; }

/* ---- season card --------------------------------------------------------- */

.season {
  flex: 0 0 auto;
  width: 232px;
  margin-top: 118px;
  padding: 20px 22px 22px;
  text-align: center;
  background: rgba(10, 14, 20, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow);
}

.season p { margin: 0; }

.season__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}

.season__year {
  margin-top: 2px !important;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.06;
  color: var(--accent);
}

.season__state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.season__state--on { color: var(--ok); }

.season__rule {
  height: 1px;
  margin: 16px 0 14px;
  background: rgba(255, 255, 255, .14);
}

.season__round {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.season__round svg { width: 16px; height: 16px; fill: var(--ink-2); }

.season__nextlabel {
  margin-top: 12px !important;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.season__next {
  margin-top: 3px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Godzina na złoto: data mówi, KTÓREGO dnia wracać, a godzina — kiedy
   dokładnie. To ta druga jest tu wezwaniem do działania. */
.season__next b { color: var(--accent); }

/* ---- the three promises -------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  /* `margin-block`, never the `margin` shorthand: this row is also a
     .shellwidth, and the shorthand would wipe out the auto side margins that
     centre it. It did, and the row then started at the left edge of the
     window while the hero above it stayed centred — invisible at 1366 px,
     a 230 px gap at 2129. */
  margin-block: 0;
  /* The right quarter is the season card's; without this the third promise
     runs underneath it. Padding rather than max-width, because a narrower
     box would be re-centred by those auto margins and drift right of the
     hero text it is supposed to line up with. */
  padding: 0 22% 0 0;
  list-style: none;
}

.pillar { display: flex; align-items: flex-start; gap: 13px; }

.pillar b {
  display: block;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pillar p {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pillar__mark { flex: 0 0 auto; }

.pillar__icon { width: 30px; height: 30px; display: block; }

.pillar__mark--gold .pillar__icon { fill: var(--accent); }
.pillar__mark--steel .pillar__icon { fill: #c4ced9; }

/* ---- the two panels ------------------------------------------------------ */

.panels {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  padding-block: 30px 44px;
}

.panel {
  position: relative;
  padding: 26px 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__title {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.panel__more {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: default;
  white-space: nowrap;
}

.panel__more b { color: var(--ink-2); }

/* ---- what is this game --------------------------------------------------- */

.about__text { max-width: 60%; margin-top: 18px; }

.about__text p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.about__text p:last-child { margin-bottom: 0; }

/* A rider sliding through the turn, bottom-right of the panel. The design has
   its own artwork for this; until that file exists the panel simply has no
   picture, which is why this is a background and not an <img> — a missing
   background leaves a clean panel, a missing <img> leaves a broken icon. */
.about__art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 74%;
  background: url('../assets/home/rider.png') right bottom / contain no-repeat;
  pointer-events: none;
}

/* ---- news ---------------------------------------------------------------- */

.newsgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.newscard { display: flex; flex-direction: column; }

.newscard__art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  background-color: var(--panel-2);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 12px;
}

.newscard__tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
}

.newscard__tag--red   { background: var(--red); }
.newscard__tag--blue  { background: var(--blue); }
.newscard__tag--green { background: var(--ok); }

.newscard__title {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.newscard__lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}

.newscard__date {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- footer -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line-soft);
  background: #05080d;
}

.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 96px;
  padding-block: 18px;
}

.foot__brand { display: flex; align-items: center; gap: 14px; }

.foot__brand img { border-radius: var(--r-sm); }

.foot__brand div { display: flex; flex-direction: column; }

.foot__brand b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.foot__brand span { font-size: 11px; color: var(--ink-3); line-height: 1.5; }

.foot__links { display: flex; align-items: center; gap: 26px; }

/* Most entries here are placeholders and render as spans; the support link
   is a real one, and has to sit in the row as if it were not. */
.foot__links a,
.foot__links span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: default;
}

.foot__links a { color: var(--ink-2); text-decoration: none; }
.foot__links a:hover { color: var(--accent); }

.foot__social { display: flex; gap: 12px; }

.social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
}

.social svg { width: 22px; height: 22px; fill: #fff; }

.social--discord  { background: #5865f2; }
.social--facebook { background: #1877f2; }
.social--youtube  { background: #ff0000; }
.social--x        { background: #12161d; border: 1px solid #2a3140; }

/* ---- narrower screens ----------------------------------------------------
   One breakpoint, not four: the page is three stacked blocks and each of them
   collapses to a single column at about the same width. */

@media (max-width: 1180px) {
  /* The bar runs out of room here, not at 880: wordmark + menu + two
     buttons need about 1090 px and the buttons were being pushed off the
     right edge, which is a horizontal scrollbar on every page. The menu
     drops to its own row instead. */
  .topbar__inner { flex-wrap: wrap; gap: 16px; padding-block: 16px; }
  .mainnav { order: 3; width: 100%; margin-inline: 0; flex-wrap: wrap; gap: 18px; }
  .mainnav a, .mainnav__soon { font-size: 12px; }
  .topbar__auth { margin-left: auto; }
  /* No season card beside the hero down here, so the row takes the full width. */
  .pillars { padding-right: 0; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .about__text { max-width: 100%; }
  .about__art { display: none; }
}

@media (max-width: 880px) {
  .shellwidth { width: min(1480px, 100% - 32px); }
  /* the top bar already wrapped at 1180 */
  .hero { min-height: 0; }
  .hero__inner { flex-direction: column; padding-top: 44px; }
  .season { margin-top: 0; width: 100%; max-width: 320px; }
  .hero__veil { background: linear-gradient(180deg, rgba(5, 8, 13, .82) 0%, rgba(5, 8, 13, .92) 60%, rgba(5, 8, 13, .98) 100%); }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; }
  .newsgrid { grid-template-columns: minmax(0, 1fr); }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

/* ---- wejście do instrukcji, w panelu „Co to jest Speedway Manager?" -------
   Osobny blok pod tekstem, nie link w akapicie: to jest jedyne wyjście z tej
   strony do czegoś dłuższego niż dwa zdania, a link wtopiony w tekst ginie. */

.about__guide {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.about__guidelead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

.about__guidelead b { color: var(--ink); }

.btn--gold {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn--gold:hover { background: rgba(255, 201, 60, .1); }

.btn--gold b { margin-left: 8px; font-weight: 900; }

/* ---- sekcja „O grze" ------------------------------------------------------
   Kotwica z menu i jedyne miejsce na stronie głównej, gdzie widać, jak gra
   naprawdę wygląda. Trzy zrzuty, a pod nimi lista dźwigni — bo pytanie, które
   zostaje po nagłówku „zostań menedżerem", brzmi „skoro mecz jedzie sam, to co
   właściwie robię?".
   ------------------------------------------------------------------------ */

.showcase { padding-block: 10px 6px; }

.showcase__title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.showcase__lead {
  /* Ta sama szerokość czytania co reszta strony: dłuższa linia w tej
     szerokości gubi początek wiersza. */
  max-width: 72ch;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---- zajawki ---- */

.shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.shot {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Wszystkie trzy zrzuty są przycięte do 860x537, czyli dokładnie do tych
   proporcji — `cover` nie ma tu już czego ucinać i pilnuje tylko, żeby rząd
   się nie rozjechał, gdyby kiedyś podmienić obrazek na inny. */
.shot__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}


.shot__cap { padding: 16px 18px 18px; }

.shot__cap b {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.shot__cap p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---- na co masz wpływ ---- */

.showcase__h3 {
  margin: 34px 0 16px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.levers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
}

/* Kreska z lewej zamiast ramki: to jedna lista w sześciu punktach, a sześć
   pudełek czytałoby się jak sześć osobnych ofert. */
.levers li {
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}

.levers b {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.levers p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---- wejście do instrukcji ---- */

.showcase__guide {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.showcase__guidelead {
  max-width: 72ch;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

.showcase__guidelead b { color: var(--ink); }

@media (max-width: 1180px) {
  /* Dwa kafle w rzędzie, trzeci pod spodem na całą szerokość — przy trzech
     kolumnach podpisy robiły się węższe od własnych nagłówków. */
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .shots { grid-template-columns: minmax(0, 1fr); }
  .levers { grid-template-columns: minmax(0, 1fr); }
  .showcase__title { font-size: 22px; }
}