/* ============================================================
   Plantora — közös stílus a tartalmi oldalakhoz (blog, cikk, növény- és probléma-katalógus,
   nyilvános kert, partner-felület, jogi oldalak). Minden oldal a SAJÁT <style>-ja UTÁN tölti be,
   így a régi változókat és összetevőket felülírja — a sablonok szerkezete változatlan marad.
   ============================================================ */
:root {
  --paper: #f4f0e6; --paper-2: #ebe5d6;
  --bg: #f4f0e6; --bg-image: none;
  --surface: #fffdf7; --surface-muted: #f1ece0; --card: #fffdf7; --card-bg: #fffdf7; --tile-bg: #f1ece0;
  --quote-bg: #eef4ea; --pre-bg: #efe9dc;
  --border: rgba(23, 36, 28, 0.10);
  --text: #17241c; --text-muted: #4b5b50; --text-faint: #84908a; --muted: #4b5b50;
  --heading: #1d3a28; --h-strong: #1d3a28; --h-medium: #2f6140; --heading-on-card: #1d3a28;
  --brand-50: #eef4ea; --brand-100: #dfeadb; --brand-200: #c3d9bf; --brand-300: #9cc29c; --brand-400: #6fa478;
  --brand-500: #4a8a5c; --brand-600: #3a744b; --brand-700: #2f6140; --brand-800: #234a31; --brand-900: #163222; --brand: #3a744b;
  --lime: #8db86b; --sun: #d9a441; --clay: #c47b55; --dew: #5f97aa;
  --primary-glow: rgba(141, 184, 107, 0.35);
  --nav-bg: rgba(255, 253, 247, 0.72);
  --card-shadow: 0 1px 1px rgba(36, 50, 30, 0.04), 0 12px 30px -16px rgba(36, 50, 30, 0.28);
  --card-shadow-hover: 0 2px 2px rgba(36, 50, 30, 0.04), 0 26px 50px -20px rgba(36, 50, 30, 0.38);
  --hero-gradient: none; --header-gradient: linear-gradient(160deg, #1d3a28, #2f6f45);
  --notice-bg: #eef4ea; --notice-border: rgba(23, 36, 28, 0.12); --notice-text: #234a31;
  --btn-bg: #1f3d2a; --btn-ink: #f4f0e6;
  --aurora-a: rgba(141, 184, 107, 0.28); --aurora-b: rgba(217, 164, 65, 0.14); --aurora-c: rgba(95, 151, 170, 0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
:root:root {
  --paper: #0b120e; --paper-2: #101a14;
  --bg: #0b120e; --bg-image: none;
  --surface: #131d17; --surface-muted: #1a261f; --card: #131d17; --card-bg: #131d17; --tile-bg: #1a261f;
  --quote-bg: rgba(143, 210, 160, 0.08); --pre-bg: #0f1813;
  --border: rgba(220, 255, 230, 0.09);
  --text: #e9f0e6; --text-muted: #a8b8ac; --text-faint: #6f8277; --muted: #a8b8ac;
  --heading: #d6eed9; --h-strong: #d6eed9; --h-medium: #a8dcb3; --heading-on-card: #d6eed9;
  --brand-50: #15241b; --brand-100: #1a2e21; --brand-200: #26432f; --brand-300: #4a7d58; --brand-400: #6aa77a;
  --brand-500: #7dbf8d; --brand-600: #8fd2a0; --brand-700: #a8dcb3; --brand-800: #c6e9cc; --brand-900: #e4f4e6; --brand: #8fd2a0;
  --lime: #b7e08f; --sun: #f0c56a; --clay: #e09a74; --dew: #8cc7d9;
  --primary-glow: rgba(143, 210, 160, 0.22);
  --nav-bg: rgba(19, 29, 23, 0.72);
  --card-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.85);
  --card-shadow-hover: 0 2px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -24px rgba(0, 0, 0, 0.9);
  --notice-bg: rgba(143, 210, 160, 0.08); --notice-border: rgba(143, 210, 160, 0.22); --notice-text: #c6e9cc;
  --btn-bg: #dff3d9; --btn-ink: #0b120e;
  --aurora-a: rgba(80, 170, 110, 0.18); --aurora-b: rgba(240, 197, 106, 0.06); --aurora-c: rgba(90, 160, 190, 0.11);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:root {
    --paper: #0b120e; --paper-2: #101a14;
    --bg: #0b120e; --bg-image: none;
    --surface: #131d17; --surface-muted: #1a261f; --card: #131d17; --card-bg: #131d17; --tile-bg: #1a261f;
    --quote-bg: rgba(143, 210, 160, 0.08); --pre-bg: #0f1813;
    --border: rgba(220, 255, 230, 0.09);
    --text: #e9f0e6; --text-muted: #a8b8ac; --text-faint: #6f8277; --muted: #a8b8ac;
    --heading: #d6eed9; --h-strong: #d6eed9; --h-medium: #a8dcb3; --heading-on-card: #d6eed9;
    --brand-50: #15241b; --brand-100: #1a2e21; --brand-200: #26432f; --brand-300: #4a7d58; --brand-400: #6aa77a;
    --brand-500: #7dbf8d; --brand-600: #8fd2a0; --brand-700: #a8dcb3; --brand-800: #c6e9cc; --brand-900: #e4f4e6; --brand: #8fd2a0;
    --lime: #b7e08f; --sun: #f0c56a; --clay: #e09a74; --dew: #8cc7d9;
    --primary-glow: rgba(143, 210, 160, 0.22);
    --nav-bg: rgba(19, 29, 23, 0.72);
    --card-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.85);
    --card-shadow-hover: 0 2px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -24px rgba(0, 0, 0, 0.9);
    --notice-bg: rgba(143, 210, 160, 0.08); --notice-border: rgba(143, 210, 160, 0.22); --notice-text: #c6e9cc;
    --btn-bg: #dff3d9; --btn-ink: #0b120e;
    --aurora-a: rgba(80, 170, 110, 0.18); --aurora-b: rgba(240, 197, 106, 0.06); --aurora-c: rgba(90, 160, 190, 0.11);
    color-scheme: dark;
  }
}

/* Alap + élő háttér */
html, body { font-family: var(--sans); background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { background-image: none; position: relative; isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32vmax 32vmax at 15% 18%, var(--aurora-a), transparent 70%),
    radial-gradient(28vmax 28vmax at 85% 28%, var(--aurora-b), transparent 70%),
    radial-gradient(36vmax 36vmax at 55% 88%, var(--aurora-c), transparent 70%);
  filter: blur(20px); animation: siteAurora 32s ease-in-out infinite alternate;
}
@keyframes siteAurora { 50% { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.06); } 100% { transform: translate3d(-3vmax, 4vmax, 0) rotate(-6deg) scale(0.97); } }
::selection { background: var(--lime); color: #10200f; }
a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }
:root:root a, :root:root a:hover { color: var(--brand-700); }

