/* ============================================================
   LMS Course Cards — Public Stylesheet  v2.0
   All colours driven by CSS custom properties (set by PHP).
   ============================================================ */

/* ── CSS variable defaults (overridden inline by PHP) ───── */
:root {
    --lcc-accent:       #00ADFF;
    --lcc-price:        #00ADFF;
    --lcc-provider:     #00ADFF;
    --lcc-title:        #1F2937;
    --lcc-subtitle:     #6B7280;
    --lcc-card-bg:      #FFFFFF;
    --lcc-card-border:  #E5E7EB;
    --lcc-card-radius:  12px;
    --lcc-img-height:   200px;
    --lcc-cta-bg:       #0F172A;
    --lcc-cta-tc:       #FFFFFF;
    --lcc-cta-radius:   8px;
    --lcc-scroll-thumb: #00ADFF;
    --lcc-scroll-track: #f0f0f0;
    --lcc-columns:      3;
    --lcc-cols-tablet:  2;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.lcc-wrapper {
    width: 100%;
    margin: 40px auto;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
}

/* ══════════════════════════════════════════════════════════
   HORIZONTAL SCROLL LAYOUT
══════════════════════════════════════════════════════════ */
.lcc-layout-scroll .lcc-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 8px 4px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--lcc-scroll-thumb) var(--lcc-scroll-track);
    list-style: none;
    margin: 0;
}

.lcc-layout-scroll .lcc-container::-webkit-scrollbar       { height: 7px; }
.lcc-layout-scroll .lcc-container::-webkit-scrollbar-track {
    background: var(--lcc-scroll-track);
    border-radius: 20px;
}
.lcc-layout-scroll .lcc-container::-webkit-scrollbar-thumb {
    background: var(--lcc-scroll-thumb);
    border-radius: 20px;
}
.lcc-layout-scroll .lcc-container::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.85);
}

.lcc-layout-scroll .lcc-card {
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   GRID LAYOUT
══════════════════════════════════════════════════════════ */
.lcc-layout-grid .lcc-container {
    display: grid;
    grid-template-columns: repeat( var(--lcc-columns, 3), 1fr );
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 4px;
}

/* ══════════════════════════════════════════════════════════
   CARD BASE
══════════════════════════════════════════════════════════ */
.lcc-card {
    background: var(--lcc-card-bg);
    border-radius: var(--lcc-card-radius);
    border: 1px solid var(--lcc-card-border);
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.lcc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Focus indicator — WCAG 2.4.11 */
.lcc-card:focus-within {
    outline: 3px solid var(--lcc-accent);
    outline-offset: 2px;
    border-radius: var(--lcc-card-radius);
}

/* ── Badge ──────────────────────────────────────── */
.lcc-badge {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.18);
}

/* ── Course image ────────────────────────────────── */
.lcc-img {
    width: 100%;
    height: var(--lcc-img-height);
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.lcc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.lcc-card:hover .lcc-img img { transform: scale(1.04); }

.lcc-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #93c5fd;
    font-size: 52px;
}

/* ── Card body ───────────────────────────────────── */
.lcc-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

/* ── Provider ────────────────────────────────────── */
.lcc-provider {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    overflow: hidden;
}

.lcc-prov-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

.lcc-prov-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lcc-provider);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcc-course-code { opacity: .7; }

/* ── Title ───────────────────────────────────────── */
.lcc-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--lcc-title);
    margin: 0 0 8px;
    line-height: 1.4;
}

