/* Our Values Section Component Styles */

.our-values-section {
  position: relative;
  width: 100%;
  padding: 96px 0; /* py-24 = 96px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.our-values-section--tertiary-40 {
  background: var(--Tertiary-40, #FBF3F2);
}

.our-values-section--tertiary-80 {
  background: var(--Tertiary-80, #F8E6E5);
}

.our-values-section-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px; /* gap-10 = 40px */
  padding: 0 2rem;
}

/* Title Wrapper */
.our-values-section-title-wrapper {
  width: 100%;
  max-width: 684px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px; /* gap-4 = 16px */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.our-values-section-title-wrapper.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Heading */
.our-values-section-heading {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.our-values-heading-part-1 {
  color: var(--Primary-100, #680144);
  font-family: "DM Sans", sans-serif;
  font-size: 52px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -1.04px;
}

.our-values-heading-part-2 {
  color: var(--Primary-100, #680144);
  font-family: "Calluna", serif;
  font-size: 52px;
  font-style: italic;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -1.04px;
}

/* Values List */
.our-values-section-list {
  width: 100%;
  max-width: 684px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Value Item - Smooth reveal like BelArosa "Our top priority" */
.our-values-item {
  width: 100%;
  position: relative;
  padding: 24px; /* p-6 = 24px */
  border-top: 1px solid var(--Primary-100, #680144);
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px; /* gap-4 = 16px */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.our-values-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.our-values-item:last-child {
  border-bottom: 1px solid var(--Primary-100, #680144);
}

/* Item Number */
.our-values-item-number {
  width: 24px; /* w-6 = 24px */
  height: 36px; /* h-9 = 36px */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--Primary-100, #680144);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.our-values-item-number.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Item Content */
.our-values-item-content {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px; /* gap-2 = 8px */
}

/* Item Title */
.our-values-item-title {
  width: 100%;
  text-align: left;
  color: var(--Primary-100, #680144);
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 28.8px */
  letter-spacing: -1.2px;
}

/* Item Description */
.our-values-item-description {
  width: 100%;
  text-align: left;
  color: var(--Primary-100, #680144);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
}

.our-values-item-description p {
  margin: 0;
  padding: 0;
}

.our-values-item-description br {
  display: block;
  content: "";
  margin-top: 0.5em;
}

/* Item Image (Optional decorative image) */
.our-values-item-image {
  position: absolute;
  width: 80px; /* w-20 = 80px */
  height: 64px; /* h-16 = 64px */
  left: 546.43px;
  top: 49.95px;
  transform-origin: top left;
  transform: rotate(10deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.our-values-item-image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Word-by-word reveal animation for title */
.our-values-section-heading .word-title {
  display: inline-block;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-values-section-heading .word-title.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Item Title - Simple fade-in like BelArosa */
.our-values-item-title {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.our-values-item.revealed .our-values-item-title {
  opacity: 1;
  transform: translateY(0);
}

/* Item Description - Simple fade-in like BelArosa */
.our-values-item-description {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.1s; /* Slight delay after title */
  will-change: opacity, transform;
}

.our-values-item.revealed .our-values-item-description {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Styles - Large screens (1920px+) */
@media (min-width: 1920px) {
  .our-values-section-container {
    max-width: 1440px;
  }
}

/* Responsive - Laptop screens (1280px - 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
  .our-values-section-container {
    max-width: 1200px;
  }
}

/* Responsive - Desktop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .our-values-section-container {
    padding: 0 2rem;
  }

  .our-values-section-title-wrapper,
  .our-values-section-list {
    max-width: 100%;
  }

  .our-values-heading-part-1,
  .our-values-heading-part-2 {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .our-values-item-title {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
}

/* Responsive - Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .our-values-section {
    padding: 64px 0;
  }

  .our-values-section-container {
    gap: 32px;
    padding: 0 2rem;
  }

  .our-values-section-title-wrapper,
  .our-values-section-list {
    max-width: 100%;
  }

  .our-values-heading-part-1,
  .our-values-heading-part-2 {
    font-size: 36px;
    letter-spacing: -0.72px;
  }

  .our-values-item {
    padding: 20px;
  }

  .our-values-item-title {
    font-size: 20px;
    letter-spacing: -1px;
  }

  .our-values-item-description {
    font-size: 15px;
    letter-spacing: -0.3px;
  }

  .our-values-item-image {
    display: none; /* Hide decorative images on tablet */
  }
}

/* Responsive - Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .our-values-section {
    padding: 48px 0;
  }

  .our-values-section-container {
    gap: 32px;
    padding: 0 1rem;
  }

  .our-values-section-title-wrapper,
  .our-values-section-list {
    max-width: 100%;
  }

  .our-values-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .our-values-heading-part-1,
  .our-values-heading-part-2 {
    font-size: 32px;
    line-height: 140%;
    letter-spacing: -0.64px;
  }

  .our-values-heading-part-2 {
    margin-top: 0.25rem;
  }

  .our-values-item {
    padding: 16px;
    gap: 12px;
  }

  .our-values-item-number {
    width: 20px;
    height: 32px;
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .our-values-item-title {
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.9px;
  }

  .our-values-item-description {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.28px;
  }

  .our-values-item-image {
    display: none; /* Hide decorative images on mobile */
  }
}

/* Responsive - Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .our-values-section {
    padding: 40px 0;
  }

  .our-values-section-container {
    gap: 24px;
    padding: 0 1rem;
  }

  .our-values-heading-part-1,
  .our-values-heading-part-2 {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .our-values-item {
    padding: 12px;
    gap: 10px;
  }

  .our-values-item-number {
    width: 18px;
    height: 28px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  .our-values-item-title {
    font-size: 16px;
    letter-spacing: -0.8px;
  }

  .our-values-item-description {
    font-size: 13px;
    letter-spacing: -0.26px;
  }
}