/* ══ КАРТА-КВАДРАТ (кундали) + ряд виджетов под таблицей ══
   Порядок на странице: таблица натальной карты → три виджета
   в одну строку (карта · периоды жизни · сегодняшний день).
   Виджеты идут ДО текста бесплатного разбора и не должны его
   оттеснять, поэтому ряд держим компактным. */

/* ── Раскладка блоков карты ──
   Телефон: карта-квадрат первой (её приятнее увидеть сразу),
   под ней таблица и периоды.
   Компьютер: таблица во всю ширину, под ней три виджета в одну
   строку — карта, периоды жизни, сегодняшний день. */
.chart-stack{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.chart-stack > #kundaliChart{order:1}
.chart-stack > #chartTableBlock{order:2}
.chart-stack > #dashaBlock{order:3;margin-top:0}

@media (min-width:901px){
    .chart-stack{
        display:grid;grid-template-columns:1fr 2fr;gap:.6rem;align-items:start
    }
    /* Строки задаём явно: иначе сетка расставит блоки по порядку в разметке
       и карта окажется выше таблицы. */
    .chart-stack > #chartTableBlock{grid-column:1 / -1;grid-row:1;order:0}
    /* ниже: карта слева (треть), справа блок периодов, который сам делится надвое */
    .chart-stack > #kundaliChart{grid-column:1;grid-row:2;order:0}
    .chart-stack > #dashaBlock{grid-column:2;grid-row:2;order:0}

    /* Пошире, чтобы три виджета встали свободно.
       Класс ставится только на страницах с этим рядом — /расчет/ не трогаем. */
    body.page-widecalc.has-chart-table .main,
    body.page-widecalc.has-chart-table .slider-wrap{max-width:1060px}
}

#kundaliChart{display:none}
#kundaliChart.visible{display:block}

/* ── Сам виджет карты: оформлен как соседние блоки периодов ── */
.kundali-section{
    background:rgba(13,8,32,.4);
    border:1px solid rgba(107,63,160,.12);
    padding:.9rem .9rem .8rem;
    font-family:'Nunito Sans',sans-serif
}

.kundali-title{
    font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(255,255,255,.34);text-align:center;line-height:1;
    margin-bottom:.7rem
}

.kundali-grid{
    display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
    gap:2px;background:rgba(212,165,74,.22);border:1px solid rgba(212,165,74,.32);
    border-radius:8px;overflow:hidden;aspect-ratio:1/1;
    max-width:380px;margin:0 auto
}

/* запасной вариант для браузеров без aspect-ratio */
@supports not (aspect-ratio: 1/1){
    .kundali-grid{height:0;padding-bottom:100%;position:relative}
}

.kundali-cell{
    position:relative;background:#120C24;padding:.28rem .22rem .22rem;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    min-height:0;overflow:hidden
}

.kundali-cell.kundali-asc{background:rgba(212,165,74,.13)}
.kundali-cell.kundali-asc .kc-sign{color:var(--gold,#d4a54a)}

.kc-house{
    position:absolute;top:2px;left:4px;font-size:.56rem;line-height:1;
    color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums
}

.kc-sign{
    font-size:.56rem;line-height:1.1;color:rgba(255,255,255,.5);
    text-align:center;margin-bottom:.12rem;letter-spacing:0;
    /* отступ слева — чтобы длинные названия («Близнецы», «Скорпион»)
       не наезжали на номер дома в углу */
    padding:0 .1rem 0 .75rem;align-self:stretch
}

.kc-planets{
    display:flex;flex-wrap:wrap;gap:.12rem .2rem;justify-content:center;align-content:flex-start
}

.kc-pl{
    font-style:normal;font-size:.7rem;font-weight:600;line-height:1.15;
    color:#f2ead9;white-space:nowrap
}
.kc-pl sup{font-size:.48rem;color:var(--gold,#d4a54a);margin-left:1px}

/* тёплый оттенок светилам — чтобы глаз цеплялся за главное */
.kc-pl-sun,.kc-pl-moon{color:var(--gold,#d4a54a)}

.kundali-center{
    grid-column:2 / 4;grid-row:2 / 4;background:#0D0819;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:.35rem
}

.kc-label{
    font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.34);line-height:1
}
.kc-value{
    font-family:'Cormorant Garamond',serif;font-size:1.08rem;line-height:1.25;
    color:var(--gold,#d4a54a);margin-top:.1rem
}
.kc-label-2{margin-top:.45rem}
.kc-value-2{font-size:.92rem;color:#f2ead9}

@media (max-width:420px){
    .kundali-section{padding:.75rem .5rem .65rem}
    .kc-pl{font-size:.68rem}
    .kc-sign{font-size:.56rem}
    .kc-value{font-size:1.05rem}
}