/*
 * article.css — csak az egy-cikk sablon egyedi CSS-e (forrás: szakmai-cikk.html).
 */

/* Hero meta-sor (szakmai-cikk.html:74) */
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 24px; font-family: var(--font-head); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.92); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 16px; height: 16px; color: #8ff3d8; }

/* — Cikk-elrendezés (szakmai-cikk.html:79) — */
/* Kiemelt kép + próza + sticky sidebar EGY rácsban: a kép a bal oszlop tetején a hero aljába
   lóg (-120px), a próza alatta (bal, 2. sor); a sidebar a jobb oszlop tetején RÖGTÖN a hero
   alatt indul (nincs nagy üres hely fölötte). A felső section-padding 0 — az overlap adja a kezdést. */
.article { padding: 0 0 clamp(48px, 6vw, 80px); }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 clamp(40px, 5vw, 72px); align-items: start; }
.article .wrap > .post-featured { grid-column: 1; grid-row: 1; }
.article .wrap > .prose { grid-column: 1; grid-row: 2; }
.article .wrap > .sidebar { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 900px) {
  .article .wrap { grid-template-columns: 1fr; }
  .article .wrap > .post-featured, .article .wrap > .prose, .article .wrap > .sidebar { grid-column: 1; grid-row: auto; }
  .sidebar { position: static; }
}

/* Próza (szakmai-cikk.html:82) — az első bekezdés lede-ként */
/* A grid-bol jovo ~640px desktopon rendben van (75 karakter/sor), 900px alatt
   viszont egyoszlopos lesz a racs es a proza 673px-ig nyulik (82 karakter) -
   ezert kell a plafon. A kiemelt kep (.post-featured) szandekosan oszlopszeles
   marad: az nem szoveg, es a hero ala logo kompozicio a szeles kepre epul. */
.prose { min-width: 0; max-inline-size: var(--measure); }
.prose > * + * { margin-top: 20px; }
/* Lede (első bekezdés, ha a cikk bekezdéssel indul — H2-vel kezdődő cikknél nincs):
   kisebb, dőlt, arculati színnel, alsó elválasztóval. Nem kötelező minden cikknél. */
.prose > p:first-child { font-size: 19px; line-height: 1.6; font-style: italic; font-weight: 500; color: var(--blue-deep); font-family: var(--font-body); margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.prose > p:first-child strong { color: var(--blue-deep); }
.prose h2 { font-size: clamp(22px, 2.6vw, 29px); margin-top: 48px; }
.prose h3 { font-size: 20px; margin-top: 34px; }
.prose p { color: var(--ink-2); font-size: 17px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 14px 0 0; padding-left: 24px; display: grid; gap: 12px; }
.prose ul li { color: var(--ink-2); }
.prose ol { margin: 14px 0 0; padding-left: 24px; display: grid; gap: 12px; color: var(--ink-2); }
.prose figure { margin: 38px 0; }
/* Cikkbe ágyazott képek: alapból aránytartók; a négyzetnél magasabb (portré) képet a
   filter/JS .is-tall osztállyal jelöli → max 1:1 arány (desktopon és mobilon is). */
.prose img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.prose img.is-tall { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 14px; text-align: center; }
.prose blockquote { border-left: 3px solid transparent; border-image: var(--grad) 1; padding: 8px 0 8px 26px; margin: 38px 0; }
.prose blockquote p { font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--ink); }

/* Címkék + megosztás (szakmai-cikk.html:98) */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.tags a { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line); padding: 8px 14px; border-radius: 100px; }
.tags a:hover { border-color: var(--blue); color: var(--blue); }
.share { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.share span { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--muted); }
.share a { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); background: #fff; }
.share a:hover { color: #fff; background: var(--grad-ink); border-color: transparent; }
.share a svg { width: 19px; height: 19px; }

/* — Oldalsáv (szakmai-cikk.html:108) — */
.sidebar { position: sticky; top: 96px; display: grid; gap: 22px; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px; }
.side-h { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.author { text-align: center; }
.author .ph { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; box-shadow: var(--shadow-md); }
.author .ph img { width: 100%; height: 100%; object-fit: cover; }
.author h3 { font-size: 19px; }
.author .role { font-size: 14px; color: var(--teal-ink); font-family: var(--font-head); font-weight: 600; margin-top: 4px; }
.author p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-top: 14px; }

.svc-list { display: grid; gap: 10px; }
.svc-item { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line); background: #fff; transition: .18s ease; }
.svc-item:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.svc-item .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-ink); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px rgba(47,80,180,.22); }
.svc-item .ic svg { width: 20px; height: 20px; }
.svc-item .t { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; }
.svc-item .d { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.svc-item .arw { margin-left: auto; color: var(--muted); transition: .18s ease; }
.svc-item .arw svg { width: 17px; height: 17px; }
.svc-item:hover .arw { color: var(--blue); transform: translateX(2px); }
.svc-all { display: inline-flex; align-items: center; min-block-size: 44px; gap: 7px; margin-top: 18px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--blue); }
.svc-all:hover { gap: 11px; color: var(--blue-deep); }
.svc-all svg { width: 16px; height: 16px; }

