:root {
  --gold: #e4c87b;
  --bg-dark: #090a0e;
}

body {
  margin: 0;
  background: var(--bg-dark);
  color: #fff;
  font-family: 'Cinzel', serif;
  overflow-x: hidden; /* Horizontal scroll megelőzése minden eszközön */
  width: 100%;
  max-width: 100vw; /* Biztosítja, hogy ne legyen túl széles */
}

/* ===== HERO alsó keret / lezáró maszk ===== */
.hero{
  position: relative;         /* kell a pszeudo-elemhez */
  isolation: isolate;         /* a maszk z-indexe biztosan működjön */
  z-index: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: visible;      /* hadd lóghasson kicsit túl az overlay */
  padding-bottom: 10rem;  /* adunk egy extra "légteret" alul */

  /* háttér rétegek: nap, sárkány, kastély, majd az ég */
  background:
    url("../images/sun.png") no-repeat,
    url("../images/dragon.png") no-repeat,
    url("../images/castle.jpg") no-repeat,
    linear-gradient(to bottom, #0d0e15 0%, #090a0e 60%, #06070a 100%);
  background-position:
    8% 12%,    /* nap */
    80% 30%,   /* sárkány */
    20% 85%,   /* kastély */
    center;
  background-size:
    380px,
    min(55vw, 760px),
    600px,
    cover;
  background-blend-mode: normal;
  animation: fadeHero 1.2s ease-in-out;
}

@keyframes fadeHero { from{opacity:0;transform:scale(1.02)} to{opacity:1;transform:scale(1)} }

@keyframes fadeHero {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* HERO: alul finom sötét fade-out, hogy a papirusz tetejét takarja - vékonyabb, lágyabb */
.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;  /* Kicsit rövidebb, hogy ne legyen túl vastag */
  height: 120px;   /* Vékonyabb sáv */

  /* Lágyabb gradiens - kevésbé éles átmenet */
  background: linear-gradient(
    to bottom,
    #050308 0%,
    rgba(5, 3, 8, 0.75) 40%,
    rgba(5, 3, 8, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* minden, ami a hero-ban van és látszódnia kell (brand kártya, pecsét, stb.)
   legyen a maszk fölött */
.hero .hero-overlay,
.hero .hero__overlay,
.hero .brand-card,
.hero .seal{
  position: relative;
  z-index: 2;
}

/* ===== MOBIL RESZPONZÍV DESIGN ===== */

/* Tablet breakpoint (1024px) - már létező szabályok megtartása */
@media (max-width: 1024px) {
  /* Hero háttér pozíció már definiálva fentebb */
}

/* Mobil breakpoint (600px) - hero optimalizálás */
@media (max-width: 600px) {
  /* Hero section mobilra - csökkentett padding és overflow megelőzése */
  .hero {
    padding-bottom: 6rem;
    overflow-x: hidden; /* Horizontal scroll megelőzése */
    min-height: 100vh;
  }

  /* Hero fade-out mobilra - rövidebb */
  .hero::after {
    bottom: -80px;
    height: 80px;
  }

  /* Brand card mobilra - kisebb padding, jobb méretek */
  .brand-card {
    padding: 2rem 1.5rem;
    max-width: 90%;
    margin: 0 auto;
  }

  /* Brand card cím mobilra */
  .brand-card h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    margin: 0 0 0.4rem;
  }

  /* Subtitle mobilra */
  .subtitle {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  /* Logo container mobilra */
  .logo-container {
    width: clamp(60px, 15vw, 100px);
    height: clamp(60px, 15vw, 100px);
    margin: 0 auto 1rem;
  }

  /* Seal mobilra - kisebb */
  .seal img {
    width: 150px;
  }
}

.hero__overlay {
  position: relative;
  z-index: 5;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.brand-card {
  background: rgba(20, 18, 26, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 40px 6px rgba(255,200,80,.15);
  backdrop-filter: blur(6px);
  max-width: 720px;
  margin: 0 auto;
}

/* Logo container with sparks */
.logo-container {
  position: relative;
  display: inline-block;
  margin: 0 auto 1.5rem;
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
}

.sparks-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 6px #ffd700,
    0 0 12px #ff8c00,
    0 0 18px rgba(255, 215, 0, 0.5);
  animation: sparkOrbit 3s linear infinite;
}

.spark-1 {
  top: 0;
  left: 50%;
  animation-delay: 0s;
  animation-duration: 3s;
}

.spark-2 {
  top: 15%;
  right: 15%;
  animation-delay: 0.375s;
  animation-duration: 3.2s;
}

.spark-3 {
  top: 50%;
  right: 0;
  animation-delay: 0.75s;
  animation-duration: 2.8s;
}

.spark-4 {
  bottom: 15%;
  right: 15%;
  animation-delay: 1.125s;
  animation-duration: 3.1s;
}

.spark-5 {
  bottom: 0;
  left: 50%;
  animation-delay: 1.5s;
  animation-duration: 2.9s;
}

.spark-6 {
  bottom: 15%;
  left: 15%;
  animation-delay: 1.875s;
  animation-duration: 3.3s;
}

.spark-7 {
  top: 50%;
  left: 0;
  animation-delay: 2.25s;
  animation-duration: 2.7s;
}

.spark-8 {
  top: 15%;
  left: 15%;
  animation-delay: 2.625s;
  animation-duration: 3s;
}

@keyframes sparkOrbit {
  0% {
    transform: rotate(0deg) translateX(clamp(50px, 7vw, 90px)) rotate(0deg);
    opacity: 1;
    transform-origin: center;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
    transform: rotate(180deg) translateX(clamp(50px, 7vw, 90px)) rotate(-180deg);
  }
  75% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) translateX(clamp(50px, 7vw, 90px)) rotate(-360deg);
    opacity: 1;
  }
}

/* Additional spark trail effect */
.spark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: sparkTrail 3s linear infinite;
}

@keyframes sparkTrail {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.brand-logo {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255,200,100,0.6));
  animation: logoVibrant 3s ease-in-out infinite;
}

@keyframes logoVibrant {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(255,200,100,0.6)) 
            drop-shadow(0 0 40px rgba(255,150,50,0.4))
            brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 30px rgba(255,220,120,0.8)) 
            drop-shadow(0 0 60px rgba(255,180,80,0.6))
            brightness(1.15);
  }
}

