/*
 Theme Name:   NAI-UCR
 Theme URI:    http://www.elegantthemes.com/gallery/divi/
 Description:  Child theme for Divi by Elegant Themes. Includes header.php for Google Tag Manager code placement.
 Author:       Raborn Media
 Author URI:   https://rabornmedia.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, full-page, responsive-layout, accessibility-ready
 Text Domain:  Divi-child
*/

/* For author profile associated posts section under each profile. */
/* Spacing for the post container */
.post-container {
    margin-bottom: 5px; /* Adjusts space between posts */
}

/* Spacing for the excerpt paragraph */
.post-container p {
    margin-bottom: 4px; /* Reduced space between the excerpt text and the 'Read More' button */
}

/* Adjusting font size for post titles */
.post-title {
    font-size: 16px; /* If the current size is 20px, decrease by 4px */
}

/* Styling for the 'Read More' button */
.custom-read-more-button {
    vertical-align: baseline;
    display: inline-block; /* Allows the button to size to its content */
    margin-top: 0; /* Adjusts space above the 'Read More' button */
    padding: 5px 5px;
    background-color: transparent;
    color: #AF2D37;
    text-decoration: none;
    border-top: 2px solid #AF2D37;
    border-bottom: 2px solid #AF2D37;
    transition: all 0.3s ease;
    text-align: center; /* Center align within the button itself */
}

.custom-read-more-button:hover {
    color: #ffffff;
    background-color: #AF2D37;
    cursor: pointer;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

/* Adjusting font size and spacing for author post titles */
.author-post-content h2 {
    font-size: 18px; /* Adjust to your preferred size */
    margin-bottom: 4px; /* Space between title and excerpt */
}

/* Grid layout for author posts to ensure 'Read More' button is in the right column */
.author-post-wrapper {
    display: grid;
    grid-template-columns: auto 1fr; /* Left column for image, right column for content and button */
    gap: 20px; /* Space between columns */
    align-items: start;
    margin-bottom: 10px;
}

.author-post-thumbnail {
    grid-column: 1; /* Place thumbnail in the first column */
}

.author-post-content,
.read-more-button {
    grid-column: 2; /* Place content and button in the second column */
}

.read-more-button {
    max-width: 200px; /* Sets a max-width for the 'Read More' button */
    margin-top: -20px; /* Space between excerpt and button */
    margin-left: 0; /* Aligns the button to the right */
    margin-right: auto; /* Ensures there is no margin on the right */
    align-self: end; /* Align the button at the end of the content area */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .author-post-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* Define rows for image and content */
        gap: 10px; /* Space between image and content */
    }

    .author-post-thumbnail {
        width: 100%;
        justify-self: center; /* Center the image in its cell */
        grid-row: 1; /* Place image in the first row */
        margin-bottom: 10px; /* Space below the image */
    }

    .author-post-content {
        grid-column: 1;
        grid-row: 2; /* Place content in the second row */
        width: 100%; /* Full width for the content area */
    }

    .read-more-button {
        grid-column: 1;
        grid-row: 3; /* Place button in the third row */
        max-width: none; /* Remove max-width restriction */
        margin-left: 0; /* Reset left margin */
        margin-right: 0; /* Reset right margin */
        margin-top: 0; /* Reset top margin */
        text-align: center; /* Center align the button */
    }
    
    .custom-read-more-button {
        margin-top: 0; /* Remove additional top margin */
        width: auto; /* Button width auto to shrink-wrap its content */
    }
}