/* =========================
RESET
========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

img{
  max-width:100%;
  display:block;
}

/* =========================
BASE
========================= */

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#f3f3f3;
  color:#222;
  line-height:1.6;
}

/* =========================
LAYOUT WRAPPER
========================= */

.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.container{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:0 16px;
}

/* =========================
HERO
========================= */

.hero-wrapper{
  margin:40px 0 30px;
}

.hero{
  border-radius:18px;
  overflow:hidden;
  min-height:260px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background:url("/banner.jpg") center/cover no-repeat;

  box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

/* =========================
🔥 LIGHT GLASS FIX
========================= */

.hero-overlay{
  /* világos glass */
  background:rgba(255,255,255,0.25);

  /* erősebb blur = szebb glass */
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border-radius:14px;
  padding:22px 20px;

  width:100%;
  max-width:520px;

  /* sötét szöveg világos glasshoz */
  color:#111;

  /* finom keret */
  border:1px solid rgba(255,255,255,0.4);

  /* enyhe árnyék */
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

/* HERO TEXT */

.hero h1{
  font-size:1.8rem;
  margin-bottom:8px;
  color:#111;
}

.hero p{
  font-size:1rem;
  opacity:0.9;
  color:#222;
}

/* =========================
MAIN CONTENT
========================= */

main{
  flex:1;
}

section{
  background:#7a1d26;
  color:#fff;

  border-radius:14px;
  padding:22px;

  margin-bottom:22px;

  border-left:5px solid #d4af37;

  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* =========================
TEXT
========================= */

p{
  margin-bottom:1.1em;
  line-height:1.65;
  color:#f2f2f2;
}

h1{
  font-size:1.5rem;
  margin-bottom:10px;
}

h2{
  font-size:1.2rem;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.2);
}

/* =========================
LINKS
========================= */

a{
  color:#ffd166;
  text-decoration:underline;
  word-break:break-word;
}

a:hover{
  color:#fff3b0;
}

/* =========================
LIST
========================= */

ul{
  padding-left:18px;
}

li{
  margin-bottom:8px;
}

/* =========================
FOOTER – FIX
========================= */

footer{
  margin-top:auto;
  background:#ececec;
  padding:30px 16px;
  text-align:center;
}

.footer-inner{
  max-width:920px;
  margin:0 auto;
}

.footer-copy{
  font-size:0.85rem;
  color:#777;
  margin-bottom:12px;
}

.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.footer-links a{
  color:#b8860b;
  text-decoration:underline;
  font-size:0.9rem;
  white-space:nowrap;
}

.footer-links span{
  color:#bbb;
}

/* =========================
MOBILE
========================= */

@media (max-width:600px){

  .hero{
    min-height:200px;
  }

  .hero-overlay{
    padding:16px;
  }

  .hero h1{
    font-size:1.4rem;
  }

  .hero p{
    font-size:0.9rem;
  }

  section{
    padding:18px;
  }

}

/* =========================
TABLET
========================= */

@media (min-width:601px) and (max-width:1024px){

  .container{
    max-width:760px;
  }

  .hero{
    min-height:240px;
  }

  .hero-overlay{
    max-width:480px;
  }

}

/* =========================
DESKTOP
========================= */

@media (min-width:1025px){

  .container{
    max-width:920px;
  }

  .hero{
    min-height:320px;
  }

  .hero-overlay{
    max-width:600px;
    padding:28px;
  }

  .hero h1{
    font-size:2.2rem;
  }

  .hero p{
    font-size:1.15rem;
  }

}