/* =========================================================
   CODERN
   Layout System
   File: css/layout.css
   Version: 3.1.0

   Theme Support:
   - Dark Mode = Original Codern theme
   - Light Mode = Clean white theme
   - Layout remains color-independent
   - Uses global variables from variables.css
   - Responsive desktop / tablet / mobile system
   ========================================================= */


/* ---------------------------------------------------------
   1. PAGE WRAPPER
   --------------------------------------------------------- */

.page {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow-x: hidden;

  /*
   * Theme-aware background.
   * Uses the new global variable from variables.css.
   */
  background-color: var(
    --color-background,
    #0a0e27
  );

  transition:
    background-color
      var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}


/* ---------------------------------------------------------
   2. MAIN CONTAINER
   --------------------------------------------------------- */

.container {
  width: min(
    calc(
      100% -
      (
        var(--container-padding, 24px) * 2
      )
    ),
    var(--container-max-width, 1280px)
  );

  margin-inline: auto;
}


/* ---------------------------------------------------------
   3. CONTAINER VARIANTS
   --------------------------------------------------------- */

.container-sm {
  width: min(
    calc(
      100% -
      (
        var(--container-padding, 24px) * 2
      )
    ),
    var(--container-max-width-sm, 640px)
  );

  margin-inline: auto;
}


.container-md {
  width: min(
    calc(
      100% -
      (
        var(--container-padding, 24px) * 2
      )
    ),
    var(--container-max-width-md, 960px)
  );

  margin-inline: auto;
}


.container-lg {
  width: min(
    calc(
      100% -
      (
        var(--container-padding, 24px) * 2
      )
    ),
    var(--container-max-width-lg, 1440px)
  );

  margin-inline: auto;
}


.container-fluid {
  width: 100%;

  padding-inline:
    var(--container-padding, 24px);
}


/* ---------------------------------------------------------
   4. SECTION SPACING
   --------------------------------------------------------- */

.section {
  position: relative;

  width: 100%;

  padding-block:
    var(--section-padding-y, 100px);

  background-color: transparent;

  /*
   * Prevent fixed header from covering anchored sections.
   */
  scroll-margin-top:
    var(--header-height, 80px);
}


.section-sm {
  padding-block:
    var(--section-padding-y-sm, 64px);
}


.section-lg {
  padding-block:
    var(--section-padding-y-lg, 140px);
}


.section-none {
  padding-block: 0;
}


/* ---------------------------------------------------------
   5. SECTION HEADER
   --------------------------------------------------------- */

.section-header {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  margin-bottom:
    var(--space-10, 40px);
}


.section-header.center {
  align-items: center;

  margin-inline: auto;

  text-align: center;
}


.section-header.center .section-description {
  margin-inline: auto;
}


/* ---------------------------------------------------------
   6. FLEX LAYOUT
   --------------------------------------------------------- */

.flex {
  display: flex;
}


.inline-flex {
  display: inline-flex;
}


.flex-row {
  flex-direction: row;
}


.flex-row-reverse {
  flex-direction: row-reverse;
}


.flex-column {
  flex-direction: column;
}


.flex-column-reverse {
  flex-direction: column-reverse;
}


.flex-wrap {
  flex-wrap: wrap;
}


.flex-nowrap {
  flex-wrap: nowrap;
}


/* ---------------------------------------------------------
   7. FLEX ALIGNMENT
   --------------------------------------------------------- */

.items-start {
  align-items: flex-start;
}


.items-center {
  align-items: center;
}


.items-end {
  align-items: flex-end;
}


.items-stretch {
  align-items: stretch;
}


.items-baseline {
  align-items: baseline;
}


.justify-start {
  justify-content: flex-start;
}


.justify-center {
  justify-content: center;
}


.justify-end {
  justify-content: flex-end;
}


.justify-between {
  justify-content: space-between;
}


.justify-around {
  justify-content: space-around;
}


.justify-evenly {
  justify-content: space-evenly;
}


/* ---------------------------------------------------------
   8. GRID LAYOUT
   --------------------------------------------------------- */

.grid {
  display: grid;
}


.grid-1 {
  grid-template-columns:
    repeat(1, minmax(0, 1fr));
}


