/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet és kisebb */
@media (max-width:1080px){
  .container.nav{ height:64px; }
  .menu{ gap:1rem; }
}

/* Tablet */
@media (max-width:920px){
  #blokkok .feature{
    grid-template-columns:1fr !important;
    gap: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2rem);
  }
  /* Ensure text comes before image on single-column layout */
  #blokkok .feature .copy{ 
    order:1 !important; 
  }
  #blokkok .feature .media{ 
    order:2 !important; 
  }
  
  /* Reset any reverse ordering on mobile */
  #blokkok .feature.reverse .copy{ 
    order:1 !important; 
  }
  #blokkok .feature.reverse .media{ 
    order:2 !important; 
  }
}

/* Mobil */
@media (max-width:720px){
  .menu{ 
    display:none; 
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .burger{ display:flex; }
  
  #nav-toggle:checked ~ .menu{ 
    display:flex; 
    opacity: 1;
    transform: translateY(0);
    flex-direction:column; 
    position:absolute; 
    top:72px; left:0; right:0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding:clamp(1.5rem, 4vw, 2rem);
    gap:clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Mobile menu backdrop */
  #nav-toggle:checked ~ .menu::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: -1;
    animation: fadeIn 0.3s ease;
  }
  
  /* Mobile menu link animations */
  #nav-toggle:checked ~ .menu a {
    animation: slideInLeft 0.3s ease forwards;
    opacity: 0;
  }
  
  #nav-toggle:checked ~ .menu a:nth-child(1) { animation-delay: 0.1s; }
  #nav-toggle:checked ~ .menu a:nth-child(2) { animation-delay: 0.15s; }
  #nav-toggle:checked ~ .menu a:nth-child(3) { animation-delay: 0.2s; }
  #nav-toggle:checked ~ .menu a:nth-child(4) { animation-delay: 0.25s; }
  #nav-toggle:checked ~ .menu a:nth-child(5) { animation-delay: 0.3s; }
  #nav-toggle:checked ~ .menu a:nth-child(6) { animation-delay: 0.35s; }
}

/* Keyframe animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
  
  .menu a{
    padding: 0.75rem 0;
    font-size: clamp(1rem, 4vw, 1.125rem);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .menu a:last-child{
    border-bottom: none;
  }
  
  .hero .container{
    padding: clamp(20px, 6vw, 40px) clamp(1rem, 4vw, 1.5rem);
  }
  /* Mobile readability */
  body{ 
    font-size:17px; 
    line-height:1.7; 
    letter-spacing: -0.005em;
  }
  .lead{ 
    font-size:1.06rem; 
    line-height:1.7; 
    letter-spacing: -0.005em;
  }
  #blokkok .copy p{ 
    font-size:1.12rem; 
    line-height:1.72; 
    letter-spacing: -0.005em;
  }
  #blokkok .copy h3{ 
    font-size:1.35rem; 
    letter-spacing: -0.015em;
  }
  .hero-card{ padding: clamp(20px, 4vw, 28px); }
  .hero-card .hero-subtitle{ 
    line-height:1.5; 
    letter-spacing: -0.005em;
  }
  .hero-card .hero-title{
    letter-spacing: -0.015em;
  }
}

/* Kis mobil */
@media (max-width:520px){
  .card-grid{ 
    grid-template-columns:1fr; 
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  
  .card{
    padding: clamp(1.25rem, 4vw, 1.75rem);
    min-height: 180px;
  }
  
  .card-center{
    max-width: 280px;
  }
  
  /* Ensure blocks are single column on small mobile too */
  #blokkok .feature{
    grid-template-columns:1fr !important;
  }
  #blokkok .feature .copy{ 
    order:1 !important; 
  }
  #blokkok .feature .media{ 
    order:2 !important; 
  }
  #blokkok .feature.reverse .copy{ 
    order:1 !important; 
  }
  #blokkok .feature.reverse .media{ 
    order:2 !important; 
  }
  
  .cta-inner{ 
    flex-direction:column; 
    text-align:center; 
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}

/* Enhanced mobile touch interactions */
@media (max-width: 768px) {
  .btn{
    min-height: 44px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  .card{
    min-height: 44px;
    cursor: pointer;
  }
  
  .menu a{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Better touch targets */
  .burger{
    min-width: 44px;
    min-height: 44px;
  }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .card::after,
  .card::before,
  .hero-card::after,
  .cta-strip::after {
    animation-duration: 0.3s;
  }
  
  /* Simplify hover effects on mobile */
  .card:hover{
    transform: translateY(-2px) scale(1.01);
  }
  
  .hero-card:hover{
    transform: translateY(-2px) scale(1.005);
  }
}