/* ============================================================
   horo.css - текст прогноза знака зодиака и китайского гороскопа
   (modules/Horo/ucZodiakHoroType.ascx, modules/Horo/Chine/ucChineType.ascx).

   Разметку готовит интеграция при импорте прогноза - HoroContentHelper в memax.crawlers
   (DreamBook.Integration.Application), сайт отдаёт [dbo].[Horoscope].[Text] из базы как есть:
     .dbHoroDay  - день: "главное" с буквицей, абзацы, совет дня;
     .dbHoroBook - неделя и месяц: подзаголовки, абзацы, буквица;
     .dbHoroLine - год и китайский гороскоп: чипы месяцев и лента времени.
   Классы .dbHoroNow и .dbHoroPast ставит скрипт в tpl/default.master по дате просмотра.
   ============================================================ */

.dbHoro{text-align:left;font:17px/1.65 trebuchet ms,sans-serif;color:#222;max-width:680px;overflow-wrap:break-word}
.dbHoro p{margin:0 0 1em}
.dbHoro .dbHoroSub{font:700 20px/1.3 Georgia,serif;margin:0 0 10px;color:#111}

/* буквица: первая буква абзаца, как в книге */
.dbHoro .dbHoroDrop{float:left;font:700 46px/.85 Georgia,serif;margin:5px 6px 0 0;color:#444}

/* день: главное + совет */
.dbHoroDay .dbHoroLead{font:400 21px/1.45 Georgia,serif;color:#111;margin-bottom:.8em}
.dbHoroDay .dbHoroLead .dbHoroDrop{font-size:54px;margin-top:6px}
.dbHoro .dbHoroTip{clear:both;margin:18px 0 6px;padding:12px 16px;background:#f4f6f8;border-left:4px solid #c00;border-radius:0 6px 6px 0}
.dbHoro .dbHoroTip b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#c00;margin-bottom:2px}

/* книга: подзаголовок недели */
.dbHoroBook .dbHoroSub{clear:both;margin:28px 0 12px;padding:12px 0 0 12px;border-top:1px solid #e6e8eb;border-left:3px solid #8a929c}
.dbHoroBook .dbHoroSub:first-child{margin-top:0;padding-top:0;border-top:0}

/* лента времени: чипы месяцев */
.dbHoro .dbHoroChips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}
.dbHoro .dbHoroChips a{display:block;padding:4px 10px;border:1px solid #cfd4da;border-radius:14px;font-size:14px;line-height:1.4;color:#1a4fb4;text-decoration:none;background:#fff}
.dbHoro .dbHoroChips a:hover{border-color:#c00;color:#c00}
.dbHoro .dbHoroChips a.dbHoroNow{background:#c00;border-color:#c00;color:#fff;font-weight:700}

/* лента времени: ось с номером месяца в кружке */
.dbHoro .dbHoroAxis{position:relative;margin-left:8px;padding-left:34px;border-left:2px solid #d5d9de}
.dbHoro .dbHoroAxis section{position:relative;padding-bottom:14px;scroll-margin-top:70px}
.dbHoro .dbHoroAxis section::before{content:attr(data-n);position:absolute;left:-52px;top:-3px;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #b9c0c8;color:#555;font:700 12px/32px trebuchet ms,sans-serif;text-align:center}
.dbHoro .dbHoroAxis .dbHoroLead{font-weight:700;color:#111}
.dbHoro .dbHoroAxis section.dbHoroPast,
.dbHoro .dbHoroAxis section.dbHoroPast .dbHoroSub{color:#666}
.dbHoro .dbHoroAxis section.dbHoroPast .dbHoroLead{color:#555}
.dbHoro .dbHoroAxis section.dbHoroNow::before{background:#c00;border-color:#c00;color:#fff}
.dbHoro .dbHoroAxis section.dbHoroNow .dbHoroSub{color:#c00}

@media (max-width:698px){
 .dbHoro{padding:0 10px;box-sizing:border-box}
 .dbHoro .dbHoroChips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 .dbHoro .dbHoroChips a{white-space:nowrap}
 .dbHoro .dbHoroAxis{padding-left:26px;margin-left:14px}
 .dbHoro .dbHoroAxis section::before{left:-42px;width:28px;height:28px;line-height:28px;font-size:11px}
}