/**
 * Course Catalog Styles
 *
 * @package LMSTheme
 * @since   1.0.0
 */

/* ── Catalog header ─────────────────────────────────────────────────────── */
.lms-catalog-wrap {
    min-height:  60vh;
    font-family: var(--lms-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.lms-catalog-header {
    background:    linear-gradient(135deg, #1B2A4A 0%, #2D6BE4 100%);
    padding:       48px 0 32px;
}
.lms-catalog-header__inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 24px;
}
.lms-catalog-header__title {
    font-size:     2rem;
    font-weight:   800;
    color:         #fff;
    margin:        0 0 24px;
    display:       flex;
    align-items:   center;
    gap:           12px;
}
.lms-catalog-header__count {
    font-size:     14px;
    font-weight:   500;
    background:    rgba(255,255,255,.2);
    color:         #fff;
    padding:       3px 10px;
    border-radius: 20px;
}

/* ── Filters ────────────────────────────────────────────────────────────── */
.lms-catalog-filters {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}
.lms-catalog-search {
    position:      relative;
    flex:          1;
    min-width:     200px;
}
.lms-catalog-search svg {
    position:      absolute;
    left:          12px;
    top:           50%;
    transform:     translateY(-50%);
    color:         rgba(255,255,255,.6);
    pointer-events: none;
}
.lms-catalog-search__input {
    width:         100%;
    padding:       10px 16px 10px 38px;
    background:    rgba(255,255,255,.15);
    border:        1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    color:         #fff;
    font-size:     14px;
    outline:       none;
    transition:    border-color .15s, background .15s;
}
.lms-catalog-search__input::placeholder { color: rgba(255,255,255,.6); }
.lms-catalog-search__input:focus {
    background:   rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.6);
}
.lms-catalog-select {
    padding:       10px 14px;
    background:    rgba(255,255,255,.15);
    border:        1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    color:         #fff;
    font-size:     14px;
    cursor:        pointer;
    outline:       none;
}
.lms-catalog-select option { background: #1B2A4A; color: #fff; }

/* ── Catalog body ───────────────────────────────────────────────────────── */
.lms-catalog-body {
    padding:    48px 0 64px;
    background: #F8F9FA;
}
.lms-catalog-body__inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 24px;
}

/* ── Course grid ────────────────────────────────────────────────────────── */
.lms-course-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
    gap:                   24px;
    margin-bottom:         48px;
}

/* ── Course card ────────────────────────────────────────────────────────── */
.lms-course-card {
    background:    #fff;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 1px 4px rgba(0,0,0,.08);
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .2s, transform .2s;
}
.lms-course-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform:  translateY(-2px);
}

/* Thumbnail */
.lms-course-card__thumb-link {
    display:  block;
    position: relative;
    overflow: hidden;
}
.lms-course-card__thumb {
    width:      100%;
    height:     180px;
    object-fit: cover;
    display:    block;
    transition: transform .3s ease;
}
.lms-course-card:hover .lms-course-card__thumb { transform: scale(1.03); }
.lms-course-card__thumb--placeholder {
    height:          180px;
    background:      linear-gradient(135deg, #1B2A4A, #2D6BE4);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,.4);
}

/* Level badge */
.lms-course-card__level {
    position:      absolute;
    top:           12px;
    left:          12px;
    background:    rgba(0,0,0,.65);
    color:         #fff;
    font-size:     11px;
    font-weight:   600;
    padding:       3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Enrolled badge */
.lms-course-card__enrolled-badge {
    position:      absolute;
    top:           12px;
    right:         12px;
    background:    #1A7A3C;
    color:         #fff;
    font-size:     11px;
    font-weight:   600;
    padding:       3px 8px;
    border-radius: 20px;
    display:       flex;
    align-items:   center;
    gap:           4px;
}

/* Card body */
.lms-course-card__body {
    padding: 16px 20px;
    flex:    1;
}
.lms-course-card__instructor {
    font-size:   12px;
    color:       #6C757D;
    display:     block;
    margin-bottom: 6px;
}
.lms-course-card__title {
    font-size:   1rem;
    font-weight: 700;
    color:       #1B2A4A;
    margin:      0 0 8px;
    line-height: 1.3;
}
.lms-course-card__title a {
    color:           inherit;
    text-decoration: none;
}
.lms-course-card__title a:hover { color: #2D6BE4; }
.lms-course-card__excerpt {
    font-size:   13px;
    color:       #6C757D;
    line-height: 1.5;
    margin:      0 0 12px;
}
.lms-course-card__meta {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}
.lms-course-card__meta-item {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   12px;
    color:       #6C757D;
}

/* Card footer */
.lms-course-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    border-top:      1px solid #F0F0F0;
    margin-top:      auto;
}
.lms-course-card__price {
    font-size:   1.1rem;
    font-weight: 800;
    color:       #1B2A4A;
}

/* Small button variant */
.lms-btn--sm {
    padding:   7px 14px;
    font-size: 13px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.lms-catalog-empty {
    text-align:  center;
    padding:     80px 24px;
    color:       #6C757D;
}
.lms-catalog-empty h2 {
    font-size:   1.4rem;
    color:       #343A40;
    margin:      16px 0 8px;
}
.lms-catalog-empty p { margin-bottom: 24px; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.lms-pagination {
    display:         flex;
    justify-content: center;
    gap:             8px;
    flex-wrap:       wrap;
}
.lms-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   6px;
    font-size:       14px;
    text-decoration: none;
    color:           #343A40;
    border:          1px solid #E9ECEF;
    transition:      all .15s;
}
.lms-pagination .page-numbers:hover    { background: #2D6BE4; color: #fff; border-color: #2D6BE4; }
.lms-pagination .page-numbers.current  { background: #2D6BE4; color: #fff; border-color: #2D6BE4; }
.lms-pagination .page-numbers.prev,
.lms-pagination .page-numbers.next     { width: auto; padding: 0 14px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .lms-catalog-filters { flex-direction: column; }
    .lms-catalog-search  { min-width: 100%; }
    .lms-course-grid     { grid-template-columns: 1fr; }
    .lms-catalog-header__title { font-size: 1.5rem; }
}
@media ( max-width: 480px ) {
    .lms-catalog-body { padding: 32px 0; }
}

/* UX-06: button rules — keep in sync with quiz-player.css and course.css */
/* See GAP-26 for the Phase 2 plan to consolidate these into a shared file. */
.lms-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         12px 24px;
    border-radius:   8px;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    border:          2px solid transparent;
    transition:      background-color .15s, border-color .15s, color .15s;
    text-decoration: none;
    white-space:     nowrap;
    line-height:     1.2;
}
.lms-btn:disabled              { opacity: .5; cursor: not-allowed; }
.lms-btn--primary              { background: #2D6BE4; color: #fff; border-color: #2D6BE4; }
.lms-btn--primary:hover:not(:disabled),
.lms-btn--primary:focus:not(:disabled) {
    background:   #1B50B8;
    border-color: #1B50B8;
    color:        #fff;
    text-decoration: none;
}
.lms-btn--ghost                { background: transparent; color: #6C757D; border-color: #E9ECEF; }
.lms-btn--ghost:hover          { border-color: #ADB5BD; color: #343A40; text-decoration: none; }
.lms-btn--lg                   { padding: 14px 32px; font-size: 16px; }

/* Tighten the empty-state spacing slightly — the View All Courses button sits
   inside .lms-catalog-empty which already has 80px vertical padding. Give the
   button a sensible max-width so it doesn't span the full container. */
.lms-catalog-empty .lms-btn {
    min-width: 180px;
}