/* ==== Обёртка изображения ==== */
.img-wrapper {
    position: relative;            /* родитель для overlay */
    overflow: hidden;              /* скрываем части, выходящие за границы */
}

/* ==== Само изображение ==== */
.img-wrapper img {
    width: 100%;                   /* заполняет .card‑img‑top */
    height: auto;
    transition: filter .3s ease, transform .3s ease;
}

/* ==== Слой‑оверлей (кнопка) ==== */
.overlay {
    position: absolute;
    inset: 0;                       /* top/right/bottom/left = 0 */
    background: rgba(0,0,0,0.35);   /* затемнение при hover (можно убрать) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;                    /* скрыт по‑умолчанию */
    transition: opacity .3s ease;
}

/* ==== Кнопка ==== */
.overlay .btn-read {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    padding: .5rem 1rem;
    font-weight: 500;
}

/* ==== Эффекты при наведении на всю карточку ==== */
.card:hover .img-wrapper img {
    filter: blur(4px);             /* размыть картинку */
    transform: scale(1.05);        /* чуть увеличить – приятный эффект */
}
.card:hover .overlay {
    opacity: 1;                    /* показать кнопку */
}

/* ==== Если хотите лишь сделать изображение полупрозрачным без blur ==== */
/*
.card:hover .img-wrapper img {opacity:0.55;}
*/
/* --------------------------------------------------------------
   1️⃣ Общая переменная – фиолетовый цвет проекта
   -------------------------------------------------------------- */
:root {
    --bs-purple: #6f42c1;          /* основной фиолетовый */
}

/* --------------------------------------------------------------
   2️⃣ Кнопки (уже было, оставляем для совместимости)
   -------------------------------------------------------------- */
.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-purple);
    --bs-btn-border-color: var(--bs-purple);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5936a2;
    --bs-btn-hover-border-color: #5936a2;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #502d85;
    --bs-btn-active-border-color: #502d85;
}

/* --------------------------------------------------------------
   3️⃣ Outline‑кнопка
   -------------------------------------------------------------- */
.btn-outline-purple {
    --bs-btn-color: var(--bs-purple);
    --bs-btn-border-color: var(--bs-purple);
    --bs-btn-bg: transparent;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-purple);
    --bs-btn-hover-border-color: var(--bs-purple);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5936a2;
    --bs-btn-active-border-color: #5936a2;

    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}

/* --------------------------------------------------------------
   4️⃣ Утилита – текст + фон (как .text-bg-primary)
   -------------------------------------------------------------- */
.text-bg-purple {
    /* Цвет текста, который будет автоматически контрастным */
    color: #fff !important;
    /* Фоновый цвет */
    background-color: var(--bs-purple) !important;
    /* Чтобы в темном режиме (если используете) также получался контраст */
    --bs-text-opacity: 1;
}

/* --------------------------------------------------------------
   5️⃣ Утилита – граница (как .border-primary)
   -------------------------------------------------------------- */
.border-purple {
    border-color: var(--bs-purple) !important;
}

/* --------------------------------------------------------------
   6️⃣ (Опционально) если хотите, чтобы у .border-purple был
      стиль dashed/solid как в Bootstrap‑утилитах, можно добавить:
   -------------------------------------------------------------- */
.border-purple {
    border-style: solid;          /* default — solid, можно поменять */
    border-width: 1px;            /* обычная ширина, как у .border */
}
/* Базовая типографика для статьи */
.blog-content {
    margin: 0 auto;                 /* центрируем */
}

/* Заголовки внутри статьи */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    font-weight: 600;
}

/* Параграфы */
.blog-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Блок‑цитаты */
.blog-content blockquote {
    padding: .75rem 1.25rem;
    margin: 1rem 0;
    font-size: .95rem;
    color: #6c757d;
    border-left: .25rem solid #dee2e6;
    background-color: #f8f9fa;
}

/* Таблицы */
.blog-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.blog-content th,
.blog-content td {
    padding: .75rem;
    border: 1px solid #dee2e6;
}
.blog-content thead {
    background-color: #e9ecef;
}

/* Картинки – адаптивные, с отступом */
.blog-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

/* Программный код */
.blog-content pre {
    background: #f8f9fa;
    padding: .75rem;
    border-radius: .4rem;
    overflow-x: auto;
}
.blog-content code {
    background: #e9ecef;
    padding: .2rem .4rem;
    border-radius: .3rem;
    font-size: .95em;
}

/* Теги‑бейджи чуть «мягче» */
.blog-content .badge-tag {
    margin-right: .5rem;
    margin-bottom: .25rem;
}

/* Добавление утилиты text-purple для Bootstrap 5 */
.text-purple {
    color: #6f42c1 !important;   /* стандартный «purple» из Bootstrap */
}

/* Кастомный фиолетовый цвет */
.bg-purple {
    background-color: #6f42c1 !important;
}

/* Лёгкая версия для фона */
.bg-purple-light {
    background-color: #f0e6ff !important;
}