/**
 * Homepage Services Section - Design Fix
 * Match the design from atrahidesign.vn 
 * White cards with dark image area, icon badges
 * 
 * @package ATH_ATRAHI_DESIGN
 */

/* ==========================================================================
   SERVICES SECTION - New Modern Design
   ========================================================================== */

/* Section Background */
.services,
section.services {
    background: #ffffff !important;
    padding: 100px 0;
}

.services .section-header {
    margin-bottom: 60px;
}

.services .section-title {
    color: #1a1a1a !important;
}

.services .section-desc {
    color: #6b7280 !important;
}

/* Services Grid - 3 columns on desktop */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   SERVICE CARD - Premium Design (Match Image Reference)
   ========================================================================== */

.service-card {
    background: #ffffff !important;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(185, 157, 99, 0.3);
}

/* Service Card Image Area - Dark Background with Text */
.service-card-image {
    position: relative;
    height: 200px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* If there's an actual image, show it */
.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-card-image img {
    transform: scale(1.08);
    opacity: 1;
}

/* Placeholder with title inside dark area */
.service-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 20px;
}

.service-title-overlay {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.service-subtitle-overlay {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    font-weight: 400;
}

/* Service Card Icon Badge - Top Left */
.service-card-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: all 0.3s ease;
}

.service-card:hover .service-card-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 24px rgba(185, 157, 99, 0.3);
}

/* Service Card Content - White Background */
.service-card-content {
    padding: 24px;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Service Card Title */
.service-card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a !important;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Service Card Description */
.service-card-desc {
    font-size: 0.9rem;
    color: #6b7280 !important;
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

/* Service Card Bullets/Tags */
.service-card-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.service-card-bullet {
    background: #f3f4f6;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.8125rem;
    color: #4b5563 !important;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.service-card:hover .service-card-bullet {
    background: linear-gradient(135deg, rgba(185, 157, 99, 0.15), rgba(185, 157, 99, 0.08));
    border-color: rgba(185, 157, 99, 0.3);
    color: #9a8352 !important;
}

/* Special: Last row bullets (gold style for residential) */
.service-card:last-child .service-card-bullet,
.service-card:nth-child(6) .service-card-bullet {
    background: linear-gradient(135deg, rgba(185, 157, 99, 0.2), rgba(185, 157, 99, 0.1));
    border-color: rgba(185, 157, 99, 0.4);
    color: #9a8352 !important;
}

/* Service Card Link */
.service-card-link {
    font-weight: 600;
    color: #b99d63 !important;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    transition: all 0.3s ease;
}

.service-card-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.service-card:hover .service-card-link {
    color: #9a8352 !important;
}

.service-card:hover .service-card-link::after {
    transform: translateX(6px);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .services {
        padding: 60px 0;
    }
    
    .services .section-header {
        margin-bottom: 40px;
    }
    
    .service-card-image {
        height: 180px;
    }
    
    .service-card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        border-radius: 12px;
    }
    
    .service-card-content {
        padding: 20px;
    }
    
    .service-card-title {
        font-size: 1.1rem;
    }
    
    .service-card-desc {
        font-size: 0.875rem;
    }
    
    .service-card-bullet {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   TEXT COLOR FIXES - Ensure visible text on white backgrounds
   ========================================================================== */

/* Homepage sections - ensure dark text on white */
body.home .section-title,
body.home h2.section-title,
.services .section-title {
    color: #1a1a1a !important;
}

body.home .section-desc,
.services .section-desc {
    color: #6b7280 !important;
}

body.home .section-badge-text,
.services .section-badge-text {
    color: #b99d63 !important;
}

/* Hero Section Text */
body.home .hero h1,
body.home .hero-content h1 {
    color: #1a1a1a !important;
}

body.home .hero p,
body.home .hero-desc {
    color: #6b7280 !important;
}

/* Process Section */
body.home .process-step h3,
body.home .process-step-title {
    color: #1a1a1a !important;
}

body.home .process-step p,
body.home .process-step-desc {
    color: #6b7280 !important;
}

/* Pain Points Section */
body.home .pain-card h4,
body.home .pain-card-title {
    color: #1a1a1a !important;
}

body.home .pain-card p,
body.home .pain-card-desc {
    color: #6b7280 !important;
}

/* Solution Section */
body.home .solution-card h3 {
    color: #1a1a1a !important;
}

body.home .solution-card p {
    color: #6b7280 !important;
}

/* FAQ Section */
body.home .faq-question {
    color: #1a1a1a !important;
}

body.home .faq-answer {
    color: #6b7280 !important;
}

/* Technical Section */
body.home .tech-card h4 {
    color: #1a1a1a !important;
}

body.home .tech-card p {
    color: #6b7280 !important;
}

/* Deliverables Section */
body.home .deliverable-title {
    color: #1a1a1a !important;
}

body.home .deliverable-desc {
    color: #6b7280 !important;
}

/* Contact Section on Homepage - Dark Background */
body.home .contact,
body.home section.contact {
    background: #1a1a1a !important;
}

body.home .contact h2,
body.home .contact .section-title {
    color: #ffffff !important;
}

body.home .contact p,
body.home .contact .section-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Portfolio Section - Dark Background */
body.home .portfolio,
body.home section.portfolio {
    background: #1a1a1a !important;
}

body.home .portfolio .section-title {
    color: #ffffff !important;
}

body.home .portfolio .section-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Solutions Section - Dark Background */
body.home .solutions,
body.home section.solutions {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
}

body.home .solutions .section-title {
    color: #ffffff !important;
}

body.home .solutions .section-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.home .solutions .solution-card h3 {
    color: #ffffff !important;
}

body.home .solutions .solution-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Light Background Sections - Ensure dark text */
body.home .pain-points,
body.home .process,
body.home .pricing,
body.home .faq,
body.home .technical,
body.home .deliverables,
body.home .office-models {
    background: #ffffff !important;
}

body.home .pain-points .section-title,
body.home .process .section-title,
body.home .pricing .section-title,
body.home .faq .section-title,
body.home .technical .section-title,
body.home .deliverables .section-title,
body.home .office-models .section-title {
    color: #1a1a1a !important;
}

body.home .pain-points .section-desc,
body.home .process .section-desc,
body.home .pricing .section-desc,
body.home .faq .section-desc,
body.home .technical .section-desc,
body.home .deliverables .section-desc,
body.home .office-models .section-desc {
    color: #6b7280 !important;
}

/* ==========================================================================
   GLOBAL TEXT VISIBILITY FIX
   ========================================================================== */

/* Ensure all homepage text is visible */
body.home h1, body.home h2, body.home h3, body.home h4 {
    color: #1a1a1a;
}

body.home p {
    color: #4b5563;
}

/* Dark section text overrides */
body.home .solutions h1, body.home .solutions h2, body.home .solutions h3, body.home .solutions h4,
body.home .portfolio h1, body.home .portfolio h2, body.home .portfolio h3, body.home .portfolio h4,
body.home .contact h1, body.home .contact h2, body.home .contact h3, body.home .contact h4 {
    color: #ffffff !important;
}

body.home .solutions p, body.home .portfolio p, body.home .contact p {
    color: rgba(255, 255, 255, 0.8) !important;
}