/* --- Services Section Styling (Responsive) --- */

.services-container {
    /* Flutter's maxWidth container style */
    max-width: 1400px;
    margin: 0 auto;
    text-align: center; /* Center the title */
}

/* 🔑 FLUID SECTION TITLE (Ensures scaling across all devices) */
.section-title {
    /* clamp(MIN: 28px, FLUID: 4vw, MAX: 36px) */
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 0; 
}

/* Ensure consistent spacing below the title */
#services-section .section-title {
    /* 🔑 FLUID SPACING: 40px -> 2.5rem */
    margin-bottom: 2.5rem;
}

.services-list-wrapper {
    /* Mimics Flutter's Wrap widget */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 🔑 FLUID GAP: 30px -> 1.875rem */
    gap: 1.875rem; 
    /* 🔑 FLUID MARGIN: 40px -> 2.5rem */
    margin-top: 2.5rem;
}

.service-card {
    /* 🔑 FLUID CARD WIDTH (CRITICAL for responsiveness) 
        Allows 240px if space permits, but shrinks on mobile, and allows wrapping */
    flex-basis: 240px; /* Preferred width */
    max-width: 100%; /* Ensures it never breaks out of the container */
    flex-grow: 1; /* Allows it to grow if there are fewer cards on a row */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 🔑 FLUID PADDING: 20px 10px -> 1.25rem 0.625rem */
    padding: 1.25rem 0.625rem;
}

/* 🔑 RESPONSIVE ICON STYLING */
.service-icon {
    /* 🔑 FLUID FONT SIZE: 48px -> 3rem */
    font-size: 3rem; 
    /* Remove fixed width/height so the icon font size controls the size */
    width: auto; 
    height: auto; 
    line-height: 1; 
    display: block; /* Use block for easier vertical alignment */
    text-align: center; 
    color: #F7A8B8; 
    /* 🔑 FLUID MARGIN: 15px -> 0.9375rem */
    margin-bottom: 0.9375rem;
}

.service-title {
    /* 🔑 FLUID FONT SIZE: 20px -> 1.25rem (Can also use clamp if needed) */
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
    margin-top: 0;
    /* 🔑 FLUID MARGIN: 8px -> 0.5rem */
    margin-bottom: 0.5rem;
    text-align: center;
}

.service-description {
    /* 🔑 FLUID FONT SIZE: 14px -> 0.875rem */
    font-size: 0.875rem;
    color: #6c757d; 
    text-align: center;
}

/* --- Media Queries for Specific Breakpoints (Optional but helpful) --- */

/* Tablet/Smaller Viewports: Ensure cards stack nicely in columns of 2 or 3 */
@media (max-width: 768px) {
    .service-card {
        /* On tablets, ensure cards can be slightly smaller to fit 3 in a row */
        flex-basis: 200px;
    }
}

/* Mobile Portrait Viewports: Ensure cards stack vertically or in columns of 2 */
@media (max-width: 500px) {
    .services-list-wrapper {
        gap: 1.25rem; /* Reduce gap on small screens (20px) */
    }
    .service-card {
        /* Allows two cards per row with margin/gap in portrait mode */
        flex-basis: 45%; 
        min-width: 160px; /* Don't let them get too small */
    }
}

/* 🚀 MOBILE LANDSCAPE FIX: Explicit optimization for rotated phones */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) {
    .services-list-wrapper {
        /* Reduce the overall gap slightly to pack cards closer together 
           and minimize the section's vertical footprint */
        gap: 1.25rem; /* 20px */
        margin-top: 1.5rem; /* Reduced top margin */
    }
    .service-card {
        /* Encourage a layout with 3 or 4 cards per row to maximize use of the wide screen. 
           (25% - gap) is a good target for 3-4 cards. */
        flex-basis: 25%; 
        min-width: 180px; 
    }
    .service-description {
         /* Slightly reduce font size in case of long descriptions */
        font-size: 0.8rem;
    }
}