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

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  min-height:100vh;
  background: linear-gradient(
    180deg,
    #7a1e1e 0%,
    #f7f3ee 50%,
    #1e4d33 100%
  );
  color:#111;
}

/* ================= NAV ================= */

nav{
  position:sticky;
  top:0;
  z-index:2000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 20px;

  background:rgba(255,255,255,0.95);
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.logo{
  height:42px;
  width:auto;
  display:block;
}

/* hamburger */
.hamburger{
  background:transparent;
  border:none;
  font-size:30px;
  cursor:pointer;
  color:#1e4d33;
}

.hamburger:hover{
  background:rgba(0,0,0,0.08);
  border-radius:8px;
}

/* overlay */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:1500;
}

.overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* menu */
.nav-links{
  position:fixed;
  top:0;
  right:-280px;
  width:260px;
  height:100%;
  background:#fff;
  display:flex;
  flex-direction:column;
  padding-top:70px;
  transition:0.35s ease;
  z-index:1600;
}

.nav-links.active{
  right:0;
}

.nav-links a{
  padding:14px 20px;
  text-decoration:none;
  color:#7a1e1e;
  font-weight:600;
}

.nav-links a:hover{
  background:#f4f4f4;
}

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

.container{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
}

.card{
  background:#fff;
  padding:40px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* ================= HOME ================= */

.hero{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.hero-logo{
  width:90px;
  height:90px;
  object-fit:contain;
}

.hero-text{
  text-align:center;
}

body.home .hero{
  flex-direction:column;
  text-align:center;
  gap:10px;
}

.hero h1{
  color:#1e4d33;
}

.hero p{
  opacity:0.7;
}

/* ================= CONTACT ================= */

.contact-card{
  max-width:700px;
  margin:40px auto;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

input,
textarea{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:15px;
}

textarea{
  resize:vertical;
}

button{
  padding:12px 16px;
  background:#1e4d33;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
}

button:hover{
  background:#163826;
}

.status{
  margin-top:15px;
  font-weight:bold;
}

/* ================= PARTNERS + SUPPORTERS (5 GRID) ================= */

.five-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:15px;
}

.five-item{
  background:transparent;
  text-align:center;
  cursor:default;
}

.five-item,
.five-item:hover{
  transform:none !important;
  box-shadow:none !important;
}

.five-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;

  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.five-item p{
  margin-top:10px;
  padding:0;
  font-weight:bold;
  color:#1e4d33;
  line-height:1.2;
}
/* ================= GALLERY ================= */

#gallery{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:15px;
}

.gallery-item{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.2s;
}

.gallery-item:hover{
  transform:scale(1.02);
}

.gallery-item img{
  width:100%;
  display:block;
}

.img-text{
  padding:12px;
  text-align:center;
  opacity:0.75;
}

#gallery.album-view{
  display:block;
}

#gallery.album-view img{
  width:100%;
  margin-top:15px;
  border-radius:12px;
}

/* gallery back button */
#backBtn{
  display:block;
  margin:25px 0 0 auto;
  padding:12px 18px;
  background:#1e4d33;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
}

/* ================= MEMBERS ================= */
/* ================= MEMBERS GRID ================= */

.members-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:15px;
}

/* CARD */
.member-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  text-align:center;
}

.member-card img{
  width:100%;
  height:auto;          /* 🔥 nem vágja szét */
  display:block;
}

.member-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  text-align:center;

  padding-bottom:12px; /* 🔥 kis levegő alul */
}

.member-card h3{
  margin:10px 0 2px;   /* 🔥 közelebb egymáshoz */
  line-height:1.2;
}

.member-card p{
  margin:0 10px 8px;
  font-size:14px;
  line-height:1.2;
  opacity:0.8;
}

.member-card{
  transition:0.2s;
}

.member-card:hover{
  transform:scale(1.03);
}

/* ================= ALBUM MODE ================= */

.members-grid.album-view{
  display:block;
  background:#fff;
  padding:0;
}

/* WRAPPER */
.album-wrapper{
  padding:0;
}

/* DESCRIPTION (MOST ÚJRA LÁTSZIK) */
.member-desc{
  padding:20px;
  margin:0;
  line-height:1.5;
}

