/* Ons Storie Page Specific Styles */

.ons-storie-page {
  background-color: #ffffff;
}

/* Navigation active state */
.nav-link-active {
  font-weight: 700;
}

/* Hero Section */
.story-hero-section {
  display: flex;
  width: 100%;
  padding: 80px 156px;
  flex-direction: column;
  align-items: stretch;
  font-family:
    "Rosabelia SLDT",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  text-align: center;
  justify-content: start;
}

.story-hero-content {
  width: 100%;
}

.story-title {
  color: #558bc9;
  font-size: 80px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  leading-trim: both;
  text-edge: cap;
}

.story-flourish {
  aspect-ratio: 2.62;
  object-fit: contain;
  object-position: center;
  width: 118px;
  align-self: center;
  margin: 58px auto 0;
  max-width: 100%;
  display: block;
}

/* Image Gallery Section */
.image-gallery-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.gallery-image {
  aspect-ratio: 0.95;
  object-fit: contain;
  object-position: center;
  /* width: 480px; */
  width: 33.3%;
  align-self: stretch;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 507px;
  flex-shrink: 0;
}

.gallery-center-content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  position: relative;
  min-height: 507px;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 235px 140px;
  align-items: center;
  justify-content: center;
  /* width: 480px; */
  width: 30%;
  flex-shrink: 0;
}

.center-background-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Story Content Sections */
.story-content-section {
  width: 100%;
}

.story-content-wrapper {
  display: flex;
  min-height: 500px;
  width: 100%;
  padding: 0 156px;
  align-items: center;
  gap: 60px;
  justify-content: center;
  flex-wrap: wrap;
}

.story-content-wrapper.reverse {
  flex-direction: row-reverse;
}

.story-text-content {
  color: #ab9a7b;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family:
    "Larken DEMO",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: 1.8px;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  width: 452px;
  min-width: 240px;
  flex-shrink: 0;
}

.story-paragraph {
  margin: 0;
}

.story-text-bold {
  font-weight: 400;
  line-height: 24px;
}

.story-image-wrapper {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  position: relative;
  min-height: 385px;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  width: 546px;
  flex-shrink: 0;
}

.story-content-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Alternative content sections */
.story-content-section-alt {
  background-color: #ffffff;
  display: flex;
  min-height: 500px;
  width: 100%;
  padding: 0 96px 0 95px;
  align-items: center;
  gap: 200px;
  font-family:
    "Larken DEMO",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 18px;
  color: #ab9a7b;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1.8px;
  justify-content: center;
  flex-wrap: wrap;
}

.story-content-section-alt .story-content-wrapper {
  display: flex;
  width: 100%;
  padding: 0;
  gap: 200px;
  min-height: auto;
}

.story-content-section-alt .story-text-content {
  leading-trim: both;
  text-edge: cap;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
  flex-shrink: 1;
  width: 402px;
}

.story-image {
  aspect-ratio: 1.42;
  object-fit: contain;
  object-position: center;
  width: 445px;
  align-self: stretch;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.story-content-section-final {
  display: flex;
  height: 500px;
  width: 100%;
  padding: 0 156px;
  align-items: center;
  gap: 200px;
  font-family:
    "Larken DEMO",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 18px;
  color: #ab9a7b;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1.8px;
  justify-content: center;
  flex-wrap: wrap;
}

.story-content-section-final .story-content-wrapper {
  display: flex;
  width: 100%;
  padding: 0;
  gap: 200px;
  min-height: auto;
  height: 100%;
}

.story-content-section-final .story-image {
  aspect-ratio: 0.78;
  object-fit: contain;
  object-position: center;
  width: 240px;
  align-self: stretch;
  min-width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.story-content-section-final .story-text-content {
  leading-trim: both;
  text-edge: cap;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
  flex-shrink: 1;
  width: 557px;
}

/* Footer styles */
.footer-image {
  aspect-ratio: 6.06;
  object-fit: contain;
  object-position: center;
  width: 100%;
  display: block;
}

.footer-section {
  padding-top: 20px;
}

/* Mobile responsive styles */
@media (max-width: 991px) {
  .story-hero-section {
    padding: 80px 20px;
  }

  .story-title {
    font-size: 48px;
  }

  .story-flourish {
    margin-top: 40px;
  }

  .image-gallery-section {
    flex-direction: column;
  }

  .gallery-image {
    width: 100%;
    max-width: 100%;
  }

  .gallery-center-content {
    width: 100%;
    max-width: 100%;
    padding: 100px 20px;
  }

  .story-content-wrapper {
    padding: 0 20px;
    flex-direction: column;
    gap: 40px;
  }

  .story-content-wrapper.reverse {
    flex-direction: column;
  }

  .story-text-content {
    width: 100%;
    max-width: 100%;
  }

  .story-image-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .story-content-section-alt {
    padding: 0 20px;
    gap: 40px;
  }

  .story-content-section-alt .story-content-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .story-content-section-alt .story-text-content {
    width: 100%;
    max-width: 100%;
  }

  .story-image {
    width: 100%;
    max-width: 100%;
  }

  .story-content-section-final {
    padding: 0 20px;
    gap: 40px;
    height: auto;
    min-height: 500px;
  }

  .story-content-section-final .story-content-wrapper {
    flex-direction: column;
    gap: 40px;
    height: auto;
  }

  .story-content-section-final .story-text-content {
    width: 100%;
    max-width: 100%;
  }
  
}

/* Additional responsive breakpoints */
@media (max-width: 768px) {
  /* .story-title {
    font-size: 38px;
  } */

  .story-text-content {
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 22px;
  }

  .story-text-bold {
    line-height: 21px;
  }

  .story-content-section-alt {
    font-size: 16px;
    letter-spacing: 1.5px;
  }

  .story-content-section-final {
    font-size: 16px;
    letter-spacing: 1.5px;
  }

  .story-flourish {
    width: 90px;
  }

  
}

@media (max-width: 480px) {
  .story-hero-section {
    padding: 60px 20px;
  }

  .story-title {
    /* font-size: 28px; */
    margin-bottom: 30px;
  }

  .story-flourish {
    width: 80px;
    margin-top: 30px;
  }

  .gallery-center-content {
    padding: 80px 20px;
  }

  .story-content-wrapper {
    gap: 30px;
  }

  .story-content-section-alt {
    gap: 30px;
  }

  .story-content-section-alt .story-content-wrapper {
    gap: 30px;
  }

  .story-content-section-final {
    gap: 30px;
  }

  .story-content-section-final .story-content-wrapper {
    gap: 30px;
  }

  .story-text-content {
    font-size: 14px;
    letter-spacing: 1.2px;
    line-height: 20px;
  }

  .story-text-bold {
    line-height: 19px;
  }

  .story-content-section-alt {
    font-size: 14px;
    letter-spacing: 1.2px;
  }

  .story-content-section-final {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  
}