/* My Testimonials Plugin - Modern Public Styles */

/* -------------------------------------------------------------------------- */
/* Variables & Basic Setup                                                    */
/* -------------------------------------------------------------------------- */
:root {
    --testimonial-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --testimonial-page-bg: #F4F6F8; /* Light Gray */
    --testimonial-card-bg: #FFFFFF; /* White */
    --testimonial-text-primary: #333333; /* Dark Gray */
    --testimonial-text-secondary: #6C757D; /* Medium Gray */
    --testimonial-accent-color: #007BFF; /* Professional Blue */
    --testimonial-border-color: #E9ECEF; /* Light border for cards */

    --testimonial-border-radius: 8px;
    --testimonial-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --testimonial-card-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

    --testimonial-spacing-unit: 1rem; /* Approx 16px */
}

/* Apply page background if the theme doesn't override too heavily */
/* This might be better handled by theme customization or specific page templates */
.testimonials-archive-page {
    /* background-color: var(--testimonial-page-bg); /* You might want to control this from theme */
    font-family: var(--testimonial-font-family);
}

/* Box Sizing */
.testimonials-archive-page *,
.testimonials-archive-page *::before,
.testimonials-archive-page *::after,
.testimonial-item *,
.testimonial-item *::before,
.testimonial-item *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* Archive Page Header                                                        */
/* -------------------------------------------------------------------------- */
.testimonials-archive-header {
    text-align: center;
    margin-bottom: calc(var(--testimonial-spacing-unit) * 3);
    padding: calc(var(--testimonial-spacing-unit) * 2) var(--testimonial-spacing-unit);
}

.testimonials-archive-title {
    font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size */
    color: var(--testimonial-text-primary);
    margin-bottom: calc(var(--testimonial-spacing-unit) * 0.5);
    font-weight: 600;
}

.testimonials-archive-header .archive-description {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--testimonial-text-secondary);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* Testimonials Grid Layout                                                   */
/* -------------------------------------------------------------------------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: calc(var(--testimonial-spacing-unit) * 2); /* Space between cards */
    padding: 0 var(--testimonial-spacing-unit); /* Padding for the grid container */
    max-width: 1200px; /* Max width of the grid */
    margin: 0 auto; /* Center the grid */
}

/* -------------------------------------------------------------------------- */
/* Individual Testimonial Card (.testimonial-item wraps .testimonial-card)    */
/* -------------------------------------------------------------------------- */
.testimonial-item {
    display: flex; /* Allows card to take full height of grid cell if needed */
}

.testimonial-card {
    background-color: var(--testimonial-card-bg);
    border-radius: var(--testimonial-border-radius);
    box-shadow: var(--testimonial-card-shadow);
    padding: calc(var(--testimonial-spacing-unit) * 1.8);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 100%; /* Ensure card fills the item wrapper */
    display: flex;
    flex-direction: column;
    position: relative; /* For quote icon positioning */
}

.testimonial-card:hover {
    box-shadow: var(--testimonial-card-hover-shadow);
    transform: translateY(-5px);
}

/* -------------------------------------------------------------------------- */
/* Testimonial Quote Icon                                                    */
/* -------------------------------------------------------------------------- */
.testimonial-quote-icon {
    position: absolute;
    top: calc(var(--testimonial-spacing-unit) * 1);
    left: calc(var(--testimonial-spacing-unit) * 1.5);
    font-size: calc(var(--testimonial-spacing-unit) * 5); /* Large quote mark */
    color: var(--testimonial-accent-color);
    opacity: 0.15;
    line-height: 1;
    user-select: none;
    z-index: 0;
}

/* -------------------------------------------------------------------------- */
/* Testimonial Content (The Quote)                                            */
/* -------------------------------------------------------------------------- */
.testimonial-content {
    font-size: clamp(1rem, 2.5vw, 1.1rem); /* Responsive font size */
    line-height: 1.7;
    color: var(--testimonial-text-primary);
    margin-top: calc(var(--testimonial-spacing-unit) * 1.5); /* Space below quote icon */
    margin-bottom: calc(var(--testimonial-spacing-unit) * 1.5);
    font-style: italic;
    flex-grow: 1; /* Allows content to push footer down */
    position: relative; /* To ensure it's above the quote icon if overlapping */
    z-index: 1;
}