/* MEDIA FEED */
.member-media{
  display:flex;
  flex-direction:column;
}

/* FULL WIDTH MEDIA */
.member-media img,
.member-media video{
  width:100%;
  display:block;
  margin:0;
  border-radius:0;
}

/* VIDEO FIX */
.member-media video{
  background:#000;
  max-height:75vh;
  object-fit:contain;
}

.member-media{
  display:flex;
  flex-direction:column;
  gap:12px; /* 🔥 EZ ADJA A KIS TÁVOLSÁGOT KÉP ÉS VIDEÓ KÖZÖTT */
}

#backBtn{
  display:block;
  margin:20px 20px 20px auto;

  padding:12px 18px;
  background:#1e4d33;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
}
/* ================= TITLE ================= */

#membersTitle{
  margin-bottom:20px;
}
/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
  .members-grid,
  .five-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media(max-width:700px){
  .members-grid,
  .five-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  #gallery{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:500px){
  .members-grid,
  .five-grid,
  #gallery{
    grid-template-columns:1fr;
  }
}

.member-text{
  margin:10px 0;
  opacity:0.8;
  font-weight:500;
}

.member-desc{
  margin:10px 0 20px;
  line-height:1.5;
  opacity:0.9;
}

.member-card img{
  width:100%;
  display:block;
}

/* 📌 TÉR A KÉP ÉS SZÖVEG KÖZÉ */
.member-info{
  padding:12px 10px 16px;
  text-align:center;
}

.member-info h3{
  margin-top:10px;
  margin-bottom:6px;
}

/* LISTA SZÖVEG */
.img-text{
  margin:0;
  opacity:0.75;
}

/* ALBUM TEXT */
.member-text{
  margin:10px 0;
  font-weight:600;
}

.member-desc{
  margin:10px 0 20px;
  line-height:1.5;
  opacity:0.9;
}

/* ================= GLOBAL IMAGE FIX ================= */

.card img{
  width:100%;
  display:block;
  border-radius:12px;
}

/* nav safety */
#nav-container{
  position:sticky;
  top:0;
  z-index:2000;
}

#gallery.album-view video{
  width:100%;
  display:block;
  margin-top:15px;
  border-radius:12px;
  background:#000;
  object-fit:contain;
}

.five-item:hover{
  transform:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

#gallery video {
  width: 100%;
  max-height: 500px;      /* ne legyen végtelen magas */
  object-fit: contain;    /* ugyanaz mint a tagoknál */
  background: #000;       /* fekete sáv álló videónál */
  border-radius: 12px;
  display: block;
}

/* biztosítjuk, hogy ne nyújtsa szét semmi */
#gallery.album-view video {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

.gallery-item img{
  width:100%;
  aspect-ratio:1/1;   
  object-fit:cover;
  display:block;
}

/* ================= MEMBER CARD HEIGHT FIX ================= */

.member-card{
  display:flex;
  flex-direction:column;
  height: auto;              /* fontos: ne nyúljon */
}

/* kép fix marad */
.member-card img{
  width:100%;
  aspect-ratio:1/1;          /* ha négyzetes kell */
  object-fit:cover;
  display:block;
}

/* 🔥 EZ CSÖKKENTI A FEHÉR RÉSZT */
.member-info{
  padding:5px 0px 0px;      /* kevesebb függőleges tér */
  display:flex;
  flex-direction:column;
  gap:2px;                   /* kisebb távolság szövegek között */
}

/* név */
.member-info h3{
  margin:0;
  font-size:16px;
  line-height:1.1;
}

/* leírás */
.member-info p{
  margin:0;
  font-size:13px;
  line-height:1.2;
}

/* 🔥 EZ A LÉNYEG: a kártya ne legyen “légpárnás” */
.member-card{
  overflow:hidden;
}

/* ================= PROGRAMOK KÉP TÁVOLSÁG FIX ================= */

.news-item img,
.news-item video{
  display:block;
  width:100%;
  border-radius:12px;
}

/* 🔥 EZ ADJA A KÉPEK KÖZTI TÉRÉST */
.news-item img + img,
.news-item img + video,
.news-item video + img,
.news-item video + video{
  margin-top:12px;
}