/**
 * Base Styles for Service Templates
 * Always loaded - provides foundation styles
 */

/* Page-level text: dark heroes default to light copy; light theme uses body foreground */
.default-page {
  --service-text-color: #ffffff;
}

html[data-theme="light"] .default-page {
  --service-text-color: var(--color-text-primary);
}

/* Service Container */
.service-container {
    @apply container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
}

/* Service Section Spacing */
.service-section {
    @apply py-8 sm:py-12 lg:py-16;
}

/* Service Card Base */
.service-card {
    @apply glass border border-line2 rounded-3xl overflow-hidden;
}

/* Service Title - colour from CSS vars so hero variants match designed CSS */
.service-title {
    @apply text-2xl sm:text-3xl md:text-4xl font-bold leading-tight;
    color: var(--service-title-color, var(--color-text-primary));
}

/* Service Description */
.service-description {
    @apply text-base sm:text-lg leading-relaxed;
    color: var(--service-description-color, var(--color-text-muted));
}

/* Service Price */
.service-price {
    @apply text-3xl sm:text-4xl font-bold;
    color: var(--service-price-color, var(--color-accent));
}

/* Service Actions */
.service-actions {
    @apply flex flex-wrap gap-4;
}

/* Service Button Base */
.service-button {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
}

/* Loading States */
.lazy-loading {
    @apply opacity-50 transition-opacity duration-300;
}

.lazy-loaded {
    @apply opacity-100;
}

.lazy-error {
    @apply opacity-75;
}