/* ==========================================================================
   AgrárPraxis – Blogcikkek (/cikkek): a lista kártyái (2026-11-12, user-kérés: „maga a felépítés tökéletes, hogy felül kép alul az
   adatok, az alsó adatokat kellene kicsit redesignolni”). A kép és a dátumjelvény a bexon blog-item / lp-cikk-card szabályaival marad;
   az alsó rész a /kerdes-valaszok kártyáinak nyelvén (kerdes-valaszok.css, dashboard.css .db-kv-kat, .db-kv-avatar): zöld
   témakör-pirulák, fénycsík és sarokderengés, a bevezető legfeljebb 3 sor, lábléc a szerzővel és a gombbal; egérre emelkedés, a kártya
   egésze kattintható. A lista gyökere `.db-oldal .ckl-lista` (_CikksList.cshtml); a dashboard.css-hez nem nyúlunk.
   ========================================================================== */

.ckl-lista .ckl-kartya {
  position: relative; z-index: 1; height: auto; margin-bottom: 28px;
  border: 1px solid var(--db-keret); border-radius: var(--db-r); background: #fff; box-shadow: var(--db-arnyek-kicsi);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: cklBe .4s ease backwards;
}
.ckl-lista .ckl-kartya:nth-child(2) { animation-delay: .05s; }
.ckl-lista .ckl-kartya:nth-child(3) { animation-delay: .1s; }
.ckl-lista .ckl-kartya:nth-child(n+4) { animation-delay: .15s; }
.ckl-lista .ckl-kartya:hover { transform: translateY(-4px); border-color: var(--k-palyazat-ker); box-shadow: var(--db-arnyek); }
/* a kép a kártya sarkaihoz igazodik (a kártya vág) */
.ckl-lista .ckl-kartya .blog-thumb { border-radius: 0; }

/* ---- az alsó adatrész ---- */
.ckl-lista .ckl-test { position: relative; z-index: 1; overflow: hidden; padding: 26px 30px 24px; }
/* derengés a bal felső sarokban + zöld fénycsík a kép alatt (mint a kérdés–válasz kártyákon) */
.ckl-lista .ckl-test::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 90% at 0% 0%, rgba(75, 129, 77, .09) 0%, rgba(75, 129, 77, 0) 55%);
}
.ckl-lista .ckl-test::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--db-zold), rgba(127, 212, 147, 0));
}
.ckl-lista .ckl-test > .bg-shape-1, .ckl-lista .ckl-test > .bg-shape-2 { max-width: 170px; opacity: .6; }
.ckl-lista .ckl-test > .bg-shape-1 img, .ckl-lista .ckl-test > .bg-shape-2 img { width: 100%; height: auto; }

.ckl-lista .ckl-fejsor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ckl-lista .ckl-fejsor .db-kv-kat { position: relative; z-index: 2; transition: background-color .15s; }
.ckl-lista .ckl-fejsor .db-kv-kat:hover { background: var(--db-zold-sotet); color: #fff; }
.ckl-lista .ckl-olvasas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--db-halvany); }
.ckl-lista .ckl-olvasas i { color: var(--db-zold); }

.ckl-lista .ckl-cim { margin: 14px 0 0; font-size: 28px; font-weight: var(--tj-fw-sbold, 600); line-height: 1.22; letter-spacing: -.01em; }
.ckl-lista .ckl-cim a { color: var(--db-cim); transition: color .15s; }
/* a cím linkje kitölti az adatrészt (a kép saját linkje fölötte); a pirulák és a gomb fölötte maradnak kattinthatók.
   A h2 ne legyen pozicionált, különben a link csak a címet takarná. */
.ckl-lista .ckl-cim a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ckl-lista .ckl-cim a:focus-visible { outline: none; }
.ckl-lista .ckl-cim a:focus-visible::after { outline: 2px solid var(--db-zold); outline-offset: -2px; border-radius: var(--db-r); }
.ckl-lista .ckl-kartya:hover .ckl-cim a { color: var(--db-zold); }

.ckl-lista .ckl-bevezeto {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--db-szoveg);
}

.ckl-lista .ckl-lab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--db-keret-halvany);
}
.ckl-lista .ckl-szerzo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ckl-lista .ckl-szerzo .db-kv-avatar { flex-basis: 46px; width: 46px; height: 46px; font-size: 15px; }
.ckl-lista .ckl-szerzo b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--db-sotet); }
.ckl-lista .ckl-szerzo small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--db-halvany); }
.ckl-lista .ckl-szerzo small:first-child { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ckl-lista .ckl-szerzo small i { color: var(--db-zold); margin-right: 3px; }
.ckl-lista .ckl-lab .tj-primary-btn { position: relative; z-index: 2; }

.ckl-lista .tj-pagination { margin-top: 10px; }

@keyframes cklBe { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .ckl-lista .ckl-kartya { animation: none; transition: none; }
  .ckl-lista .ckl-kartya:hover { transform: none; }
}

@media (max-width: 767px) {
  .ckl-lista .ckl-kartya { margin-bottom: 20px; }
  .ckl-lista .ckl-test { padding: 22px 18px 18px; }
  .ckl-lista .ckl-cim { font-size: 22px; }
  .ckl-lista .ckl-bevezeto { font-size: 15px; }
}