/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename-dev.css, then process with Laravel Mix (1. run `sudo npm install` 2. Configure with `webpack.mix.js` 3. `npm run watch` to constantly monitor and compile into prod/)

*/

/* GROUP COMPONENTS / FLOW DIAGRAM
=================================================== */
/* Notes...

	- e.g. /careers "Our Hiring Process"

*/
/* HTML Example...

    <div class="c-process-diagram">
        <div class="c-process-diagram__row c-process-diagram__row--1-blocks">
            <div class="c-process-diagram__block c-process-diagram-connector-inline-start c-process-diagram-connector-inline-end">
                Submit your Application
            </div>
        </div>
        <div class="c-process-diagram__row c-process-diagram__row--2-blocks">
            <div class="c-process-diagram__block c-process-diagram-arrow-block-start">
                Screening call
            </div>
            <div class="c-process-diagram__block c-process-diagram-arrow-block-start">
                Does not match requirements
            </div>
        </div>
        <div class="c-process-diagram__row c-process-diagram__row--3-blocks">
            <div class="c-process-diagram__block c-process-diagram-arrow-block-start">
                1-2 interview rounds
            </div>
            <div class="c-process-diagram__block c-process-diagram-arrow-inline-start">
                Assessment test
            </div>
            <div class="c-process-diagram__block c-process-diagram-arrow-inline-start">
                Match!
            </div>
        </div>
    </div>

*/
/* Modifiers...

	.c-process-diagram--column <-- switches to a column on smaller MQs

*/
/* GROUP COMPONENTS / FLOW DIAGRAM / LAYOUT
=================================================== */
.c-process-diagram {
	display: grid;
	gap: var(--spacing-l-1);
	text-align: center;
	justify-content: center;
}

.c-process-diagram__block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-m);
	width: 45%;
}

.c-process-diagram__row {
	display: flex;
	justify-content: center;
	gap: var(--spacing-s-x);
}

.c-process-diagram__row--2-blocks {
	justify-content: space-between;
}

.c-process-diagram__row--2-blocks .c-process-diagram__block {
	flex-basis: 50%;
}

.c-process-diagram .c-process-diagram__icon-top {
	position: absolute;
	top: -0.6em;
}

.c-process-diagram__icon-left {
	display: none;
}

[class*="c-process-diagram-connector"],
[class*="c-process-diagram-arrow"] {
	position: relative;
	--connector-width: 7.8%;
	--border-width: 1px;
	--top-connector: -115%;
}

.c-process-diagram-arrow-block-start svg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -75%);
}

.c-process-diagram-arrow-inline-start svg {
	position: absolute;
	z-index: var(--z-index-below-body);
	top: 50%;
	left: -16%;
	transform:
		translate(calc(50% - 1px), -50%)
		rotate(-90deg)
	;
}

/* Custom */
@media (max-width: 767px) {
	.c-process-diagram-arrow-inline-start svg {
		display: none;
	}
}

/* Custom */
@media (min-width: 500px) {
	[class*="c-process-diagram-connector"],
	[class*="c-process-diagram-arrow"] {
		--connector-width: 11.3%;
	}

	.c-process-diagram__row {
		gap: var(--spacing-m);
	}
}

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
	.c-process-diagram--column .c-process-diagram__row {
		flex-direction: column;
		gap: var(--spacing-l-4);
	}

	.c-process-diagram--column .c-process-diagram__block {
		width: 100%;
	}
}

/* --mq-slide-columns-1-after */
@media (min-width: 1024px) {
	[class*="c-process-diagram-connector"],
	[class*="c-process-diagram-arrow"] {
		/* Decrease */
		--connector-width: 9.75%;
		--top-connector: -107%;
	}

	.c-process-diagram .c-process-diagram__icon-left {
		display: unset;
		position: absolute;
		top: calc(50% + 0.25em);
		left: 1em;
	}
}
/* GROUP COMPONENTS / FLOW DIAGRAM / SPACING
=================================================== */
.c-process-diagram {
	padding-block-start: var(--spacing-s-2);
	padding-inline: var(--spacing-l);
}

.c-process-diagram ol {
	padding-inline-start: 0;
}

.c-process-diagram li {
	padding-block-end: 0;
}

.c-process-diagram__block {
	padding: var(--spacing-m) var(--spacing-s)!important;
}

.c-process-diagram--column .c-process-diagram__block {
	padding: var(--spacing-l) var(--spacing-l)!important;
}

/* Custom */
@media (min-width: 650px) {
	.c-process-diagram__block {
		padding: var(--spacing-l) var(--spacing-l)!important;
	}
}
/* GROUP COMPONENTS / FLOW DIAGRAM / DECORATION
=================================================== */
.c-process-diagram__block {
	background: white;
	font-weight: var(--font-family-main-weight-medium);
	line-height: 1.4;
	box-shadow: var(--box-shadow-s-light-b-3);
	border: 1px solid var(--colour-grey-light-1);
	border-radius: var(--border-radius-l);
}

.c-process-diagram [class*="c-process-diagram__icon"] {
	font-size: var(--icon-size-m);
	background: white;
}

.c-process-diagram li {
	list-style-type: none;
}

.c-process-diagram a {
	color: black;
	text-decoration-color: hsl(0deg 0% 0% / 20%);
}

/* Connectors */
.c-process-diagram-connector-inline-start::before,
.c-process-diagram-connector-inline-end::after {
	content: "";
	position: absolute;
	z-index: var(--z-index-below-body);
	top: 0;
	width: 50%;
	height: 50%;
	background: linear-gradient(to bottom, white 0%, white calc(100% - var(--border-width) * 2), white calc(100% - var(--border-width) * 2), var(--colour-red) calc(100% - var(--border-width) * 2));
}

.c-process-diagram-connector-inline-start::before {
	left: calc(0% - var(--connector-width) - var(--border-width));
}

.c-process-diagram-connector-inline-end::after {
	right: calc(0% - var(--connector-width) - var(--border-width));
}
/* Arrows */
.c-process-diagram-arrow-inline-start::before {
	content: "";
	position: absolute;
	z-index: var(--z-index-below-body);	
	top: calc(50% - var(--border-width));
	width: 50%;
	border: var(--border-width) solid var(--colour-red);
}

.c-process-diagram-arrow-inline-start::before {
	left: -50%;
}

.c-process-diagram-arrow-block-start::before,
.c-process-diagram-arrow-block-end::after {
	content: "";
	position: absolute;
	top: calc(var(--top-connector) + var(--border-width) * 2);
	left: calc(50% - var(--border-width));
	height: 100%;
	z-index: var(--z-index-below-pseudo-arrows);
	border: var(--border-width) solid var(--colour-red);
}

.c-process-diagram svg {
	color: var(--colour-red);
	font-size: 1.5em;
}

/* -- */

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
	.c-process-diagram--column .c-process-diagram-connector-inline-end::before,
	.c-process-diagram--column .c-process-diagram__block:last-child::before {
		content: unset;
	}
	
	.c-process-diagram--column .c-process-diagram-connector-inline-end::after {
		top: 100%;
		left: 0;
		height: 100%;
		background: unset;
		border-inline-end: calc(2 * var(--border-width)) solid var(--colour-red);
	}
}