.brand-logo::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255,200,100,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: logoAura 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes logoAura {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.brand-card h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,200,100,0.3);
}

.subtitle {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  opacity: 0.9;
}

.seal {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

/* pecsét arany ragyogással, ha még nem átlátszó teljesen, screen keveréssel is szép */
.seal img{
  display:block;
  width:230px;
  margin:2rem auto 0;
  filter: drop-shadow(0 0 22px rgba(255,180,60,.6));
  mix-blend-mode: screen;
  animation: pulse 3.5s infinite ease-in-out;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.88}}

@media (max-width:1024px){
  .hero{
    background-position: 14% 12%, 85% 38%, 18% 82%, center;
    background-size: 260px, min(68vw,560px), 420px, cover;
  }
}

@media (max-width:768px){
  .hero{
    background-position: 50% 10%, 50% 30%, 50% 55%, center;
    background-size: 220px, 95vw, 80vw, cover;
  }
}

@media (max-width:576px){
  .hero{
    background-position: 50% 8%, 50% 32%, 50% 70%, center;
    background-size: 180px, 100vw, 90vw, cover;
  }
}

/* ===== Layered hero (sun, dragon, castle) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #0b0c10 0%, #0a0a0f 100%);
  overflow: hidden;
}

/* ===== Global page background (full svg) ===== */
body{
  background:
    url("../images/background.svg") center / cover no-repeat fixed,
    linear-gradient(to bottom, #0d0e15 0%, #090a0e 60%, #06070a 100%);
  min-height: 100vh;
}

/* ===== Hero top overlay from svg ===== */
.hero{
  position: relative;
  isolation: isolate; /* ensure overlay compositing is scoped */
}

/* paint-like svg overlay over the hero, under the content but above body bg */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/background.svg") left top / cover no-repeat;
  mix-blend-mode: screen;          /* soft light on dark bg */
  opacity: .85;
  pointer-events: none;
}

/* make sure art layers & card sit above the overlay */
.sun, .dragon, .castle, .hero-overlay, .seal{
  position: relative;
  z-index: 1;
}

/* optional: subtle vignette to unify edges */
.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index: 1;
  background: radial-gradient(120% 80% at 50% 40%, transparent 60%, rgba(0,0,0,.35) 100%);
}

/* responsive tweak so the svg overlay doesn't look cropped on tall screens */
@media (max-width: 1024px){
  .hero::before{ background-size: 140% auto; background-position: left -10% top -10%; }
}
@media (max-width: 600px){
  .hero::before{ background-size: 180% auto; background-position: left -20% top -20%; opacity:.9; }
}

/* ===== Full-page background (bottom-most) ===== */
body{
  /* If file is exactly 'hatter_egesz.svg' */
  background:
    url("../images/background.svg") center / cover no-repeat fixed,
    linear-gradient(to bottom, #0d0e15 0%, #090a0e 60%, #06070a 100%);
  min-height: 100vh;
}

/* ===== Hero base ===== */
.hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;     /* overlay compositing local */
  overflow: hidden;
}

