/* Services Page Specific Styles */

/* Page Header for Services Page */
#services-page-header.page-header.hero {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('images/services/servicesheader.jpg'); /* Path for services page header image */
    /* min-height: 70vh;  REMOVED - This will now be controlled by styles.css (100vh desktop / 60vh mobile) */
    background-attachment: fixed; 
}

#services-page-header .hero-content h1 {
    font-size: 3rem; 
    color: var(--muted-gold);
    margin-bottom: 0.5rem;
}

#services-page-header .hero-content .subtitle {
    font-size: 1.4rem;
    color: var(--white);
    font-weight: 300;
    margin-bottom: 1.5rem; 
}

.page-intro-text { /* Used on services.html for intro paragraph */
    max-width: 800px;
    margin: 1rem auto 0 auto;
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.7;
    text-align: center;
}

/* Styling for the services section on this page */
/* The main #services section will now primarily use styles from styles.css */
.services-page-section { /* This class was on the original services section, can be removed if #services is used instead */
    padding: 80px 0;
    background-color: var(--dark-gray); /* Match .services from styles.css */
}

/* .section-title styling is handled by styles.css */
/* .services-grid styling is handled by styles.css */

/* .service-card base styling is handled by styles.css */
/* Kept cursor: pointer; as it's a minor, non-conflicting addition specific to this page's cards if needed */
#services .service-card { /* Targeting service cards within the new #services section if needed for specificity */
    cursor: pointer; 
}

/* Removed .services-page-section .service-card:hover specific box-shadow to inherit from styles.css */
/* Base .service-card:hover from styles.css will apply */


/* Service Detail Modal Styles */
/* Most modal styling will now defer to styles.css for consistency */

/* .service-detail-modal is covered by common modal styles in styles.css */

.service-modal-content { 
    max-width: 850px; /* Consistent with styles.css, kept for clarity */
}

/* Removed specific .service-modal-header, .service-modal-header i, .service-modal-header h2 styles. */
/* These will now be primarily styled by .service-detail-modal .service-modal-header in styles.css */

/* .service-modal-body basic properties */
.service-modal-body { /* Applied if .service-detail-modal .service-modal-body in styles.css isn't sufficient */
    color: #ccc;
    line-height: 1.7;
    text-align: left; /* Default text alignment for body content */
     padding: 2rem 2.5rem; /* Ensure padding matches styles.css */
}

.service-modal-intro { /* This style is unique to services.css, kept as it enhances service modals */
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #e0e0e0;
    font-style: italic;
}

.service-modal-body h4 {
    color: var(--gold);
    /* font-size: 1.2rem; /* Removed to allow styles.css (1.4rem) to take precedence */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    /* Other h4 styles like border-bottom can be inherited or defined in styles.css */
}

.service-modal-body ul {
    list-style: disc;
    padding-left: 20px; /* Consider standardizing this with styles.css if different */
    margin-bottom: 1.5rem;
}

.service-modal-body ul li {
    margin-bottom: 0.6rem;
    font-size: 0.95rem; /* Check consistency with styles.css */
}

.service-modal-cta { /* This is for the button itself */
    display: inline-block; /* Inherited from .cta-button in styles.css */
    margin-top: 2rem; /* Spacing above the button */
}
.service-modal-body .service-modal-cta-wrapper, /* If a wrapper div is used for centering */
.service-modal-body > .service-modal-cta { /* If button is a direct child and needs centering */
    display: block; 
    width: fit-content; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center; /* Ensures text within button is centered if button has padding */
}


/* Responsive adjustments for service modals and page */
@media (max-width: 768px) {
    #services-page-header.page-header.hero {
        /* min-height: 50vh; REMOVED - This will now be controlled by styles.css (60vh mobile) */
    }
    #services-page-header .hero-content h1 {
        font-size: 2.2rem; 
    }
    #services-page-header .hero-content .subtitle {
        font-size: 1.1rem; 
    }
    .page-intro-text {
        font-size: 1rem;
    }

    /* .service-modal-header responsive styles from styles.css should take over */
    /* .service-modal-body padding inherited from common modal styles */
    
    .service-modal-intro {
        font-size: 1rem;
    }
    /* .service-modal-body h4 font-size will be handled by styles.css responsive part if defined */
    .service-modal-body ul li {
        font-size: 0.9rem;
    }
}