/* Menüsáv: lebegő üveg-pirula */
.nav { position: sticky; top: 12px; z-index: 50; background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 14px !important; margin-top: 12px; box-shadow: none !important; }
.nav-inner { background: var(--nav-bg); border: 1px solid var(--border); border-radius: 999px; padding: 8px 8px 8px 18px; box-shadow: var(--card-shadow);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); max-width: 1100px; gap: 12px; }
.logo { font-family: var(--serif) !important; font-weight: 560 !important; font-size: 21px !important; letter-spacing: -0.02em; color: var(--heading) !important; display: inline-flex !important; align-items: center; gap: 9px;
  font-variation-settings: 'SOFT' 100, 'opsz' 36; text-decoration: none; }
.site-mark { width: 26px; height: 26px; flex-shrink: 0; display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232f6f45'/%3E%3Cstop offset='1' stop-color='%238db86b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 27C5 14 13 5 28 4c0 14-8 23-23 23z' fill='url(%23g)'/%3E%3Cpath d='M6 26C11 19 16 14 22 10' stroke='%23fff' stroke-opacity='.75' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.logo-tag { font-family: var(--sans); font-size: 12px !important; font-weight: 500 !important; color: var(--text-faint) !important; letter-spacing: 0 !important; }
@media (max-width: 560px) { .logo-tag { display: none; } }

/* Gombok */
.btn, .btn-primary, .btn-home, .cta-box a.btn, a.cta, .cta a {
  background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 600; letter-spacing: -0.005em; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px -12px rgba(20, 50, 30, 0.7) !important;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease) !important;
}
.btn:hover, .btn-primary:hover, .btn-home:hover, a.cta:hover, .cta a:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 30px -12px rgba(20, 50, 30, 0.7), 0 0 0 5px var(--primary-glow) !important; }
.nav .btn, .nav .btn-primary, .nav .btn-home { padding: 10px 18px !important; font-size: 14px !important; }

