/* Responsive layout utilities */
* {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}
*:not(.gallery-container, .gallery-section, .gallery-swiper, .legal-content, .exit-warning-content, .legal-modal) {
  max-width: 100% !important;
}
body .container {
  width: var(--container-fluid);
  margin: 0 auto;
  padding: var(--space-sm);
  container-type: inline-size;
}
body .main-sections {
  width: 100%;
  margin: 0;
  padding: 0;
  container-type: inline-size;
}
body .container--narrow { width: var(--narrow-fluid); }
body .container--content { width: var(--content-fluid); }
body .container--wide { width: var(--wide-fluid); }
body .container--full { width: 100%; max-width: none; }

.grid,
.news-cards-container,
body .jobs-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
  container-type: inline-size;
  padding: 0;
}
:not(.menu-content-area) .grid,
:not(.menu-content-area) .news-cards-container,
:not(.menu-content-area) :not(.menu-content-area) .jobs-grid {
  padding: 0 var(--space-xs);
}
.menu-content-area .grid,
.menu-content-area .news-cards-container,
body .menu-content-area .menu-content-area .jobs-grid {
  padding: 0 ;
}

/* Override default single column for responsive grids */
.grid--auto,
body .jobs-grid {
  grid-template-columns: 1fr;
}

/* Desktop: restore multi-column layout for news cards */



@container (min-width: 480px) {
  .grid--auto,
  body .jobs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--component-md), 45%), 1fr));
  }

  /* Force news cards to use proper grid layout */
  .news-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  }
  h1, .hero-title {
    font-size: var(--text-5xl);
  }
}

@container (min-width: 600px) and (max-width: 767px) {
  body .jobs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 45%), 1fr));
    gap: var(--space-md);
  }
}

@container (min-width: 768px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-md), 1fr));
  }

  /* Force news cards to use proper grid layout */
  body .news-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  }
  body .jobs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 45%), 1fr));
  }
}

@container (min-width: 1024px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-lg), 1fr));
    gap: var(--space-lg);
  }

  /* Force news cards to use proper grid layout */
  body .news-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: var(--space-lg);
  }
  body .jobs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 45%), 1fr));
    gap: var(--space-lg);
  }
}

@container (min-width: 1400px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(var(--component-xl), 1fr));
    gap: var(--space-xl);
    justify-content: center;
  }

  /* Force news cards to use proper grid layout */
  body .news-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: var(--space-xl);
    justify-content: center;
  }
  body .jobs-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 45%), 1fr));
    gap: var(--space-xl);
    justify-content: center;
  }
}
.career-hero,
body .news-hero {
  width: 100% !important;
  margin: 0 ;
  padding: var(--space-md) var(--space-sm) ;
  container-type: inline-size;
}


@container (min-width: 768px) {
  .career-hero,
  body .news-hero {
    padding: var(--space-xl) var(--space-lg);
  }
}




.gallery-section,
.gallery-container,
body .gallery-swiper {
  width: 100vw ;
  max-width: none ;
  margin-left: calc(-50vw + 50%) ;
  margin-right: calc(-50vw + 50%) ;
  padding-left: 0 ;
  padding-right: 0 ;
}
.swiper-wrapper,
body .swiper-slide {
  width: 100% !important;
}
.gallery-section * {
  box-sizing: border-box;
}