.grid-2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


.grid-3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


.grid-4 {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


.grid-5 {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}


.grid-6 {
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
}


/* ---------------------------------------------------------
   9. AUTO GRID
   --------------------------------------------------------- */

.grid-auto-sm {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );
}


.grid-auto-md {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );
}


.grid-auto-lg {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(300px, 1fr)
    );
}


/* ---------------------------------------------------------
   10. GRID SPACING
   --------------------------------------------------------- */

.gap-1 {
  gap: var(--space-1, 4px);
}


.gap-2 {
  gap: var(--space-2, 8px);
}


.gap-3 {
  gap: var(--space-3, 12px);
}


.gap-4 {
  gap: var(--space-4, 16px);
}


.gap-5 {
  gap: var(--space-5, 20px);
}


.gap-6 {
  gap: var(--space-6, 24px);
}


.gap-8 {
  gap: var(--space-8, 32px);
}


.gap-10 {
  gap: var(--space-10, 40px);
}


.gap-12 {
  gap: var(--space-12, 48px);
}


.gap-16 {
  gap: var(--space-16, 64px);
}


/* ---------------------------------------------------------
   11. TWO-COLUMN LAYOUT
   --------------------------------------------------------- */

.two-column {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    var(--layout-gap, 48px);
}


.two-column-wide {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 0.65fr);

  gap:
    var(--layout-gap, 48px);
}


.two-column-sidebar {
  display: grid;

  grid-template-columns:
    minmax(0, 0.7fr)
    minmax(0, 1.3fr);

  gap:
    var(--layout-gap, 48px);
}


/* ---------------------------------------------------------
   12. THREE-COLUMN LAYOUT
   --------------------------------------------------------- */

.three-column {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    var(--layout-gap, 48px);
}


/* ---------------------------------------------------------
   13. SIDEBAR LAYOUT
   --------------------------------------------------------- */

.sidebar-layout {
  display: grid;

  grid-template-columns:
    var(--sidebar-width, 280px)
    minmax(0, 1fr);

  gap:
    var(--layout-gap, 48px);
}


.sidebar-layout-right {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    var(--sidebar-width, 280px);

  gap:
    var(--layout-gap, 48px);
}


/* ---------------------------------------------------------
   14. CONTENT WIDTHS
   --------------------------------------------------------- */

.content-narrow {
  width: min(100%, 680px);
}


.content-medium {
  width: min(100%, 900px);
}


.content-wide {
  width: min(100%, 1200px);
}


/* ---------------------------------------------------------
   15. CENTERED CONTENT
   --------------------------------------------------------- */

.center-content {
  display: flex;

  align-items: center;

  justify-content: center;
}


.center-block {
  margin-inline: auto;
}


/* ---------------------------------------------------------
   16. STACK
   --------------------------------------------------------- */

.stack {
  display: flex;

  flex-direction: column;
}


.stack-xs {
  gap: var(--space-2, 8px);
}


.stack-sm {
  gap: var(--space-4, 16px);
}


.stack-md {
  gap: var(--space-6, 24px);
}


.stack-lg {
  gap: var(--space-8, 32px);
}


.stack-xl {
  gap: var(--space-12, 48px);
}


/* ---------------------------------------------------------
   17. INLINE GROUP
   --------------------------------------------------------- */

.inline-group {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-3, 12px);
}


/* ---------------------------------------------------------
   18. FULL WIDTH / HEIGHT
   --------------------------------------------------------- */

.w-full {
  width: 100%;
}


.w-auto {
  width: auto;
}


.h-full {
  height: 100%;
}


.min-h-screen {
  min-height: 100vh;
}


/* ---------------------------------------------------------
   19. POSITIONING
   --------------------------------------------------------- */

.relative {
  position: relative;
}


.absolute {
  position: absolute;
}


.fixed {
  position: fixed;
}


.sticky {
  position: sticky;
}


.inset-0 {
  inset: 0;
}


.top-0 {
  top: 0;
}


.right-0 {
  right: 0;
}


.bottom-0 {
  bottom: 0;
}


.left-0 {
  left: 0;
}


