/* V2 Poradniki (sections-v2/v2-poradniki.mjs). Rząd .v2-rail z css/v2/layout.css: na desktopie trzy karty
   dzielą szerokość treści (nic się nie przewija), poniżej 1024 karta ma stałą szerokość i rząd przewija się
   palcem. Hover: zdjęcie 1.03 (.v2-zoom) i podkreślenie tytułu. */

.v2-blog {
  /* Procent liczy się od pola treści rzędu (szerokość bez paddingu --v2-bleed), czyli od szerokości treści
     kontenera, także bez paska przewijania okna. */
  --v2-blog-w: calc((100% - 2 * var(--v2-gap)) / 3);
}

.v2-blog__rail {
  gap: var(--v2-gap);
}

.v2-blog__item {
  flex-basis: var(--v2-blog-w);
}

.v2-blog__card {
  position: relative;
  display: block;
}

.v2-blog__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
}

.v2-blog__title {
  margin: 0;
  color: var(--v2-ink);
  font-family: var(--gs-font-display);
  font-size: var(--v2-h3-size);
  font-weight: 400;
  line-height: var(--v2-h3-leading);
  text-wrap: pretty;
}

.v2-blog__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--v2-t-control);
}

/* Cała karta klikalna. */
.v2-blog__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--v2-r-card);
}

.v2-blog__link:focus-visible {
  outline: none;
}

.v2-blog__link:focus-visible::after {
  outline: 2px solid var(--gs-focus);
  outline-offset: 4px;
}

@media (hover: hover) {
  .v2-blog__card:hover .v2-blog__link {
    text-decoration-color: currentColor;
  }
}

.v2-blog__excerpt {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--v2-text);
  font-size: var(--gs-body-size);
  line-height: var(--gs-body-leading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1023px) {
  .v2-blog {
    --v2-blog-w: 340px;
  }
}

@media (max-width: 767px) {
  .v2-blog {
    --v2-blog-w: min(300px, 78vw);
  }

  .v2-blog__rail {
    gap: var(--v2-rail-gap);
  }

  .v2-blog__media {
    margin-bottom: 16px;
  }

  .v2-blog__excerpt {
    font-size: var(--v2-small-size);
    line-height: var(--v2-small-leading);
  }
}