/*
======================================================
5. SERVICES SECTION (DARK THEME)
======================================================
*/
#services {
    /* 1. This is the dark grey/teal background */
    background-color: #2F3E46; 
    
    background-repeat: no-repeat;
    background-position: top right;
}

/* 2. Make header text readable on dark bg */
#services .section-header h2,
#services .section-header p {
    color: #FFFFFF; /* White text */
}

/* Make the "theme-color" span stand out */
#services .section-header h2 .theme-color-text {
    color: var(--primary-accent); /* Keeps your orange highlight */
}

/* Style the badge for the dark background - UPDATED: Larger, Bold, NO SHADOW */
#services .section-header .section-badge {
    /* Solid background is fine */
    background-color: var(--primary-accent-dark); 
    color: #FFFFFF;         
    border: 1px solid var(--primary-accent-dark); 
    
    /* Bigger font and padding retained */
    padding: 0.6rem 1.8rem; 
    font-size: 1.1rem; 
    font-weight: 700;
    
    /* ** CHANGE: Box-shadow removed for a flat look ** */
    /* box-shadow: 0 6px 12px rgba(255, 121, 0, 0.45); */
    
    border-radius: 25px; 
    display: inline-block; 
}

/*
======================================================
6. "RICH" BENTO GRID (INDIVIDUAL LIGHT COLORS)
======================================================
*/

/* Grid container layout */
.bento-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 1.5rem; 
}

/* 3. Main bento box styles */
.bento-box {
    /* Individual background-color will be set below */
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid #E0E0E0; 
    transition: all 0.3s ease;
    
    /* Rich shadow */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);

    /* Internal grid layout */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "icon header"
        "icon tagline"
        "spacer spacer"
        "link   link";
    column-gap: 0.75rem;
    
    /* Animation */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInBox 0.5s ease-out forwards;
}

/* Hover effect */
.bento-box:hover,
.bento-box:focus-visible { 
    transform: translateY(-8px); 
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-accent);
}

/* Animation keyframes */
@keyframes fadeInBox {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation delays */
.bento-box.box-1 { animation-delay: 0.1s; }
.bento-box.box-2 { animation-delay: 0.2s; }
.bento-box.box-3 { animation-delay: 0.3s; }
.bento-box.box-4 { animation-delay: 0.2s; }
.bento-box.box-5 { animation-delay: 0.3s; }
.bento-box.box-6 { animation-delay: 0.4s; }
.bento-box.box-7 { animation-delay: 0.15s; }
.bento-box.box-8 { animation-delay: 0.25s; }


/* --- Text & Icon Styles (for light boxes) --- */

.bento-box .bento-icon {
    grid-area: icon;
    align-self: start;
}
.bento-box .bento-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Text color is DARK to read on light boxes */
.bento-box h3 {
    grid-area: header;
    font-size: 1.5rem;
    color: #222222; /* Dark text */
    align-self: start;
    margin: 0;
}

.bento-box p {
    grid-area: tagline;
    font-size: 0.95rem;
    color: #555555; /* Dark grey text */
    margin: 0;
}

/* --- BUTTON STYLES (for light boxes) --- */
.bento-link-container {
    grid-area: link;
    align-self: end;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bento-box .bento-link {
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent; 
}

/* "Learn More" button */
.bento-box .learn-more {
    background-color: transparent;
    border-color: var(--primary-accent-dark); 
    color: var(--primary-accent-dark);
}

.bento-box .learn-more:hover,
.bento-box .learn-more:focus-visible {
    background-color: rgba(255, 121, 0, 0.1); /* Slight orange glow */
}

/* "Primary" button */
.bento-box .primary-link {
    background-color: var(--primary-accent-dark);
    color: #FFFFFF;
    border-color: var(--primary-accent-dark);
}

.bento-box .primary-link:hover,
.bento-box .primary-link:focus-visible {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
}

/* 4. THE FIX for the empty ruleset */
.bento-box .bento-link:focus-visible {
    outline: 2px solid var(--primary-accent-dark);
    outline-offset: 3px;
    border-radius: 4px;
}

/*
======================================================
7. GRID SIZING & INDIVIDUAL BOX COLORS (LIGHT PALETTE)
======================================================
*/
.bento-box.box-1 { 
    grid-column: span 2; grid-row: span 2; 
    background-color: #E6F4F1; /* Light Mint */
}
.bento-box.box-2 { 
    grid-column: span 1; grid-row: span 1; 
    background-color: #E8F0FE; /* Light Blue */
}
.bento-box.box-3 { 
    grid-column: span 1; grid-row: span 1; 
    background-color: #FDF4E7; /* Light Sand */
}
.bento-box.box-4 { 
    grid-column: span 1; grid-row: span 1; 
    background-color: #F0EFFF; /* Light Lavender */
}
.bento-box.box-5 { 
    grid-column: span 1; grid-row: span 1; 
    background-color: #FEF3E8; /* Light Peach */
}
.bento-box.box-6 {
    grid-column: span 2; grid-row: span 1;
    background-color: #F5F5F5; /* Light Grey / Off-white */
}
.bento-box.box-7 {
    grid-column: span 2; grid-row: span 2;
    background-color: #EAF1FD; /* Light Sky */
}
.bento-box.box-8 { 
    grid-column: span 2; grid-row: span 1; 
    background-color: #EEF7E8; /* Light Green */
}

/*
======================================================
8. RESPONSIVE MEDIA QUERIES
======================================================
*/
@media (max-width: 900px) {
    .bento-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-box {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}
@media (max-width: 600px) {
    .bento-grid-container {
        grid-template-columns: 1fr;
    }
    
    .bento-box {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "icon header"
            ".    tagline"
            "spacer spacer"
            "link   link";
        column-gap: 1rem;
    }
}