/* ---------------------------------------------------------
   20. Z-INDEX
   --------------------------------------------------------- */

.z-base {
  z-index: var(--z-base, 1);
}


.z-dropdown {
  z-index: var(--z-dropdown, 100);
}


.z-sticky {
  z-index: var(--z-sticky, 200);
}


.z-fixed {
  z-index: var(--z-fixed, 300);
}


.z-modal {
  z-index: var(--z-modal, 1000);
}


.z-popover {
  z-index: var(--z-popover, 1100);
}


.z-tooltip {
  z-index: var(--z-tooltip, 1200);
}


/* ---------------------------------------------------------
   21. OVERFLOW
   --------------------------------------------------------- */

.overflow-hidden {
  overflow: hidden;
}


.overflow-auto {
  overflow: auto;
}


.overflow-x-auto {
  overflow-x: auto;
}


.overflow-y-auto {
  overflow-y: auto;
}


/* ---------------------------------------------------------
   22. DIVIDED CONTENT
   --------------------------------------------------------- */

.divider {
  width: 100%;

  height: 1px;

  margin-block:
    var(--space-8, 32px);

  background:
    var(--color-border, rgba(255, 255, 255, 0.10));

  transition:
    background-color
      var(--theme-transition-duration, 300ms)
      var(--theme-transition-easing, ease);
}


/* ---------------------------------------------------------
   23. SAFE CONTENT WIDTH
   --------------------------------------------------------- */

.min-w-0 {
  min-width: 0;
}


.max-w-full {
  max-width: 100%;
}


/* ---------------------------------------------------------
   24. RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    width: min(
      calc(
        100% -
        (
          var(--container-padding-tablet, 32px) * 2
        )
      ),
      var(--container-max-width, 1280px)
    );
  }


  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .three-column {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sidebar-layout,
  .sidebar-layout-right {
    grid-template-columns: 1fr;
  }


  .sidebar-layout > aside,
  .sidebar-layout-right > aside {
    width: 100%;
  }
}


/* ---------------------------------------------------------
   25. RESPONSIVE — MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    width: min(
      calc(
        100% -
        (
          var(--container-padding-mobile, 20px) * 2
        )
      ),
      var(--container-max-width, 1280px)
    );
  }


  .container-fluid {
    padding-inline:
      var(--container-padding-mobile, 20px);
  }


  .section {
    padding-block:
      var(--section-padding-y-mobile, 72px);

    scroll-margin-top:
      var(--header-height-mobile, 72px);
  }


  .section-sm {
    padding-block:
      var(--section-padding-y-mobile-sm, 48px);
  }


  .section-lg {
    padding-block:
      var(--section-padding-y-mobile-lg, 96px);
  }


  .section-header {
    margin-bottom:
      var(--space-8, 32px);
  }


  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .three-column,
  .two-column,
  .two-column-wide,
  .two-column-sidebar {
    grid-template-columns: 1fr;
  }


  .flex-row,
  .flex-row-reverse {
    flex-direction: column;
  }


  .mobile-column {
    flex-direction: column;
  }


  .mobile-center {
    align-items: center;

    justify-content: center;

    text-align: center;
  }


  .mobile-full {
    width: 100%;
  }
}


/* ---------------------------------------------------------
   26. SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    width: calc(
      100% -
      (
        var(--container-padding-small, 16px) * 2
      )
    );
  }


  .container-fluid {
    padding-inline:
      var(--container-padding-small, 16px);
  }


  .section-header {
    margin-bottom:
      var(--space-6, 24px);
  }


  .grid-auto-sm,
  .grid-auto-md,
  .grid-auto-lg {
    grid-template-columns: 1fr;
  }


  .inline-group {
    align-items: stretch;

    flex-direction: column;
  }


  .inline-group > * {
    width: 100%;
  }
}


/* ---------------------------------------------------------
   27. EXTRA SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 360px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    width: calc(
      100% -
      (
        var(--container-padding-small, 16px) * 2
      )
    );
  }


  .section {
    padding-block:
      var(--section-padding-y-mobile-sm, 48px);
  }
}


/* ---------------------------------------------------------
   28. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .page,
  .divider {
    transition: none;
  }
}