// ==========================================================================
// RESPONSIVE LAYOUTS
// ==========================================================================
// Responsive layout utilities and patterns
// Mobile-first approach with progressive enhancement
// ==========================================================================

// RESPONSIVE BREAKPOINTS (from base/_breakpoints.scss)
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

// RESPONSIVE UTILITIES
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

// RESPONSIVE DISPLAY UTILITIES
@media (max-width: 575px) {
  .d-xs-none { display: none !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex { display: flex !important; }
  .d-xs-grid { display: grid !important; }
  .d-xs-inline { display: inline !important; }
  .d-xs-inline-block { display: inline-block !important; }
  .d-xs-inline-flex { display: inline-flex !important; }
}

@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-grid { display: grid !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-grid { display: grid !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-inline-flex { display: inline-flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-grid { display: grid !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-grid { display: grid !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
}

// RESPONSIVE FLEX DIRECTION
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }

@media (max-width: 575px) {
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
  .flex-xs-row-reverse { flex-direction: row-reverse !important; }
}

@media (min-width: 576px) {
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
  .flex-sm-row-reverse { flex-direction: row-reverse !important; }
}

@media (min-width: 768px) {
  .flex-md-column { flex-direction: column !important; }
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
  .flex-md-row-reverse { flex-direction: row-reverse !important; }
}

// RESPONSIVE LAYOUT PATTERNS
.mobile-stack {
  @media (max-width: 767px) {
    flex-direction: column !important;
    
    > * {
      width: 100% !important;
      margin-bottom: var(--mobile-stack-gap, 16px);
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.tablet-stack {
  @media (max-width: 991px) {
    flex-direction: column !important;
    
    > * {
      width: 100% !important;
      margin-bottom: var(--tablet-stack-gap, 20px);
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// RESPONSIVE SPACING
.p-responsive {
  padding: var(--spacing-mobile, 16px);
  
  @media (min-width: 768px) {
    padding: var(--spacing-tablet, 24px);
  }
  
  @media (min-width: 1200px) {
    padding: var(--spacing-desktop, 32px);
  }
}

.m-responsive {
  margin: var(--spacing-mobile, 16px);
  
  @media (min-width: 768px) {
    margin: var(--spacing-tablet, 24px);
  }
  
  @media (min-width: 1200px) {
    margin: var(--spacing-desktop, 32px);
  }
}

// RESPONSIVE TEXT ALIGNMENT
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

@media (max-width: 575px) {
  .text-xs-center { text-align: center !important; }
  .text-xs-left { text-align: left !important; }
  .text-xs-right { text-align: right !important; }
}

@media (min-width: 576px) {
  .text-sm-center { text-align: center !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .text-md-center { text-align: center !important; }
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
}

// RESPONSIVE LAYOUT COMPONENTS
.responsive-sidebar {
  display: flex;
  gap: var(--sidebar-gap, 32px);
  
  .sidebar-main {
    flex: 1;
    min-width: 0;
  }
  
  .sidebar-aside {
    flex-shrink: 0;
    width: var(--sidebar-width, 300px);
  }
  
  @media (max-width: 991px) {
    flex-direction: column;
    gap: var(--sidebar-gap-mobile, 24px);
    
    .sidebar-aside {
      width: 100%;
      order: -1; // Move sidebar to top on mobile
    }
    
    &.sidebar-bottom {
      .sidebar-aside {
        order: 1; // Keep sidebar at bottom
      }
    }
  }
}

.responsive-cards {
  display: grid;
  gap: var(--cards-gap, 24px);
  grid-template-columns: 1fr;
  
  @media (min-width: 576px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @media (min-width: 1200px) {
    grid-template-columns: repeat(4, 1fr);
  }
  
  &.cards-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width, 280px), 1fr));
  }
  
  &.cards-2-max {
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  &.cards-3-max {
    @media (min-width: 1200px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

.responsive-hero {
  padding: var(--hero-padding-mobile, 48px 16px);
  text-align: center;
  
  @media (min-width: 768px) {
    padding: var(--hero-padding-tablet, 80px 24px);
  }
  
  @media (min-width: 1200px) {
    padding: var(--hero-padding-desktop, 120px 32px);
  }
  
  .hero-title {
    font-size: var(--hero-title-mobile, 2rem);
    
    @media (min-width: 768px) {
      font-size: var(--hero-title-tablet, 3rem);
    }
    
    @media (min-width: 1200px) {
      font-size: var(--hero-title-desktop, 4rem);
    }
  }
  
  .hero-subtitle {
    font-size: var(--hero-subtitle-mobile, 1rem);
    
    @media (min-width: 768px) {
      font-size: var(--hero-subtitle-tablet, 1.25rem);
    }
    
    @media (min-width: 1200px) {
      font-size: var(--hero-subtitle-desktop, 1.5rem);
    }
  }
}

// RESPONSIVE NAVIGATION
.responsive-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-padding, 16px 24px);
  
  .nav-brand {
    flex-shrink: 0;
  }
  
  .nav-menu {
    display: flex;
    align-items: center;
    gap: var(--nav-menu-gap, 24px);
    
    @media (max-width: 767px) {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      flex-direction: column;
      justify-content: center;
      background: var(--nav-mobile-bg, white);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: var(--z-nav-mobile, 1000);
      
      &.nav-menu-open {
        transform: translateX(0);
      }
    }
  }
  
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    
    @media (max-width: 767px) {
      display: flex;
    }
    
    .nav-toggle-bar {
      width: 24px;
      height: 2px;
      background: currentColor;
      transition: all 0.3s ease;
    }
    
    &.nav-toggle-active {
      .nav-toggle-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      
      .nav-toggle-bar:nth-child(2) {
        opacity: 0;
      }
      
      .nav-toggle-bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
      }
    }
  }
}