/* =========================================================
   PROSPEN COURSES MANAGER - BASE RESULTS-LISTING STYLES
   Author: Prospen Africa
   Added: v8.1.0 (August 2026)
   Updated: v8.1.1 (August 2026) - added pagination

   Split out of courses-style.css so the course-card +
   pagination primitives can be loaded independently of the
   full Courses Manager stylesheet.

   WHY THIS FILE EXISTS:
   Courses Manager (v8.0.0+) only enqueues its main
   courses-style.css on pages that use one of its own
   shortcodes (see page_needs_course_assets() in the main
   plugin file). That's correct for Courses Manager's own
   pages, but the Smart Search plugin's results page
   (search_results shortcode / "Smart Search Results"
   Elementor widget) renders the SAME .prospen-course-card
   and .prospen-pagination markup, and smart-search.css has
   no styling of its own for either - it's written as a thin
   set of overrides on top of these base rules.

   This file is the single source of truth for that shared
   base layer. Courses Manager enqueues it (+ the rest of
   courses-style.css on top) on its own pages. Smart Search
   enqueues ONLY this file, directly from this plugin's
   assets folder, when its results page/widget is present
   (see page_needs_course_card_base_css() in
   prospen-smart-search.php). Do not duplicate these rules
   in smart-search.css - edit them here so both plugins stay
   in sync.
========================================================= */

/* Pagination
   NOTE: this is the MERGED/effective style, not a straight copy of
   courses-style.css's original "Pagination" block. That block is
   superseded on Courses Manager's own pages by a later block further
   down courses-style.css ("BUTTON STYLES - UPDATED NOVEMBER 2025",
   shared with .prospen-view-button etc.), which wins the cascade for
   several overlapping properties (pill border-radius, padding, active
   scale, shadows). Smart Search only ever loads this base file - it
   has no pagination CSS of its own - so this reproduces that same
   final combined look rather than the now-superseded original.
*/
.prospen-pagination {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: inherit;
}

.prospen-pagination button {
    background: #D58037;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    margin: 0 3px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(213, 128, 55, 0.25);
}

.prospen-pagination button:hover:not(.active) {
    background: #b3692c !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(213, 128, 55, 0.35);
}

.prospen-pagination button.active {
    background-color: #474340 !important;
    transform: scale(0.97);
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.prospen-pagination button:disabled {
    background: #ccc !important;
    color: #777 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Course Card */
.prospen-course-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    border: 1px solid #e0e0e0;
    height: 100%;
}

.prospen-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.prospen-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #D58037;
    z-index: 1;
}

/* Image Container */
.prospen-image-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

/* Shortlist (heart) button — grid view, sits top-right of the course
   image. Toggled to .is-active by the Prospen Course Shortlist plugin
   (assets/shortlist.js) when a course is in the shortlist; this plugin
   only renders the button/markup and stays unaware of shortlist state. */
.prospen-shortlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 50%;
    color: #666;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    z-index: 2;
}

.prospen-shortlist-btn:hover {
    background: #fff;
    color: #D58037;
    transform: scale(1.1);
}

.prospen-shortlist-btn.is-active {
    color: #e74c3c;
}

.prospen-shortlist-btn.is-active i::before {
    content: "\f415"; /* bi-heart-fill */
}

.prospen-shortlist-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.prospen-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.prospen-course-card:hover .prospen-image-container img {
    transform: scale(1.05);
}

/* Course Content */
.prospen-course-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Clickable Course Title Styles */
.prospen-course-title-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    margin-bottom: 8px;
}

.prospen-course-title-link:hover .prospen-course-title {
    color: #D58037 !important;
    text-decoration: underline;
}

.prospen-course-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
    color: #333;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.prospen-course-info {
    font-size: 14px;
    margin-bottom: 4px;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

.prospen-course-info strong {
    color: #333;
}

/* View Button */
.prospen-view-button {
    background: #D58037;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 12px 0;
    width: 90% !important;
    margin: 10px auto 15px auto;
    font-size: 14px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.prospen-view-button:hover {
    background: #b3692c;
    transform: translateY(-1px);
}