/*=========================================================
44 Web Design Component Library
-----------------------------------------------------------
Component : Interactive Service Spine™
Component ID : ISS-001
Version   : 1.0.1

• Introduced responsive design tokens.
• Added compact-height viewport support.
• Typography now driven by design tokens.

Project   : 433 - Vehicle Safety Solutions

Author    : Ian Latus
Company   : 44 Web Design

Purpose
-------
Styles for the Interactive Service Spine component.

Principles
----------
• CSS First
• Accessible
• Responsive
• Reusable
• No inline CSS
• No JavaScript unless absolutely necessary

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



/*=========================================================
1. Variables
=========================================================*/

/*---------------------------------------------------------
Design Tokens

These variables define the appearance of ISS-001.
Adjust values here before editing component rules.

---------------------------------------------------------*/

:root{

	/* Colours */
    --iss-blue:#2E6FAE;
    --iss-dark:#0D2340;
    --iss-light:#F7F9FC;

    --iss-heading:#0D2340;
    --iss-text:#606B79;

	/* Optical */
	--iss-body-offset:-4px;
	
	
	/* Effects */
    --iss-transition:.35s ease;
	--iss-shadow:0 4px 12px rgba(13,35,64,.08);
	--iss-shadow-hover:0 10px 24px rgba(13,35,64,.14);
	
	
	/* Layout */

	--iss-card-padding:10px;
	--iss-card-gap:0.35rem;
	--iss-card-width:400px;
	--iss-radius:18px;

	/* Typography */

	--iss-header-gap:0.75rem;
	--iss-text-line-height:1.25;

	/* Positioning */

	--iss-offset-top:12px;


	
	/* Wrapper */
    --iss-wrapper-padding-top:1.2rem;
    --iss-wrapper-padding-right:2rem;
    --iss-wrapper-padding-bottom:2rem;
    --iss-wrapper-padding-left:2rem;
	
	
	/* Spine */

    --spn-spine-color:#D8E1EA;
    --spn-line-width:2px;


}


/*=========================================================
2. Responsive Tokens
=========================================================*/

@media (max-height:900px){

    :root{

        --iss-card-padding:12px;
        --iss-card-gap:0.25rem;

        --iss-wrapper-padding-top:0.75rem;
        --iss-wrapper-padding-bottom:1rem;

    }

}

@media (max-height:780px){

    :root{

        --iss-card-padding:10px;
        --iss-card-gap:0.15rem;

        --iss-wrapper-padding-top:0.5rem;
        --iss-wrapper-padding-bottom:0.75rem;

        --iss-offset-top:0;

        --iss-text-line-height:1.30;

    }

}

/*=========================================================
3. Wrapper
=========================================================*/



/*=========================================================
Service Spine
=========================================================*/

[data-iss="wrapper"]{

    position:relative;

    padding:
        var(--iss-wrapper-padding-top)
        var(--iss-wrapper-padding-right)
        var(--iss-wrapper-padding-bottom)
        var(--iss-wrapper-padding-left);

    margin-top:var(--iss-offset-top);

}


[data-iss="wrapper"]::before{
    content:"";
    position:absolute;
    left:-30px;
    top:28px;
    bottom:28px;
    width:2px;
    background:#D8E1EA;
}


/*=========================================================
4. Service Card
=========================================================*/

[data-iss="module"]{

    width:var(--iss-card-width) !important;

    padding:var(--iss-card-padding) !important;

    border-radius:var(--iss-radius) !important;

    display:flex;
    flex-direction:column;

    gap:var(--iss-card-gap);

    background:#fff;

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

	
/*---------------------------------------------------------
Rendering

Helps maintain smooth SVG rendering during hover transforms,
particularly in Firefox.

---------------------------------------------------------*/
	
    backface-visibility:hidden;
    transform-style:preserve-3d;

    transition:
        transform var(--iss-transition),
        box-shadow var(--iss-transition),
        background-color var(--iss-transition),
        color var(--iss-transition);

}





/*=========================================================
5. Header
=========================================================*/

[data-iss="header"]{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:var(--iss-header-gap);

    width:100%;

}




/*=========================================================
6. Icon
=========================================================*/

[data-iss="module"] [data-iss="icon"]{

    flex:0 0 24px;

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--iss-blue);


}

[data-iss="icon"] .elementor-icon svg{

    overflow:visible;

    transform:translateY(1px);

}

/*=========================================================
7. Heading
=========================================================*/

/* Elementor heading widget 

[data-iss="module"] .elementor-widget-heading{

    flex:1 1 auto;

    min-width:0;

}


[data-iss="module"] .elementor-heading-title{

    margin:0;

    font-size:1.1rem;

    font-weight:600;

    line-height:1.15;

    color:var(--iss-heading);

    transition:color var(--iss-transition);

} */

[data-iss="module"]{
    position:relative;
}

[data-iss="module"]::before{

    content:"";

    position:absolute;

    left:-38px;
    top:50%;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#fff;

    border:2px solid var(--iss-blue);

    transform:translateY(-50%);
}

/*=========================================================
8. Arrow
=========================================================*/

[data-iss="module"] [data-iss="arrow"]{

    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--iss-blue);

    transition:
        transform var(--iss-transition),
        color var(--iss-transition);
	
}



/*=========================================================
9. Description
=========================================================*/

[data-iss="module"] [data-iss="text"] p{

    margin:0;
    padding:0;

    line-height:var(--iss-text-line-height);

}



/*=========================================================
10. Optical Correction

The description is shifted upwards slightly to improve the
visual relationship between the header and body text.

This adjustment is intentional and forms part of the
component's visual design.

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

[data-iss="text"]{
    transform:translateY(var(--iss-body-offset));
}


/*=========================================================
11. Hover
=========================================================*/


[data-iss="module"]:hover
.elementor-widget-heading
.elementor-heading-title{

    color:var(--iss-blue);

}


[data-iss="module"]:hover [data-iss="arrow"]{
    transform:translateX(5px);
	
}

[data-iss="module"]:hover [data-iss="icon"]{

    color:var(--iss-blue);

}

[data-iss="module"]:hover{

    transform:translateY(-3px);

    box-shadow:var(--iss-shadow-hover);

}




/*=========================================================
Version History

1.0.0
Initial release.
Built for Project 433 (VSS)

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