/* ==========================================================================
   ROSE EVENTS — 3 Cards Overlapping Showcase Layout (services-concept.css)
   Matches "From Concept to Celebration" card design style.
   ========================================================================== */

/* 1. Services Section Container Override */
#services {
  background-color: #FAF5EE !important;
  padding-top: 5rem !important;
  padding-bottom: 6rem !important;
}

#services .max-w-7xl {
  max-width: 1380px !important;
}

/* 2. Grid Layout: 3 Cards per Row on Large Desktop, 2 on Tablet, 1 on Mobile */
#services .grid.grid-cols-1 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2.5rem 2rem !important;
  margin-top: 4rem !important;
}

@media (max-width: 1024px) {
  #services .grid.grid-cols-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #services .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* 3. Outer Card Container (Matches White Border Frame with Rounded Corners) */
#services .group.relative.rounded-2xl {
  border-radius: 28px !important;
  background: #ffffff !important;
  border: 12px solid #ffffff !important; /* Thick White Frame */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* Allows white bottom card to overlap */
  margin-bottom: 6rem !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

#services .group.relative.rounded-2xl:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 50px rgba(136, 13, 15, 0.16) !important;
}

/* 4. Top Image Area */
#services .group.relative.rounded-2xl > .relative.aspect-\[4\/3\] {
  aspect-ratio: 4 / 4.2 !important; /* Taller photo height */
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

#services .group.relative.rounded-2xl img {
  border-radius: 20px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#services .group.relative.rounded-2xl:hover img {
  transform: scale(1.08) !important;
}

/* Badge (01, 02, etc) styling */
#services .absolute.top-6.left-6 {
  top: 16px !important;
  left: 16px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(17, 17, 17, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  z-index: 2 !important;
}

/* 5. Bottom Overlapping Floating White Card */
#services .p-7.md\:p-8 {
  position: absolute !important;
  z-index: 10 !important;
  margin-top: -3.5rem !important; /* Overlaps photo */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 90% !important; /* Inset white card width */
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(136, 13, 15, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.3s ease !important;
  bottom: -30%;
    left: 50%;
    transform: translateX(-50%) !important
}

#services .group.relative.rounded-2xl:hover .p-7.md\:p-8 {
  box-shadow: 0 14px 35px rgba(136, 13, 15, 0.18) !important;
}

/* 6. Typography & CTA Buttons */
#services .heading-script {
  display: none !important; /* Hide subtitle script to keep card clean like reference */
}

#services h3 {
  font-family: var(--font-sans, 'Manrope', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #1A1A1A !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.2px !important;
  transition: color 0.3s ease !important;
}

#services .group.relative.rounded-2xl:hover h3 {
  color: #880D0F !important;
}

#services p.font-sans {
  font-size: 13.5px !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services a.inline-flex {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #880D0F !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.3s ease !important;
}

#services a.inline-flex:hover {
  color: #6D1414 !important;
  transform: translateX(4px) !important;
}