/* ========================================
   RESPONSIVE FOUNDATION - Phase 1
   ======================================== */

/* ===== CUSTOM BOOTSTRAP BREAKPOINTS ===== */
/* Override Bootstrap's default breakpoints for enhanced control */
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

/* ===== CONTAINER SYSTEM ===== */
/* Enhanced container system with 2K monitor support */
.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* 2K Monitor Optimization */
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

/* ===== RESPONSIVE GRID SYSTEM ===== */
/* Multi-tier grid layouts for different screen sizes */

/* Mobile First (xs) - 1 column */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.col {
  flex: 1 0 0%;
}

/* Tablet Portrait (sm) - 2 columns */
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Tablet Landscape (md) - 3 columns */
@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
}

/* Desktop (lg) - 4 columns */
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-lg-8 {
    flex: 0 0 auto;
    width: 56.666667%;
  }
  
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
}

/* Large Desktop (xl) - 5 columns */
@media (min-width: 1200px) {
  .col-xl-2 {
    flex: 0 0 auto;
    width: 20%;
  }
  
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
}

/* 2K Monitor (xxl) - 6 columns */
@media (min-width: 1400px) {
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
/* Fluid typography using CSS clamp() for optimal scaling */

.hero-headline {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.hero-subtext {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

/* ===== RESPONSIVE SPACING ===== */
/* Consistent spacing system across breakpoints */

.py-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .py-section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 992px) {
  .py-section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

@media (min-width: 1200px) {
  .py-section {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }
}

/* ===== RESPONSIVE IMAGES ===== */
/* Art direction and responsive image handling */

.responsive-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Hero image specific sizing */
.hero-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .hero-visual img {
    max-height: 500px;
    object-fit: cover;
  }
}

@media (min-width: 1200px) {
  .hero-visual img {
    max-height: 600px;
  }
}

/* ===== RESPONSIVE NAVIGATION ===== */
/* Mobile-first navigation with desktop enhancements */

.navbar-brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary) !important;
}

.navbar-nav .nav-link {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: color var(--transition-fast);
}

.navbar-nav .nav-link:hover {
  color: var(--color-primary) !important;
}

/* Desktop mega-menu for xxl screens */
@media (min-width: 1400px) {
  .dropdown-menu {
    min-width: 300px;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
  }
  
  .dropdown-item {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
  }
  
  .dropdown-item:hover {
    background-color: var(--color-gray-50);
  }
}

/* ===== RESPONSIVE CARDS ===== */
/* Card system that adapts to different screen sizes */

.service-card,
.solution-card,
.testimonial-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card:hover,
.solution-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Mobile card adjustments */
@media (max-width: 767.98px) {
  .service-card,
  .solution-card,
  .testimonial-card {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
}

/* ===== RESPONSIVE FORMS ===== */
/* Form system that works across all devices */

.form-control {
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* ===== RESPONSIVE BUTTONS ===== */
/* Button system with touch-friendly sizing */

.btn {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-lg {
  font-size: var(--font-size-base);
  padding: var(--space-4) var(--space-8);
}

.btn-sm {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-4);
}

/* Touch-friendly button sizing for mobile */
@media (max-width: 767.98px) {
  .btn {
    min-height: 44px; /* iOS touch target minimum */
    padding: var(--space-3) var(--space-6);
  }
}

/* ===== RESPONSIVE UTILITIES ===== */
/* Utility classes for responsive behavior */

.d-none-mobile {
  display: none !important;
}

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

.d-mobile-only {
  display: block !important;
}

@media (min-width: 768px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* ===== CONTAINER QUERIES (Future Enhancement) ===== */
/* Component-level responsive behavior where supported */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 300px) {
    .card-content {
      display: flex;
      flex-direction: row;
    }
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  .btn,
  .hero-cta {
    display: none !important;
  }
  
  .hero-headline,
  .section-title {
    color: #000 !important;
  }
  
  .container {
    max-width: none !important;
    padding: 0 !important;
  }
}