/* ===== Optional hero overlay, if 'hatter_fel.svg' exists ===== */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/background.svg") left top / cover no-repeat;
  mix-blend-mode: screen;          /* soft light on dark bg */
  opacity: .85;
  pointer-events: none;
}

/* Subtle vignette to unify edges */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index: 0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 60%, rgba(0,0,0,.35) 100%);
}

/* Brand card above all overlays */
.hero-overlay, .brand-card, .seal { position: relative; z-index: 2; }

/* Brand card styling (keep your existing palette/typography) */
.brand-card{
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 2.4rem 3.2rem;
  text-align: center;
  color: #f8e8b0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 20px 80px -20px rgba(255,195,80,.20);
  backdrop-filter: blur(8px);
}

/* Seal PNG remains as an img */
.seal{
  margin-top: 1.5rem;
}
.seal img{
  display:block;
  width: 220px;
  margin: 0 auto;
  filter: drop-shadow(0 0 26px rgba(255,200,100,.6));
  mix-blend-mode: screen;
  animation: pulse 3.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.06); opacity: .9; }
}

/* Responsive tweaks for SVG scaling */
@media (max-width: 1024px){
  .hero::before{ background-size: 140% auto; background-position: left -10% top -10%; }
  .seal img{ width: 180px; }
}
@media (max-width: 600px){
  .hero::before{ background-size: 180% auto; background-position: left -20% top -20%; opacity: .9; }
  .seal img{ width: 150px; }
}

/* SUN – upper left */
.sun {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 320px;
  opacity: 0.9;
  transform: rotate(-25deg);
  filter: brightness(1.3) drop-shadow(0 0 60px #ffb94d);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* CASTLE – bottom left */
.castle {
  position: absolute;
  bottom: 6%;
  left: 6%;
  width: 420px;
  opacity: 0.95;
  filter: drop-shadow(0 0 40px rgba(255,150,60,0.4));
  pointer-events: none;
  z-index: 1;
}

/* DRAGON – right side */
.dragon {
  position: absolute;
  right: 3%;
  top: 10%;
  width: 60vw;
  transform: scaleX(-1) rotate(4deg);
  filter: brightness(1.1) drop-shadow(0 0 50px rgba(255,120,0,0.4));
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}

/* BRAND CARD */
.hero-overlay .brand-card,
.hero__overlay .brand-card {
  position: relative;
  z-index: 3;
  background: rgba(10, 10, 15, 0.85);
  border-radius: 18px;
  padding: 3rem 5rem;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 180, 60, 0.25);
  backdrop-filter: blur(10px);
  color: #f8e8b0;
}

/* --- Responsive tweaks for layers --- */
@media (max-width: 1024px){
  .sun { width: 240px; top: 8%; left: 8%; }
  .castle { width: 300px; bottom: 5%; left: 5%; }
  .dragon { width: 80vw; top: 15%; right: -5%; }
  .seal { width: 120px; bottom: 3%; }
}

@media (max-width: 600px){
  .sun { width: 180px; top: 10%; left: 10%; }
  .castle { width: 220px; bottom: 4%; left: 10%; }
  .dragon { width: 100vw; top: 25%; right: -10%; }
  .seal { width: 100px; bottom: 2%; }
}

/* ===== Elegant divider under hero ===== */
.divider{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 2rem 0 3rem;
  background: radial-gradient(ellipse at center, rgba(10,8,12,0.9) 0%, rgba(8,6,10,1) 100%);
  isolation: isolate;
}

.divider-line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,100,0.6), transparent);
  box-shadow: 0 0 12px rgba(255,200,100,0.25);
}

.divider-gem{
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,110,0.2), transparent 65%);
  box-shadow: 0 0 20px rgba(255,200,100,0.25);
  animation: gem-glow 4s ease-in-out infinite alternate;
}

.divider-gem img{
  width: 24px;
  height: 24px;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(255,200,100,0.7));
}

/* Subtle pulse animation */
@keyframes gem-glow {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.05); }
}

