/* =======================================================================
   coursevo.css — new component styles for Coursevo
   Loaded after modern.css in index.jsp.

   Add all new UI improvements here.
   Uses the CSS custom properties defined in modern.css (:root).
   ======================================================================= */

/* ===== Assessment card list (.ac-*) ===================================== */
#pMain .ac-wrap { margin: 8px 0; }

/* Section title */
#pMain .ac-section-title {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 8px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--c-brand);
    font-size: 15px; font-weight: 600;
    color: #1e3a5f;
}
#pMain .ac-section-title i { color: var(--c-brand); font-size: 16px; }

/* Card container */
#pMain .ac-list {
    border: 1px solid #cddaea;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Column header row */
#pMain .ac-head {
    display: flex; align-items: center;
    padding: 8px 16px;
    background: #eaf0f7;
    border-bottom: 1px solid #cddaea;
    font-size: 12px; font-weight: 600;
    color: #4a6080;
}
#pMain .ac-head-icon   { width: 44px; flex-shrink: 0; }
#pMain .ac-head-title  { flex: 1; }
#pMain .ac-head-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-head-dates  { width: 240px; text-align: right; flex-shrink: 0; }

/* Card rows */
#pMain a.ac-row,
#pMain div.ac-row {
    display: flex; align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f4f8;
    background: #fff;
    text-decoration: none !important;
    color: #2d3748;
    border-left: 4px solid #d1dce8;
    transition: background var(--t), border-left-color var(--t);
}
#pMain a.ac-row:last-child,
#pMain div.ac-row:last-child { border-bottom: none; }
#pMain a.ac-row:hover { background: #f4f8fd; border-left-color: var(--c-brand); text-decoration: none !important; }

#pMain .ac-row.ac-active  { border-left-color: #48bb78; }
#pMain .ac-row.ac-expired { border-left-color: #fc8181; }
#pMain .ac-row.ac-waiting { border-left-color: #f6ad55; }

/* Icon */
#pMain .ac-icon {
    width: 44px; flex-shrink: 0;
    font-size: 18px; color: #b0bec5;
}
#pMain .ac-row.ac-active  .ac-icon { color: #38a169; }
#pMain .ac-row.ac-expired .ac-icon { color: #e53e3e; }
#pMain .ac-row.ac-waiting .ac-icon { color: #dd6b20; }

/* Title */
#pMain .ac-name {
    flex: 1;
    font-size: 14px !important; font-weight: 600;
    color: #1a4f82;
}
#pMain div.ac-row .ac-name { color: #718096; font-weight: 400; }

/* Status */
#pMain .ac-status { width: 120px; text-align: center; flex-shrink: 0; }
#pMain .ac-badge {
    display: inline-block; padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px !important; font-weight: 700;
}
#pMain .ac-badge-active  { background: #d4edda; color: #1a6632; }
#pMain .ac-badge-expired { background: #f8d7da; color: #842029; }
#pMain .ac-badge-waiting { background: #fff3cd; color: #856404; }

/* Dates */
#pMain .ac-dates {
    width: 240px; flex-shrink: 0;
    text-align: right;
    font-size: 13px !important; color: #64748b;
}
#pMain .ac-dates-sep { color: #aab8c8; margin: 0 4px; }

#pMain .ac-empty {
    padding: 36px 20px; text-align: center;
    color: #94a3b8; font-size: 13px; font-style: italic;
}
#pMain .ac-nav { margin-top: 8px; text-align: right; }

/* =======================================================================
   Site Hero — split layout (logo-left / carousel-right)
   Applies to organization + portal landing pages in start.jsp
   ======================================================================= */

/* ===== Hero row ========================================================= */
.ce-hero-row {
    display: flex;
    height: 360px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

/* ===== Left panel: logo + title ======================================== */
.ce-hero-left {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
    background: linear-gradient(160deg, #f0f7ff 0%, #e4f0fb 100%);
    border-right: 1px solid var(--c-border-soft);
    animation: ce-hero-fadein 0.4s ease both;
}

.ce-hero-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}

.ce-hero-site-title {
    margin: 16px 0 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    line-height: 1.35;
    font-family: 'Lato', 'Roboto', sans-serif;
}

/* ===== Right panel: carousel =========================================== */
.ce-hero-right {
    flex: 1;
    position: relative;
    min-width: 0;
    background: #0f2744;
}

.ce-hero-right .carousel,
.ce-hero-right .carousel-inner,
.ce-hero-right .carousel-inner > .item {
    height: 360px;
}

.ce-hero-slide-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

/* ===== Fallback: blurred + darkened logo ================================ */
.ce-hero-fallback-wrap {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #0f2744;
}

.ce-hero-fallback-bg {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    filter: blur(18px) brightness(0.45) saturate(1.4);
    transform: scale(1.05);
}

/* ===== Carousel controls =============================================== */
.ce-hero-right .carousel-control {
    background-image: none !important;
    background: rgba(0, 0, 0, 0.12);
    width: 40px;
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.ce-hero-right:hover .carousel-control { opacity: .75; }
.ce-hero-right .carousel-control:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.32) !important;
}
.ce-hero-right .carousel-control .glyphicon {
    font-size: 16px;
    margin-top: -8px;
}

/* ===== Carousel indicators ============================================= */
.ce-hero-right .carousel-indicators {
    bottom: 10px;
    left: 0; right: 0;
    margin: 0;
    z-index: 15;
}
.ce-hero-right .carousel-indicators li {
    background: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.65);
    width: 8px; height: 8px;
    border-radius: 50%;
    margin: 0 3px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.ce-hero-right .carousel-indicators .active {
    background: #fff;
    border-color: #fff;
    width: 10px; height: 10px;
    transform: scale(1.15);
}

/* ===== Description card below hero ===================================== */
.ce-site-desc-section {
    background: var(--c-brand-softer);
    border-left: 4px solid var(--c-brand);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 18px 24px;
    margin: 0 0 20px 0;
    box-shadow: var(--shadow-sm);
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}
.ce-site-desc-section p:last-child { margin-bottom: 0; }

/* ===== Mobile: side-by-side 50/50 ====================================== */
@media (max-width: 767px) {
    .ce-hero-row {
        height: 240px;
    }
    .ce-hero-left {
        flex: 0 0 50%;
        padding: 16px 12px;
    }
    .ce-hero-right .carousel,
    .ce-hero-right .carousel-inner,
    .ce-hero-right .carousel-inner > .item,
    .ce-hero-slide-img,
    .ce-hero-fallback-wrap {
        height: 240px;
    }
}

/* ===== Entrance animation ============================================== */
@keyframes ce-hero-fadein {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}