/**
 * Discourse Widgets Styles
 * Using Twelve Assistant design system (Tailwind stone palette)
 */

/* ============================================
   Container
   ============================================ */
.ta-discourse-topics {
    margin: 2rem 0;
}

.ta-discourse-topics__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1c1917; /* stone-900 */
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.dark .ta-discourse-topics__title {
    color: #fafaf9; /* stone-50 */
}

.ta-discourse-topics__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================================
   Topic Card - Default (List)
   ============================================ */
.ta-discourse-topic {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(28, 25, 23, 0.05); /* stone-900/5 */
    transition: all 0.2s ease;
}

.ta-discourse-topic:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.dark .ta-discourse-topic {
    background: #1c1917; /* stone-900 */
    border-color: rgba(250, 250, 249, 0.1); /* stone-50/10 */
}

/* ============================================
   Topic Title
   ============================================ */
.ta-discourse-topic__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.ta-discourse-topic__link {
    color: #1c1917; /* stone-900 */
    text-decoration: none;
    transition: color 0.2s ease;
}

.ta-discourse-topic__link:hover {
    color: #57534e; /* stone-700 */
}

.dark .ta-discourse-topic__link {
    color: #fafaf9; /* stone-50 */
}

.dark .ta-discourse-topic__link:hover {
    color: #d6d3d1; /* stone-300 */
}

/* ============================================
   Topic Indicators
   ============================================ */
.ta-discourse-topic__pinned,
.ta-discourse-topic__closed {
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

/* ============================================
   Topic Excerpt
   ============================================ */
.ta-discourse-topic__excerpt {
    color: #57534e; /* stone-600 */
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.dark .ta-discourse-topic__excerpt {
    color: #a8a29e; /* stone-400 */
}

/* ============================================
   Topic Meta
   ============================================ */
.ta-discourse-topic__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
    color: #78716c; /* stone-500 */
}

.dark .ta-discourse-topic__meta {
    color: #a8a29e; /* stone-400 */
}

.ta-discourse-topic__separator {
    color: #d6d3d1; /* stone-300 */
}

.dark .ta-discourse-topic__separator {
    color: #57534e; /* stone-600 */
}

.ta-discourse-topic__category {
    padding: 0.25rem 0.625rem;
    background: rgba(120, 113, 108, 0.1); /* stone-500/10 */
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.75rem;
}

.dark .ta-discourse-topic__category {
    background: rgba(168, 162, 158, 0.15); /* stone-400/15 */
}

/* ============================================
   Topic Tags
   ============================================ */
.ta-discourse-topic__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ta-discourse-topic__tag {
    padding: 0.25rem 0.625rem;
    background: rgba(120, 113, 108, 0.1);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #57534e; /* stone-600 */
    font-weight: 500;
}

.dark .ta-discourse-topic__tag {
    background: rgba(168, 162, 158, 0.15);
    color: #d6d3d1; /* stone-300 */
}

/* ============================================
   Layout: Compact
   ============================================ */
.ta-discourse-topics--compact .ta-discourse-topic {
    padding: 1rem;
}

.ta-discourse-topics--compact .ta-discourse-topic__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.ta-discourse-topics--compact .ta-discourse-topic__excerpt {
    display: none;
}

.ta-discourse-topics--compact .ta-discourse-topics__list {
    gap: 0.75rem;
}

/* ============================================
   Layout: Cards
   ============================================ */
.ta-discourse-topics--cards .ta-discourse-topics__list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ta-discourse-topics--cards .ta-discourse-topics__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ta-discourse-topics--cards .ta-discourse-topics__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ta-discourse-topics--cards .ta-discourse-topic {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ta-discourse-topics--cards .ta-discourse-topic__meta {
    margin-top: auto;
}

/* ============================================
   Empty State
   ============================================ */
.ta-discourse-empty {
    background: #fafaf9; /* stone-50 */
    border: 1px dashed #d6d3d1; /* stone-300 */
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    color: #78716c; /* stone-500 */
}

.dark .ta-discourse-empty {
    background: #292524; /* stone-800 */
    border-color: #57534e; /* stone-600 */
    color: #a8a29e; /* stone-400 */
}

.ta-discourse-empty p {
    margin: 0;
    font-size: 1rem;
}

/* ============================================
   Error State
   ============================================ */
.ta-discourse-error {
    background: #fef2f2; /* red-50 */
    border: 1px solid #fecaca; /* red-200 */
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: #991b1b; /* red-800 */
}

.dark .ta-discourse-error {
    background: rgba(153, 27, 27, 0.1);
    border-color: rgba(254, 202, 202, 0.2);
    color: #fca5a5; /* red-300 */
}

.ta-discourse-error p {
    margin: 0;
    font-size: 0.875rem;
}

.ta-discourse-error strong {
    font-weight: 600;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767px) {
    .ta-discourse-topic {
        padding: 1rem;
    }

    .ta-discourse-topic__title {
        font-size: 1rem;
    }

    .ta-discourse-topic__meta {
        font-size: 0.8125rem;
    }

    .ta-discourse-topics__title {
        font-size: 1.25rem;
    }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ta-discourse-topic {
    animation: fadeIn 0.3s ease-out;
}

/* ============================================
   Focus States (Accessibility)
   ============================================ */
.ta-discourse-topic__link:focus {
    outline: 2px solid #78716c; /* stone-500 */
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.dark .ta-discourse-topic__link:focus {
    outline-color: #a8a29e; /* stone-400 */
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .ta-discourse-topic {
        box-shadow: none;
        border: 1px solid #d6d3d1;
        page-break-inside: avoid;
    }

    .ta-discourse-topic:hover {
        transform: none;
    }
}