/*! 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 / ARTICLE LIST
=================================================== */
/* Notes...

	- e.g. News

*/
/* HTML Example...

    .c-article-list
        article.c-article-list__article
            img
            .c-article-list__category
            h2.c-article-list__title

*/
/* Modifiers...

*/
/* GROUP COMPONENTS / ARTICLE LIST / LAYOUT
=================================================== */
.c-article-list {
    display: grid;
    /* Using this in a separate CSS file that is not processed through Libsass since it can't understand this */
    /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); */
    max-width: var(--max-width-2);
    gap: var(--spacing-l);
    row-gap: var(--spacing-l-2);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-article-list__title {
    grid-column: 1 / -1;
    row-gap: 0;
}

/* e.g. >> Home */
h2.c-article-list__title {
    text-align: left;
}
/* GROUP COMPONENTS / ARTICLE LIST ARCHIVE (VIDEOS) / LAYOUT
=================================================== */
/* Notes...

    e.g. /stories/

*/
.post-type-archive-stories .c-article-list__article {
    display: flex;
    flex-wrap: wrap;
}

.post-type-archive-stories .c-article-list__article > * {
    /* Would ideally use flex-direction: column; but that's not working well here with the video */
    flex-basis: 100%;
}

.post-type-archive-stories .c-article-list__article .entry-header {
    order: 2;
}

.post-type-archive-stories .c-article-list .entry-title {
    padding-block-end: 0;
}
/* GROUP COMPONENTS / ARTICLE LIST / SPACING
=================================================== */
.c-article-list {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    /* e.g. >> /news-archive */
    padding-block-end: var(--spacing-l-4);
}

.c-article-list + .o-hero-buttons {
    /* e.g. >> Home */
    padding-block-start: 0;
}

.c-article-list__title {
    /* Effectively get rid of the row gap */
    margin-block-end: calc(0% - var(--spacing-l-2));
}

.c-article-list__article {
    padding-block-start: 0;
    padding-block-end: 0;
}

.c-article-list img {
    padding-block-end: var(--spacing-s-1);
}

.c-article-list__category {
    padding-block-end: var(--spacing-m);
}
/* GROUP COMPONENTS / ARTICLE LIST / DECORATION
=================================================== */
.c-article-list__category {
    color: var(--colour-grey-reading);
    text-transform: uppercase;
    font-size: var(--font-size-s-0-0);
    letter-spacing: var(--letter-spacing-s);
}

.c-article-list p {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
}

.c-article-list__article a {
    text-decoration: none;
}

/* -- */

/* e.g. All Videos */
.c-article-list .entry-header {
    padding-block-end: 0;
}

.c-article-list .entry-title {
    font-size: var(--font-size-s-1);
    padding-block-end: var(--spacing-s-1);
}