/* Címek */
h1, h2, h3 { font-family: var(--serif); font-variation-settings: 'SOFT' 100, 'opsz' 72; }
h1, .page-title, .article-title, .hero h1, .problem-hero h1 {
  font-weight: 420 !important; letter-spacing: -0.035em !important; line-height: 1.04 !important; color: var(--heading) !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; text-wrap: balance;
}
h1, .hero h1, .page-title, .article-title { font-size: clamp(36px, 5.6vw, 64px) !important; }
h2 { font-weight: 470 !important; letter-spacing: -0.025em !important; color: var(--heading) !important; }
h3 { font-weight: 520 !important; letter-spacing: -0.015em; }
.hero p, .subtitle, .page-intro, .page-scientific, .problems-intro { color: var(--text-muted); }
.page-scientific, .problem-sci, .sci, .alt-names { font-family: var(--serif); font-style: italic; }
.container { padding-top: clamp(40px, 7vw, 80px) !important; }

/* Kártyák */
.post-card, .plant-card, .problem-card, .related-card, .card, .stat-card, .stat-item, .section, .faq-item, .footer-cta,
.tips-box, .cta-box, .partner-card, .empty-state, .pager, .toc, .intro-block, .quick-stats, .photo-tile, .comments-box {
  background: var(--surface); border: 1px solid var(--border) !important; border-radius: 26px; box-shadow: var(--card-shadow) !important;
}
.post-card, .plant-card, .problem-card, .related-card, .partner-card { overflow: hidden; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), border-color 300ms !important; }
.post-card:hover, .plant-card:not(.g3d-card):hover, .problem-card:not(.g3d-card):hover, .related-card:not(.g3d-card):hover, .partner-card:hover { transform: translateY(-5px) !important; box-shadow: var(--card-shadow-hover) !important; }
.post-card img, .plant-card img, .problem-card img, .related-card img, .plant-thumb, .problem-thumb, .related-thumb, .post-card-image, .problem-card-img, .plant-card-image { transition: transform 900ms var(--ease) !important; }
.post-card:hover img, .plant-card:hover img, .problem-card:hover img, .related-card:hover img,
.post-card:hover .post-card-image, .plant-card:hover .plant-thumb, .problem-card:hover .problem-thumb, .related-card:hover .related-thumb { transform: scale(1.05); }
.post-title, .cat-name, .related-body h3, .problem-body h3, .problem-card-body h3, .plant-card h3 { font-family: var(--serif); font-weight: 500 !important; letter-spacing: -0.02em; color: var(--heading) !important; }
.post-title { font-size: clamp(22px, 2.6vw, 30px) !important; line-height: 1.12 !important; }
.post-date { letter-spacing: 0.1em !important; font-size: 12px !important; }
.post-more { font-weight: 600; }
.post-more::after { content: ''; display: inline-block; }
.footer-cta { padding: clamp(32px, 6vw, 56px) !important; border-radius: 32px !important; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--lime) 22%, transparent), transparent 60%), var(--surface) !important; }
.footer-cta h2 { font-size: clamp(28px, 3.6vw, 40px) !important; }
.hero-image, .hero-figure img { border-radius: 28px !important; box-shadow: var(--card-shadow-hover); }
.type-badge, .host-tag, .urgency-pill, .logo-tag-pill { border-radius: 999px !important; }
.host-tag { background: var(--surface-muted) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.treatment-organic, .treatment-chemical { border-radius: 20px !important; border: 1px solid var(--border) !important; }
.lang-fallback-notice { border-radius: 18px !important; }

/* Cikk-tipográfia */
.article-body { font-size: 18px; line-height: 1.75; }
.article-body h2 { font-size: clamp(26px, 3vw, 34px) !important; margin-top: 1.8em !important; }
.article-body img { border-radius: 22px; }
.article-body blockquote { border-left: 3px solid var(--lime) !important; background: var(--quote-bg) !important; border-radius: 0 18px 18px 0; font-family: var(--serif); font-style: italic; }
.article-meta, .updated { color: var(--text-faint); }
.back-link, .breadcrumb a { color: var(--text-muted) !important; }

/* Mezők */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select, .search, .content-input {
  border-radius: 16px !important; border: 1px solid var(--border) !important; background: var(--surface-muted) !important; color: var(--text) !important;
}
input:focus, textarea:focus, select:focus, .search:focus { outline: none; border-color: var(--brand-500) !important; box-shadow: 0 0 0 4px var(--primary-glow) !important; }

/* Lábléc */
.footer-links, footer { color: var(--text-faint); }
.footer-links a, footer a { color: var(--text-muted) !important; }
.footer-links a:hover, footer a:hover { color: var(--heading) !important; }

/* Görgetésre beúszó kártyák (ahol a böngésző tudja; máshol egyszerűen látszanak) */
@supports (animation-timeline: view()) {
  .post-card, .plant-card, .problem-card, .related-card, .faq-item, .footer-cta, .stat-item, .section, .partner-card {
    animation: siteReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
  }
  @keyframes siteReveal { from { opacity: 0; transform: translateY(30px) scale(0.985); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .post-card, .plant-card, .problem-card, .related-card, .faq-item, .footer-cta, .stat-item, .section, .partner-card { animation: none !important; }
}

/* ============================================================
   3D körhinta (gallery3d.js)
   ============================================================ */
.g3d { position: relative; margin: 8px 0 34px; width: 100vw; left: 50%; margin-left: -50vw; padding: 0 max(16px, calc(50vw - 560px)); overflow: clip; overflow-clip-margin: 40px; }
html, body { overflow-x: clip; }
.g3d-bar { display: flex; justify-content: flex-end; gap: 6px; position: absolute; top: 0; right: max(16px, calc(50vw - 560px)); z-index: 3; }
.g3d-off .g3d-bar { position: static; margin-bottom: 10px; padding: 0; }
html[dir="rtl"] .g3d-bar { right: auto; left: max(16px, calc(50vw - 560px)); }
.g3d-mode { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: all 250ms var(--ease); }
.g3d-mode svg { width: 18px; height: 18px; }
.g3d-mode.on { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.g3d-off .g3d-stage, .g3d-off .g3d-ctrl { display: none; }
.g3d-stage { position: relative; height: 520px; cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }

.g3d-stage.grab { cursor: grabbing; }
.g3d-stage:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 8px; border-radius: 28px; }
.g3d-ring { position: absolute; left: 50%; top: 300px; width: 0; height: 0; transform-style: preserve-3d; }
.g3d-floor { position: absolute; left: 12%; right: 12%; bottom: 0; height: 55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 70%);
  filter: blur(6px); opacity: 0.7; }
.g3d-card {
  position: absolute !important; left: 0; top: 0; width: var(--cw, 260px) !important; height: var(--ch, 280px) !important; margin: calc(var(--ch, 280px) / -2) 0 0 calc(var(--cw, 260px) / -2) !important;
  backface-visibility: visible; -webkit-backface-visibility: visible; animation: none !important;
  transition: box-shadow 400ms var(--ease) !important; will-change: transform, opacity;
  border-radius: 24px !important; overflow: hidden; display: flex !important; flex-direction: column;
}
.g3d-card.g3d-front { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--lime) 45%, transparent), 0 0 60px -10px var(--primary-glow) !important; }
.g3d-card img, .g3d-card .problem-thumb, .g3d-card .related-thumb, .g3d-card .plant-thumb { width: 100% !important; height: calc(var(--cw, 260px) * 0.78) !important; flex-shrink: 0; object-fit: cover; display: block; pointer-events: none; }
.g3d-card.g3d-front img { transform: scale(1.04); }
.g3d-cat .g3d-card { justify-content: flex-end; padding: 20px !important;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--lime) 26%, transparent), transparent 62%), var(--surface) !important; }
.g3d-cat .g3d-card .cat-icon { font-size: calc(var(--cw, 200px) * 0.26) !important; line-height: 1; margin-bottom: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3)); transition: transform 600ms var(--ease); }
.g3d-cat .g3d-card.g3d-front .cat-icon { transform: translateY(-4px) scale(1.08) rotate(-4deg); }
.g3d-cat .g3d-card .cat-name { font-family: var(--serif); font-size: calc(var(--cw, 200px) * 0.1) !important; font-weight: 480 !important; letter-spacing: -0.02em; line-height: 1.1; }
.g3d-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; position: relative; z-index: 2; }
.g3d-nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--card-shadow); transition: transform 300ms var(--ease), background 250ms; }
.g3d-nav svg { width: 22px; height: 22px; }
.g3d-nav:hover { transform: scale(1.08); background: var(--btn-bg); color: var(--btn-ink); }
.g3d-count { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 14px; min-width: 64px; text-align: center; }
.g3d-count b { font-family: var(--serif); font-size: 22px; color: var(--heading); font-weight: 480; }
.g3d-in .g3d-stage { animation: g3dIn 1400ms var(--ease) both; }
@keyframes g3dIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Részletoldalak (növény, probléma, cikk)
   ============================================================ */
