/* ============================================================================
   📦 K2 Container Utilities (Base + Variants)
   ----------------------------------------------------------------------------
   Purpose:
   Provides consistent, responsive layout containers for structuring page
   content. Containers manage width, centering, and spacing in a mobile-first
   manner. All max-widths and paddings are token-based for visual consistency.

   Responsive behavior for `.k2-container` is defined in `k2-breakpoints.css`.

   Variants Overview:
   ----------------------------------------------------------------------------
   ✅ .k2-container
      → Standard responsive container.
      → Full width on mobile, constrained on larger screens.

   ✅ .k2-container-fluid / .k2-container-full
      → Always 100% width, ignores max-width breakpoints.
      → Perfect for banners, background sections, and full-bleed layouts.

   ✅ .k2-container-narrow
      → Fixed-width (~720px).
      → Ideal for long-form text, modals, or article pages.

   ✅ .k2-container-wide
      → Wide layout for dashboards or hero areas.
      → Uses `--k2-container-3xl` (1600px max width).

   ✅ .k2-container-max
      → Adaptive “maxed-out” layout using the largest available width token.
      → Automatically scales up to `--k2-container-3xl`.

   ✅ .k2-container-split
      → Two-column flex layout with equal-width or flexible columns.
      → Perfect for side-by-side hero, image+text, or dual CTA sections.

   ----------------------------------------------------------------------------
   🧩 Design Principles:
   • Mobile-first: 100% width base, constrained upwards by tokens.
   • Centered horizontally via `margin: auto`.
   • Horizontal padding uses spacing tokens for consistent gutters.
   • No hardcoded pixel values—fully tokenized system.
   • Compatible with flex and grid utilities.
   
   ============================================================================

   💡 Usage Examples
   ----------------------------------------------------------------------------

   <!-- 1️⃣ Default responsive container -->
   <div class="k2-container">
     <h1>Welcome to Techypreneur</h1>
     <p>Empowering learners with industry-ready AI & IT programs.</p>
   </div>

   <!-- 2️⃣ Full-width / fluid -->
   <section class="k2-container-fluid k2-bg-accent k2-text-light">
     <h2 class="k2-text-center">Join 10,000+ Learners</h2>
   </section>

   <!-- 3️⃣ Narrow -->
   <article class="k2-container-narrow">
     <h2>Understanding Vector Databases</h2>
     <p>Vector databases power semantic search and AI-driven retrieval systems...</p>
   </article>

   <!-- 4️⃣ Wide -->
   <section class="k2-container-wide">
     <h1 class="k2-text-gradient-accent-linear">AI Master Program Overview</h1>
   </section>

   <!-- 5️⃣ Max -->
   <section class="k2-container-max">
     <h2>Enterprise AI Infrastructure Overview</h2>
   </section>

   <!-- 6️⃣ Split -->
   <section class="k2-container-split">
     <div>
       <h2>AI for Everyone</h2>
       <p>Learn how to leverage AI to solve real-world problems.</p>
       <button class="k2-btn k2-btn-primary">Get Started</button>
     </div>
     <div>
       <img src="/public/images/ai-illustration.png" alt="AI Concept" class="k2-radius-lg">
     </div>
   </section>
   ============================================================================
*/



/* Shared base styles */
.k2-container,
.k2-container-fluid,
.k2-container-full,
.k2-container-narrow,
.k2-container-wide,
.k2-container-max,
.k2-container-split {
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--k2-space-4);
  padding-right: var(--k2-space-4);
  box-sizing: border-box;
}

/* Standard responsive container */
.k2-container {}

/* Fluid/full-width container */
.k2-container-fluid,
.k2-container-full {
  max-width: 100% !important;
}

/* Narrow container (long-form / text-heavy) */
.k2-container-narrow {
  max-width: var(--k2-container-md);
}

/* Wide container (dashboards / hero / data-heavy) */
.k2-container-wide {
  max-width: var(--k2-container-2xl);
}

/* Max container (auto-adaptive upper bound) */
.k2-container-max {
  max-width: var(--k2-container-3xl);
}

/* Two-column split container */
.k2-container-split,
.k2-container-split-reverse {
  display: flex;
  flex-direction: column; /* Stack on mobile */
  gap: var(--k2-space-4);
}




/* ============================================================================
   📦 Responsive Max-Widths for Standard Containers
   ----------------------------------------------------------------------------
   Uses design tokens from k2-theme.css for consistent container widths.
   Other container variants (fluid, narrow, wide) remain unaffected.
   ============================================================================
*/

/* Tablets and small devices ≥ 640px */
@media (min-width: 640px) {
  .k2-container { max-width: var(--k2-container-sm); }   /* ~600px ideal */
}

/* Medium devices ≥ 768px */
@media (min-width: 768px) {
  .k2-container { max-width: var(--k2-container-md); }   /* 720px */
}

/* Large devices ≥ 1024px */
@media (min-width: 1024px) {
  .k2-container { max-width: var(--k2-container-lg); }   /* 960px */
}

/* Extra-large devices ≥ 1280px */
@media (min-width: 1280px) {
  .k2-container { max-width: var(--k2-container-xl); }   /* 1140px */
}

/* Ultra-wide screens ≥ 1536px */
@media (min-width: 1536px) {
  .k2-container { max-width: var(--k2-container-2xl); }  /* 1320px */
}

/* Super-ultra-wide screens ≥ 1600px */
@media (min-width: 1600px) {
  .k2-container { max-width: var(--k2-container-3xl); }  /* 1600px */
}


/* ============================================================================
   📦 Responsive min-Width for Split and reverse
   ============================================================================
*/

@media (min-width: 768px) {
  .k2-container-split,
  .k2-container-split-reverse {
    flex-direction: row; /* Side-by-side on tablet+ */
    align-items: center;
    justify-content: space-between;
  }

  .k2-container-split > *,
  .k2-container-split-reverse > * {
    flex: 1 1 50%;
  }

  /* Reverse column order */
  .k2-container-split-reverse {
    flex-direction: row-reverse;
  }
}