.lcc-title-link {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.lcc-title-link:hover { color: var(--lcc-accent); text-decoration: underline; }
.lcc-title-link:focus { outline: none; }  /* handled by .lcc-card:focus-within */

/* ── Subtitle ────────────────────────────────────── */
.lcc-subtitle {
    font-size: 13px;
    color: var(--lcc-subtitle);
    margin: 0 0 12px;
    line-height: 1.5;
}

/* ── Meta chips (duration / level / lang / cert) ──── */
.lcc-meta {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.lcc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #4b5563;
}

.lcc-meta-item i {
    color: var(--lcc-accent);
    font-size: 11.5px;
    flex-shrink: 0;
}

.lcc-meta-cert { color: #059669; font-weight: 600; }
.lcc-meta-cert i { color: #059669; }

/* ── Ratings + Students ──────────────────────────── */
.lcc-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.lcc-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lcc-stars { display: inline-flex; gap: 2px; }
.lcc-stars .fa-star,
.lcc-stars .fa-star-half-stroke { color: #f59e0b; font-size: 12px; }
.lcc-stars .far.fa-star          { color: #d1d5db; font-size: 12px; }

.lcc-rating-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
}

.lcc-students {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #6b7280;
}

.lcc-students i { color: var(--lcc-accent); font-size: 12px; }

/* ── Price row ───────────────────────────────────── */
.lcc-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    margin-bottom: 14px;
}

.lcc-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--lcc-price);
    line-height: 1;
}

.lcc-price--free { color: #059669; font-size: 22px; }

.lcc-price-orig {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

/* ── CTA button ──────────────────────────────────── */
.lcc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: var(--lcc-cta-bg);
    color: var(--lcc-cta-tc) !important;
    border: none;
    border-radius: var(--lcc-cta-radius);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: filter .25s, transform .25s, box-shadow .25s;
    margin-top: auto;
}

.lcc-cta:hover,
.lcc-cta:focus-visible {
    filter: brightness(.88);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* WCAG focus indicator */
.lcc-cta:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.lcc-cta:active { transform: translateY(0); }

.lcc-cta i {
    font-size: 13px;
    transition: transform .2s;
    flex-shrink: 0;
}

.lcc-cta:hover i { transform: translateX(4px); }

.lcc-cta--no-link { opacity: .65; cursor: default; }

/* ── Scroll hint ─────────────────────────────────── */
.lcc-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    margin-top: 12px;
    transition: opacity .4s;
}

.lcc-scroll-hint i { animation: lcc-nudge 1.8s ease-in-out infinite; }

@keyframes lcc-nudge {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(7px); }
}

/* ── Empty state ─────────────────────────────────── */
.lcc-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-style: italic;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════ */

/* Tablet (≤ 900px) */
@media ( max-width: 900px ) {
    .lcc-layout-grid .lcc-container {
        grid-template-columns: repeat( var(--lcc-cols-tablet, 2), 1fr );
        gap: 20px;
    }
    .lcc-layout-scroll .lcc-card { min-width: 272px; max-width: 272px; }
}

/* Mobile landscape (≤ 640px) */
@media ( max-width: 640px ) {
    .lcc-layout-grid .lcc-container {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .lcc-price { font-size: 22px; }
    .lcc-title { font-size: 15px; }
}

/* Mobile portrait (≤ 480px) */
@media ( max-width: 480px ) {
    .lcc-layout-grid .lcc-container {
        grid-template-columns: 1fr;
    }
    .lcc-layout-scroll .lcc-card {
        min-width: 83vw;
        max-width: 83vw;
    }
    .lcc-body { padding: 14px 15px 16px; }
    .lcc-price { font-size: 20px; }
}

/* ── Reduced motion (WCAG 2.3.3) ─────────────────── */
@media ( prefers-reduced-motion: reduce ) {
    .lcc-card,
    .lcc-img img,
    .lcc-cta,
    .lcc-cta i,
    .lcc-scroll-hint i {
        transition: none !important;
        animation: none !important;
    }
    .lcc-card:hover { transform: none; }
    .lcc-cta:hover, .lcc-cta:focus-visible { transform: none; }
}

/* ── Forced colours / high contrast (WCAG 1.4.11) ─── */
@media ( forced-colors: active ) {
    .lcc-card  { border: 2px solid ButtonText; forced-color-adjust: none; }
    .lcc-cta   { border: 2px solid ButtonText; }
    .lcc-badge { border: 1px solid ButtonText; }
}