.page-header { margin-bottom: 26px; }
.page-header h1, .page-title { margin: 14px 0 10px !important; }
.page-intro { font-size: clamp(17px, 1.8vw, 20px) !important; line-height: 1.6 !important; max-width: 68ch; }
.breadcrumb { font-size: 13.5px; color: var(--text-faint); }
.hero-figure, .problem-hero { position: relative; border-radius: 30px; overflow: hidden; margin: 10px 0 28px !important; box-shadow: var(--card-shadow-hover); }
.hero-figure img, .hero-image, .problem-hero img { width: 100%; display: block; border-radius: 0 !important; box-shadow: none !important; transform-origin: center; }
@supports (animation-timeline: view()) {
  .hero-figure img, .problem-hero img { animation: heroParallax linear both; animation-timeline: view(); }
  @keyframes heroParallax { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
}
.hero-attribution { font-size: 11.5px; color: var(--text-faint); padding: 8px 4px 0; }
.quick-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px !important; padding: 10px !important; margin-bottom: 26px; }
.stat-item { border-radius: 20px !important; padding: 16px !important; box-shadow: none !important; background: var(--surface-muted) !important; }
.stat-icon { font-size: 24px; }
.stat-value { font-family: var(--serif); font-size: 20px !important; color: var(--heading) !important; font-weight: 480 !important; }
.stat-label { font-size: 11.5px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint) !important; }
.section, .intro-block, .tips-box, .faq-section { padding: clamp(22px, 3vw, 32px) !important; margin-bottom: 18px !important; }
.section h2, .faq-section h2, .problems-section h2, .related-section h2 { font-size: clamp(24px, 2.6vw, 32px) !important; margin-bottom: 14px !important; }
.section p, .intro-block p { font-size: 16.5px; line-height: 1.7; color: var(--text); }
.tips-box { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--sun) 16%, transparent), transparent 60%), var(--surface) !important; }
.faq-item { padding: 18px 22px !important; margin-bottom: 10px; box-shadow: none !important; background: var(--surface-muted) !important; }
.faq-item summary, .faq-item h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; cursor: pointer; color: var(--heading); }
.treatment-organic, .treatment-chemical { padding: 18px 20px !important; margin-top: 12px; background: var(--surface-muted) !important; }
.treatment-organic { border-left: 3px solid var(--lime) !important; }
.treatment-chemical { border-left: 3px solid var(--sun) !important; }
.treatment-label { font-weight: 650; margin-bottom: 6px; }
.cta-box, .footer-cta { text-align: center; padding: clamp(32px, 6vw, 56px) !important; border-radius: 32px !important;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--lime) 22%, transparent), transparent 60%), var(--surface) !important; margin: 30px 0 !important; }
.cta-box h2 { font-size: clamp(28px, 3.6vw, 40px) !important; }
.type-badge { color: #fff; padding: 5px 12px; font-size: 12.5px; font-weight: 650; }

.g3d-card .problem-card-body, .g3d-card .related-body, .g3d-card .problem-body { padding: 10px 12px !important; min-width: 0; }
.g3d-card h3, .g3d-card .problem-card-body h3, .g3d-card .related-body h3 { font-size: clamp(12.5px, calc(var(--cw, 200px) * 0.075), 17px) !important; line-height: 1.2 !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g3d-card .small, .g3d-card .problem-sci, .g3d-card i { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

@media (max-width: 640px) { .g3d-bar { position: static; padding: 0 0 4px; } }

/* Kis csoportok: coverflow-sáv (gallery3d.js → .g3d-rail) */
.g3d-rail {
  display: flex !important; grid-template-columns: none !important; gap: 16px !important; overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scroll-padding-inline: 50%; padding: 18px calc(50% - min(37vw, 150px)) 26px !important;
  margin-inline: -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.g3d-rail::-webkit-scrollbar { display: none; }
.g3d-rail > a { flex: 0 0 min(74vw, 300px) !important; scroll-snap-align: center; transform-origin: center; transition: box-shadow 400ms var(--ease) !important; animation: none !important; will-change: transform; }
.g3d-rail > a.g3d-front { box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--lime) 40%, transparent) !important; }
.g3d-rail > a img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (min-width: 900px) {
  /* széles képernyőn a kevés csempe elfér: középre igazított sor, enyhe 3D-hajlással */
  .g3d-rail { justify-content: center; overflow: visible; padding: 18px 0 26px !important; margin-inline: 0; mask-image: none; scroll-snap-type: none; }
  .g3d-rail > a { flex: 0 1 260px !important; }
}

/* Villanásmentes indulás: a 3D-re váró rácsok rejtve, amíg a gallery3d.js el nem készül */
html:not(.g3d-ready) :is(.cat-grid, .problem-grid, .related-grid, .problems-grid) { opacity: 0; animation: g3dFailSafe 0s linear 1.2s forwards; }
@keyframes g3dFailSafe { to { opacity: 1; } }
.g3d-ready :is(.cat-grid, .problem-grid, .related-grid, .problems-grid, .g3d) { animation: g3dFade 500ms var(--ease) both; }
@keyframes g3dFade { from { opacity: 0; } to { opacity: 1; } }

/* Élő háttér (scene-bg.mjs): esőerdő / üvegház a tartalom mögött, olvashatósági fátyollal */
.pl-scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1400ms var(--ease); }
.pl-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1400ms var(--ease);
  background: radial-gradient(ellipse 62% 78% at 50% 42%, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 48%, transparent) 55%, color-mix(in srgb, var(--bg) 14%, transparent) 100%); }
.pl-scrim.gh { background: radial-gradient(ellipse 58% 82% at 50% 45%, color-mix(in srgb, var(--bg) 80%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, color-mix(in srgb, var(--bg) 18%, transparent) 100%); }
html.has-scene .pl-scene, html.has-scene .pl-scrim { opacity: 1; }
html.has-scene body::before { display: none; }
html.has-scene .footer-links, html.has-scene footer { text-shadow: 0 1px 8px var(--bg); }