/* ===== RESPONSIVE & MOBILE OPTIMIZATION ===== */

/* Base responsive improvements */
html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
}

/* Container improvements */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== MOBILE FIRST APPROACH ===== */

/* Extra small devices (phones, 320px and up) */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .wrap {
    padding: 0 12px;
  }
  
  /* Térkép faltól falig kis képernyőn */
  #meeting > .wrap > div[style*="display: grid"] > div:first-child {
    position: relative !important;
    left: -12px !important;
    width: calc(100% + 24px) !important;
  }
  
  #meeting div[style*="grid-template-columns:1fr 1fr"] > div:first-child {
    position: relative !important;
    left: -12px !important;
    width: calc(100% + 24px) !important;
  }
  
  /* Hero section mobile */
  .hero {
    height: 60vh !important;
    min-height: 400px !important;
    padding: 20px 0 !important;
  }
  
  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 25px !important;
  }
  
  /* Buttons mobile */
  .cta {
    padding: 10px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  
  .hero .cta {
    width: auto !important;
    min-width: 200px !important;
  }
  
  /* Grid layouts mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .stats {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Cards mobile */
  .card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .stat {
    padding: 1rem !important;
  }
  
  .stat b {
    font-size: 2rem !important;
  }
  
  /* Sections mobile */
  .section {
    padding: 2rem 0 !important;
  }
  
  /* Typography mobile */
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.2rem !important;
  }
  
  p, .lead {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
  
  /* Form elements mobile */
  input, textarea {
    padding: 12px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  label {
    font-size: 14px !important;
  }
}

/* Small devices (landscape phones, 481px and up) */
@media (min-width: 481px) and (max-width: 768px) {
  .wrap {
    padding: 0 16px;
  }
  
  /* Hero adjustments */
  .hero {
    height: 65vh !important;
    min-height: 450px !important;
  }
  
  .hero-title {
    font-size: 2.2rem !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
  
  /* Grid layouts */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  
  /* Sections */
  .section {
    padding: 3rem 0 !important;
  }
  
  /* Typography */
  h2 {
    font-size: 14.4rem !important;
  }
  
  body h2 {
    font-size: 14.4rem !important;
  }
  
  html body h2 {
    font-size: 14.4rem !important;
  }
  
  .cta {
    padding: 12px 24px !important;
    font-size: 16px !important;
  }
}

/* Medium devices (tablets, 769px and up) */
@media (min-width: 769px) and (max-width: 1024px) {
  .wrap {
    padding: 0 24px;
  }
  
  /* Grid adjustments for tablets */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
  }
  
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

/* ===== SPECIFIC SECTION RESPONSIVE FIXES ===== */

/* Header responsive */
@media (max-width: 768px) {
  header {
    padding: 0.75rem 0 !important;
  }
  
  header .wrap {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }
  
  header a[style*="font-size:1.1rem"] {
    font-size: 1rem !important;
  }
  
  header a.cta {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* Hero section responsive */
@media (max-width: 768px) {
  .hero {
    text-align: center !important;
  }
  
  .hero .wrap {
    padding: 0 12px !important;
  }
  
  .hero div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }
  
  .hero .cta,
  .hero .btn-hover-effect {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
  
  .hero .btn-hover-effect {
    margin-bottom: 10px !important;
  }
}

/* "Kik vagyunk" section responsive - one card per row on mobile */
@media (max-width: 768px) {
  section[style*="padding: 60px 16px 48px 16px"] {
    padding: 30px 16px 10px 16px !important;
  }
  
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 0 !important;
  }
  
  .grid[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Maintain order on small screens */
  div[style*="grid-template-columns:repeat(4,1fr)"] .card:nth-child(1),
  div[style*="grid-template-columns:repeat(4,1fr)"] .card:nth-child(2) {
    order: 1;
  }
  
  div[style*="grid-template-columns:repeat(4,1fr)"] .card:nth-child(3),
  div[style*="grid-template-columns:repeat(4,1fr)"] .card:nth-child(4) {
    order: 2;
  }
}

/* Meeting section responsive */
@media (max-width: 768px) {
  #meeting h2 {
    font-size: 1.8rem !important;
    margin-top: 2rem !important;
  }
  
  #meeting div[style*="text-align: center; margin-bottom: 4rem"] {
    margin-bottom: 2rem !important;
  }
  
  #meeting div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  #meeting h3 {
    font-size: 1.8rem !important;
  }
  
  /* Térkép első, Buena étterem szöveg második mobilon */
  #meeting div[style*="grid-template-columns:1fr 1fr"] > div:first-child {
    order: 1 !important;
  }
  
  #meeting div[style*="grid-template-columns:1fr 1fr"] > div:last-child {
    order: 2 !important;
  }
  
  /* Alternative selector for meeting section layout */
  #meeting > .wrap > div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  #meeting > .wrap > div[style*="display: grid"] > div:first-child {
    order: 1 !important; /* Map first */
  }
  
  #meeting > .wrap > div[style*="display: grid"] > div:last-child {
    order: 2 !important; /* Buena restaurant info second */
  }
  
  #meeting iframe {
    height: 250px !important;
  }
  
  /* Térkép faltól falig mobilon */
  #meeting > .wrap > div[style*="display: grid"] > div:first-child {
    position: relative !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
  }
  
  #meeting div[style*="grid-template-columns:1fr 1fr"] > div:first-child {
    position: relative !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
  }
  
  #meeting div[style*="height: 300px"] {
    height: auto !important;
  }
  
  #meeting ul {
    margin-bottom: 1rem !important;
  }
  
  #meeting div[style*="text-align: center; margin-top: 2rem"] {
    margin-top: 1rem !important;
  }
}

