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

File         : spine.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Provides the Interactive Service Spine™ component,
presenting connected fleet services in a clear,
responsive and reusable layout.

Contents
--------
1. Spine
2. Spine Header
3. Spine Layout
4. Spine Marker
5. Spine Content
6. Spine Icons
7. Spine Links
8. Responsive

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


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

Dependencies

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


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


/*=========================================================
1. Spine
=========================================================*/

.spine {

    background: var(--colour-light);

}

.spine-wrapper {

    max-width: var(--content-width-narrow);

    margin: 0 auto;

}

/*=========================================================
2. Spine Header
=========================================================*/

.spine-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto var(--space-2xl);

}

.spine-header h2 {

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

}

.spine-header p {

    margin-bottom: 0;

}

/*=========================================================
3. Spine Layout
=========================================================*/

.spine-list {

    list-style: none;

    margin: 0;

    padding: 0;

}

.spine-item {

    margin: 0;

    padding: 0;

}

.spine-card {

    display: grid;

    grid-template-columns: var(--spine-marker-width) 1fr;
	
	width: var(--spine-node-size);
	height: var(--spine-node-size);

    gap: var(--space-xl);

    text-decoration: none;

    color: inherit;

    align-items: stretch;

}

/*=========================================================
4. Spine Marker
=========================================================*/

.spine-marker {

    position: relative;

    display: flex;

    justify-content: center;

}

.spine-marker::after {

    content: "";

    position: absolute;

    top: 24px;

    bottom: 0;

    width: 2px;

    background: var(--colour-primary);

}

.spine-item:last-child .spine-marker::after {

    display: none;

}

.spine-node {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--colour-primary);

    position: relative;

    z-index: 2;

    margin-top: 16px;

}

/*=========================================================
5. Spine Content
=========================================================*/

.spine-content {

    padding-bottom: var(--space-2xl);

}

.spine-icon {

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

}

.spine-title {

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

}

.spine-content p {

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

}



/*=========================================================
6. Spine Icons
=========================================================*/

.spine-icon img {

    width: var(--icon-size-lg);

    height: var(--icon-size-lg);

    display: block;

}

/*=========================================================
7. Spine Links
=========================================================*/

.spine-link {

    font-weight: 600;

    color: var(--colour-primary);

}

/*=========================================================
8. Responsive
=========================================================*/