/* =============================================================================
   UNIFIED LAYOUT SYSTEM
   
   PURPOSE: Establish consistent, professional layout patterns across all pages
   PRINCIPLES: 
   - Leverage screen real estate efficiently
   - Responsive and mobile-first design
   - Consistent spacing and rhythm
   - Professional visual hierarchy
   ============================================================================= */

/* RESPONSIVE BREAKPOINTS */
:root {
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1280px;
  --bp-wide: 1600px;
  
  /* Consistent container widths */
  --container-mobile: 100%;
  --container-tablet: 90%;
  --container-laptop: 85%;
  --container-desktop: 1200px;
  --container-wide: 1400px;
}

/* =============================================================================
   CONTAINER - BASE LAYOUT SYSTEM
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--container-desktop);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
}

.container-tight {
  max-width: 900px;
}

.container-wide {
  max-width: var(--container-wide);
}

/* Responsive container sizing */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
}

/* =============================================================================
   SECTION LAYOUT - CONSISTENT VERTICAL RHYTHM
   ============================================================================= */

section {
  padding: var(--spacing-4xl) 0;
}

section:first-child {
  padding-top: var(--spacing-3xl);
}

section:last-child {
  padding-bottom: var(--spacing-3xl);
}

@media (max-width: 768px) {
  section {
    padding: var(--spacing-3xl) 0;
  }
}

@media (max-width: 480px) {
  section {
    padding: var(--spacing-2xl) 0;
  }
}

/* =============================================================================
   RESPONSIVE GRID SYSTEM - UNIFIED
   ============================================================================= */

.grid {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

/* Grid 2-column (responsive: 1 → 2 → 3 → 4) */
.grid-2 {
  --grid-cols: 1;
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

@media (min-width: 481px) {
  .grid-2 {
    --grid-cols: 2;
  }
}

@media (min-width: 1024px) {
  .grid-2 {
    --grid-cols: 3;
  }
}

@media (min-width: 1600px) {
  .grid-2 {
    --grid-cols: 4;
  }
}

/* Grid 3-column (responsive: 1 → 2 → 3) */
.grid-3 {
  --grid-cols: 1;
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

@media (min-width: 768px) {
  .grid-3 {
    --grid-cols: 2;
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    --grid-cols: 3;
  }
}

/* Grid 4-column (responsive: 1 → 2 → 3 → 4) */
.grid-4 {
  --grid-cols: 1;
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

@media (min-width: 640px) {
  .grid-4 {
    --grid-cols: 2;
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    --grid-cols: 3;
  }
}

@media (min-width: 1280px) {
  .grid-4 {
    --grid-cols: 4;
  }
}

/* Flexible 2-column auto layout */
.grid-auto-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

/* Flexible 3-column auto layout */
.grid-auto-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* Flexible 4-column auto layout */
.grid-auto-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

/* Increase gap on larger screens */
@media (min-width: 1024px) {
  .grid-auto-2,
  .grid-auto-3,
  .grid-auto-4 {
    gap: var(--spacing-xl);
  }
}

/* =============================================================================
   PAGE SECTIONS - CONSISTENT PATTERNS
   ============================================================================= */

/* Hero Section */
.page-hero {
  background: linear-gradient(135deg, var(--color-action) 0%, #0056b3 100%);
  color: white;
  padding: var(--spacing-4xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-4xl);
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: var(--font-size-4xl);
  margin: 0 0 var(--spacing-lg) 0;
}

.page-hero p {
  font-size: var(--font-size-xl);
  margin: 0;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .page-hero {
    padding: var(--spacing-3xl) 0;
    margin-bottom: var(--spacing-3xl);
  }
  
  .page-hero h1 {
    font-size: var(--font-size-3xl);
  }
  
  .page-hero p {
    font-size: var(--font-size-lg);
  }
}

/* Section Title */
.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-2xl) 0;
  padding-bottom: var(--spacing-lg);
  border-bottom: 3px solid var(--color-action);
  display: inline-block;
}

@media (max-width: 768px) {
  .section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xl);
  }
}

/* =============================================================================
   CONTENT SECTIONS - FULL WIDTH WITH CONTAINER
   ============================================================================= */

.content-section {
  width: 100%;
}

.content-section + .content-section {
  margin-top: var(--spacing-3xl);
}

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */

/* Stack layout (vertical) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.stack-lg {
  gap: var(--spacing-xl);
}

.stack-xl {
  gap: var(--spacing-2xl);
}

/* Flex row with wrapping */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: center;
}

.flex-row-lg {
  gap: var(--spacing-xl);
}

/* Centered content */
.text-center {
  text-align: center;
}

/* Full width background sections */
.bg-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: var(--spacing-4xl) var(--spacing-lg);
}

.bg-section-light {
  background: var(--color-bg-secondary);
}

.bg-section-dark {
  background: var(--color-text-primary);
  color: white;
}

/* =============================================================================
   CARD GRID PATTERNS - CONSISTENT ACROSS PAGES
   ============================================================================= */

/* Standard card grid (flexible) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.card-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

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

@media (min-width: 1024px) {
  .card-grid,
  .card-grid-2,
  .card-grid-3 {
    gap: var(--spacing-xl);
  }
}

/* =============================================================================
   VISUAL SPACING PATTERNS - CONSISTENCY
   ============================================================================= */

/* Margin utilities */
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

.my-xl { margin: var(--spacing-xl) 0; }
.my-2xl { margin: var(--spacing-2xl) 0; }
.my-3xl { margin: var(--spacing-3xl) 0; }

/* Padding utilities */
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.py-lg { padding: var(--spacing-lg) 0; }
.py-xl { padding: var(--spacing-xl) 0; }
.py-2xl { padding: var(--spacing-2xl) 0; }

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .container {
    max-width: 100%;
  }
  
  section {
    page-break-inside: avoid;
    padding: 1rem 0;
  }
}