/* file: /css/storybot-grid-stories-style.css */
/*------------------------------------------*/


/* Custom Styles for Recent Stories Grid */
.story-grid {
    display: grid;
    gap: 20px;
    padding: 10px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Default responsive grid */
}

/* Individual card styling for dark theme */
.story-grid-card {
    background-color: #3a3a3a; /* Dark background for story card */
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px;
    transition: transform 0.2s ease, background-color 0.3s ease;
    color: inherit;
    text-decoration: none;
}

.story-grid-card:hover {
    border: 1px solid #645925; /* Animate to a green border */
    box-shadow: 0 0 15px rgba(208, 121, 211, 0.8); /* Greenish glow */
    background-color: #4b4b4b;

}

/* Author array styling for logged-in users */
.story-grid-author-array {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #333;
    border-bottom: 1px solid #555;
    font-size: 0.6em;
    margin-bottom: 10px;
}

.story-grid-author-array a {
    color: #333;
    background-color: #e9e9e9;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    margin-right: 5px;
}

.story-grid-author-array a:last-child {
    margin-right: 0;
}

/* Card title styling */
.story-grid-title {
    font-size: 1.4em; /* Title size for readability */
    color: #b8b8b8; /* Light text color */
    margin: 10px 0;
    display: flex;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    min-height: 2.5em; /* Set a minimum height to ensure consistent card height */
    text-align: center; /* Center text for better appearance */
}

/* Anchor inside the title */
.story-grid-title a {
    color: inherit; /* Inherit color from parent */
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

/* Thumbnail styling */
.story-grid-thumbnail a {
    display: block;
    line-height: 0; /* Removes space below images that are inline */
}

.story-grid-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: opacity 0.2s ease;
    display: block;
    object-fit: cover;
}

.story-grid-thumbnail img:hover {
    opacity: 0.9; /* Slight transparency on hover */
}

/* Meta information styling */
.story-grid-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    font-size: 0.6em;
    color: #c0c0c0; /* Light gray for meta text */
}

.story-grid-meta .story-grid-genre,
.story-grid-meta .story-grid-age {
    background-color: #4b4b4b; /* Dark background for meta badges */
    color: #f0f0f0; /* Light text */
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 4px;
    display: inline-block;
}

/* Excerpt styling */
.story-grid-excerpt {
    font-size: 1.0em;
    color: #c0c0c0; /* Light gray for excerpt text */
    padding: 8px;
    flex-grow: 1; /* Allows the excerpt to fill the space */
}

.story-grid-excerpt a {
    color: #c0c0c0; /* Light gray for excerpt text */
}

/* Card actions styling */
.story-grid-card-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.story-grid-read-more, .story-grid-audio-link, .story-grid-song-link {
    background-color: #5c6bc0; /* Button background color */
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.story-grid-read-more:hover, .story-grid-audio-link:hover, .story-grid-song-link:hover {
    background-color: #3949ab; /* Darker shade on hover */
}

.story-grid-read-more i, .story-grid-audio-link i, .story-grid-song-link i {
    margin-right: 5px; /* Adds spacing between icon and text */
}


/* Center the pagination container and apply styling */
.story-pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.story-pagination {
    display: flex;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.story-pagination-item {
    font-size: 1.2em; /* Larger font size */
}

.story-pagination-item a {
    color: #f0f0f0; /* Light color for readability on dark theme */
    padding: 8px 12px;
    text-decoration: none;
    border: 2px solid #555; /* Border color matching dark theme */
    border-radius: 4px;
    background-color: #3a3a3a; /* Dark background for pagination items */
    transition: all 0.3s ease;
}

.story-pagination-item a:hover {
    background-color: #5c6bc0; /* Accent color on hover */
    color: #fff; /* White text on hover */
    border-color: #5c6bc0; /* Matching border color on hover */
}

/* Style for current (selected) page */
.story-pagination-item .current {
    background-color: #5c6bc0; /* Accent color for current page */
    color: #fff; /* White text for contrast */
    border: 2px solid #5c6bc0; /* Border matching background color */
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: normal; /* Consistent weight with other items */
    cursor: default; /* No pointer cursor on current item */
}






/* Reviews summary */
.story-grid-reviews-summary {
    text-align: center;
    margin-top: 15px;
    justify-content: center;
    display: flex;
}

.story-grid-reviews-summary .glsr-summary .glsr-summary-stars {
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-grid-reviews-summary .glsr-summary .glsr-summary-stars .glsr-star-rating {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
}

.glsr-minimal .wp-block-button {
    text-align: center !important;
}

.story-reviews-form {
    font-size: 2em;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.glsr-minimal button.glsr-button {
    font-size: 0.5em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.glsr-minimal form.glsr-form label.glsr-label {
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr; /* Full-width cards on mobile */
    }

    .story-grid-title {
        font-size: 1.8em; /* Larger title size on mobile for better readability */
    }

    .story-grid-card {
        padding: 15px; /* Increase padding for readability on smaller screens */
    }
}

@media (max-width: 480px) {
    .story-grid {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
    }

    .story-grid-card {
        padding: 12px;
    }

    .story-grid-excerpt {
        font-size: 1.2em;
        color: #c0c0c0; /* Light gray for excerpt text */
    }

    .story-pagination {
        gap: 5px; /* Reduce gap between items */
    }
    
    .story-pagination-item a,
    .story-pagination-item .current {
        padding: 6px 8px; /* Smaller padding for mobile */
        font-size: 1em; /* Slightly smaller font size */
    }
}

/* Desktop specific CSS ------------------------------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .story-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .story-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablett specific CSS ------------------------------------------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 1024px) {
    /* Reduce button size */
    .story-grid-card-actions a {
        padding: 6px 10px; /* Smaller padding for buttons */
        font-size: 0.8em; /* Slightly smaller text */
        line-height: 1.2; /* Adjust line height for compact appearance */
    }

    /* Ensure buttons fit well in their container */
    .story-grid-card-actions {
        gap: 5px; /* Reduce space between buttons */
        flex-wrap: wrap; /* Allow buttons to wrap if needed */
    }

    /* Ensure grid layout scales down properly */
    .story-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust grid for tablet screens */
    }

    .story-grid-card {
        padding: 12px; /* Slightly reduce card padding */
    }
}