/*
 * Блок «1000 и один хадис» - правая колонка главной.
 *
 * Снято с макета Figma (Fhm9rBfdGGsbSq9FIakt2v, узел 0:2729) 18.08.2026:
 *   подложка 256×515, радиус 6, градиент от белого к янтарному
 *   каллиграфия 58×56 слева, заголовок «1000 / и один хадис» 20px DemiBold
 *   рассказчик хадиса 14px #b48e73, сам хадис 18px чёрным
 *   примечание 14px #b48e73
 *   линия, ниже обложка книги 68×97, логотип 95×38 и подпись 12px
 *
 * ⚠️ В данных есть только сам хадис (он стоит в заголовке статьи цикла) и
 * ссылка на материал. Рассказчика, примечания и номера страницы отдельными
 * полями нет - разметка под них готова, выводятся только если переданы.
 *
 * 🛑 Локальный сброс обязателен: блок живёт на странице старой вёрстки.
 */

.it-hadis,
.it-hadis * {
    box-sizing: border-box;
}

.it-hadis {
    display: block;
    padding: var(--sp-20);
    border-radius: var(--r-6);
    background: linear-gradient(133deg, var(--c-white) 0%, #ffeccd 55%, var(--c-accent-amber) 150%);
    color: var(--c-text-black);
    font-family: var(--font-main);
    text-decoration: none;
}

/* ---------- Шапка: каллиграфия и название цикла ---------- */

.it-hadis__head {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
}

.it-hadis__mark {
    display: block;
    flex-shrink: 0;
    width: 58px;
    height: 56px;
}

.it-hadis__title {
    margin: 0;
    font-size: var(--fs-20);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* ---------- Текст ---------- */

.it-hadis__narrator {
    margin: 0 0 var(--sp-4);
    color: var(--c-brown-dark);
    font-size: var(--fs-14);
    line-height: 1.3;
}

.it-hadis__text {
    margin: 0;
    font-size: var(--fs-hadis-text);
    line-height: 1.35;
}

.it-hadis__note {
    margin: var(--sp-16) 0 0;
    color: var(--c-brown-dark);
    font-size: var(--fs-14);
    line-height: 1.35;
}

/* ---------- Источник: книга ---------- */

.it-hadis__source {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    margin-top: var(--sp-20);
    padding-top: var(--sp-20);
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.it-hadis__cover {
    display: block;
    flex-shrink: 0;
    width: 68px;
    height: auto;
    border-radius: var(--r-3);
}

.it-hadis__book {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.it-hadis__logo {
    display: block;
    width: 95px;
    height: auto;
}

.it-hadis__from {
    margin: 0;
    font-size: var(--fs-12);
    line-height: 1.3;
}

.it-hadis__page {
    color: var(--c-brown-dark);
}

.it-hadis:hover .it-hadis__text {
    color: var(--c-accent);
}

/*
 * Мобильная: блок во всю ширину экрана (макет 0:2435, 20.08.2026).
 *
 * Третий блок с подложкой после «Вопрос-ответ» и «Благородного Куръана» -
 * приём тот же: выход за поля `.container` отрицательными полями на
 * --container-pad, скругление снимается. Радиуса в макете нет, хотя узел там
 * лежит как rounded-rectangle: угловые пиксели залиты цветом градиента.
 *
 * 🛑 Через `100vw` такое не растягивать: при полосе прокрутки это шире видимой
 * области и блок сам создаст горизонтальную прокрутку.
 */
@media (max-width: 999px) {
    .it-hadis {
        margin-right: calc(-1 * var(--container-pad));
        margin-left: calc(-1 * var(--container-pad));
        border-radius: 0;
    }
}