/* ===========================================
   КНОПКИ И ССЫЛКИ-ДЕЙСТВИЯ
   По DESIGN.md: основная — заливка бордо, текст кремовый, ховер уходит
   в закатный оранжевый. Вторичная — рамка 1px.
   =========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: var(--text-label-caps);
    line-height: var(--text-label-caps-lh);
    letter-spacing: var(--text-label-caps-ls);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
    background: var(--color-primary-container);
    color: var(--color-on-primary);
    border-color: var(--color-primary-container);
}

.btn--primary:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn--secondary {
    background: transparent;
    color: var(--color-primary-container);
    border-color: var(--color-primary-container);
}

.btn--secondary:hover {
    background: rgba(74, 14, 14, 0.05);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.btn--ghost:hover {
    background: #fff;
    color: var(--color-primary);
}

.btn--sm {
    padding: 10px 20px;
}

.btn--block {
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Текстовая ссылка со стрелкой — повторяющийся приём макета */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-label-caps);
    letter-spacing: var(--text-label-caps-ls);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-secondary);
    transition: color var(--transition);
}

.link-arrow:hover {
    color: var(--color-primary-container);
}

.link-arrow svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition);
}

.link-arrow:hover svg {
    transform: translateX(3px);
}

/* Круглые стрелки прокрутки ленты */
.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--frame-border);
    border-radius: var(--radius-full);
    color: var(--color-primary-container);
    transition: background var(--transition), color var(--transition);
}

.scroll-btn:hover:not([disabled]) {
    background: var(--color-primary-container);
    color: #fff;
}

.scroll-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.scroll-btn svg {
    width: 16px;
    height: 16px;
}

/* Пилюля-чип: теги и статусы. По DESIGN.md — только они получают
   полное скругление, чтобы контрастировать с прямыми углами структуры. */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: var(--text-label-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-secondary-container);
    color: var(--color-primary-container);
    border-radius: var(--radius-full);
}