.testimonial-content p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Testimonial Footer (Author, Location, Date)                               */
/* -------------------------------------------------------------------------- */
.testimonial-footer {
    margin-top: auto; /* Pushes footer to the bottom if content is short */
    padding-top: var(--testimonial-spacing-unit);
    border-top: 1px solid var(--testimonial-border-color);
    display: flex;
    flex-direction: column;
    gap: calc(var(--testimonial-spacing-unit) * 0.3);
    position: relative; /* To ensure it's above the quote icon if overlapping */
    z-index: 1;
}

.testimonial-author-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* In case names are very long */
}

.testimonial-author,
.testimonial-location {
    font-size: 0.95rem;
    color: var(--testimonial-text-primary);
    font-weight: 600;
    font-style: normal;
}

.testimonial-author span[itemprop="name"],
.testimonial-location span[itemprop="name"] {
    display: inline-block; /* Prevents awkward line breaks */
}

.testimonial-separator {
    color: var(--testimonial-text-secondary);
    margin: 0 calc(var(--testimonial-spacing-unit) * 0.5);
    font-weight: normal;
}

.testimonial-date {
    font-size: 0.85rem;
    color: var(--testimonial-text-secondary);
    display: block; /* On its own line */
}

/* -------------------------------------------------------------------------- */
/* Single Testimonial Page                                                    */
/* -------------------------------------------------------------------------- */
.testimonial-single .testimonial-item {
    max-width: 750px; /* Comfortable reading width for single item */
    margin: calc(var(--testimonial-spacing-unit) * 2) auto; /* Center it */
    padding: var(--testimonial-spacing-unit);
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                 */
/* -------------------------------------------------------------------------- */
.testimonials-archive-page .navigation.posts-navigation {
    margin: calc(var(--testimonial-spacing-unit) * 3) auto;
    padding: 0 var(--testimonial-spacing-unit);
    max-width: 1200px; /* Match grid max-width */
    display: flex;
    justify-content: space-between;
    clear: both; /* In case of floats from other styles */
}

.testimonials-archive-page .nav-links a {
    text-decoration: none;
    padding: calc(var(--testimonial-spacing-unit) * 0.75) calc(var(--testimonial-spacing-unit) * 1.5);
    border: 1px solid var(--testimonial-border-color);
    border-radius: var(--testimonial-border-radius);
    color: var(--testimonial-accent-color);
    background-color: var(--testimonial-card-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
}

.testimonials-archive-page .nav-links a:hover {
    background-color: var(--testimonial-accent-color);
    color: var(--testimonial-card-bg);
    border-color: var(--testimonial-accent-color);
}

/* -------------------------------------------------------------------------- */
/* No Results                                                                 */
/* -------------------------------------------------------------------------- */
.testimonials-archive-page .no-results {
    text-align: center;
    padding: calc(var(--testimonial-spacing-unit) * 3) var(--testimonial-spacing-unit);
    color: var(--testimonial-text-secondary);
}
.testimonials-archive-page .no-results .page-title {
    color: var(--testimonial-text-primary);
}

/* -------------------------------------------------------------------------- */
/* Responsive Adjustments                                                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .testimonials-grid {
        /* Already responsive due to auto-fill, minmax. Adjust gap if needed. */
        gap: calc(var(--testimonial-spacing-unit) * 1.5);
    }

    .testimonial-card {
        padding: calc(var(--testimonial-spacing-unit) * 1.5);
    }

    .testimonial-quote-icon {
        font-size: calc(var(--testimonial-spacing-unit) * 4);
        top: calc(var(--testimonial-spacing-unit) * 0.8);
        left: calc(var(--testimonial-spacing-unit) * 1);
    }

    .testimonials-archive-header {
        margin-bottom: calc(var(--testimonial-spacing-unit) * 2);
    }

    .testimonials-archive-page .nav-links a {
        padding: calc(var(--testimonial-spacing-unit) * 0.6) var(--testimonial-spacing-unit);
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .testimonials-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
        gap: var(--testimonial-spacing-unit);
    }

    .testimonial-card {
        /* No significant change needed, already 100% width of its column */
    }

    .testimonials-archive-title {
        font-size: 1.8rem; /* Adjust title for small screens */
    }

    .testimonials-archive-header .archive-description {
        font-size: 0.9rem;
    }
}