/* ===== Posts section ===== */
.posts__header{
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Régi szeparátorok törölve - helyettük .hero-sep */


.posts__title {
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f8e3b0;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.posts__subtitle {
  margin-top: 0.5rem;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 227, 176, 0.85);
  font-weight: 400;
}

.posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

/* Tablet */
@media (max-width: 1024px) {
  .posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop - kártyák lejjebb a papiruszon */
@media (min-width: 1024px) {
  .posts__grid {
    margin-top: 3.5rem; /* Kártyák lejjebb a papirusz írófelületére */
  }
}

/* Mobil layout (768px) - papirusz elrejtése, sötét háttér */
@media (max-width: 768px) {
  /* Papirusz háttér elrejtése mobilon (ha van papirus-layer vagy papirus-video) */
  .papirus-section .papirus-layer,
  .papirus-section .papirus-video {
    display: none;
  }

  /* Posts szekció mobilon - sima sötét háttér finom glow-val (papirusz háttér helyett) */
  .papirus-section {
    background:
      radial-gradient(circle at top center, rgba(255, 186, 90, 0.25), transparent 60%),
      #050308 !important; /* Felülírja a papirusz háttérképet */
    padding: 3rem 1.5rem 4rem;
  }

  /* Papirusz fade overlay elrejtése mobilon */
  .papirus-section::before {
    display: none;
  }

  /* Latest Stories cím mobilra - középre, kisebb, jobb olvashatóság */
  .posts__header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .posts__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .posts__subtitle {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    margin-top: 0.5rem;
    line-height: 1.5;
  }

  /* Post cards grid mobilon - 1 oszlop */
  .posts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0;
  }

  /* Post kártyák mobilra */
  .post,
  .post-card,
  .story-card {
    max-width: 100%;
    margin: 0;
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Post cím mobilra */
  .post__title {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
    line-height: 1.4;
  }

  /* Post meta mobilra */
  .post__meta {
    font-size: 0.85rem;
  }

  /* Post excerpt mobilra */
  .post__excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* Mobil - post cards 1 oszlop, jobb olvashatóság (600px finomhangolás) */
@media (max-width: 600px) {
  .posts__grid {
    gap: 1.25rem;
  }

  .post,
  .post-card,
  .story-card {
    padding: 1.25rem 1rem;
  }
}

/* Remove any dragon background from posts - only hero has it */
.posts{
  position: relative;
  background: none;
  z-index: 1;
}
/* Remove ember effects */
.posts::before{ content:none; }
.posts::after{ content:none; }

/* ----------------------------------------------------
   POSZT KÁRTYÁK – papirusz hátteren
-----------------------------------------------------*/
.post,
.post-card,
.story-card {
  position: relative;
  background: rgba(12, 6, 3, 0.9);
  border-radius: 24px;
  padding: 0;
  border: 1px solid rgba(255, 210, 140, 0.35);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

/* Optional: subtle glow effects for cards on papirus */
.post::before,
.post-card::before,
.story-card::before {
  content:"";
  position:absolute; left:-10%; right:-10%; top:-25%;
  height: 58%;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,160,60,.15), transparent 70%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity: 0.6;
}

.post::after,
.post-card::after,
.story-card::after {
  content:"";
  position:absolute; inset:-30%;
  background:
    linear-gradient(60deg, rgba(240,210,140,.0) 40%, rgba(240,210,140,.1) 50%, rgba(240,210,140,.0) 60%);
  mix-blend-mode: screen;
  transform: translateX(-10%) rotate(0.001deg);
  transition: transform .35s ease, opacity .35s ease;
  opacity:.5;
}

.post__link{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.75rem 2rem;
  color: #efe9d6;
  text-decoration: none;
  z-index: 1;
}

.post__title{
  margin:.1rem 0 .35rem;
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  color: #f3dca3;
  letter-spacing:.01em;
  line-height: 1.4;
}

.post__title span {
  display: block;
}

.post__title span[lang="en"] {
  margin-top: 0.4rem;
  opacity: 0.9;
}

.post__title span[lang="ro"] {
  opacity: 0.7;
  font-size: 0.85em;
  margin-top: 0.3rem;
}

.post__meta{ margin: 0 0 .55rem; font-size:.9rem; opacity:.75; }
.post__excerpt{ margin:0; opacity:.9; line-height:1.45; }

.post__cta{
  display:inline-block; margin-top:.8rem;
  color:#f3dca3; opacity:.9; font-weight:600;
  text-decoration:none;
  transition: transform .2s ease, text-shadow .2s ease;
}

/* Hover – kártya megemelkedik, felerősödik a fény */
.post:hover,
.post-card:hover,
.story-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 220, 150, 0.85);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.92);
  background: radial-gradient(circle at top, rgba(255, 210, 150, 0.18), rgba(12, 6, 3, 0.96));
}
.post:hover .post__cta{
  transform: translateX(2px);
  text-shadow: 0 0 10px rgba(255,195,90,.45);
}

