/* ==================== A7 MASTER STYLES ==================== */
/* This file contains all page-specific styles for Automation7 */
/* Sections: Colours, Homepage, Status, Solution Grid */

/* ==================== COLOURS ==================== */

:root {
    --primary: #BFEA17;
    --secondary: #AAAE01;
    --tertiary: #7D8001;
    --quaternary: #E5F7A1;
    --grey: #E3E3EB;
    --bg: #FDFAF7;
    --text-main: #111315;
    --white: #FFFFFF;
}

/* ==================== HOMEPAGE HERO ENHANCEMENTS ==================== */

.hero-subtext {
    font-size: 24px;
    line-height: 1.5;
    margin-top: 1.5rem;
    color: var(--text-main);
    opacity: 0.85;
    max-width: 600px;
}

/* ==================== A7 SOLUTION SECTION (The A7 Way) ==================== */
/* Layout: 3 Rows. 1. Title, 2. Split Content, 3. Footer Text */

.a7-solution {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Row 1: Header */
.solution-header {
    margin-bottom: 40px;
    width: 100%;
}

/* Row 2: Main Split Content */
.solution-content-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Text gets slightly more space than image */
    gap: 60px;
    align-items: center; /* Vertically centres the image against the text */
    margin-bottom: 50px;
}

/* Row 2 Left: Text Area */
.solution-text-col {
    position: relative;
    z-index: 2;
}

/* OVERRIDE: Make the intro paragraphs here match the Step text size (18px) 
   Default .status-text is 20px, so we reduce it here only. */
.solution-text-col .status-text {
    font-size: 22px;
    line-height: 1.6;
}

/* Step Blocks (The bars on the left) */
.option-block {
    margin: 25px 0;
    padding-left: 25px;
    border-left: 5px solid var(--secondary);
}

.option-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-main);
}

/* Row 2 Right: Image Area */
.solution-visual-col {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Aligns image to far right edge of container */
}

/* Product Mock-up Styling */
.solution-mockup {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(125, 128, 1, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 1;
}

.solution-mockup:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(125, 128, 1, 0.25);
}

/* Row 3: Footer Text */
.solution-footer {
    width: 100%;
    margin-top: 20px;
}

.standout-team {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* ==================== STATUS UPDATE SECTION ==================== */

.status-section {
    padding: 20px 0;
}

.status-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.status-text {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.status-text:last-child {
    margin-bottom: 0;
}

/* Inline link styling */
.inline-link {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.inline-link:hover {
    color: var(--tertiary);
}

/* ==================== CTA BOX OVERLAY FIX ==================== */
/* Override base-style.css hardcoded rgba for brand-safe overlay */

.cta-box-split::before {
    background: rgba(125, 128, 1, 0.75);
}

/* ==================== RESPONSIVE STYLES ==================== */

@media (max-width: 1024px) {
    .solution-content-split {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 900px) {
    
    /* Hero subtext */
    .hero-subtext {
        font-size: 18px;
        margin-top: 1rem;
    }

    /* Solution section - stack on mobile */
    .solution-content-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .solution-header h2 {
        text-align: center;
    }

    .solution-visual-col {
        justify-content: center;
        /* Increased margin to match footer spacing */
        margin-top: 50px; 
    }
    
    .solution-mockup {
        max-width: 100%;
    }

    /* Option blocks: switch to top border on mobile for cleaner look */
    .option-block {
        border-left: none;
        border-top: 6px solid var(--tertiary);
        padding-top: 15px;
        padding-left: 0;
        text-align: left;
    }

    /* Standout phrases on mobile */
    .standout-team {
        text-align: center;
        font-size: 22px;
    }

    /* Status section */
    .status-section {
        padding: 60px 0;
    }

    .status-text {
        font-size: 18px;
    }

}

@media (max-width: 768px) {

    /* Further mobile refinements */
    .hero-subtext {
        font-size: 16px;
    }

    .option-text {
        font-size: 18px;
    }

    .standout-team {
        font-size: 20px;
    }

}