/* style/index.css */

/* General styles for the page content, ensuring contrast with body background */
/* Assuming body background is light (#F4F7FB or #FFFFFF from shared.css), text should be dark. */
.page-index {
  color: #1F2D3D; /* Text Main */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Spacing element */
.page-index__spacing-element {
  margin-bottom: 30px; /* Module 2: Spacing */
}

/* Module 1: Hero Slider */
.page-index__hero-slider {
  position: relative;
  width: 100%;
  padding-top: 10px; /* Fixed top padding, not --header-offset */
  overflow: hidden;
  max-width: 100%; /* Ensure it doesn't overflow */
  box-sizing: border-box;
}

.page-index__hero-slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  scroll-snap-type: x mandatory; /* For smooth scrolling */
  overflow-x: hidden; /* Hide scrollbar for track */
}

.page-index__hero-slider-slide {
  flex: 0 0 100%; /* Each slide takes full width */
  scroll-snap-align: start;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: relative; /* For image positioning if needed */
}

.page-index__hero-slider-slide.is-active {
  opacity: 1;
}