/* --- Hero alatti arany elválasztó --- */
.medieval-separator {
  position: relative;
  height: 52px;
  margin: 0 -6vw 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(5, 3, 8, 0.98) 0%,
    rgba(5, 3, 8, 0.92) 40%,
    rgba(5, 3, 8, 0.0) 100%
  );
}

/* Separator mobilra - csökkentett méretek */
@media (max-width: 600px) {
  .medieval-separator {
    height: 40px;
    margin: 0 -1rem 2rem;
  }

  .medieval-separator__gem {
    width: 32px;
    height: 32px;
    margin: 0 1rem;
  }
}

.medieval-separator__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 210, 140, 0.9),
    transparent
  );
  opacity: 0.9;
}

.medieval-separator__gem {
  width: 42px;
  height: 42px;
  margin: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 140, 0.7);
  background: radial-gradient(circle, rgba(255, 210, 140, 0.55) 0, transparent 65%);
  box-shadow:
    0 0 12px rgba(255, 210, 140, 0.8),
    0 0 28px rgba(0, 0, 0, 0.85);
}

/* Reszponzív design - harmonizált mobil és tablet nézetek */
@media (max-width: 1024px) {
  .papirus-section {
    padding: 5rem 4vw 5rem;
    background:
      url("../images/papirus.svg") center -12px / 130% auto repeat-y,  /* repeat-y infinite scroll-hoz */
      #050308;
  }

  .papirus-section::before {
    top: 0;
    height: 160px;
  }

  .papirus-section .medieval-separator {
    margin-top: -2.5rem;
    padding: 0 1.5rem;
  }

  .papirus-inner {
    padding: 4.5rem 1rem 0;  /* Felső padding még növelve tabletnél */
  }
}

/* Mobil breakpoint (600px) - papirusz szekció optimalizálás */
@media (max-width: 600px) {
  .papirus-section {
    padding: 3rem 1rem 4rem;
    margin-top: 0;
    background:
      url("../images/papirus.svg") center -10px / 150% auto repeat-y,  /* repeat-y infinite scroll-hoz */
      #050308;
    overflow-x: hidden; /* Horizontal scroll megelőzése */
  }

  .papirus-section::before {
    top: 0;
    height: 100px; /* Rövidebb fade mobilra */
  }

  .papirus-section .medieval-separator {
    margin-top: -1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }

  .papirus-inner {
    padding: 3.5rem 0 0;  /* Felső padding még növelve mobilon */
    max-width: 100%;
  }

  .posts__header {
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  /* Posts cím mobilra */
  .posts__title {
    font-size: clamp(1.75rem, 6vw, 2.2rem);
    letter-spacing: 0.1em;
  }

  /* Posts subtitle mobilra */
  .posts__subtitle {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    margin-top: 0.4rem;
  }
}

/* Kis mobil (480px) - további finomhangolás */
@media (max-width: 480px) {
  .papirus-section {
    padding: 2.5rem 0.75rem 3.5rem;
    background:
      url("../images/papirus.svg") center -8px / 160% auto repeat-y,  /* repeat-y infinite scroll-hoz */
      #050308;
  }

  .papirus-section::before {
    top: 0;
    height: 80px; /* Még rövidebb fade kis mobilon */
  }

  .posts__title {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
  }

  .posts__subtitle {
    font-size: 0.75rem;
  }

  /* Post kártyák kis mobilon - még kisebb padding */
  .post,
  .post-card,
  .story-card {
    padding: 1.25rem 1rem;
    font-size: 0.9rem;
  }
}


/* SZEPARATOR: mindig a fade és a lángok fölött legyen - harmonizált */
.papirus-section .medieval-separator {
  position: relative;
  margin-top: -3.5rem;
  margin-bottom: 2rem;
  z-index: 3;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

/* PAPIRUSZ SZEKCIÓ: finomhangolt design */
.papirus-section {
  position: relative;
  margin-top: 0;
  padding: 6rem 0 6rem;
  border-top: none;
  background:
    url("../images/papirus.svg") center -15px / 120% auto repeat-y,  /* repeat-y infinite scroll-hoz */
    #050308;        /* ha a papirusz alatt vége a képnek, maradjon sötét */
  overflow: visible;
  min-height: 100vh; /* Minimum magasság, hogy a papirusz látszódjon */
}

/* Papirusz fade-in - fordítva, hogy a hero fade-hez illeszkedjen */
.papirus-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;           /* A papirusz tetejénél kezdődik */
  height: 200px;    /* Hosszabb fade */

  /* Felül sötét (hero fade-hez illeszkedik), alul átlátszó */
  background: linear-gradient(
    to bottom,
    #050308 0%,               /* teljesen sötét felül - hero fade-hez illeszkedik */
    rgba(5, 3, 8, 0.9) 25%,
    rgba(5, 3, 8, 0.6) 50%,
    rgba(5, 3, 8, 0.3) 75%,
    rgba(5, 3, 8, 0) 100%     /* teljesen átlátszó alul - papirusz látszik */
  );

  pointer-events: none;
  z-index: 1;
}

.papirus-inner {
  position: relative;
  z-index: 2;      /* a gradient fölött maradjon a szöveg + kártyák */
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem 0;  /* Felső padding még növelve, hogy a kártyák lejjebb kerüljenek a papiruszra */
}

/* Ha a láng még túl "magasan" ég - opcionális, csak ha szükséges */
/* .papirus-section.papirus-fire {
  background-position: center 40%, center bottom;
} */

/* Tűzflicker effekt a kártyákhoz */
@keyframes emberGlow {
  0%   { box-shadow: 0 0 25px rgba(255, 180, 80, 0.25); }
  50%  { box-shadow: 0 0 55px rgba(255, 210, 120, 0.65); }
  100% { box-shadow: 0 0 30px rgba(255, 160, 70, 0.35); }
}

.posts__grid .post {
  animation: emberGlow 4.5s ease-in-out infinite alternate;
}

/* kicsi véletlenszerűség */
.posts__grid .post:nth-child(2) {
  animation-delay: 0.9s;
}

.posts__grid .post:nth-child(3) {
  animation-delay: 1.7s;
}

/* Infinite scroll - elrejtett kártyák */
#posts.infinite-ready .post.is-hidden {
  display: none;
}

