/* ===== LAYOUT CONTAINERS - ROVI 2025 ===== */
/* Container system, grid utilities, overflow prevention */

/* ===== CONTAINER BASE ===== */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: main-container;
}

/* Container size variants */
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

/* ===== OVERFLOW PREVENTION ===== */
* {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  max-width: 100%;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ===== RESPONSIVE IMAGES ===== */
.responsive-img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
  object-fit: cover;
}

.responsive-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ===== CONTAINER QUERIES ===== */
@supports (container-type: inline-size) {
  @container main-container (max-width: 768px) {
    .feature-card,
    .service-card,
    .event-card {
      padding: var(--space-md);
    }

    .events-grid {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
  }

  @container main-container (min-width: 769px) and (max-width: 1024px) {
    .events-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container main-container (min-width: 1025px) {
    .events-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ===== MOBILE CONTAINER ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .container {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 479px) {
  .container {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}