/* Responsive Design - Media Queries */
@media print {
  * {
    color: black ;
    background: white !important;
  }
  body .container {
    width: 100%;
    max-width: none ;
    padding: 0 ;
    margin: 0 ;
  }
  body .main-sections {
    width: 100%;
    max-width: none ;
    padding: 0 ;
    margin: 0 ;
  }
  body .menu-content-area {
    width: 100%;
    max-width: none ;
    padding: 0 ;
    margin: 0 ;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: high) {
  .card,
  body .job-card {
    border: 2px solid currentColor;
  }
}

@media (max-width: 480px) {
  body .container {
    width: 100%;
    padding: var(--space-xs);
    margin: 0;
  }
  body .main-sections {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 480px) {
  :not(.menu-content-area) .grid,
  :not(.menu-content-area) .news-cards-container,
  :not(.menu-content-area) :not(.menu-content-area) :not(.menu-content-area) .jobs-grid {
    gap: var(--space-xs);
    padding: 0;
    margin: 0 var(--space-xs);
  }
  .menu-content-area .grid,
  .menu-content-area .news-cards-container,
  body .menu-content-area .menu-content-area .menu-content-area .jobs-grid {
    gap: var(--space-xs);
    margin: 0 ;
    padding: 0 ;
  }
  .grid--auto,
  body .jobs-grid {
    grid-template-columns: 1fr !important;
  }

  /* Only force single column for news on very small screens */
  .news-cards-container {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .career-hero,
  body .news-hero {
    padding: var(--space-sm) var(--space-xs) ;
  }
  .career-hero h1,
  .news-hero h1 {
    font-size: clamp(1.2rem, 6vw, 1.8rem) ;
    line-height: 1.2 ;
    margin-bottom: var(--space-sm) ;
  }
}

@media (max-width: 480px) {
  body .container {
    padding: calc(var(--space-xs) / 2) ;
  }
  body .main-sections {
    padding: 0 ;
  }
  body .menu-content-area {
    padding: 0 ;
  }
  .news-card,
  body .job-card {
    margin-bottom: var(--space-xs) ;
    padding: var(--space-sm) ;
  }
  .news-card h3,
  .job-card h3 {
    font-size: clamp(1rem, 4vw, 1.2rem) ;
    line-height: 1.3 ;
  }
  .news-card p,
  .job-card p {
    font-size: clamp(0.85rem, 3vw, 0.95rem) ;
    line-height: 1.4 ;
  }
}

@media (max-width: 480px) {
  button,
  .btn,
  .newsletter-button,
  body .job-apply-btn {
    width: 100% !important;
    margin-bottom: var(--space-xs) ;
  }
}

@media (max-width: 480px) {
  body .menu-inline-content {
    padding: var(--space-xs) 0 var(--space-md) 0 ;
    margin-bottom: var(--space-sm) ;
  }
}

@media (min-width: 581px) and (max-width: 767px) {
  body #careers-section .career-hero-content {
    flex-direction: row ;
    gap: var(--space-md) ;
  }
  body #careers-section .career-hero-text {
    flex: 1 1 40% !important;
    max-width: 40% ;
  }
  body #careers-section .career-hero-jobs {
    flex: 1 1 60% !important;
    max-width: 60% ;
    display: flex;
  }
  body .jobs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm) ;
    width: 100% !important;
  }
  body .job-card {
    min-width: 0 ;
    flex: 1 !important;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  :not(.menu-content-area) .grid,
  :not(.menu-content-area) .news-cards-container,
  :not(.menu-content-area) :not(.menu-content-area) .jobs-grid {
    gap: var(--space-sm);
    padding: 0 var(--space-sm);
  }
  .menu-content-area .grid,
  .menu-content-area .news-cards-container,
  body .menu-content-area .menu-content-area .jobs-grid {
    padding: 0 ;
  }
}

@media (max-width: 640px) {
  button,
  .btn,
  .newsletter-button,
  .job-apply-btn,
  body .pagination-btn {
    min-height: 44px !important;
    min-width: 44px ;
    padding: var(--space-sm) var(--space-md) ;
    font-size: clamp(0.9rem, 3vw, 1rem) ;
    border-radius: 8px !important;
  }
}

@media (max-width: 640px) {
  .menu-item + .menu-item .menu-item-header {
    margin-top: var(--space-md) ;
  }
}

@media (max-width: 640px) {
  .news-pagination-controls,
  body .pagination-controls {
    flex-direction: column ;
    gap: var(--space-sm) ;
    padding: var(--space-sm) ;
  }
  body .pagination-btn {
    width: 100% !important;
    justify-content: center ;
  }
}

@media (min-width: 768px) {
  body #careers-section .career-hero-content {
    flex-direction: row ;
    gap: var(--spacing-2xl) ;
  }
  body #careers-section .career-hero-text {
    flex: 1 1 50% !important;
    max-width: 50% ;
  }
  body #careers-section .career-hero-jobs {
    flex: 1 1 50% !important;
    max-width: 50% ;
    display: flex;
  }
}

@media (min-width: 481px) {
  .news-cards-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  }
}

@media (max-width: 580px) {
  body .container {
    width: 100% !important;
    max-width: none ;
    margin: 0 ;
    padding: var(--space-xs) ;
  }
  body .main-sections {
    width: 100% !important;
    max-width: none ;
    margin: 0 ;
    padding: 0 ;
  }
  body .menu-content-area {
    width: 100% !important;
    max-width: none ;
    margin: 0 ;
    padding: 0 ;
  }
  body .menu-item {
    width: 100% !important;
    max-width: none ;
    margin: 0 ;
    padding: 0 ;
  }
  body .menu-inline-content {
    width: 100% !important;
    max-width: none ;
    margin: 0 ;
    margin-bottom: var(--space-md) ;
    padding: var(--space-sm) 0 var(--space-lg) 0 ;
  }
  .news-card,
  .job-card,
  body .content-panel {
    width: 100% !important;
    max-width: none ;
    margin-bottom: var(--space-sm) ;
    flex: none !important;
  }
  .news-hero-content-content,
  body .career-hero-content {
    flex-direction: column ;
    gap: var(--space-sm) ;
    align-items: stretch ;
  }
}