/* Blog posts index (home.php): breadcrumbs, hero, "Popularne artykuły" block,
   "Najnowsze artykuły" grid + category SegmentedControl filter, pagination. */

.blog-archive--list { padding-bottom: var(--space-2xl); }
/* Tighten the gap between the hero and the reused "Popularne artykuły" block
   (which carries the homepage section's larger 3xl top padding). */
.blog-archive--hero + .blog { padding-top: var(--space-l); }

/* ---------- Hero ---------- */
.blog-archive__hero { padding-top: var(--space-m); }
.blog-archive__hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.blog-archive__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 686px;
  margin-inline: auto;
  text-align: center;
}
.blog-archive__title { color: var(--color-grey-900); }
.blog-archive__intro {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
}

/* Breadcrumbs styles live in layout.css (shared component). */

/* ---------- "Najnowsze artykuły" head + category filter ---------- */
.blog-archive__listhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.blog-archive__listtitle { color: var(--color-grey-900); text-align: left; }

/* SegmentedControl (Figma): scrollable pill track + scroll-affordance arrow.
   fit-content so few tabs shrink-wrap; caps at 100% then scrolls when many. */
.segmented { position: relative; width: fit-content; max-width: 100%; min-width: 0; }
.segmented__track {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  min-width: 0;            /* allow the track to shrink so overflow-x can scroll */
  padding: var(--space-2x);
  background: var(--color-grey-100);
  border-radius: var(--radius-m);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.segmented__track::-webkit-scrollbar { display: none; }
.segmented__item {
  flex: 0 0 auto;
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-900);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.segmented__item:hover { background: var(--color-grey-200); }
.segmented__item.is-active { background: var(--color-grey-900); color: var(--color-grey-100); }
.segmented__item.is-active:hover { background: var(--color-grey-900); }
/* Edge fades + round arrows on BOTH sides — toggled by JS per scroll position,
   so the pills can be scrolled back and forth (prev left, next right). */
.segmented::after,
.segmented::before {
  content: "";
  position: absolute;
  inset-block: var(--space-2x);
  width: 56px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity .2s ease;
}
.segmented::before {
  left: 0;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  background: linear-gradient(270deg, rgba(249, 249, 249, 0) 0%, var(--color-grey-100) 75%);
}
.segmented::after {
  right: 0;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: linear-gradient(90deg, rgba(249, 249, 249, 0) 0%, var(--color-grey-100) 75%);
}
/* Left fade while scrolled away from the start; right fade while not at the end. */
.segmented.is-scrollable:not(.at-start)::before { opacity: 1; }
.segmented.is-scrollable:not(.at-end)::after { opacity: 1; }
.segmented__arrow {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  color: var(--color-grey-900);
  box-shadow: 0 4px 16px rgba(13, 13, 13, .12);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.85);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.segmented__arrow svg { width: 16px; height: 16px; }
.segmented__arrow--prev { left: 0; }
.segmented__arrow--next { right: 0; }
.segmented__arrow--prev svg { transform: rotate(180deg); }
.segmented__arrow:hover { background: var(--color-grey-400); }
.segmented.is-scrollable:not(.at-start) .segmented__arrow--prev,
.segmented.is-scrollable:not(.at-end) .segmented__arrow--next {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

/* ---------- Post grid ---------- */
.blog-archive__results { padding-top: var(--space-xl); }
.blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-l);
  row-gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* ---------- Post card ---------- */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 612px;
}
.post-card__media {
  aspect-ratio: 332 / 249;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-grey-200);
}
.post-card__img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--color-grey-900);
}
/* Fixed height keeps dates aligned across cards (meta line + up to 3 title lines). */
.post-card__head { display: flex; flex-direction: column; height: 144px; overflow: hidden; }
.post-card__meta,
.post-card__date {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: var(--ls-caption);
}
/* Figma "Heading S" — 28px, no token in base.css. */
.post-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -1px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Image (nofollow) and title are separate links (SEO feedback 2026-09) - no whole-card stretched link. */
.post-card__link:hover,
.post-card__media:hover + .post-card__body .post-card__link { text-decoration: underline; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; padding-block: var(--space-s); }
.pagination__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs); }   /* 12px between numbers (Figma); wrap = safety net */
.pagination__list--mobile { display: none; }   /* first / current / last only - see udi_pagination() */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding-inline: 0;
  border-radius: var(--radius-xs);
  font-size: 18px;            /* Figma "Body L / Medium" */
  line-height: 28px;
  font-weight: 500;
  color: var(--color-grey-600);
  transition: background-color .2s ease, color .2s ease;
}
.pagination a.page-numbers:hover { background: var(--color-grey-100); color: var(--color-grey-900); }
.pagination .page-numbers.current {
  background: var(--color-grey-900);
  color: var(--color-grey-100);
  border-radius: var(--radius-pill);
  font-size: 18px;
  line-height: 28px;
}
.pagination .prev,
.pagination .next { color: var(--color-grey-900); min-width: 24px; height: 48px; padding-inline: 0; }
.pagination .prev { margin-right: var(--space-xs); }   /* +12px = 24px to the numbers (Figma) */
.pagination .next { margin-left: var(--space-xs); }
.pagination .prev:hover,
.pagination .next:hover { background: transparent; color: var(--color-grey-600); }
.pagination svg { width: 24px; height: 24px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .blog-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-m);
  }
  /* Scroll arrows stay on tablet/mobile too (client: needs the arrow on mobile). */
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .blog-archive__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-l);
  }
  /* Mobile: both words 40px (italic accent kept). */
  .blog-archive__title {
    font-size: var(--fs-h-l);
    line-height: var(--lh-h-l);
    letter-spacing: -1px;
  }
  .post-card__head { height: auto; }

  /* Pagination: short set, smaller pills - 7 items max = 280px, fits a 320px phone. */
  .pagination__list--desktop { display: none; }
  .pagination__list--mobile { display: flex; gap: var(--space-3xs); }
  .pagination .page-numbers { min-width: 40px; height: 40px; }
  .pagination .prev,
  .pagination .next { min-width: 24px; }
  .pagination .prev { margin-right: var(--space-3xs); }
  .pagination .next { margin-left: var(--space-3xs); }
}