/* ==========================================================================
   lukasmikula.cz – výpis blogu /blog/ (filtr rubrik, mřížka karet). Načítá se za site.css
   místo article.css (stránka článku a bloky obsahu).
   ========================================================================== */

.blog-hero { padding-top: clamp(32px, 5vw, 64px); }
.blog-hero .section-head { margin-bottom: 28px; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 36px); }
.blog-filter button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--gloss); color: var(--text-2);
  font-size: 14.5px; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.blog-filter button span { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); }
.blog-filter button:hover { color: var(--text); border-color: var(--text-3); }
.blog-filter button[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: 0 8px 22px -10px var(--glow); }
.blog-filter button[aria-pressed="true"] span { background: rgb(0 0 0 / .14); color: inherit; }
.blog-grid .post-card[hidden] { display: none; }
.post-card__excerpt { font-size: 14.5px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-grid .post-card__body h2 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; }
.post-card__meta { margin-top: auto; }
.post-card__body { flex: 1; align-content: start; }
@media (min-width: 981px) {
  .blog-grid .post-card--featured:not([hidden]) { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; }
  .post-card--featured .post-card__img { aspect-ratio: auto; height: 100%; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--border); }
  .post-card--featured .post-card__body { padding: 28px; align-content: center; gap: 12px; }
  .blog-grid .post-card--featured .post-card__body h2 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
  .post-card--featured .post-card__excerpt { -webkit-line-clamp: 4; font-size: 15.5px; }
}
/* Mřížka nekončí osiřelou kartou při žádném počtu článků (ani po filtru rubrik – počítají se jen viditelné
   karty, `of :not([hidden])`). Zvýrazněná karta zabírá 2 buňky, takže buněk je n + 1 (po filtru bez ní n).
   Zbude-li v posledním řádku volné místo, poslední karta se roztáhne do konce řádku (vodorovné rozvržení,
   fotka vlevo přes celou výšku karty). Šablona blog.php podle počtu článků upraví `sizes` její fotky. */
@media (min-width: 641px) and (max-width: 980px) {
  .blog-grid > .post-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
  .blog-grid > .post-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .post-card__img { position: relative; aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--border); }
  .blog-grid > .post-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .post-card__img img { position: absolute; inset: 0; }
  .blog-grid > .post-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) .post-card__body { padding: 24px; align-content: center; }
}
@media (min-width: 981px) {
  /* sama v posledním řádku → přes celou šířku (fotka = 2 sloupce mřížky, text = 1) */
  .blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:nth-child(3n of :not([hidden])):nth-last-child(1 of :not([hidden])),
  .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; }
  /* druhá v posledním řádku → přes zbylé 2 sloupce (jako zvýrazněná) */
  .blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:not(.post-card--featured):nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])),
  .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; }
  :is(.blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:nth-child(3n of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:not(.post-card--featured):nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden]))) .post-card__img { position: relative; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--border); }
  :is(.blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:nth-child(3n of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:not(.post-card--featured):nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden]))) .post-card__img img { position: absolute; inset: 0; }
  :is(.blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:nth-child(3n of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:has(> .post-card--featured:not([hidden])) > .post-card:not(.post-card--featured):nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])), .blog-grid:not(:has(> .post-card--featured:not([hidden]))) > .post-card:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden]))) .post-card__body { padding: 28px; align-content: center; }
}