/*! 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 / TEXT COLUMNS
=================================================== */
/* Notes...

	- Feature columns, 3 across, just text

*/
/* HTML Example...

    .c-text-columns
        .c-text-columns__column

*/
/* GROUP COMPONENTS / TEXT COLUMNS / LAYOUT
=================================================== */
.c-text-columns {
    --gap: var(--spacing-l-1);

    display: grid;
    gap: var(--gap);
    /* row-gap: var(--spacing-l-2); */

    max-width: var(--max-width-3);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* Custom */
@media (min-width: 1024px) {
    .c-text-columns {
        --gap: var(--spacing-l-4);
        grid-template-columns: repeat(3, 1fr);
    }
}
/* GROUP COMPONENTS / COLUMNS / SPACING
=================================================== */
.c-text-columns {
    --padding: var(--spacing-l-3-horizontal);

    padding: var(--padding);
    margin-block-end: var(--spacing-vh-s);
}

/* Custom */
@media (max-width: 1199px) {
    /* e.g. >> /shaw-trust-foundation */
    .o-slide .c-text-columns {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
}
/* GROUP COMPONENTS / COLUMNS / DECORATION
=================================================== */
.c-text-columns {
    --border-color: var(--colour-blue);
    border-block-start: 1px solid var(--border-color);
    border-block-end: 1px solid var(--border-color);
}

/* e.g. >> /shaw-trust-foundation */
/* Not supported yet */
/* [class*='c-slide--'] .c-text-columns :is(h2, h3), */
[class*='c-slide--'] .c-text-columns h2, 
[class*='c-slide--'] .c-text-columns h3 {
    text-align: left;
    color: var(--colour-pink);
}

.c-text-columns p {
    text-align: center;
}

/* Custom */
@media (min-width: 1024px) {
    .c-text-columns__column {
        position: relative;
    }

    .c-text-columns__column:not(:last-child)::before {
        content: "";
        position: absolute;
        top: calc(0% - var(--padding));
        height: calc(100% + var(--padding) * 2);
        left: calc(100% + var(--gap) / 2);
        border-inline-end: 1px solid var(--border-color);
    }

    [class*='c-slide--'] .c-text-columns__column:not(:last-child)::before {
        --border-color: white;
    }
}