.side-cta { background: var(--grad-ink); color: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.side-cta::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.side-cta > * { position: relative; z-index: 1; }
.side-cta .badge svg { width: 34px; height: 34px; margin-bottom: 14px; }
.side-cta h3 { color: #fff; font-size: 20px; line-height: 1.3; }
.side-cta p { color: rgba(255,255,255,.9); font-size: 14.5px; margin-top: 10px; line-height: 1.55; }
.side-cta .btn { margin-top: 20px; }

/* — Kapcsolódó cikkek (szakmai-cikk.html:148) — */
.related { background: var(--bg-alt); padding: var(--section-y) 0; position: relative; overflow: hidden; }
.related::before { content: ""; position: absolute; z-index: 0; border-radius: 50%; width: 460px; height: 460px; left: -180px; top: -160px; background: radial-gradient(circle, rgba(19,179,154,.12), transparent 70%); }
.related > .wrap { position: relative; z-index: 1; }
.related .head-center { margin-bottom: 48px; }
.rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* A .post kártya-komponens (borító, chip, meta) megosztott stílusai a base.css-ben élnek
   (a kapcsolódó-cikkek rácsa is onnan öröklődik) — itt nincs duplikátum. */

/* ==== Cikk-hero + a hero alá lógó kiemelt kép (I) ==== */
.article-hero { min-height: 520px; }
.article-hero .wrap { padding-bottom: 150px; } /* hely a lelógó kiemelt képnek (align-items:center) */

/* Kiemelt kép: a bal oszlop (prose szélesség) tetején a hero aljába lóg (-120px), ARÁNYTARTÓ
   (natúr arány), radius+shadow. Alatta „kis térköz" (margin-bottom), majd a cikk-próza. */
.post-featured { position: relative; z-index: 3; margin: -120px 0 clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-alt); }
.post-featured img { display: block; width: 100%; height: auto; }             /* aránytartó (natúr arány) */
.post-featured .cover-ph { display: block; width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(112deg, rgba(58,63,214,.16) 0%, rgba(47,104,200,.10) 48%, rgba(19,179,154,.16) 100%); }
/* A sticky widget RÖGTÖN a hero alatt indul, minimális réssel (nem a kép alatt). */
.sidebar { margin-top: clamp(20px, 3vw, 32px); }
@media (max-width: 900px) {
  .post-featured { margin-top: -60px; }
  /* Mobilon a rács 1 oszlop → a sidebar a cikk (share sáv) ALÁ kerül: kell fölé térköz
     (a rács sor-gapje 0, ezért itt margin-top adja a szeparációt). */
  .sidebar { margin-top: clamp(40px, 8vw, 56px); }
  .article-hero .wrap { padding-bottom: 90px; }
}

/* ==== Emoji → Lucide inline ikon (L) — a the_content-filter cseréli ==== */
.emoji-icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; color: var(--teal); }

/* ==== Önálló link → gomb + cél-leírás (M) — a the_content-filter alakítja ==== */
.prose .link-cta { text-align: left; margin: 32px 0 8px; }
.prose .link-cta .btn { max-width: 100%; }
.prose .link-cta-note { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin: 0 0 32px; font-size: 14px; color: var(--muted); }
.prose .link-cta-note svg { width: 15px; height: 15px; color: var(--teal-ink); flex: none; }
.prose .link-cta-note span { word-break: break-word; }

/* ==== Szerző-kártya mint link a /rolam/-ra (K) ==== */
a.author { display: block; text-decoration: none; color: inherit; transition: .18s ease; }
a.author:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.author-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--blue); }
.author-more svg { width: 15px; height: 15px; }
a.author:hover .author-more { gap: 9px; color: var(--blue-deep); }