/* ==============================================
   IMPORTANT: Image hover swap functionality
   ============================================== 
   The CSS 'content' property does NOT work on <img> elements.
   Use JavaScript for image swapping on hover.
   
   Add this to your HTML before </body>:
   
   <script>
   document.querySelectorAll('img[data-hover-src]').forEach(img => {
     const original = img.src;
     img.addEventListener('mouseenter', () => {
       img.src = img.dataset.hoverSrc;
     });
     img.addEventListener('mouseleave', () => {
       img.src = original;
     });
   });
   </script>
   
   Then use: <img src="image.jpg" data-hover-src="image_selected.jpg" alt="...">
*/

/* ==============================================
   Body and Base Styles
   ============================================== */
body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}

@media (min-width: 1280px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ==============================================
   Banner Section
   ============================================== */
.banner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* ==============================================
   Sponsors Section
   ============================================== */
.sponsors {
  width: 100%;
  max-width: 1280px;
  height: 180px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.sponsors img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
  display: block; /* Changed from display: flex */
}

/* ==============================================
   Header Section
   ============================================== */
.header {
  width: 100%;
  max-width: 1280px;
  background-color: #fff;
  margin: 0 auto;
}

.header-flex {
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-wrap: nowrap; /* Explicit for Safari */
}

.header-logo {
  width: 20%;
  display: flex;
  align-items: stretch;
  flex-shrink: 0; /* Prevent Safari flex shrinking */
}

.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.header-top {
  width: 80%;
  display: flex;
  align-items: stretch;
  position: relative;
  flex-shrink: 0; /* Prevent Safari flex shrinking */
}

.header-top img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==============================================
   Language Switcher
   ============================================== */
.lang-link {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  cursor: pointer;
  z-index: 10;
  /* Uncomment below to see clickable areas during development */
  /* background: rgba(0, 255, 0, 0.3); */
}

.lang-hun {
  right: 12%;
}

.lang-eng {
  right: 2%;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==============================================
   Spacer Element
   ============================================== */
.spacer {
  height: 30px;
  background: #dcddd7;
  border-bottom: 1px solid #bbb;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ==============================================
   Programs Grid
   ============================================== */
.programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  background: #111;
  box-sizing: border-box;
  gap: 0;
}

/* Safari Grid fix */
@supports (-webkit-appearance: none) {
  .programs {
    -webkit-box-sizing: border-box;
  }
}

/* ==============================================
   Event Cards
   ============================================== */
.event {
  background: #222;
  color: #fff;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.event-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.event img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================================
   Responsive Breakpoints
   ============================================== */

/* Hide spacer events below 1100px */
@media (max-width: 1099px) {
  .event-spacer {
    display: none;
  }
}

/* 2 columns: 900px to 1099px */
@media (max-width: 1099px) and (min-width: 900px) {
  .programs {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100vw;
    max-width: 100%; /* Safari fallback */
    width: 100vw;
    width: 100%; /* Safari fallback */
    margin: 0;
  }
  
  .spacer {
    max-width: 100vw;
    max-width: 100%; /* Safari fallback */
    width: 100vw;
    width: 100%; /* Safari fallback */
    margin: 0;
  }
}

/* 1 column: below 900px */
@media (max-width: 899px) {
  /* Header proportions change */
  .header-logo {
    width: 33.33%;
  }
  
  .header-top {
    width: 66.67%;
  }
  
  /* Adjust language link positions for mobile */
  .lang-hun {
    right: 18%;
  }
  
  .lang-eng {
    right: 6%;
  }
  
  /* Single column layout */
  .programs {
    grid-template-columns: 1fr;
    max-width: 100vw;
    max-width: 100%; /* Safari fallback */
    width: 100vw;
    width: 100%; /* Safari fallback */
    padding: 0;
    gap: 0;
    margin: 0;
  }
  
  .spacer {
    max-width: 100vw;
    max-width: 100%; /* Safari fallback */
    width: 100vw;
    width: 100%; /* Safari fallback */
    margin: 0;
    height: calc(0.1 * var(--header-height, 120px));
    background: #e0e0e0;
    border-bottom: 2px solid #bbb;
  }
}

/* ==============================================
   Safari-specific Fixes
   ============================================== */
@supports (-webkit-appearance: none) {
  .header-flex,
  .header-logo,
  .header-top,
  .banner,
  .sponsors {
    -webkit-box-sizing: border-box;
  }
  
  /* Ensure flex items don't collapse in Safari */
  .event {
    min-width: 0;
    min-height: 0;
  }
}