/* Modern responsive styles for Trend Autósiskola */
:root{
  --accent:#0a58a8;
  --accent-2:#f5a623;
  --muted:#666;
  --bg:#f7f9fc;
  --card:#fff;
}
*{box-sizing:border-box}
body{font-family:Inter, "Segoe UI", Arial, sans-serif;margin:0;background:var(--bg);color:#0b2a4a;line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:#fff;border-bottom:1px solid #e6eef8}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
/*.brand img{max-height:100px;width:auto}*/
.brand {
  flex: 0 1 650px;
  min-width: 0;
}

.brand img {
  display: block;
  width: clamp(320px, 42vw, 700px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

@media (max-width:700px){
  .brand img {
    width: clamp(180px, 58vw, 260px);
  }

  .header-inner {
    gap: .5rem;
  }

  #nav-toggle {
    flex: 0 0 auto;
    font-size: 1.8rem;
    z-index: 1100;
  }
}

#nav-toggle{display:none;background:none;border:0;font-size:1.4rem}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem}
.site-nav a{display:block;padding:0.6rem 0.9rem;color:var(--accent);text-decoration:none;border-radius:8px}
.site-nav a:hover{background:#eaf4ff}
/*.hero{background-image:linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.15)), url('../../source/trend.jpg');background-size:cover;background-position:center;color:#fff;padding:3.2rem 0}*/
.hero-inner{max-width:880px;margin:0 auto;text-align:center}
.hero h1{font-size:2rem;margin:0 0 .4rem}
.lead{font-size:1.05rem;margin-bottom:1rem}
.btn{background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
/*.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.5)}*/
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.2rem 0}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(11,42,74,0.06)}
.card h2{margin-top:0;color:var(--accent)}
.map-contact{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.contact-card,.media-card{background:var(--card);padding:1rem;border-radius:10px}
.site-footer{background:#032b4a;color:#fff;padding:1.2rem 0}
.footer-inner{display:flex;gap:2rem;flex-wrap:wrap}
.footer-col{flex:1;min-width:200px}
.footer-col h4{margin-top:0}
.footer-col a{color:#f5a623;text-decoration:none;font-weight:500;transition:color 0.3s ease}
.footer-col a:hover{color:#fff;text-decoration:underline}
.legal{text-align:center;padding:.6rem 0;font-size:.9rem;color:#d7e9ff}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .map-contact{grid-template-columns:1fr}

  /* Desktop és tablet között nagyobb logó */
  .brand img{
    width: clamp(300px, 45vw, 600px);
    height: auto;
  }
}

@media (max-width:700px){

  /* Régi:
  .header-inner{padding:.5rem}
  */
  .header-inner{
    padding:.5rem;
    gap:.4rem;
    justify-content:space-between;
    align-items:center;
  }

  /* Mobilon nagyobb logó */
  .brand{
    flex:1;
    min-width:0;
  }

  /* Régi:
  .brand img{
    max-height:100px;
    width:auto;
  }
  */
  .brand img{
    width: clamp(220px, 65vw, 320px);
    max-width:100%;
    height:auto;
    display:block;
  }

  /* Régi:
  #nav-toggle{display:block}
  */
  #nav-toggle{
    display:block;
    font-size:2rem;
    padding:.25rem .5rem;
    flex-shrink:0;
  }

  .site-nav{display:none}

  .site-nav.open{
    display:block;
    background:#fff;
    padding:1rem 0.5rem;
    border-radius:8px;
    position:fixed;

    /* Régi:
    top:70px;
    */
    top:86px;

    left:0;
    right:0;
    width:100%;
    z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }

  .site-nav ul{
    flex-direction:column;
  }

  .site-nav a{
    padding:0.8rem 1rem;
    border-radius:0;
  }

  .cards{
    grid-template-columns:1fr;
  }
/*Mobile overlap correction*/
  .cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:1rem;
  }

  .cta .btn{
    display:block;
    width:100%;
    max-width:320px;
    text-align:center;
    line-height:1.25;
    white-space:normal;
  }

}
.yt-video{
  display:block;
  width:100%;
  max-width:560px;
  aspect-ratio:16/9;
  height:auto;
  margin:0 auto;
  border-radius:12px;
}
/* Small helper */
.small{padding:.4rem .6rem}
.ghost{background:transparent;border:2px solid var(--accent);color:var(--accent)}

/* Instructor image cards */
.instructor-image{
  max-width:180px;
  display:block;
  margin-bottom:8px;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.instructor-image:hover{
  opacity:0.8;
}

/* Lightbox styles */
.lightbox{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2000;
}
.lightbox[hidden]{
  display:none!important;
}
.lightbox-backdrop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.85);
  cursor:pointer;
}
.lightbox-container{
  position:relative;
  z-index:2001;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1rem;
  max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 2rem);
  justify-content:center;
}
.lightbox-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  overflow:auto;
  max-width:100%;
  max-height:100%;
  padding-bottom:3rem;
}
#lightbox-image{
  max-width:1000px;
  max-height:1000px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.lightbox-caption{
  color:#fff;
  font-size:0.95rem;
  text-align:center;
  margin:0.5rem 0 0;
  padding:0 0.5rem;
  flex-shrink:0;
}
.lightbox-close{
  position:absolute;
  top:0.5rem;
  right:0.5rem;
  background:rgba(255,255,255,0.2);
  border:none;
  color:#fff;
  width:2.5rem;
  height:2.5rem;
  font-size:1.5rem;
  cursor:pointer;
  border-radius:50%;
  transition:background 0.2s ease;
  z-index:2002;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-close:hover{
  background:rgba(255,255,255,0.3);
}
.lightbox-close:focus{
  outline:2px solid rgba(255,255,255,0.6);
  outline-offset:2px;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.2);
  border:none;
  color:#fff;
  width:2.5rem;
  height:2.5rem;
  font-size:1.5rem;
  cursor:pointer;
  border-radius:50%;
  transition:background 0.2s ease;
  z-index:2002;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,0.3);
}
.lightbox-nav:focus{
  outline:2px solid rgba(255,255,255,0.6);
  outline-offset:2px;
}
.lightbox-prev{
  left:1rem;
}
.lightbox-next{
  right:1rem;
}
.lightbox-counter{
  color:#fff;
  font-size:0.9rem;
  position:absolute;
  bottom:1rem;
  text-align:center;
  background:rgba(0,0,0,0.5);
  padding:0.4rem 0.8rem;
  border-radius:20px;
  backdrop-filter:blur(4px);
  z-index:2002;
}

/* Responsive lightbox */
@media (max-width:768px){
  .lightbox-container{
    padding:0.5rem;
    max-width:calc(100vw - 1rem);
    max-height:calc(100vh - 1rem);
  }
  .lightbox-content{
    padding-bottom:2rem;
  }
  #lightbox-image{
    max-width:90vw;
    max-height:70vh;
  }
  .lightbox-nav{
    width:2rem;
    height:2rem;
    font-size:1.2rem;
  }
  .lightbox-prev{
    left:0.5rem;
  }
  .lightbox-next{
    right:0.5rem;
  }
  .lightbox-close{
    width:2rem;
    height:2rem;
    font-size:1.2rem;
    top:0.25rem;
    right:0.25rem;
  }
  .lightbox-counter{
    font-size:0.8rem;
    bottom:0.5rem;
  }
}