/* Section: Blog ("Popularne na blogu") */

/* Scoped to the section element — bare .blog would also match <body class="blog">
   that WordPress adds on the posts index, adding stray top/bottom page padding. */
.section.blog { padding-block: var(--space-4xl); }
.blog__container { display: flex; flex-direction: column; gap: var(--space-s); }

.blog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); padding-block: var(--space-s); }
.blog__heading { color: var(--color-grey-900); }
/* Borderless text+arrow link (Figma: no border) — affordance via underline + arrow shift. */
.blog__more {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2x);
  padding-block: var(--space-2x);
  font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500;
  color: var(--color-grey-900); white-space: nowrap;
}
.blog__more svg { transition: transform .2s ease; }
.blog__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog__more:hover svg { transform: translateX(4px); }
.blog__more--bottom { display: none; }   /* mobile only */

.blog__content { display: flex; gap: var(--space-l); align-items: stretch; }

/* Featured card */
.blog__featured {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-s);
  min-height: 600px;
  padding: var(--space-3xl) var(--space-4xl);
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--color-grey-100);
}
.blog__featured-media { position: absolute; inset: 0; }
.blog__featured-media img { width: 100%; height: 100%; object-fit: cover; }
.blog__featured-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.65) 100%); }
/* The image link covers the card; the text lets clicks through to it - except the title link. */
.blog__featured-body { position: relative; display: flex; flex-direction: column; gap: var(--space-s); pointer-events: none; }
.blog__featured-title { pointer-events: auto; }
.blog__featured-head { display: flex; flex-direction: column; }
.blog__featured-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-m);
  line-height: var(--lh-h-m);
  letter-spacing: var(--ls-h-m);
  color: var(--color-grey-100);
}

/* List of compact cards */
.blog__list { flex: 0 0 612px; max-width: 612px; display: flex; flex-direction: column; gap: var(--space-l); justify-content: center; }
/* Desktop shows featured + 3 compact; the first compact duplicates the featured, so hide it here. */
.blog__compact:first-child { display: none; }
.blog__compact { display: flex; gap: var(--space-l); height: 224px; }
.blog__compact-media { flex: 1 1 0; min-width: 0; border-radius: var(--radius-xs); overflow: hidden; background: var(--color-grey-200); }
.blog__compact-media img { width: 100%; height: 100%; object-fit: cover; }
.blog__compact-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); justify-content: center; }
.blog__compact-head { display: flex; flex-direction: column; }
.blog__compact-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-m);
  line-height: var(--lh-h-m);
  letter-spacing: var(--ls-h-m);
  color: var(--color-grey-900);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog__compact:hover .blog__compact-title,
.blog__featured:hover .blog__featured-title { text-decoration: underline; }

/* Meta + date (caption) */
.blog__meta, .blog__date {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: var(--ls-caption);
}

/* Responsive */

/* Tablet + mobile: no featured card, all 4 posts become vertical compact cards. */
@media (max-width: 1024px) {
  .blog__featured { display: none; }
  .blog__content { display: block; }
  .blog__compact:first-child { display: flex; }   /* the featured now shows as a card */

  .blog__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
    flex: none; max-width: none; width: 100%;
  }
  .blog__compact { flex-direction: column; height: auto; gap: var(--space-s); }
  .blog__compact-media { flex: none; width: 100%; aspect-ratio: 332 / 249; }
  .blog__compact-body { justify-content: flex-start; }
  /* Figma "Heading S" — no token for 28px yet. */
  .blog__compact-title { font-size: 28px; line-height: 40px; letter-spacing: -1px; -webkit-line-clamp: 3; }
}

/* Mobile: horizontal scroll-snap slider + full-width button below. */
@media (max-width: 600px) {
  /* Tighter top gap to the preceding section (voucher) — client: too much space on mobile. */
  .section.blog { padding-top: var(--space-l); }
  .blog__header { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
  .blog__heading { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
  .blog__more--top { display: none; }
  .blog__more--bottom { display: inline-flex; width: 100%; }

  .blog__list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;   /* base rule centers the column; centering an overflowing
                                      scroller hides the first card off-screen (unreachable) */
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog__list::-webkit-scrollbar { display: none; }
  .blog__compact { flex: 0 0 240px; scroll-snap-align: start; }
}