/* === Features Page Specific Styles === */

/* Feature Section Layout */
.feature-section {
  padding: 48px 0;
}

.feature-section h2 {
  margin-bottom: 48px;
}

.feature-section__quote {
  text-align: center;
  margin-top: 96px;
}

.features-quote {
  font-size: 36px;
  max-width: 10ch; /* Consider if this is too restrictive */
}

@media screen and (max-width: 1190px) {
  .feature-section .container {
    padding-inline: 24px;
  }

  .feature-section h2 {
    /* Consider removing !important if possible */
    line-height: unset !important;
  }
}

/* Features Carousel */
.features-carousel {
  /* Calculates width relative to --grid-max-width, causing overflow */
  width: calc(100% + (100vw - var(--grid-max-width)) / 2);
  margin-left: 0; /* Aligns carousel to the left edge */
  overflow: hidden; /* Hides the overflowing part */
}

.features-carousel-item img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* Responsive adjustments for features carousel */
@media screen and (max-width: 1237px) {
  .features-carousel {
    width: calc(100% + 24px); /* Adjust width calculation for smaller screens */
    margin-right: -24px; /* Negative margin to pull it slightly off-screen */
    padding-inline: 24px; /* Add padding within the container */
  }
}

/* Potentially Reusable Feature Components (Moved here for now) */
/* These might be better in a components file later */

.features-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-base);
  padding: 16px;
  border-radius: 8px;
  max-width: max-content;
  margin-bottom: 16px;
}

.features-top-left {
  max-width: 605px;
}

/* Styles for the Swiper pagination bullets specifically within feature sections */
.feature-section .swiper-pagination-bullet {
  background-color: var(
    --accent-base
  ) !important; /* Check necessity of !important */
  border: 2px solid #373e4b;
  height: 15px;
  width: 15px;
  opacity: 1;
}

.feature-section .swiper-pagination-bullet-active {
  background-color: #373e4b !important; /* Check necessity of !important */
}