/* ===== POST OLDAL STÍLUSOK =====
   A blog/posts/*.html fájlokhoz használt stílusok
*/

/* Post oldal konténer - kozmikus misztikus háttérrel + matrix flow */
.post-page {
  background-image: 
    /* Matrix flow karakterek - finom rács */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(100, 200, 255, 0.03) 2px,
      rgba(100, 200, 255, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(150, 100, 255, 0.02) 2px,
      rgba(150, 100, 255, 0.02) 4px
    ),
    /* Kozmikus jelek - geometrikus formák */
    radial-gradient(circle at 15% 25%, rgba(150, 100, 255, 0.08) 0%, transparent 3%),
    radial-gradient(circle at 85% 75%, rgba(200, 150, 255, 0.06) 0%, transparent 3%),
    radial-gradient(circle at 50% 10%, rgba(100, 200, 255, 0.05) 0%, transparent 2.5%),
    radial-gradient(circle at 25% 90%, rgba(150, 100, 255, 0.07) 0%, transparent 3%),
    radial-gradient(circle at 75% 40%, rgba(200, 100, 255, 0.06) 0%, transparent 3%),
    /* Kozmikus jelek - spirálok és körök */
    conic-gradient(from 0deg at 30% 60%, transparent 0%, rgba(150, 100, 255, 0.1) 10%, transparent 20%),
    conic-gradient(from 180deg at 70% 30%, transparent 0%, rgba(200, 150, 255, 0.08) 15%, transparent 25%),
    /* Alap gradientek */
    radial-gradient(ellipse at 20% 30%, rgba(100, 50, 200, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(200, 100, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(150, 80, 250, 0.08) 0%, transparent 70%),
    linear-gradient(135deg, #0a0515 0%, #050308 25%, #080410 50%, #050308 75%, #0a0515 100%);
  background-size: 
    100% 100%,
    100% 100%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    300% 300%,
    300% 300%,
    300% 300%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  animation: matrixFlow 20s linear infinite, cosmicSymbols 30s ease-in-out infinite;
}

/* Kozmikus csillagok és misztikus jelek háttér */
.post-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Csillagok */
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(200, 180, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 90% 50%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(180, 200, 255, 0.8), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 30% 90%, rgba(220, 200, 255, 0.7), transparent),
    /* Misztikus kozmikus jelek - hexagonok, háromszögek */
    polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%),
    polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%),
    /* Spirálok és körök */
    radial-gradient(circle, rgba(150, 100, 255, 0.3) 1px, transparent 1px),
    radial-gradient(circle, rgba(200, 150, 255, 0.2) 0.5px, transparent 0.5px);
  background-size: 
    200% 200%, 180% 180%, 150% 150%, 220% 220%, 190% 190%, 160% 160%, 210% 210%, 170% 170%,
    40px 40px, 30px 30px,
    20px 20px, 15px 15px;
  background-position: 
    0% 0%, 20% 20%, 40% 40%, 60% 60%, 80% 80%, 10% 10%, 30% 30%, 50% 50%,
    15% 25%, 85% 75%, 50% 10%, 25% 90%, 75% 40%, 30% 60%, 70% 30%,
    0 0, 0 0;
  animation: cosmicDrift 120s linear infinite, symbolRotate 60s linear infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Kozmikus energia pulzálás és matrix flow részecskék */
.post-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Matrix flow részecskék - függőleges vonalak */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 98px,
      rgba(100, 200, 255, 0.15) 98px,
      rgba(100, 200, 255, 0.15) 100px
    ),
    /* Matrix flow részecskék - vízszintes vonalak */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 98px,
      rgba(150, 100, 255, 0.12) 98px,
      rgba(150, 100, 255, 0.12) 100px
    ),
    /* Pulzáló energia */
    radial-gradient(circle at center, rgba(150, 100, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 30% 30%, rgba(200, 150, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(100, 150, 255, 0.08) 0%, transparent 40%);
  background-size:
    100% 200px,
    200px 100%,
    200% 200%,
    200% 200%,
    200% 200%;
  background-position:
    0 0,
    0 0,
    -50% -50%,
    -50% -50%,
    -50% -50%;
  transform: translate(0, 0);
  animation: matrixFlow 25s linear infinite, cosmicPulse 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes cosmicDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-50px, -30px) rotate(360deg); }
}

