/* ============================================
   XBK MEDIA — Layout
   Grid, Containers, Responsive
   ============================================ */

.container {
  max-width: var(--container-xl); margin: 0 auto;
  padding: 0 var(--space-xl);
}
.container-narrow {
  max-width: var(--container-lg); margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* Section spacing */
.section { padding: var(--space-5xl) 0; position: relative; }
.section-sm { padding: var(--space-3xl) 0; }
.section-dark { background: rgba(3, 7, 18, 0.45); }
.section-darker { background: rgba(2, 6, 23, 0.65); }
.section-light { background: var(--neutral-100); color: var(--neutral-900); }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Grid */
.grid { display: grid; gap: var(--space-xl); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Bento Grid */
.bento-grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(3, 1fr);
}
.bento-grid .bento-wide { grid-column: span 2; }
.bento-grid .bento-tall { grid-row: span 2; }

/* Hero layout */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.hero-content {
  max-width: 800px; text-align: center;
  padding: var(--space-5xl) var(--space-xl);
  position: relative; z-index: 2;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0.75)), url('../assets/xbk-fixed-bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-mesh);
}
.hero-mesh {
  display: none !important;
}
@keyframes mesh-shift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-20px, -10px) scale(1.05); }
}

/* Grid lines bg */
.grid-pattern {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  color: var(--neutral-500); font-size: var(--fs-xs);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Two-column layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }

/* Page Hero (inner pages) */
.page-hero {
  padding: calc(var(--space-5xl) + 80px) 0 var(--space-4xl);
  position: relative; overflow: hidden;
}
.page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid .bento-wide { grid-column: span 1; }
  .split { grid-template-columns: 1fr; gap: var(--space-xl); }
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-lg); }
  .section { padding: var(--space-3xl) 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .bento-grid { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .hero-content { padding: var(--space-3xl) var(--space-lg); }
  .kpi-number { font-size: var(--fs-4xl); }
  .hero-bg {
    background-attachment: scroll !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--fs-2xl); }
  .btn-lg { padding: 14px 24px; font-size: var(--fs-sm); }
}

/* ---- PARALLAX EFFECT ---- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-bg[data-parallax] {
  top: -12%;
  bottom: -12%;
  height: 124%;
}