/* Blog (SEO cél) — lista és cikk oldalak stílusa.
   A design tokenek (:root, .section-shell, .button--primary, .section-kicker, .ambient,
   .site-header, .sign-in stb.) a styles.css-ből öröklődnek — ez a fájl csak a blognak
   specifikus osztályokat definiálja, a job.css mintájára. */

.blog-shell { padding: 64px 0 100px; }
.blog-shell--post { padding-top: 48px; }

.blog-hero { max-width: 640px; margin: 0 0 48px; }
.blog-hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.055em; margin: 0 0 14px; }
.blog-hero p { color: #b4b0ba; font-size: 1.05rem; line-height: 1.6; margin: 0; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.blog-empty { color: #8a8694; padding: 40px 0; }

.blog-card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.085); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016)); overflow: hidden; transition: border-color .25s, transform .25s; }
.blog-card:hover { border-color: rgba(167,139,250,.4); transform: translateY(-2px); }
.blog-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #15151c; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__date { color: #8a8694; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.blog-card__body h2 { font-family: var(--display); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.03em; margin: 0; }
.blog-card__body h2 a { color: #f7f5fb; transition: color .2s; }
.blog-card__body h2 a:hover { color: #c4b5fd; }
.blog-card__excerpt { color: #a8a4b0; font-size: .92rem; line-height: 1.6; margin: 0; flex: 1; }
.blog-card__link { align-self: flex-start; color: #a98bff; font-size: .85rem; font-weight: 650; margin-top: 4px; transition: color .2s; }
.blog-card__link:hover { color: #fff; }

/* ---------- Cikk oldal ---------- */
.blog-post { width: min(760px, 100%); margin: 0 auto; }
.blog-post__header { margin-bottom: 34px; }
.blog-post__back { display: inline-flex; align-items: center; gap: 6px; color: #9b98a6; font-size: .85rem; margin-bottom: 22px; transition: color .2s; }
.blog-post__back:hover { color: #fff; }
.blog-post__header h1 { font-family: var(--display); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.05em; margin: 10px 0 14px; }
.blog-post__date { color: #8a8694; font-size: .85rem; margin: 0; }
.blog-post__cover { width: 100%; border-radius: 22px; margin-bottom: 40px; display: block; object-fit: cover; max-height: 460px; }

.blog-post__content { color: #b4b0ba; font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.85; overflow-wrap: anywhere; }
.blog-post__content > * + * { margin-top: 1.35em; }
.blog-post__content h1, .blog-post__content h2, .blog-post__content h3,
.blog-post__content h4, .blog-post__content h5, .blog-post__content h6 {
  font-family: var(--display); color: #f7f5fb; letter-spacing: -.03em; line-height: 1.25; margin-top: 1.7em;
}
.blog-post__content h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
.blog-post__content h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.blog-post__content a { color: #a98bff; text-decoration: underline; text-decoration-color: rgba(167,139,250,.4); text-underline-offset: 3px; transition: color .2s; }
.blog-post__content a:hover { color: #fff; }
.blog-post__content strong { color: #eae7f0; font-weight: 700; }
.blog-post__content img { width: 100%; border-radius: 16px; display: block; }
.blog-post__content ul, .blog-post__content ol { padding-left: 1.3em; margin: 0; }
.blog-post__content li + li { margin-top: .5em; }
.blog-post__content blockquote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid rgba(167,139,250,.5); color: #cfcbd8; font-style: italic; }
.blog-post__content blockquote p { margin: 0; }
.blog-post__content pre { background: #101015; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 18px 20px; overflow-x: auto; }
.blog-post__content code { font-family: ui-monospace, monospace; font-size: .88em; }
.blog-post__content p code { background: rgba(255,255,255,.07); padding: .15em .4em; border-radius: 5px; }
.blog-post__content hr { border: none; border-top: 1px solid rgba(255,255,255,.09); margin: 2.4em 0; }

/* Egységes "brand signature" blokk minden cikk alján — nem CTA-gomb, hanem egy
   visszatérő, márka-hangnemű záró mondat, amit minden cikknél ugyanúgy látni. */
.blog-post__signature { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.08); }
.blog-post__signature p { color: #a8a4b0; font-size: .98rem; font-style: italic; line-height: 1.7; margin: 0; max-width: 620px; }
.blog-post__signature a { color: #c4b5fd; font-style: normal; font-weight: 650; text-decoration: none; transition: color .2s; }
.blog-post__signature a:hover { color: #fff; }

.blog-not-found { max-width: 560px; padding: 60px 0; }
.blog-not-found h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.045em; margin: 10px 0 16px; }
.blog-not-found p { color: #a8a4b0; margin: 0 0 26px; line-height: 1.6; }

@media (max-width: 760px) {
  .blog-shell { padding: 44px 0 70px; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-post__cover { max-height: 260px; border-radius: 16px; }
}