/* File: /assets/css/components/vocabulary.css */

/* Container bọc ngoài danh sách các từ */
.grid-vocab-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
}

/* Cấu hình cho PC (từ Tablet lớn trở lên) */
@media (min-width: 769px) {
    .grid-vocab-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }
}

/* Danh sách bọc ngoài sử dụng khoảng trắng để phân tách */
#vocabulary-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.vocab-entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    border-top: 1px solid var(--color-gray-light);
    padding-top: var(--spacing-m);
}

.vocab-term {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.vocab-item-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-m);
    width: 100%;
}

.vocab-sentence-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.vocab-sentence-item {
    border-left: 2px solid var(--color-blue-light);
    padding-left: var(--spacing-m);
}

.vocab-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-m);
}

/* Màu cho văn bản thuần túy bên trong (khi không có thẻ a) */
.term-src-text {
    font-style: normal;
    font-size: var(--text-size-m);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-dark);
}

.term-src-text a {
    color: var(--link-color-base);
}

.term-src-text a:hover {
    color: var(--link-color-hover);
}

.vocabulary__term-meaning-pronunciation {
    font-style: normal;
    font-size: var(--text-size-m);
    font-weight: var(--font-weight-normal);
    color: var(--body-text-color-secondary);
}

.vocabulary__term-translation-pos-name {
    font-style: italic;
    color: var(--color-green-base);
}

.vocabulary__term-target-content,
.vocabulary__sentence-target-content {
    font-weight: var(--font-weight-semibold);
}

.vocabulary__term-translation-definition {
    font-size: var(--text-size-s);
}

.vocabulary__term-source-content,
.vocabulary__sentence-source-content {
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-base);
}

.vocabulary__term-meaning-pronunciation,
.vocabulary__sentence-source-pronunciation {
    font-size: var(--text-size-s);
    color: var(--color-gray-base);
}

.vocabulary__term-translation-hint,
.vocabulary__sentence-translation-hint,
.vocabulary__term-translation-explanation,
.vocabulary__sentence-translation-explanation {
    color: var(--body-text-color-main);
}

.term-dest-text {
    font-style: normal;
    font-size: var(--text-size-m);
    font-weight: var(--font-weight-medium);
    color: var(--body-text-color-main);
}

/* Tag Section */
.vocabulary__term-translation-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.vocabulary__term-translation-tag-item {
    font-size: var(--text-size-xs);
    color: var(--body-text-color-main);
    background-color: var(--color-gray-light);
    padding: var(--spacing-xxs) var(--spacing-xs);
    border: none;
    border-radius: var(--border-radius);
    text-transform: lowercase;
}

/* Sentence Section - Minimalist Academic Style */
.sentence-src-text {
    font-style: normal;
    font-size: var(--text-size-m);
    font-weight: var(--font-weight-medium);
    color: var(--body-text-color-main);
}

.sentence-src-pronunciation {
    font-style: normal;
    font-size: var(--text-size-s);
    font-weight: var(--font-weight-normal);
    color: var(--body-text-color-secondary);
}

.sentence-dest-text {
    font-style: normal;
    font-size: var(--text-size-m);
    font-weight: var(--font-weight-normal);
    color: var(--body-text-color-main);
}