/* ===========================================
   CDTSC Theme - Components v2
   Buttons / Cards / Badges / Timeline / Filters
   Optimized for premium academic feel
   =========================================== */

/* ---- Button ---- */
.cdtsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}
.cdtsc-btn:hover { text-decoration: none; }

.cdtsc-btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(10, 74, 138, 0.2);
}
.cdtsc-btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}
.cdtsc-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(10, 74, 138, 0.2);
}

.cdtsc-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary-200);
}
.cdtsc-btn-outline:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.cdtsc-btn-ghost {
    background: transparent;
    color: var(--color-gray-600);
    border-color: transparent;
}
.cdtsc-btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.cdtsc-btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); min-height: 36px; border-radius: var(--radius-md); }
.cdtsc-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-xl);
}

/* ---- Card ---- */
.cdtsc-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
}
.cdtsc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-gray-200);
}

.cdtsc-card-body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cdtsc-card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cdtsc-card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.cdtsc-card-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-3);
    line-height: var(--leading-snug);
}
.cdtsc-card-title a { color: var(--color-gray-900); }
.cdtsc-card-title a:hover { color: var(--color-primary); }

.cdtsc-card-meta,
.cdtsc-card-tags {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.cdtsc-card-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
    flex: 1;
}

/* Featured card (spans 2 columns) */
.cdtsc-card-featured { grid-column: span 2; }
.cdtsc-card-featured .cdtsc-card-body { padding: var(--space-8); }
.cdtsc-card-featured .cdtsc-card-title { font-size: var(--text-2xl); }
.cdtsc-card-featured .cdtsc-card-desc { font-size: var(--text-base); }

/* ---- Badge ---- */
.cdtsc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-full);
    color: var(--color-white);
    line-height: 1.7;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.badge-par       { background: var(--badge-par); }
.badge-wg        { background: var(--badge-wg); }
.badge-draft     { background: var(--badge-draft); color: #fff; }
.badge-comment   { background: var(--badge-comment); }
.badge-ballot    { background: var(--badge-ballot); }
.badge-published { background: var(--badge-published); }
.badge-suspended { background: var(--badge-suspended); }
.badge-withdrawn { background: var(--badge-withdrawn); }

/* Project tag */
.cdtsc-project-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    font-family: var(--font-mono);
    color: var(--color-primary);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-sm);
    letter-spacing: 0.03em;
}

/* ---- Stage Progress ---- */
.cdtsc-stage-progress {
    display: flex;
    align-items: flex-start;
    margin: var(--space-6) 0 var(--space-4);
    gap: 0;
}
.stage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.stage-item::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--color-gray-200);
    z-index: 0;
}
.stage-item:first-child::before { display: none; }
.stage-item.completed::before,
.stage-item.active::before { background: var(--color-primary); }

.stage-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-300);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.stage-item.completed .stage-dot {
    background: var(--color-success);
    border-color: var(--color-success);
}
.stage-item.completed .stage-dot::after {
    content: '\2713';
    color: #fff;
    font-size: 13px;
    font-weight: var(--fw-bold);
}
.stage-item.active .stage-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.stage-label {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: var(--space-2);
    text-align: center;
    font-weight: var(--fw-medium);
    max-width: 90px;
    line-height: 1.3;
}
.stage-item.active .stage-label,
.stage-item.completed .stage-label {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ---- News List ---- */
.cdtsc-news-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.cdtsc-news-item {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    background: var(--color-white);
    transition: all var(--transition-base);
    align-items: center;
}
.cdtsc-news-item:hover {
    border-color: var(--color-gray-200);
    background: var(--color-gray-50);
    box-shadow: var(--shadow-sm);
}

.cdtsc-news-date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50));
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--color-primary-100);
}
.cdtsc-news-date-day {
    font-size: var(--text-2xl);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary);
    line-height: 1;
}
.cdtsc-news-date-month {
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.cdtsc-news-content { flex: 1; min-width: 0; }
.cdtsc-news-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}
.cdtsc-news-content h3 a { color: var(--color-gray-900); }
.cdtsc-news-content h3 a:hover { color: var(--color-primary); }
.cdtsc-news-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
    line-height: var(--leading-relaxed);
}

/* ---- Legacy Timeline ---- */
.cdtsc-timeline { position: relative; padding-left: var(--space-8); }
.cdtsc-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-200);
}
.cdtsc-timeline-item { position: relative; margin-bottom: var(--space-6); }
.cdtsc-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-8) + 10px);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
}
.cdtsc-timeline-date {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-bottom: var(--space-2);
}

/* ---- Logo Grid ---- */
.cdtsc-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-5);
}
.cdtsc-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    min-height: 120px;
}
.cdtsc-logo-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-primary-200);
}
.cdtsc-logo-card img {
    max-height: 50px;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: all var(--transition-base);
}
.cdtsc-logo-card:hover img { filter: grayscale(0%); opacity: 1; }

/* ---- Filters ---- */
.cdtsc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
}
.cdtsc-filters select,
.cdtsc-filters input[type="search"] { width: auto; min-width: 180px; }

/* ---- Pagination ---- */
.cdtsc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}
.cdtsc-pagination a,
.cdtsc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    transition: all var(--transition-fast);
}
.cdtsc-pagination a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.cdtsc-pagination .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: var(--fw-bold);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .cdtsc-card-featured { grid-column: span 1; }
    .cdtsc-card-featured .cdtsc-card-body { padding: var(--space-6); }
    .cdtsc-card-featured .cdtsc-card-title { font-size: var(--text-lg); }

    .cdtsc-news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-4);
    }
    .cdtsc-news-date {
        flex-direction: row;
        width: auto;
        height: auto;
        padding: var(--space-2) var(--space-4);
        gap: var(--space-2);
        border-radius: var(--radius-lg);
    }
    .cdtsc-news-date-day { font-size: var(--text-lg); }

    .cdtsc-btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }

    .cdtsc-filters { flex-direction: column; }
    .cdtsc-filters select,
    .cdtsc-filters input[type="search"] { width: 100%; }
}