@keyframes cosmicPulse {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1);
  }
  50% { 
    opacity: 0.5;
    transform: scale(1.2);
  }
}

@keyframes matrixFlow {
  0% { 
    background-position: 0 0, 0 0, -50% -50%, -50% -50%, -50% -50%;
  }
  100% { 
    background-position: 0 200px, 200px 0, -50% -50%, -50% -50%, -50% -50%;
  }
}

@keyframes cosmicSymbols {
  0%, 100% {
    background-position: 
      0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    background-position: 
      0 0, 0 0, -20% -20%, 20% 20%, -15% 15%, 15% -15%, -10% -10%, 10% 10%, -25% 25%, 25% -25%, 0 0;
  }
}

@keyframes symbolRotate {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-30px, -20px) rotate(360deg); }
}

/* Régi article stílus (visszafelé kompatibilitás) */
.article {
  max-width: 860px;
  margin: 0 auto;
  padding: 6rem 2rem 5rem;
  position: relative;
  z-index: 2;
}

/* Új 3 nyelvű poszt struktúra */
.post-header {
  max-width: 860px;
  margin: 0 auto;
  padding: 6rem 2rem 2rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Kozmikus fény effekt a cím körül */
.post-title {
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #f8e3b0;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(150, 100, 255, 0.3);
  letter-spacing: 0.05em;
  line-height: 1.2;
  position: relative;
}

.post-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(150, 100, 255, 0.15) 0%, transparent 70%);
  z-index: -1;
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.post-meta {
  font-size: 0.95rem;
  color: rgba(248, 227, 176, 0.75);
  margin: 0 0 2.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  position: relative;
  z-index: 2;
}

