/**
 * Fancy post indexes
 *
 * @package    PoliCromix template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

@media all and (min-width: 760px) {

    .posts_index {
        display: grid; gap:20px; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto;
        grid-template-areas:
            "left1  left1  left1  right1 right1 right1"
            "left1  left1  left1  right2 right2 right2"
            "bottom bottom bottom bottom bottom bottom"
            ;
    }
    
    /* Article defaults */
    .posts_index article                          { margin: 0; flex-wrap: wrap; }
    .posts_index article h1                       { font-size: 20pt; line-height: 22pt; }
    .posts_index article .post_featured_image     { width: 100%; }
    .posts_index article .post_featured_image svg { height: auto !important; aspect-ratio: 16/9 }
    .posts_index article .content_area            { width: 100%; }
    .posts_index article .user_avatar             { display: none; }
    
    /* First article, top left */
    .posts_index article:nth-child(1)                      { grid-area: left1; }
    
    /* Second article, top right */
    .posts_index article:nth-child(2)                      { grid-area: right1; }
    .posts_index article:nth-child(2)                      { flex-wrap: nowrap; }
    .posts_index article:nth-child(2) .post_featured_image { width: 50%; }
    .posts_index article:nth-child(2) .content_area        { width: 50%; }
    
    /* Third article, right middle */
    .posts_index article:nth-child(3)                      { grid-area: right2; }
    .posts_index article:nth-child(3)                      { flex-wrap: nowrap; }
    .posts_index article:nth-child(3) .post_featured_image { width: 50%; }
    .posts_index article:nth-child(3) .content_area        { width: 50%; }
    
    /* Second/Third article elements */
    .posts_index article:nth-child(1) h1             ,
    .posts_index article:nth-child(2) h1             ,
    .posts_index article:nth-child(3) h1             { max-height: 46pt; overflow: hidden; }
    .posts_index article:nth-child(1) .post_contents ,
    .posts_index article:nth-child(2) .post_contents ,
    .posts_index article:nth-child(3) .post_contents { max-height: 3.7em; overflow: hidden; }
    
    /* Fourth article, below */
    .posts_index article:nth-child(4)                      { grid-area: bottom;
                                                             border-bottom: 2px solid var(--ref-color2);
                                                             padding-bottom: 40px;
                                                             margin-bottom: 40px; }
    .posts_index article:nth-child(4)                      { flex-wrap: nowrap; }
    .posts_index article:nth-child(4) .post_featured_image { width: 50%; }
    .posts_index article:nth-child(4) .content_area        { width: 50%; }
    
    /* Common stuff for the above */
    .posts_index article:nth-child(-n + 4) .meta_section.upper { display: none; }
    .posts_index article:nth-child(-n + 4) .meta_section:not(.upper) .meta_field:not(:first-child) { display: none; }
    .posts_index article:nth-child(-n + 4) .meta_section:not(.upper) .meta_field:first-child       { margin-left: 0; 
                                                                                                     padding-left: 0; 
                                                                                                     display: inline-block; 
                                                                                                     width: 100%; 
                                                                                                     white-space: nowrap; 
                                                                                                     overflow: hidden; 
                                                                                                     text-overflow: ellipsis; }
    .posts_index article:nth-child(-n + 4) .post_contents a            ,
    .posts_index article:nth-child(-n + 4) .post_contents .pseudo_link { display: none; }
    
    /* Rest of the articles */
    .posts_index article:nth-child(n + 5) { grid-column-end: span 2; }
}