/*! Notes...

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

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/


/* GROUP COMPONENTS / STARKER FRAMEWORK / STEP COUNTERS { / PROGRESS }
=================================================== */
/* HTML Example...
    
    <div class="c-step">
        <div class="c-step__counter">
            <div class="c-step__counter__number">1</div>
        </div>
        <h2 class="c-step__content__heading">Fill in a Questionnaire</h2>
        <div class="c-step-content__text">
            <p>Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.</p>
        </div>
    </div>
    <div class="c-step">
        <div class="c-step__counter">
            <div class="c-step__counter__number">2</div>
        </div>
        <h2 class="c-step__content__heading">Fill in a Questionnaire</h2>
        <div class="c-step-content__text">
            <p>Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.</p>
        </div>
    </div>

*/
/* Modifiers...

    .c-step--no-connector <-- no line
    .c-step--hero <-- larger headings e.g. /gcore-game-engine

*/
/* GROUP COMPONENTS / STARKER FRAMEWORK / STEP COUNTERS / LAYOUT
=================================================== */
/* Number Container */
.c-step {
    --counter-size: 3rem;
    --heading-padding: var(--spacing-m);

    /* Lock in .c-step__counter__number pseudo element (vertical line) */
    position: relative;
    /* Pull above .u-panElements so that line works */
    z-index: 1;
    display: grid;
    /* Needed in case .c-step-content__text has a short amount of text e.g. /gcore-game-engine */
    grid-template-columns: 0.2fr 1fr;
    grid-template-areas:
        "counter heading"
        "gutter  content"
    ;
    column-gap: var(--spacing-m);

    width: 100%;
    /* e.g. >> /online-gaming-platform-icore */
    max-width: var(--max-width-reading);
}

.c-step__counter {
    display: grid;
    place-items: center;
}

.c-step-content__text {
    grid-column-start: content;
}

.c-step-content__text p {
    width: 100%;
}

.c-step__counter__number {
    display: grid;
    place-items: center;

    width: var(--counter-size);
    height: var(--counter-size);
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / STEP COUNTERS / SPACING
=================================================== */
.c-step {
    padding-inline: var(--spacing-s) var(--spacing-m);
    padding-block-end: var(--spacing-l);
}

.c-step:last-child {
    padding-block-end: var(--heading-padding);
}

.c-step__content__heading {
    padding-block: var(--heading-padding);
}

.c-step-content__text > *:last-child {
    padding-block-end: 0;
}

.c-step--no-connector {
    /* e.g. >> /gcore-game-engine */
    padding-block-end: var(--spacing-s);
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / STEP COUNTERS / DECORATION
=================================================== */
.c-step__counter__number {
    background: var(--colour-red);
    color: white;
    border-radius: 50%;
    font-weight: var(--font-family-main-weight-medium);
    font-size: var(--font-size-s);
}

.u-panel-red .c-step__counter__number {
    background: white;
    /* e.g. >> /gcore-game-engine */
    color: var(--colour-red);
}

.c-step__counter__number::after {
    content: "";
    position: absolute;
    top: var(--heading-padding);
    height: 100%;
    border: 1px solid var(--colour-red);
    /* Behind the counters */
    z-index: -1;
}

.c-step--no-connector .c-step__counter__number::before,
.c-step--no-connector .c-step__counter__number::after {
    content: unset;
}

.c-step:last-child .c-step__counter__number::after {
    height: calc(100% - var(--heading-padding) * 2);
}

.c-step__content__heading {
    font-size: var(--font-size-s);
    font-weight: var(--font-family-main-weight-medium);
    text-transform: none;
}

.c-step--hero .c-step__content__heading {
    /* e.g. >> /gcore-game-engine */
    font-size: var(--font-size-m);
    text-transform: uppercase;
    font-weight: var(--font-family-main-weight-strong);
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / STEP COUNTERS / DECORATION / (OPTIONAL) / BORDER
=================================================== */
/* As of 2021-11-03 Safari does not handle these well */
/* .c-step__counter__number::before {
    content: "";
    border: 16px solid white;
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50px;
} */

/* e.g. >> /online-gaming-platform-icore */
.u-panel-grey .c-step__counter__number::before {
    border-color: var(--colour-grey-light-2);
}