/* Stats section responsive */
@media (max-width: 768px) {
  section[style*="padding: 48px 16px"] h2 {
    margin-top: 1rem !important;
  }
  
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr !important;
  }
}

/* "Hogyan zajlik" section responsive */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 1fr"]:has(img) {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  div[style*="height:242px"] {
    height: auto !important;
    gap: 1rem !important;
  }
  
  div[style*="justify-content:space-between"] {
    justify-content: flex-start !important;
  }
}

/* BNI comparison section responsive */
@media (max-width: 768px) {
  section[style*="background:#fff"] div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Open seats section responsive */
@media (max-width: 768px) {
  #open-seats h2 {
    margin-top: 2rem !important;
  }
  
  #open-seats div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  

  
  #open-seats div[style*="grid-template-columns:1fr 1fr"] > div:first-child {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  #open-seats div[style*="grid-template-columns:1fr 1fr"] > div:first-child > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    max-width: 400px !important;
  }
  
  #open-seats .cta {
    width: 70% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* Visit section responsive */
@media (max-width: 768px) {
  #visit-container {
    display: block !important;
  }
  
  #visit-container > div:first-child {
    display: none !important;
  }
  
  #visit form.card {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
  }
  
  #visit form.card div[style*="text-align: center"] {
    text-align: center !important;
  }
  
  #visit form.card .cta {
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Testimonials responsive */
@media (max-width: 768px) {
  /* All testimonial grids - one card per row on mobile */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(280px,1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Testimonials section specific targeting */
  section[style*="background: linear-gradient"] .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Blockquote cards in testimonials */
  .grid blockquote.card {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
}

/* FAQ section responsive */
@media (max-width: 768px) {
  details {
    margin: 0.5rem 0 !important;
  }
  
  summary {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  
  details div {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
}

/* Footer responsive */
@media (max-width: 768px) {
  footer div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  footer div[style*="grid-template-columns:1fr 1fr 1fr;gap:2rem"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  
  footer div[style*="text-align:right"] {
    text-align: center !important;
  }
  
  footer div[style*="justify-content:flex-end"] {
    justify-content: center !important;
  }
  
  footer h4 {
    font-size: 0.9rem !important;
  }
  
  footer ul {
    font-size: 0.85rem !important;
  }
  
  footer small {
    font-size: 0.8rem !important;
  }
}

/* ===== MEMBER PAGES RESPONSIVE ===== */

/* Member cards responsive */
@media (max-width: 768px) {
  .member-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .member-card {
    margin-bottom: 1rem !important;
  }
  
  .member-card img {
    width: 120px !important;
    height: 120px !important;
  }
  
  .member-card .body {
    padding: 12px !important;
  }
  
  .member-card h3 {
    font-size: 16px !important;
  }
  
  .member-card .actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .member-card a.btn {
    width: 50% !important;
    text-align: center !important;
    padding: 8px !important;
    font-size: 0.8rem !important;
    margin: 0 auto !important;
  }
}

/* Member toolbar responsive */
@media (max-width: 768px) {
  .member-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  
  .member-search {
    width: 100% !important;
    min-width: auto !important;
  }
  
  .result-info {
    text-align: center !important;
  }
  
  /* Reduce space above Bemutatkozás text */
  #members .lead[style*="margin-top: 2rem"] {
    margin-top: 0.5rem !important;
  }
  
  /* Make member count text white */
  #members .result-info {
    color: #fff !important;
  }
  
  /* Make testimonial card text black on white background */
  blockquote.card {
    color: #000 !important;
    background: #fff !important;
  }
  
  /* Adjust testimonials title spacing */
  section[style*="background: linear-gradient(135deg, var(--bni-black), var(--bni-dark-red))"] h2 {
    margin-top: 3rem !important;
  }
}

/* Desktop testimonials title spacing */
@media (min-width: 769px) {
  section[style*="background: linear-gradient(135deg, var(--bni-black), var(--bni-dark-red))"] h2 {
    margin-top: 0.5rem !important;
  }
  
  /* Make testimonial card text dark gray on desktop */
  blockquote.card {
    color: #333 !important;
  }
}

/* FAQ section mobile spacing */
@media (max-width: 768px) {
  section.light[style*="padding-top: 3rem"] {
    padding-top: 1rem !important;
  }
  
  /* Reduce space below last FAQ on mobile */
  details[style*="margin: 1rem 0 -2rem 0"] {
    margin-bottom: -3rem !important;
  }
}

/* Individual member page responsive */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
  }
  
  .hero img {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
  }
  
  .hero-content {
    text-align: center !important;
  }
  
  .hero-content h1 {
    font-size: 2rem !important;
  }
  
  .hero-content .role {
    font-size: 1rem !important;
  }
  
  .hero-content .company {
    font-size: 1rem !important;
    text-align: center !important;
  }
  
  .contact-info {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .contact-item {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
  
  .image-section {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .image-section img {
    height: 200px !important;
  }
  
  /* Member page navigation buttons */
  div[style*="display:flex;justify-content:center"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  div[style*="display:flex;justify-content:center"] .back-link {
    width: 100% !important;
    max-width: 300px !important;
    margin: 5px auto !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  /* First row: Back button */
  div[style*="display:flex;justify-content:center"] .back-link[href*="#members"] {
    order: 1 !important;
  }
  
  /* Second row: Prev/Next buttons */
  div[style*="display:flex;justify-content:center"] .back-link:not([href*="#members"]) {
    order: 2 !important;
    width: 45% !important;
    display: inline-block !important;
  }
  
  .section {
    padding: 20px 15px !important;
    margin-bottom: 30px !important;
  }
  
  .section h2 {
    font-size: 1.5rem !important;
  }
  
  .section h3 {
    font-size: 1.2rem !important;
  }
  
  .section p,
  .section li {
    font-size: 0.95rem !important;
  }
}

/* ===== TOUCH IMPROVEMENTS ===== */

/* Larger touch targets for mobile */
@media (max-width: 768px) {
  a, button, input, textarea, select {
    min-height: 44px !important;
  }
  
  .cta, .btn {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  .card:hover,
  .stat:hover,
  .member-card:hover {
    transform: none !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus states for keyboard navigation */
@media (max-width: 768px) {
  a:focus,
  button:focus,
  input:focus,
  textarea:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
  }
}

/* ===== LANDSCAPE ORIENTATION FIXES ===== */

@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    height: 80vh !important;
    min-height: 300px !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .hero video,
  .cta,
  .btn,
  header,
  footer,
  .back-link {
    display: none !important;
  }
  
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
  }
  
  .section {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}