/*=========================================================
44 Web Design Framework
-----------------------------------------------------------
Project      : 433
Client       : Vehicle Safety Solutions Ltd

File         : hero.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Provides the homepage hero section including layout,
typography and call-to-action positioning.

Contents
--------
1. Hero
2. Hero Layout
3. Hero Content
4. Hero Buttons
5. Hero Image
6. Responsive

=========================================================*/


/*=========================================================
Dependencies

variables.css
base.css
typography.css
utilities.css
layout.css
buttons.css

=========================================================*/


/*=========================================================
1. Hero
=========================================================*/

.hero {

    background: var(--colour-white);

}


/*=========================================================
2. Hero Layout
=========================================================*/

.hero-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: var(--space-2xl);

}


/*=========================================================
3. Hero Content
=========================================================*/

.hero-tag {

    color: var(--colour-primary);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: var(--space-sm);

}

.hero h1 {

    font-size: var(--font-size-4xl);

    line-height: 1.1;

    margin-bottom: var(--space-md);

}

.hero-intro {

    font-size: var(--font-size-md);

     max-width: var(--hero-max-width);

    margin-bottom: var(--space-lg);

}


/*=========================================================
4. Hero Buttons
=========================================================*/

.hero-buttons {

    display: flex;

    align-items: center;

    gap: var(--space-md);

}

.hero-link {

    color: var(--colour-primary);

    font-weight: 600;

}

.hero-link:hover {

    color: var(--colour-secondary);

}


/*=========================================================
5. Hero Image
=========================================================*/

.hero-image img {

    width: 100%;

    height: auto;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

}


/*=========================================================
6. Responsive
=========================================================*/

@media (max-width: 992px) {

    .hero-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-intro {

        max-width: 100%;

    }

    .hero-buttons {

        justify-content: center;

    }

}