/* Gaedke Leistungen Plugin Styles */

.gl-leistungen-container {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    gap: 20px; /* Space between grid items */
    margin-top: 20px; /* Add some space above the container */
    margin-bottom: 20px; /* Add some space below the container */
}

.gl-leistung-item {
    /* Optional: Add border, padding, background for visual separation */
    /* border: 1px solid #eee; */
    /* padding: 15px; */
    /* background-color: #f9f9f9; */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack elements vertically */
}

.gl-leistung-image {
    margin-bottom: 15px; /* Space below the image */
}

.gl-leistung-image img {
    max-width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.gl-leistung-title {
    font-size: 1.2em; /* Adjust title size */
    margin-top: 0;
    margin-bottom: 10px;
}

.gl-leistung-title a {
    text-decoration: none; /* Remove underline from title link */
    color: inherit; /* Inherit color from parent */
}

.gl-leistung-title a:hover {
    text-decoration: underline; /* Underline on hover */
}

.gl-leistung-beschreibung {
    font-size: 0.95em; /* Adjust description text size */
    color: #555; /* Set text color */
    flex-grow: 1; /* Allow description to take available space */
    margin-bottom: 15px; /* Space below description */
}

.gl-leistung-beschreibung p {
    margin-top: 0;
    margin-bottom: 0; /* Remove default paragraph margins if needed */
}

/* Optional: Style for a dedicated link/button */
/*
.gl-leistung-link {
    display: inline-block;
    margin-top: auto; // Push link to the bottom if item heights vary
    padding: 8px 15px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    text-align: center;
}

.gl-leistung-link:hover {
    background-color: #005177;
}
*/


/* Responsive adjustments */

/* For tablets (e.g., screens less than 768px wide) */
@media (max-width: 767px) {
    .gl-leistungen-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* For mobile phones (e.g., screens less than 480px wide) */
@media (max-width: 479px) {
    .gl-leistungen-container {
        grid-template-columns: 1fr; /* 1 column */
    }
}