/**
 * TP Callout — widget styles
 *
 * Notice/alert blocks: info, warning, danger, tip
 *
 * @package Technoproekt
 * @author  Kkalganov <https://kkalganov.com>
 */

/* ==========================================================================
   Callout Base
   ========================================================================== */

.tp-callout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--tp-radius-md);
    border-left: 4px solid;
    margin: 24px 0;
}

.tp-callout__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.tp-callout__icon svg {
    width: 24px;
    height: 24px;
}

.tp-callout__body {
    flex: 1;
    min-width: 0;
}

.tp-callout__title {
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tp-callout__text {
    font-size: 15px;
    line-height: 1.7;
}

.tp-callout__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Info (blue)
   ========================================================================== */

.tp-callout--info {
    background: var(--tp-callout-info-bg);
    border-left-color: var(--tp-callout-info);
}

.tp-callout--info .tp-callout__icon {
    color: var(--tp-callout-info);
}

.tp-callout--info .tp-callout__title {
    color: var(--tp-callout-info-dark);
}

/* ==========================================================================
   Warning (yellow)
   ========================================================================== */

.tp-callout--warning {
    background: var(--tp-callout-warning-bg);
    border-left-color: var(--tp-callout-warning);
}

.tp-callout--warning .tp-callout__icon {
    color: var(--tp-callout-warning-icon);
}

.tp-callout--warning .tp-callout__title {
    color: var(--tp-callout-warning-dark);
}

/* ==========================================================================
   Danger (red)
   ========================================================================== */

.tp-callout--danger {
    background: var(--tp-callout-danger-bg);
    border-left-color: var(--tp-danger);
}

.tp-callout--danger .tp-callout__icon {
    color: var(--tp-danger);
}

.tp-callout--danger .tp-callout__title {
    color: var(--tp-callout-danger-dark);
}

/* ==========================================================================
   Tip (green)
   ========================================================================== */

.tp-callout--tip {
    background: var(--tp-callout-tip-bg);
    border-left-color: var(--tp-green-accent);
}

.tp-callout--tip .tp-callout__icon {
    color: var(--tp-green-accent);
}

.tp-callout--tip .tp-callout__title {
    color: var(--tp-green-dark);
}

/* ==========================================================================
   Note (green — same scheme as tip, info icon)
   ========================================================================== */

.tp-callout--note {
    background: var(--tp-callout-tip-bg);
    border-left-color: var(--tp-green-main);
}

.tp-callout--note .tp-callout__icon {
    color: var(--tp-green-main);
}

.tp-callout--note .tp-callout__title {
    color: var(--tp-green-dark);
}

/* ==========================================================================
   Responsive (mobile-first)
   ========================================================================== */

@media (min-width: 481px) {
    .tp-callout {
        flex-direction: row;
        gap: 16px;
    }
}