/* ================================
   /blog/css/blog.css
   Blog lista és poszt oldalak
==================================*/

/* ---- Alapváltozók ---- */
:root{
  --container-width: 960px;
  --brand: #004080;
  --brand-dark: #002859;
  --accent: #006cf9;
  --highlight: #ffe066;
  --muted: #6b7280;
  --radius: 16px;
  --shadow: 0 6px 18px rgba(0,0,0,.1);
  --bg: #ffffff;
  --bg-soft: #eef2f7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0; line-height:1.6; color:#1d2630;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg, #eef2f7, #ffffff);
}

.container{max-width:var(--container-width); margin:0 auto; padding:0 16px}

/* ---- HERO (lista) ---- */
.site-hero{
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff; padding:36px 0;
}
.site-hero .muted{opacity:.9}

/* ======================================================
   RÉGI ELRENDEZÉS: Több oszlopos grid
   Kikapcsolva: 2025-09-04
   Meghagyva referenciának, ha valaha
   újra kellene a 1–2–3 oszlopos layout.
====================================================== */
/*
.posts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
  margin:24px 0 48px;
}

@media (max-width:600px){
  .posts-grid{ grid-template-columns:1fr }
}
*/

/* ---- Kártyák (közös stílus) ---- */
.post-card{
  display:flex; flex-direction:column; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12) }

.post-card .thumb{display:block; aspect-ratio: 16/9; background:#f2f4f7}
.post-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}

.post-body{padding:16px; display:flex; flex-direction:column; gap:8px}
.post-body .meta{color:var(--muted); font-size: 0.95em; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dot{opacity:.5}

.post-body h2{margin:.25em 0 .15em; font-size:1.6rem; line-height:1.3}
.post-body h2 a{text-decoration:none; color:#111}
.post-body h2 a:hover{color:var(--brand)}

.excerpt{margin:.4em 0 .8em; color:#334155; line-height:1.5}

.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:.9em; background:#f7f7fb; padding:4px 8px; border-radius:999px; text-decoration:none; color:#334155;
}

.cta-row{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:.55em .95em; border-radius:10px; font-weight:600;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{
  background:#f7f7fb; color:var(--brand); border:2px solid var(--brand);
}

/* ======================================================
   ÚJ ELRENDEZÉS: Egyoszlopos kártyák
   Aktív: 2025-09-04
   Minden kártya külön sorban, középre igazítva
====================================================== */
.posts-grid{
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 920px;     /* kártya max szélessége */
  margin: 24px auto 64px;
  padding: 0 12px;
}

/* Cím és kivonat: természetes tördelés, nincs clamp, nincs kötőjeles elválasztás */
.post-body h2{
  display:block;
  overflow:visible;
  word-break:normal;
  hyphens:none;
}
.excerpt {
  font-size:1.2rem;
  display:block;
  overflow:visible;
  word-break:normal;
  hyphens:none;
}

/* ---- POSZT OLDAL ---- */
.post-hero{
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff; padding:32px 0 28px;
}
.post-hero .meta{opacity:.9; display:flex; gap:8px}
.post-hero h1{margin:.2em 0 .1em}
.post-hero .subtitle {
  opacity:.95; 
  margin:0
}

.post{max-width:760px; margin:24px auto 64px}
.hero-figure{margin:0 0 12px}
.hero-figure img{width:100%; border-radius:12px; display:block}
.hero-figure figcaption{color:#6b7280; font-size:.9em; margin-top:6px}

.cta-box{
  background:var(--bg-soft); border-left:4px solid var(--brand); padding:16px; border-radius:10px; margin:18px 0;
}
.embed-toggle summary{cursor:pointer; color:var(--brand); font-weight:600}
.embed-wrap{margin-top:12px}
.divider{border:none; border-top:1px solid #e5e7eb; margin:24px 0}
.sources h3{margin-bottom:.5em}
.post-nav{display:flex; gap:10px; justify-content:space-between; margin-top:16px}

/* Mobil finomhangolás */
@media (max-width:600px){
  .post{margin:12px auto 40px}
}

/* Általános blog */
.backlink{
  color:#fff; 
  text-decoration:none; 
  opacity:.85; 
  font-weight:600; 
}

.badge{
  font-size:.85rem;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35); 
}

.post-footer{
  padding: 0 22px 28px;
  display:flex; flex-wrap:wrap;
  gap:10px; align-items:center;
  justify-content:space-between;
  color:var(--muted); 
}

/* ---- NEWSLETTER ---- */

.newsletter-signup{
  margin: 48px auto;
  padding: 24px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  text-align: center;
}
.newsletter-signup h2{ margin-bottom: 12px; }
.newsletter-signup form{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.newsletter-signup input[type=email]{
  padding: .6em 1em; border:1px solid #ccc; border-radius: 8px;
  font-size:1em; min-width:220px;
}
.newsletter-signup button{
  padding:.6em 1.2em; border:none; border-radius:8px;
  background: var(--accent); color:#fff; font-weight:600;
  cursor:pointer;
}
.newsletter-signup button:hover{ filter:brightness(1.05); }