/* ============================================================
   HOME.CSS FIXES — Add this as a <link> AFTER home.css
   Overrides hardcoded values that cause laptop alignment issues
   ============================================================ */

/* Fix 1: SleepZone image — remove hardcoded margin-left: 200px */
.sleepzone-core-image {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 80px;
  display: block;
  width: 100%;
  max-width: 1100px;
}

/* Fix 2: SleepZone wrapper — ensure full-width centering */
.sleepzone-cards-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Fix 3: Hero — use flex properly so it doesn't squeeze on mid laptops */
.hero-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.hero-left {
  flex: 1 1 340px;
  max-width: 55%;
  min-width: 280px;
}

.hero-image-wrapper {
  flex: 1 1 280px;
  display: flex;
  justify-content: center;
}

/* Fix 4: InsightHub — use auto-fit grid instead of fixed 4-column */
.insighthub-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}

/* Fix 5: Digital Mentacy — flex-wrap for safe reflow */
.digital-mentacy-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
}

.digital-mentacy-left {
  flex: 1 1 320px;
  min-width: 0;
  width: auto;
}

.digital-mentacy-right {
  flex: 1 1 300px;
  min-width: 0;
  width: auto;
}

/* Fix 6: MindSpace list — remove hardcoded negative translateX */
.mindspace-list-content {
  transform: none;
  padding-left: 3rem;
  margin-top: 40px;
  max-width: 380px;
}