/* Elementor Addon Styles for Ellerbe-Harrison */

/* Root Variables - Scoped to avoid bleeding too much, 
   but accessible if user wants to override via custom CSS */
:root {
    --eh-primary-black: #101010;
    --eh-secondary-gray: #1F1F1F;
    --eh-accent-gold: #D4AF37;
    --eh-text-white: #FFFFFF;
    --eh-text-muted: #A0A0A0;
    --eh-font-heading: 'Playfair Display', serif;
    --eh-font-body: 'Inter', sans-serif;
}

/* General Resets for Widgets */
.eh-widget-wrap * {
    box-sizing: border-box;
}

.eh-widget-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Typography --- */
.eh-sub-headline {
    font-family: var(--eh-font-body);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--eh-accent-gold);
    margin-bottom: 16px;
    font-weight: 500;
}

.eh-main-headline {
    font-family: var(--eh-font-heading);
    font-size: 64px;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--eh-text-white);
    font-weight: 700;
}

.eh-description {
    font-family: var(--eh-font-body);
    font-size: 18px;
    color: #E0E0E0;
    margin-bottom: 40px;
    font-weight: 300;
    line-height: 1.6;
}

.eh-section-label {
    display: block;
    font-family: var(--eh-font-body);
    font-size: 14px;
    color: var(--eh-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.eh-section-title {
    font-family: var(--eh-font-heading);
    font-size: 42px;
    margin-bottom: 24px;
    font-weight: 700;
    color: var(--eh-text-white);
}

.eh-section-text {
    font-family: var(--eh-font-body);
    font-size: 16px;
    color: var(--eh-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* --- Buttons --- */
.eh-btn {
    padding: 14px 32px;
    font-family: var(--eh-font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.3s;
}

.eh-btn:hover {
    opacity: 0.8;
}

.eh-btn-primary {
    background-color: var(--eh-accent-gold);
    color: #000;
    border: 2px solid var(--eh-accent-gold);
}

.eh-btn-outline {
    background-color: transparent;
    color: var(--eh-text-white);
    border: 2px solid var(--eh-text-white);
}

.eh-btn-dark {
    background-color: #000;
    color: var(--eh-text-white);
    border: 2px solid #000;
}

/* --- Hero Widget --- */
.eh-hero-section {
    position: relative;
    /* Height is often handled by Elementor section, but we set a min-height */
    min-height: 700px;
    display: flex;
    align-items: center;
    padding: 60px 0;
    /* Padding allows internal content breathing if height is auto */
    background-color: var(--eh-primary-black);
    overflow: hidden;
}

.eh-hero-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.eh-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eh-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.eh-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 8%;
    width: 100%;
}

.eh-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* --- Content Split Widget (About, Project) --- */
.eh-content-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 768px) {
    .eh-content-split {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

.eh-content-split.reverse-layout .text-column {
    order: 2;
}

.eh-content-split.reverse-layout .image-column {
    order: 1;
}

/* On mobile, usually we want image top or specific order.
   Let's keep natural order on mobile unless specific media queries added. 
   Common pattern: Image top on mobile. */
@media (max-width: 767px) {
    .eh-content-split.reverse-layout .text-column {
        order: 1;
    }

    .eh-content-split.reverse-layout .image-column {
        order: 0;
    }
}


.eh-content-split .image-column img {
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
}

/* --- Services Grid Widget --- */
.eh-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .eh-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .eh-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eh-service-card {
    background: #151515;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s;
    height: 100%;
    /* Equal height */
    display: flex;
    flex-direction: column;
}

.eh-service-card:hover {
    transform: translateY(-8px);
}

.eh-service-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.eh-service-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.eh-service-content h3 {
    font-family: var(--eh-font-heading);
    color: var(--eh-text-white);
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
}

.eh-service-content p {
    font-family: var(--eh-font-body);
    font-size: 14px;
    color: var(--eh-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
    flex-grow: 1;
}

.eh-read-more {
    font-family: var(--eh-font-body);
    font-size: 12px;
    color: var(--eh-accent-gold);
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
}

/* --- Stats Widget --- */
.eh-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

@media (min-width: 768px) {
    .eh-stats-grid {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
}

.eh-stat-item {
    flex: 1;
}

.eh-stat-number {
    display: block;
    font-family: var(--eh-font-heading);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #101010;
    /* Assuming this widget is placed on gold background section */
}

/* If stats are used on dark background, we might need a class modifier or different default
   The design had stats on gold background. 
   We will make color dependent on context or specific utility. 
   For now, we assume the user sets the SECTION background color in Elementor.
   But we need to ensure text is visible. */

.eh-stats-container.on-dark .eh-stat-number {
    color: var(--eh-text-white);
}

.eh-stats-container.on-dark .eh-stat-label {
    color: var(--eh-text-muted);
}

.eh-stat-label {
    font-family: var(--eh-font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #101010;
}