/* 
 * Services Grid Styles
 * Default styles for the Google Sheets Services integration
 * Customize these styles in your theme's main stylesheet
 */

/* Services Grid Container */
.services-grid {
    display: grid;
    gap: 30px;
		padding: 24px;
}

/* Individual Service Cards */
.service-card {
    background-color: var(--global-palette7, #edf2f7);
    transition: transform 0.3s ease;
}
.service-info {
	padding: var(--global-kb-spacing-md, 2rem);
}

/* Service Images */
.service-image {
		overflow: hidden;
}

.service-image img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
		object-position: center top;
}

/* Service Names/Titles */
.service-name {
    font-size: var(--global-kb-font-size-lg, 2rem);
		margin: 1.5em 0 .5em;
    color: #333;
}

/* Service Descriptions */
.service-description {
    color: var(--global-palette4);
    line-height: 1.6;
		font-size: 18px;
		font-family: var(--global-body-font-family);
}

/* Services List Layout */
.services-list .service-item {
    padding: 20px 0;
    display: flex;
    gap: 20px;
}

.services-list .service-image {
    flex-shrink: 0;
    margin-bottom: 0;
}

.services-list .service-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.services-list .service-content h3 {
    margin: 0 0 10px 0;
}

.services-list .service-content p {
    margin: 0;
    color: #666;
}

/* No Services Message */
.no-services {
    text-align: center;
    padding: 40px;
    background: #f9f9f9;
    color: #666;
}

/* Responsive Design */
@media (min-width: 768px) {
	.services-grid {
			grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
	}
	.service-image {
			height: clamp(305px, 26vw, 340px);
	}

}
@media (min-width: 1024px) {
	.services-grid {
			grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	}
}
@media (max-width: 768px) {    
    .services-list .service-item {
        flex-direction: column;
        gap: 15px;
    }
    
    .services-list .service-image {
        align-self: center;
    }

		.service-image img {
			max-height: 275px;
		}
}