/* ============================================================================
   Blog „Lista" referencia-sablon (Blog terv Spec 8., D2; F3): a lista kártyái, a kiemelt nagyobb kártyája, a
   bejegyzés-oldal elrendezése. A tokenek a közös blog.css-ből (--blog-ink, --blog-akcent, --blog-vonal …), saját
   színkód nincs, Bootstrap-osztály nincs.
   ============================================================================ */

/* Lista */
.bl-lista { display: flex; flex-direction: column; gap: 1.25rem; }

.bl-kartya { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem;
    border: 1px solid var(--blog-vonal); border-radius: var(--blog-lekerekites); background: var(--blog-hatter); }
.bl-kartya__kep { display: block; overflow: hidden; border-radius: calc(var(--blog-lekerekites) - 4px);
    aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--blog-ink) 8%, transparent); }
.bl-kartya__kep img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-kartya__test { min-width: 0; }
.bl-kartya__felirat { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-kartya__cim { margin: 0; --blog-cim-meret: 1.375rem; line-height: 1.25; }
.bl-kartya__cim a { color: inherit; text-decoration: none; }
.bl-kartya__cim a:hover, .bl-kartya__cim a:focus-visible { text-decoration: underline; }
.bl-kartya__alcim { margin: .35rem 0 0; font-size: 1.0625rem; color: var(--blog-halvany); }
.bl-kartya__meta { margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
    font-size: .9rem; color: var(--blog-halvany); }
.bl-kartya__meta a:not(.bl-cimke) { color: inherit; }
/* Az elválasztó átlátszóság nélkül: a meta-sor halvány színét örökli (F6: minden sablonban egységesen) */
.bl-kartya__elvalaszto { opacity: 1; }
/* A „·" elválasztó a szerző-blokkal együtt tör (390 px-en a sor végére került, mérve) */
.bl-kartya__szerzo-blokk { white-space: nowrap; }
.bl-kartya__kivonat { margin: .85rem 0 0; }
.bl-kartya__tovabb { margin: .85rem 0 0; font-weight: 600; }

/* A kiemelt: nagyobb, két oszlop széles kijelzőn, a kép bal oldalt */
.bl-kartya--kiemelt { margin: 0 0 1.75rem; padding: 2rem; border-color: var(--blog-akcent); }
.bl-kartya--kiemelt .bl-kartya__cim { --blog-cim-meret: clamp(1.5rem, 3vw, 2rem); }
.bl-kartya--kiemelt .bl-kartya__kivonat { font-size: 1.0625rem; }

@media (min-width: 760px) {
    .bl-kartya--kiemelt:has(.bl-kartya__kep) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
    .bl-kartya:not(.bl-kartya--kiemelt):has(.bl-kartya__kep) { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
}

/* Bejegyzés-oldal */
.bl-bejegyzes { max-width: var(--blog-szoveg-szelesseg); margin: 0 auto; }
.bl-bejegyzes__fej { margin: 0 0 1.75rem; }
.bl-bejegyzes__kategoriak { margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-bejegyzes__cim { margin: 0; --blog-cim-meret: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.12; }
.bl-bejegyzes__alcim { margin: .6rem 0 0; font-size: 1.1875rem; line-height: 1.4; color: var(--blog-halvany); }
.bl-bejegyzes__meta { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
    font-size: .9375rem; color: var(--blog-halvany); }
.bl-bejegyzes__meta a { color: inherit; }
.bl-bejegyzes__media { margin: 0 0 1.75rem; }
.bl-bejegyzes__media img { display: block; width: 100%; border-radius: var(--blog-lekerekites); }
.bl-bejegyzes__cimkek { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; }
.bl-bejegyzes__cimkek-felirat { color: var(--blog-halvany); margin-right: .25rem; }
.bl-bejegyzes__szerzo { margin: 2.5rem 0 0; }
.bl-bejegyzes__lab { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--blog-vonal); font-weight: 600; }