/* Blog article page CSS — pulled from pelda-cikk.html inline styles */

body.is-loading { overflow: hidden; }
.page-loader {
  position: fixed; inset: 0; background: #0a0a0a; display: flex;
  align-items: center; justify-content: center; z-index: 99999;
  transition: opacity 400ms ease;
}

:root { --site-px: clamp(1.6rem, 5.4vw, 8rem); }
@media (min-width: 1280px) { :root { --site-px: 8rem; } }
.wrap { padding-inline: var(--site-px); }

/* Nav — same as case study CSS */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  display: flex; align-items: center; z-index: 200;
  transition: background 300ms ease, box-shadow 300ms ease;
}
.nav.nav--scrolled { background: #fff; box-shadow: 0 1px 0 #e5e5e5; }
.nav-inner { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-logo { display: flex; }
.nav-logo-img { height: 22px; }
.nav-logo-light { display: block; }
.nav-logo-dark  { display: none; }
.nav--scrolled .nav-logo-light { display: none; }
.nav--scrolled .nav-logo-dark  { display: block; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); justify-content: center; }
.nav-link { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; background: none; border: none; cursor: pointer; transition: color 200ms; }
.nav--scrolled .nav-link { color: rgba(10,10,10,0.75); }
.nav-link:hover { color: #0a0a0a; }
.nav-cta-wrap { display: flex; justify-content: flex-end; }
.nav-cta { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 1.25rem; background: #0a0a0a; color: #fff; border-radius: 9999px; text-decoration: none; }
.nav-item-mega { position: relative; }
.nav-link-mega { display: flex; align-items: center; gap: 5px; }

/* ─── ARTICLE STYLES (art- prefix) ───────────────────────────────────────── */
.art-hero {
  background: #fff; color: #0a0a0a;
  border-bottom: 1px solid #e5e5e5;
  padding-top: 72px; padding-bottom: 3rem;
  min-height: 52vh; display: flex; align-items: flex-end;
}
.art-hero-inner { padding-block: 3rem 0; }
.art-back { font-size: 13px; color: rgba(10,10,10,0.6); text-decoration: none; display: inline-block; margin-bottom: 2rem; transition: color 200ms; }
.art-back:hover { color: #0a0a0a; }
.art-meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.art-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: #0a0a0a; background: rgba(10,10,10,0.06); padding: 3px 10px; border-radius: 9999px; }
.art-date, .art-reading-time { font-size: 13px; color: rgba(10,10,10,0.6); }
.art-title { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 1.25rem; }
.art-desc { font-size: 1.125rem; color: rgba(10,10,10,0.65); line-height: 1.6; max-width: 600px; }

/* Nav must render in dark-on-white mode from load, since this hero is white (not the usual dark hero) */
.nav { background: #fff; box-shadow: 0 1px 0 #e5e5e5; }
.nav-logo-light { display: none; }
.nav-logo-dark { display: block; }
.nav-link { color: rgba(10,10,10,0.75); }

.art-hero-img-wrap { padding-inline: var(--site-px); }
.art-hero-img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; }

/* A `.wrap` oldalhézaga (asztali nézetben 2 x 8rem) a border-box miatt
   BELEFÉR ebbe a max-width-be, tehát a 720px-ből csak 464px maradt magának
   a szövegnek — ezért hatott ilyen keskenynek a cikk. Az új érték a
   szöveghasábot a duplájára viszi: 1184 - 256 = 928px. */
.art-body {
  max-width: 1184px;
  padding-block: 5rem;
}
.art-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 3rem 0 1rem; }
.art-body p { font-size: 1.0625rem; line-height: 1.75; color: #404040; margin-bottom: 1.5em; }
.art-lead { font-size: 1.25rem; font-weight: 300; line-height: 1.65; color: #0a0a0a; margin-bottom: 2.5rem; }
.art-pull-quote {
  border-left: 3px solid #0a0a0a; margin: 2.5rem 0; padding: 1rem 0 1rem 1.5rem;
}
.art-pull-quote p { font-size: 1.25rem; font-style: italic; font-weight: 300; line-height: 1.55; color: #0a0a0a; margin: 0 0 0.5rem; }
.art-pull-quote cite { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray-400); font-style: normal; }
.art-inline-img { margin: 2rem 0; }
.art-inline-img img { width: 100%; border-radius: 4px; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e5e5; }
.art-tag-pill { font-size: 12px; font-weight: 500; border: 1px solid #e5e5e5; border-radius: 9999px; padding: 4px 12px; color: #525252; }

.art-foot { display: flex; justify-content: space-between; align-items: center; padding-block: 1.5rem; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-bottom: 4rem; max-width: 1184px; }
.art-author { font-size: 13px; color: #737373; }
.art-share { display: flex; gap: 1rem; }
.art-share-link { font-size: 13px; color: #737373; text-decoration: none; transition: color 200ms; }
.art-share-link:hover { color: #0a0a0a; }

.art-next { display: flex; justify-content: space-between; padding-block: 2rem; border-top: 1px solid #e5e5e5; margin-bottom: 6rem; }
.art-next a { font-size: 14px; font-weight: 500; color: #0a0a0a; text-decoration: none; transition: opacity 200ms; }
.art-next a:hover { opacity: 0.6; }

/* ─── CTA (short variant) ─────────────────────────────────────────────────── */
.cta-section {
  position: relative; background: #0a0a0a; display: flex;
  align-items: center; justify-content: center;
}
.cta-inner { text-align: center; color: #fff; position: relative; z-index: 1; }
.cta-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; margin-bottom: 1rem; }
.cta-title { font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 1rem; }
.cta-sub { font-size: 1rem; opacity: 0.65; margin-bottom: 2rem; max-width: 480px; margin-inline: auto; }
.cta-btn { display: inline-block; background: #fff; color: #0a0a0a; border-radius: 9999px; padding: 0.75rem 2rem; font-weight: 600; font-size: 14px; text-decoration: none; transition: background 200ms; }
.cta-btn:hover { background: #f5f5f5; }

/* A lábléc a shared.css-ből jön.
   Itt korábban a teljes lábléc duplikálva állt, beégetett, sötétebb
   színekkel (#525252 / #737373 / #a3a3a3) a tokenek helyett. Mivel ez a
   fájl a shared.css UTÁN töltődik, a másolat nyert: a cikkoldalak
   láblécében a szöveg 2,53:1 kontrasztot adott a többi oldal 7,57:1-e
   helyett — WCAG AA alatt, és láthatóan más is. A navigációnál ugyanez a
   duplikáció okozta korábban a megamenü hibáját.

   A nav duplikációja SZÁNDÉKOSAN marad: a cikkoldal világos hero-ja miatt
   a fejléc már betöltéskor világos, ezt a shared.css nem tudja. */