/* ============================================
   KHOLI THE BAKER - LAYOUT SYSTEM
   Grid, Flexbox & Section Layouts
   ============================================ */

/* Section Base */
.section {
  position: relative;
  width: 100%;
  padding: var(--space-24) 0;
}

.section-lg {
  padding: var(--space-32) 0;
}

.section-xl {
  padding: var(--space-40) 0;
}

.section-sm {
  padding: var(--space-16) 0;
}

/* Full Height Sections */
.section-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

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

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

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

/* Hexagonal Grid for Products */
.grid-hex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.grid-hex > *:nth-child(4),
.grid-hex > *:nth-child(5),
.grid-hex > *:nth-child(6) {
  transform: translateX(50%);
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

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

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

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

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

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

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

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

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

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* Split Layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.split-reverse {
  direction: rtl;
}

.split-reverse > * {
  direction: ltr;
}

/* Masonry Grid */
.masonry {
  column-count: 3;
  column-gap: var(--space-4);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

/* Content Alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Section Header */
.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-16);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  color: var(--gray-600);
  font-size: var(--text-lg);
}

/* Card Base */
.card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-out-quad),
              box-shadow var(--duration-normal) var(--ease-out-quad);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* 3D Card Effect */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d-inner {
  transition: transform var(--duration-normal) var(--ease-out-quad);
  transform-style: preserve-3d;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .grid-hex {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-hex > *:nth-child(4),
  .grid-hex > *:nth-child(5),
  .grid-hex > *:nth-child(6) {
    transform: none;
  }
  
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
  
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr;
  }
  
  .grid-hex {
    grid-template-columns: 1fr;
  }
  
  .masonry {
    column-count: 1;
  }
  
  .split-reverse {
    direction: ltr;
  }
}

/* WebGL Canvas Container */
.webgl-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-webgl);
  pointer-events: none;
}

.webgl-container.interactive {
  pointer-events: auto;
}

/* Hero Section Layout */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  padding: var(--space-8);
}

.hero-title {
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--gray-600);
  margin-bottom: var(--space-8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Sticky Elements */
.sticky {
  position: sticky;
  top: 0;
}

/* Pinned Section for Scroll Storytelling */
.pinned-section {
  position: relative;
  height: 300vh;
}

.pinned-content {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Progress Bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--anzac), var(--anzac-light));
  z-index: 1000;
  transform-origin: left;
  transform: scaleX(0);
}

/* Floating Elements */
.float-gentle {
  animation: floatGentle 6s ease-in-out infinite;
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Parallax Layers */
.parallax-bg {
  will-change: transform;
}

.parallax-fg {
  will-change: transform;
}