/*
Theme Name: Pitch Child
Theme URI: http://pitch.select-themes.com
Description: Child theme for Pitch. Contains customisations (e.g. News page layout) so the parent theme can be updated safely.
Author: Celtic Web Design
Template: pitchwp
Version: 1.0.0
License: GNU General Public License
License URI: licence/GPL.txt
Text Domain: pitchwp-child
*/

/* ==========================================================================
   Full-width 3-column article grid
   --------------------------------------------------------------------------
   Applied to:
     - the News page          (body.page-id-51085, "Blog: Standard" template,
                               two_columns_75_25 sidebar layout)
     - all category archives  (body.category, category.php,
                               two_columns_66_33 sidebar layout)

   Both use the same markup (.blog_holder.blog_standard_type / .column1 /
   .column2 / .post_image img), so we scope with two body-level selectors and
   target the shared inner classes. We deliberately do NOT reference the
   wrapper width class (75_25 vs 66_33) so one rule set covers both.

   We remove the sidebar (Search / Categories / Twitter widgets), let the
   content column go full width, and arrange the <article> posts into a
   responsive 3-column grid.

   All rules live here (child theme) so a parent-theme update won't wipe them.
   ========================================================================== */

/* 1. Hide the sidebar column entirely */
.page-id-51085 .column2,
body.category .column2 {
    display: none !important;
}

/* 2. Let the content column span the full width */
.page-id-51085 .column1.content_left_from_sidebar,
body.category .column1.content_left_from_sidebar {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* 3. Turn the blog list into a 3-column grid.
      align-items:stretch makes every card in a row match the tallest one, so
      all articles share the same height regardless of title/excerpt length. */
.page-id-51085 .blog_holder.blog_standard_type,
body.category .blog_holder.blog_standard_type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
}

/* 4. Neutralise the theme's per-article float/width/margins inside the grid,
      and let the card fill the full height of its (stretched) grid cell. */
.page-id-51085 .blog_holder.blog_standard_type article,
body.category .blog_holder.blog_standard_type article {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    height: 100% !important;
}

/* 4b. Make the inner card a full-height flex column so .post_text can grow to
       fill the leftover space below the image. Needed so the absolutely
       positioned "read more" button (below) pins to the true card bottom. */
.page-id-51085 .blog_holder.blog_standard_type .post_content_holder,
body.category .blog_holder.blog_standard_type .post_content_holder {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4c. Pin the "read more" button to the bottom of each card.
       .post_text becomes the positioning context and grows to fill the card;
       padding-bottom:50px reserves clear space so the button never overlaps
       the excerpt, and the button is absolutely positioned at the bottom. */
.page-id-51085 .blog_holder.blog_standard_type .post_text,
body.category .blog_holder.blog_standard_type .post_text {
    position: relative !important;
    flex: 1 1 auto !important;
    padding-bottom: 50px !important;
}

.page-id-51085 .blog_holder.blog_standard_type .read_more_button,
body.category .blog_holder.blog_standard_type .read_more_button {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* 5. Pagination is a direct child of .blog_holder, so make it span all three
      columns and sit full-width below the grid (not become a 4th grid cell). */
.page-id-51085 .blog_holder.blog_standard_type .pagination,
body.category .blog_holder.blog_standard_type .pagination {
    grid-column: 1 / -1;
    margin-top: 20px;
}

/* 5b. Uniform thumbnail height. Images have varying aspect ratios, so give
       them a fixed height and crop with object-fit:cover to keep cards tidy. */
.page-id-51085 .blog_holder.blog_standard_type .post_image img,
body.category .blog_holder.blog_standard_type .post_image img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block;
}

/* 6. Responsive: 2 columns on tablets, 1 column on phones. */
@media only screen and (max-width: 1024px) {
    .page-id-51085 .blog_holder.blog_standard_type,
    body.category .blog_holder.blog_standard_type {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media only screen and (max-width: 600px) {
    .page-id-51085 .blog_holder.blog_standard_type,
    body.category .blog_holder.blog_standard_type {
        grid-template-columns: 1fr;
    }
}