/*
 * Home Page CSS (Optimized)
 * - Styles specific to the homepage (index.php)
 * - Relies on styles.css for base styling, variables, and common components.
 */

/* Hero Section */
.hero { /* This class is also in styles.css, home.css can provide overrides if needed */
    position: relative;
    margin-bottom: 40px; /* Space below hero */
    overflow: hidden;
    border-radius: 8px;
}

.hero-image { /* This class is also in styles.css */
    width: 100%;
    height: 400px; /* Default height, can be adjusted */
    object-fit: cover;
    display: block;
    border-radius: 8px;
    /* loading="eager" should be set in HTML for hero images */
}

.hero-content { /* This class is also in styles.css, home.css provides specific overrides */
    position: absolute;
    z-index: 2;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px); /* Responsive width with padding */
    max-width: 700px; /* Max width for readability */
    padding: 2rem; /* Specific padding for homepage hero */
    text-align: center;
    /* color: #e6e6fa; */ /* Pale lavender for homepage hero text - This will be inherited from .hero .glass-panel in styles.css */
    /* Inherits .glass-panel styles (now including light text for hero context) from styles.css for background, border, shadow, blur */
}

/* Animation for homepage hero content */
.hero-content.fade-in-element {
    transform: translateX(-50%) translateY(30px); /* Initial state, adjusted for translateX */
    transition-delay: 0.2s; /* Custom delay for hero */
}

.hero-content.fade-in-element.in-view {
    transform: translateX(-50%) translateY(0); /* Final state */
}

.hero-content h1 {
    margin-bottom: 15px;
    font-size: 2.5rem; /* Will be overridden by styles.css media queries if smaller */
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Slightly stronger shadow for readability */
    /* color: var(--text-light); */ /* Inherited from .hero .glass-panel */
}

.hero .subtitle {
    font-size: 1.2rem; /* Will be overridden by styles.css media queries if smaller */
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
    /* color: var(--text-light); */ /* Inherited from .hero .glass-panel */
    margin-bottom: 1rem;
    display: block;
}

/* Section Specific Styles for Homepage */
.dual-approach.section-padding .glass-panel,
.experience.section-padding .glass-panel {
    text-align: left; /* Override text-align-center if it's on the container */
}

.dual-approach h2,
.services h2,
.experience h2,
.industry-solutions h2,
.cta-section h2 {
    text-align: center; /* Center section titles on homepage */
    margin-bottom: 30px; /* Space below section titles */
}

/* Media Queries for Homepage Specific Adjustments */
/* These supplement the global media queries in styles.css */
/* Note: Most hero responsive text sizing is now in styles.css for global consistency */

@media (max-width: 992px) { /* Tablet */
    /* .hero-content padding and width adjustments are now in styles.css */
    /* .hero-content h1 and .hero .subtitle font sizes are now in styles.css */
}

@media (max-width: 768px) { /* Large Mobile / Small Tablet */
    /* .hero-image height adjustment is now in styles.css */
    /* .hero-content h1 font size is now in styles.css */
}

@media (max-width: 480px) { /* Small Mobile */
    /* .hero-image height adjustment is now in styles.css */
    /* .hero-content positioning, padding, width, h1, and subtitle font sizes are now in styles.css */

    .dual-approach h2,
    .services h2,
    .experience h2,
    .industry-solutions h2,
    .cta-section h2 {
        font-size: 1.5rem; /* Adjusted to match new h2 size in styles.css for this breakpoint */
    }
}