/* Sanity CMS Integration Styles */

/* Loading states */
.content-loading [data-sanity-field],
.content-loading [data-sanity-pt],
.content-loading [data-sanity-img] {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.content-loading [data-sanity-field]:empty::after {
  content: "Loading...";
  color: #666;
  font-style: italic;
}

/* Loaded states */
[data-sanity-field],
[data-sanity-pt],
[data-sanity-img] {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Services loading state */
#services-list:empty::after {
  content: "Loading services...";
  display: block;
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 40px 0;
}

/* Fix service image overflow issues - match original design */
.service-item .service-img {
  overflow: hidden !important;
  border-radius: 8px;
}

.service-item .service-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px;
}

/* Image loading states */
[data-sanity-img] {
  min-height: 200px;
  background: #f5f5f5;
  display: block;
  object-fit: cover;
}

/* Match the original .image-service styling */
[data-field="image"].image-service,
.image-service[data-field="image"] {
  height: 22em !important; /* Match original design */
  width: 100%;
  object-fit: cover;
  object-position: center;
  background: #f5f5f5;
}

/* Service icon images (small circular ones) */
.service-img [data-field="image"] {
  width: 100%;
  height: 100%; /* Fill the 130px container */
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* Service item specific fixes - don't override original height */
.service-item {
  overflow: hidden;
  /* Remove fixed height to let original CSS handle it */
}

/* Error states */
.sanity-error {
  color: #e74c3c;
  font-style: italic;
  padding: 10px;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  background: #fdf2f2;
  margin: 10px 0;
}

/* Animation for content appearing */
@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sanity-loaded {
  animation: fadeInContent 0.5s ease forwards;
}

/* Responsive image handling */
@media (max-width: 768px) {
  .image-service[data-field="image"] {
    height: 18em !important; /* Slightly smaller on mobile but still proportional */
  }
}