/* Nyelvi szekciók - kozmikus misztikus stílus */
.post-lang {
  margin-bottom: 3rem;
  padding: 2rem;
  background: 
    radial-gradient(ellipse at top, rgba(100, 50, 200, 0.1) 0%, transparent 50%),
    rgba(12, 6, 3, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(150, 100, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(200, 150, 255, 0.1),
    0 0 40px rgba(150, 100, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.post-lang::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200, 150, 255, 0.1), transparent);
  animation: cosmicSweep 8s ease-in-out infinite;
}

@keyframes cosmicSweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.post-lang h2 {
  font-family: "Cinzel", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #f3dca3;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(150, 100, 255, 0.4);
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(150, 100, 255, 0.3);
  position: relative;
  z-index: 1;
}

.post-lang p {
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  margin: 1.2rem 0;
  text-align: justify;
  text-justify: inter-word;
}

.post-footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Back to Stories link */
.post-back,
.back {
  display: inline-block;
  margin: 0 0 2rem 0;
  color: #f3dca3;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px dashed rgba(243, 220, 163, 0.6);
  padding-bottom: 2px;
  transition: text-shadow 0.2s ease, border-color 0.2s ease;
}

.post-back:hover,
.back:hover {
  text-shadow: 0 0 8px rgba(255, 200, 100, 0.45);
  border-color: rgba(243, 220, 163, 0.9);
}

/* Régi article stílusok (visszafelé kompatibilitás) */
.article h1 {
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #f8e3b0;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.article .meta {
  font-size: 0.95rem;
  color: rgba(248, 227, 176, 0.75);
  margin: 0 0 2.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article p {
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
  margin: 1.2rem 0;
  text-align: justify;
  text-justify: inter-word;
}

/* Post oldal reszponzív */
@media (max-width: 1024px) {
  .post-page {
    background: 
      radial-gradient(ellipse at 20% 30%, rgba(100, 50, 200, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(200, 100, 255, 0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(150, 80, 250, 0.08) 0%, transparent 70%),
      linear-gradient(135deg, #0a0515 0%, #050308 25%, #080410 50%, #050308 75%, #0a0515 100%);
  }

  .post-header,
  .post-content,
  .post-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .post-lang {
    padding: 1.5rem;
  }
}

/* Post oldalak mobilra (600px) */
@media (max-width: 600px) {
  .post-page {
    background: 
      radial-gradient(ellipse at 20% 30%, rgba(100, 50, 200, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(200, 100, 255, 0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(150, 80, 250, 0.08) 0%, transparent 70%),
      linear-gradient(135deg, #0a0515 0%, #050308 25%, #080410 50%, #050308 75%, #0a0515 100%);
    overflow-x: hidden; /* Horizontal scroll megelőzése */
  }

  .article {
    padding: 4rem 1.25rem 4rem;
    max-width: 100%;
  }

  .post-header {
    padding: 4rem 1.25rem 1.5rem;
  }

  .post-content {
    padding: 0 1.25rem 2rem;
  }

  .post-footer {
    padding: 1.5rem;
  }

  .post-title,
  .article h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
    line-height: 1.3;
  }

  .post-meta,
  .article .meta {
    font-size: 0.85rem;
    margin-bottom: 2rem;
  }

  .post-lang {
    padding: 1.25rem;
    margin-bottom: 2rem;
  }

  .post-lang h2 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
  }

  .post-lang p,
  .article p {
    font-size: clamp(0.95rem, 3vw, 1.05rem);
    line-height: 1.8;
    margin: 1.1rem 0;
  }

  .post-back,
  .back {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
}

/* Post oldalak kis mobilra (480px) */
@media (max-width: 480px) {
  .post-page {
    background:
      url("../images/papirus.svg") center -8px / 160% auto no-repeat,
      #050308;
  }

  .article {
    padding: 3rem 1rem 3rem;
    max-width: 100%;
  }

  .post-header {
    padding: 3rem 1rem 1rem;
  }

  .post-content {
    padding: 0 1rem 1.5rem;
  }

  .post-title,
  .article h1 {
    font-size: 1.5rem;
  }

  .post-lang p,
  .article p {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}

/* ===== Responsive hero + grid adjustments ===== */
@media (max-width: 1200px) {
  .hero,
  .dragon-hero {
    min-height: 52vh;
    padding-top: 5rem;
  }
}

@media (max-width: 992px) {
  .hero,
  .dragon-hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand-card {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .hero,
  .dragon-hero {
    min-height: 44vh;
    padding: 4.5rem 1rem 2.5rem;
  }

  .brand-card {
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }

  .brand-card h1 {
    font-size: clamp(1.8rem, 6.2vw, 2.2rem);
  }

  .subtitle {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  }
}

@media (max-width: 576px) {
  .hero,
  .dragon-hero {
    min-height: 40vh;
  }

  .posts__grid {
    grid-template-columns: 1fr !important;
  }
}

/* === MOBILE HERO FIX (max-width: 768px) === */
@media (max-width: 768px) {
  .hero {
    min-height: 65vh;
    overflow: hidden;
    background-position:
      50% 5%,
      50% 35%,
      50% 60%,
      center;
    background-size:
      130% auto,
      160% auto,
      180% auto,
      cover;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.7) 100%
    );
    pointer-events: none;
  }

  .hero-content {
    padding: 1.25rem 1rem;
    margin-top: 1rem;
    max-width: 90%;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    text-align: center;
  }

  .hero-content p {
    font-size: 1rem;
    text-align: center;
  }
}

/* ==== MOBILE HERO FIX – egyszerű, stabil verzió ==== */
@media (max-width: 768px) {
  .hero {
    position: relative;
    min-height: 100vh;
    padding-top: 5rem;
    background-image: url("../images/castle.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
  }

  .hero::before,
  .hero::after {
    display: none;
    content: none;
  }

  .hero-content {
    max-width: 90%;
    margin: 0 auto 2rem;
    padding: 1.5rem 1.25rem;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    text-align: center;
  }

  .hero-content p {
    font-size: 1rem;
    text-align: center;
  }
}