/* ONLY FAST CARS — blog: lista wpisów (/blog) i pojedynczy wpis (/blog/…)
 *
 * Obie strony stoją na tej samej siatce co reszta serwisu i biorą zmienne
 * z site.css, więc motyw jasny i ciemny działa tu bez osobnych reguł.
 */

.blog-main,
.wpis-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) 22px 96px;
}

/* ---------- nagłówek listy ---------- */

.blog-head { max-width: 720px; margin-bottom: 44px; }

.blog-kicker {
  margin: 0 0 12px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red2);
}

.blog-title { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0 0 18px; }
.blog-lead { margin: 0; color: var(--dim); max-width: 62ch; }

/* ---------- siatka kartek ----------
   Kafle w języku szyny floty ze strony miasta: zdjęcie na cały kadr, cień od
   dołu, tytuł wersalikami na kadrze i drobna linia danych zamiast zajawki.
   Tekst na zdjęciu jest zawsze biały — kadr niesie własny cień niezależnie
   od motywu strony, dokładnie jak karty aut. */

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
  gap: clamp(16px, 1.6vw, 26px);
}

.blog-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 0;
  color: var(--dim);
}

.bl-kartka {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
}
.bl-link { display: block; position: relative; aspect-ratio: 5 / 3; color: #f5f5f3; }
.bl-link:focus-visible { outline: 1px solid #fff; outline-offset: -8px; }

.bl-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.bl-kartka:hover .bl-foto { transform: scale(1.07); }
.bl-foto--pusta {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #16161a, #0d0d0f);
}
.bl-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.24) 62%, rgba(0,0,0,.84) 100%);
  pointer-events: none;
}

.bl-copy {
  position: absolute;
  left: clamp(20px, 2.4vw, 34px);
  right: clamp(20px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 30px);
}
.bl-tytul {
  display: block;
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.bl-meta i { font-style: normal; line-height: 1.2; }

/* ---------- pojedynczy wpis ---------- */

.wpis { max-width: 760px; margin: 0 auto; }

.wp-wroc { margin: 0 0 26px; font-size: .88rem; }
.wp-wroc a { color: var(--dim); transition: color .18s ease; }
.wp-wroc a:hover { color: var(--ink); }

.wp-head { margin-bottom: 34px; }
.wp-meta {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: .82rem; color: var(--dim);
}
.wp-tytul { font-size: clamp(2rem, 5.5vw, 3.1rem); margin: 0 0 18px; }
.wp-zajawka { margin: 0 0 14px; color: var(--dim); }

.wp-kadr { margin: 0 0 38px; border-radius: var(--r-lg); overflow: hidden; }
.wp-kadr img { width: 100%; }

/* Miara wiersza pilnowana szerokością kolumny, nie rozmiarem pisma; tekst
   czyta się długo, więc interlinia jest większa niż w reszcie serwisu. */
.wp-tresc { font-size: 1.06rem; line-height: 1.85; }
.wp-tresc p { margin: 0 0 1.35em; }
.wp-tresc p:last-child { margin-bottom: 0; }

.wp-srod {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 2.2em 0 .8em;
}

.wp-stopka {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: .95rem;
}
.wp-stopka a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- „czytaj dalej" ---------- */

.wpis-dalej {
  max-width: 1180px;
  margin: 84px auto 0;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.wpis-dalej-tytul {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 24px;
  font-weight: 500;
}
.blog-list--male { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.blog-list--male .bl-tytul { font-size: 1rem; }

@media (max-width: 640px) {
  .blog-main, .wpis-main { padding: calc(var(--nav-h) + 36px) 18px 72px; }
  .blog-list { grid-template-columns: 1fr; gap: 20px; }
  .wp-tresc { font-size: 1.02rem; }
}