/* ═══════════════════════════════════════════════
   Courses Page — Premium Theme
   ═══════════════════════════════════════════════ */

/* ── Global Inter font ── */
.job-listing-three,
.job-listing-three *,
.inner-banner-one,
.inner-banner-one *,
.courses-banner,
.courses-banner *,
#coursesContainer,
#coursesContainer *,
#loadMoreBtnarea,
#loadMoreBtnarea * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset layout chrome ── */
.footer-one { background: transparent !important; }
.inner-banner-one,
div.inner-banner-one.position-relative,
.inner-banner-one.position-relative,
.courses-banner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ── Disabled state ── */
.disabled-btn {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Loading states ── */
.loading-text { color: #999; }

.skill-placeholder {
    color: #999;
    font-style: normal;
}

/* ── Skills gained ── */
.Sk { font-size: 12.6px; }

.skills-gained-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.skills-gained-line {
    width: 100%;
    height: 0;
    border-bottom: 1px solid #e5e7eb;
    order: -1;
}

.skills-gained-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.skill-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: #f9fafb;
    color: #4b5563;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    border: 1px solid #e5e7eb;
    transition: all 0.15s;
    text-transform: capitalize;
    text-decoration: none;
    margin: 0;
}
.skill-tag:hover {
    color: #111827;
    background: #fff;
    border-color: #111827;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
    text-decoration: none;
}

.skill-placeholder .skeleton {
    display: inline-block;
    height: 22px;
    width: 72px;
    margin-right: 6px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Courses grid ── */
#coursesContainer.row { flex-wrap: wrap; }
#coursesContainer .course-card { margin-bottom: 0; }

/* ── Course card — premium redesign ── */
.course-grid-card {
    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.course-grid-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.06) !important;
    transform: translateY(-3px) !important;
}

.course-grid-card .row {
    flex-direction: column;
    align-items: stretch;
    margin: 0 !important;
    padding: 20px 24px 24px;
}
.course-grid-card .row > [class*="col-"] {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
}

/* Image */
.course-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
    background: #f3f4f6;
    margin: 0;
}
.course-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s;
}
.course-card-img.course-card-img--loaded { opacity: 1; }

/* Title */
.course-grid-card .job-title {
    width: 100%;
    padding: 0 !important;
}
.course-grid-card .job-title .title,
.course-grid-card .job-title .course-title-link {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: block;
    text-decoration: none;
    transition: color 0.15s;
}
.course-grid-card .job-title .course-title-link:hover {
    color: #4f46e5 !important;
}
/* After a mouse click the link briefly enters :active and lingers in
   :focus, which (without these resets) leaves the title coloured indigo
   and outlined in black even though the user has moved on. We snap the
   colour back to the default text colour and suppress the underline so
   the card looks identical pre- and post-click for mouse users. */
.course-grid-card .job-title .course-title-link:visited,
.course-grid-card .job-title .course-title-link:active,
.course-grid-card .job-title .course-title-link:focus,
.course-grid-card .job-title .course-title-link:focus-visible {
    color: #111827 !important;
    text-decoration: none !important;
}

/* Brief — force proper case even if API returns uppercase */
.course-grid-card .brief-placeholder,
.course-grid-card .brief-placeholder.Sk,
.course-grid-card p.Sk,
.course-grid-card .align-items-center p,
#coursesContainer .course-card .brief-placeholder {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.65 !important;
    padding: 0 !important;
    margin: 10px 0 16px !important;
    text-transform: none !important;
}

/* Title — ensure proper casing */
.course-grid-card .job-title .title,
.course-grid-card .job-title .course-title-link {
    text-transform: none !important;
}

/* Skills row */
.course-grid-card .job-location,
.course-grid-card .job-category {
    padding: 0 !important;
}
.course-grid-card .Sk {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 9.6px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: #6b7280;
}

/* View Course button — trillion-dollar premium */
.course-grid-card .btn-group {
    justify-content: center;
    width: 100%;
    display: flex;
    margin-top: 20px;
}
#coursesContainer .course-grid-card .btn-group .btn,
#coursesContainer .course-grid-card .btn-group .btn-primary {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #fff;
    background: #111827;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
#coursesContainer .course-grid-card .btn-group .btn:hover,
#coursesContainer .course-grid-card .btn-group .btn-primary:hover {
    color: #fff;
    background: #1f2937;
    box-shadow: 0 4px 12px rgba(17,24,39,0.15);
    transform: translateY(-1px);
    text-decoration: none;
}
#coursesContainer .course-grid-card .btn-group .btn:active,
#coursesContainer .course-grid-card .btn-group .btn-primary:active {
    transform: scale(0.98);
}
#coursesContainer .course-grid-card .btn-group .btn-primary:focus {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

/* Disabled View Course */
#coursesContainer .course-grid-card .btn-group .btn.disabled-btn,
#coursesContainer .course-grid-card .btn-group .btn-primary.disabled-btn {
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
    position: relative;
}

/* ── Fly-in animation ── */
@keyframes courseCardFlyIn {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
body.course-cards-animate #coursesContainer .course-card {
    opacity: 0;
    transform: translateY(40px);
}
body.course-cards-animate #coursesContainer .course-card.course-card-fly-in {
    animation: courseCardFlyIn 0.5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
    body.course-cards-animate #coursesContainer .course-card,
    body.course-cards-animate #coursesContainer .course-card.course-card-fly-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── Performance ── */
.job-list-one {
    will-change: transform;
    transform: translateZ(0);
}
.job-post-item-wrapper {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Alert ── */
.alert-danger {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .brief-placeholder { margin-left: 0 !important; }
}
@media (max-width: 768px) {
    .course-grid-card .job-title .title,
    .course-grid-card .job-title .course-title-link {
        font-size: 15px !important;
    }
    .course-grid-card .brief-placeholder {
        font-size: 13px !important;
    }
    .skill-tag { font-size: 11px; padding: 6px 12px; }
}
@media (max-width: 576px) {
    .course-grid-card .brief-placeholder { padding: 0 !important; }
    .skill-tag { font-size: 11px; padding: 5px 11px; }
}

/* ── Print ── */
@media print {
    .inner-banner-one, .footer-one, #loadMoreBtnarea, #loader {
        display: none !important;
    }
    .job-list-one { break-inside: avoid; page-break-inside: avoid; }
}

/* ── Accessibility ──
   Keyboard users (Tab navigation) still get a clear focus ring for
   accessibility / WCAG 2.1 SC 2.4.7. Mouse users do NOT — clicking the
   title used to leave a permanent black rectangle around the title
   text on the catalogue card, which looked broken.

   :focus-visible fires only when the browser decides the focus came
   from keyboard input (or a programmatic focus). Mouse / touch focus
   gets no outline. This is the modern WCAG-compliant pattern. */
.course-title-link:focus { outline: none; }
.course-title-link:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}