/* GROUP ORGANISMS / FEATURE GRID
=================================================== */
/* Notes...

    e.g. 'Work' on homepage

*/
/* Modifiers...

    .c-feature-grid__item--with-text <-- Used for when the grid item just contains text. We may want to change background colour, etc.
    .c-feature-grid__item--dark <-- when 'dark panel' is ticked in admin

*/
/* GROUP ORGANISMS / FEATURE GRID / LAYOUT
=================================================== */
.c-feature-grid {
    display: grid;
    grid-gap: var(--spacing-m-2);
}

.c-feature-grid__item {
    position: relative;
}

/*.c-feature-grid*/
.c-hero-buttons {
    padding-top: var(--spacing-m-2);
}

.u-grid-item-full-width + .c-feature-grid__item,
.u-grid-item-full-width + .c-feature-grid__item + * {
    /* I.e. AJAX'd items that we see on the homepage after we've clicked the expand button for Projects */
    margin-top: var(--spacing-m);
}

.c-feature-grid__item__text {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* END SCREEN READER TEXT
    ------------------------- */
    opacity: 0;
    transition: opacity 0.3s ease-in 0s;
}

.c-feature-grid__item:hover .c-feature-grid__item__text {
    /* START SCREEN READER TEXT SHOW
    --------------------------- */
    clip: auto;

    /* position: static; */
    overflow: visible;
    width: auto;
    height: auto;
    /* END SCREEN READER TEXT SHOW
    ------------------------- */
    opacity: 1;

    position: absolute;
    z-index: 1;
    top: 0;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.c-feature-grid__item--with-text p {
    /* Override for client site because the default max-width used decided by the client is just too long for the feature grid */
    --max-width-hero-text: 21rem;
    max-width: var(--max-width-hero-text);
}

/* --mq-after-feature-grid-becomes-grid */
@media (min-width: 1024px) {
    .c-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Custom */
@media (min-width: 1420px) {
    .c-feature-grid--s {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* GROUP ORGANISMS / FEATURE GRID / RHYTHM
=================================================== */
.c-feature-grid {
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
    /* Removed based on e.g. >> home > Projects */
    /* margin-bottom: var(--spacing-s-1); */
}

.c-feature-grid__title {
    padding-top: 0;
    padding-bottom: var(--spacing-s-0-0);
}

.c-feature-grid__strapline {
    text-wrap: pretty;
}

.c-feature-grid__item--with-text {
    padding-bottom: var(--spacing-m-2);
}

.c-feature-grid__item__text {
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
}

/* --mq-before-magazine-grid */
@media (max-width: 629px) {
    .c-feature-grid {
        /* Based on iPhone SE */
        padding-left: var(--spacing-s);
        padding-right: var(--spacing-s);
    }
}
/* GROUP ORGANISMS / FEATURE GRID / DECORATION
=================================================== */
.c-feature-grid__item {
    font-size: var(--font-size-s-2);
    line-height: var(--font-size-s-2-line-height);
}

.c-feature-grid__item__text * {
    max-width: var(--max-width-hero-text);
}

.c-feature-grid__item:not(.c-feature-grid__item--with-text) {
    /* Hide zoomed image */
    overflow: hidden;
    /* background: var(--colour-grey-light-3); */
    background: var(--colour-gradient-grey-subtle);
    cursor: pointer;
}

.c-feature-grid__item:first-child,
.c-feature-grid__item:nth-child(2),
.c-feature-grid__item:not(.c-feature-grid__item--with-text).c-feature-grid__item--with-linear-gradient {
    background: var(--colour-gradient-grey-subtle-top);
}

.c-feature-grid__item:not(.c-feature-grid__item--with-text) * {
    color: white;
}

.c-feature-grid {
    text-align: center;
}

.c-feature-grid img {
    filter: var(--image-boost);
}

/* js-added--s-smooth-scroll prefix is added slowly with JS in case we are coming off another page with a hashtag e.g. going from /about -> /#projects
    Because of lozad lazy-loading and transform effects the image is sometimes stuck as unloaded.
*/
.js-added--s-smooth-scroll .c-feature-grid__item:hover img {
    transition: all 0.5s ease-in-out 0s;
    transform: scale(1.05);
}

/* --mq-before-magazine-grid */
@media (max-width: 629px) {
    .c-feature-grid {
        /* Hide o-dark-nav */
        background: white;
    }
}

/* Custom */
@media (min-width: 1420px) {
    .c-feature-grid--s {
        /* Decrease */
        font-size: var(--font-size-s-0);
    }
}

.c-feature-grid__item--dark {
    background: var(--colour-gradient-dark-radial)!important;
}