/* Responsive Styles for ARALSK 213 Website */

/* Base mobile styles */
@media screen and (max-width: 768px) {

    /* Общие стили для flexbox */
    * {
        box-sizing: border-box;
    }

    /* Уменьшение базового размера шрифта на мобильных */
    body {
        font-size: 14px;
    }

    /* Блоки с картинками - картинка сверху, текст снизу */
    .card-layout[data-card-layout="left"],
    .card-layout[data-card-layout="right"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Блок 1 и все блоки с cardAccentLayoutItem - картинка сверху */
    .node-cardAccentLayoutItem {
        order: -1 !important;
        width: 100% !important;
        height: auto !important;
        /* фото должно быть крупным на мобиле */
        min-height: clamp(280px, 44vh, 520px) !important;
    }

    /* Форсим высоту конкретно у accent-контейнера (с background-image) */
    .node-cardAccentLayoutItem .card-layout-cell-bg[data-testid="card-accent-layout-item"] {
        width: 100% !important;
        min-height: clamp(280px, 44vh, 520px) !important;
        height: auto !important;
    }

    .node-cardLayoutItem {
        width: 100% !important;
        order: 1 !important;
    }

    /* Grid layouts - вертикальное расположение */
    .grid-col-controls,
    .css-195o201,
    .css-z1fkfg,
    .css-1lsxqr4 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .node-gridCell {
        width: 100% !important;
        margin-bottom: 1em;
    }

    /* Уменьшение размера шрифта для заголовков на мобильных */
    .heading[level="1"],
    .title[level="2"] {
        font-size: 1.5em !important;
        line-height: 1.3 !important;
    }

    .heading[level="2"] {
        font-size: 1.3em !important;
    }

    .heading[level="3"] {
        font-size: 1.1em !important;
    }

    .heading[level="4"] {
        font-size: 1em !important;
    }

    /* Параграфы - уменьшение шрифта */
    .block-paragraph {
        font-size: 0.9em !important;
        line-height: 1.5 !important;
    }

    /* Блок 2 - исправление текста */
    .css-195o201 {
        flex-direction: column !important;
    }

    /* Блок 3 - исправление вертикального текста */
    .themed-heading {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }

    /* Блок 5 - картинка сверху */
    .css-16kzixy .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Блок 6 - Таблица */
    .block-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        display: block !important;
    }

    .block-table table {
        min-width: 600px;
        font-size: 0.75em !important;
    }

    .block-table td {
        padding: 0.5em !important;
        white-space: nowrap;
    }

    /* Стилизация скролла таблицы */
    .block-table::-webkit-scrollbar {
        height: 8px;
    }

    .block-table::-webkit-scrollbar-track {
        background: rgba(116, 11, 11, 0.3);
        border-radius: 4px;
    }

    .block-table::-webkit-scrollbar-thumb {
        background: #C91313;
        border-radius: 4px;
    }

    .block-table::-webkit-scrollbar-thumb:hover {
        background: #ea2525;
    }

    /* Блок 7 - Круговая диаграмма */
    .block-chart {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1em 0 !important;
        overflow: visible !important;
    }

    .css-1go9fu0 {
        width: 100% !important;
        /* делаем круг больше */
        height: clamp(360px, 55vh, 640px) !important;
        min-height: 360px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Точечное усиление для chart-блоков (таргет по data-card-id, чтобы не ломать hydration) */
    [data-card-id="2qe2q90mmjugyup"] .block-chart,
    [data-card-id="elegkgnu2dyydtw"] .block-chart {
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Заголовок карточки с диаграммой - отступ снизу */
    [data-card-id="2qe2q90mmjugyup"] .block-heading.first-block {
        margin-bottom: 1.75em !important;
    }

    /* Диаграмма - отступ сверху от заголовка */
    [data-card-id="2qe2q90mmjugyup"] .block-chart {
        margin-top: 3.8em !important;
    }

    /* Контейнер, который держит svg + легенду */
    [data-card-id="2qe2q90mmjugyup"] .block-chart>div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5em !important;
        width: 100% !important;
    }

    /* SVG диаграммы – центрируем и ограничиваем */
    [data-card-id="2qe2q90mmjugyup"] .block-chart svg {
        display: block !important;
        margin: 0 auto !important;
        width: 95vw !important;
        max-width: 420px !important;
        height: auto !important;
    }

    /* Легенда: вертикальный список */
    [data-card-id="2qe2q90mmjugyup"] .block-chart .css-f98vfn,
    [data-card-id="2qe2q90mmjugyup"] .block-chart .css-bnvf5n,
    [data-card-id="2qe2q90mmjugyup"] .block-chart .chakra-stack[class*="css-"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.6em !important;
        width: 100% !important;
    }

    /* Каждый элемент легенды – цвет слева, текст справа */
    [data-card-id="2qe2q90mmjugyup"] .block-chart .chakra-stack[class*="css-"]>div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6em !important;
        width: 100% !important;
    }

    /* Цветовой индикатор */
    [data-card-id="2qe2q90mmjugyup"] .block-chart .chakra-stack[class*="css-"]>div>div[style*="background-color"] {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        flex-shrink: 0 !important;
        border-radius: 3px !important;
    }

    /* Текст легенды */
    [data-card-id="2qe2q90mmjugyup"] .block-chart .chakra-stack[class*="css-"] p,
    [data-card-id="2qe2q90mmjugyup"] .block-chart .chakra-stack[class*="css-"] .chakra-text {
        font-size: 0.9em !important;
        text-align: left !important;
        line-height: 1.2 !important;
        flex: 1 !important;
        margin: 0 !important;
    }

    [data-card-id="elegkgnu2dyydtw"] .css-1go9fu0 {
        /* bar chart: делаем реально высокий блок */
        width: 100% !important;
        height: clamp(480px, 70vh, 900px) !important;
        min-height: 480px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        /* ширина может быть больше контейнера — дадим скролл на родителе */
        overflow: visible !important;
    }

    /* Не даём родителям обрезать увеличенную диаграмму */
    [data-card-id="2qe2q90mmjugyup"] .card-layout-cell-bg,
    [data-card-id="elegkgnu2dyydtw"] .card-layout-cell-bg {
        overflow: visible !important;
    }

    /* Реальный контейнер диаграммы внутри Gamma */
    [data-card-id="2qe2q90mmjugyup"] .css-1go9fu0 .chart,
    [data-card-id="elegkgnu2dyydtw"] .css-1go9fu0 .chart {
        width: 100% !important;
        height: 100% !important;
        min-height: inherit !important;
        overflow: visible !important;
    }

    [data-card-id="2qe2q90mmjugyup"] .css-1go9fu0 .chart svg,
    [data-card-id="elegkgnu2dyydtw"] .css-1go9fu0 .chart svg,
    [data-card-id="2qe2q90mmjugyup"] .css-1go9fu0 .chart canvas,
    [data-card-id="elegkgnu2dyydtw"] .css-1go9fu0 .chart canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Pie: если легенда/подписи рендерятся HTML-блоком рядом с svg — принудительно переносим и центрируем */
    [data-card-id="2qe2q90mmjugyup"] .css-1go9fu0> :not(svg):not(canvas):not(.chart) {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75em 1.25em !important;
    }

    /* Bar chart: обрезаем только горизонтальные вылезания, вертикаль оставляем */
    [data-card-id="elegkgnu2dyydtw"] .block-chart {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Задаём минимальную "полную" ширину диаграммы, чтобы было что скроллить */
    [data-card-id="elegkgnu2dyydtw"] .css-1go9fu0 {
        min-width: 640px !important;
    }

    /* Скроллбар как у таблицы */
    [data-card-id="elegkgnu2dyydtw"] .block-chart::-webkit-scrollbar {
        height: 8px;
    }

    [data-card-id="elegkgnu2dyydtw"] .block-chart::-webkit-scrollbar-track {
        background: rgba(116, 11, 11, 0.3);
        border-radius: 4px;
    }

    [data-card-id="elegkgnu2dyydtw"] .block-chart::-webkit-scrollbar-thumb {
        background: #C91313;
        border-radius: 4px;
    }

    [data-card-id="elegkgnu2dyydtw"] .block-chart::-webkit-scrollbar-thumb:hover {
        background: #ea2525;
    }

    /* Усиливаем: прямые дети контейнера чарта должны заполнять область */
    .css-1go9fu0>canvas,
    .css-1go9fu0>svg,
    .css-1go9fu0>* {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }

    /* на всякий случай: если canvas/svg вложены глубже */
    .css-1go9fu0 canvas,
    .css-1go9fu0 svg {
        width: 100% !important;
        height: 100% !important;
    }

    /* Gamma charts: реальный контейнер — .chart и/или [data-test="pie-chart-container"].
       На мобиле у svg часто стоит inline height:2em => переопределяем жёстко. */
    .block-chart .chart {
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .block-chart [data-test="pie-chart-container"] {
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .block-chart .chart svg,
    .block-chart [data-test="pie-chart-container"] svg {
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        overflow: visible !important;
    }

    /* Контейнер круговой диаграммы - сохраняем целым */
    .block-chart+.block-smartLayout {
        margin-top: 2em !important;
    }

    /* Статистика - вертикальное расположение (только для статистики, не для диаграммы) */
    .css-17dr3i1 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* Для блока 7 - статистика под диаграммой */
    .block-chart~.block-smartLayout .css-13dmy5w {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .css-1ajwt4j {
        margin-bottom: 1em;
    }

    /* Увеличение размера цифр в статистике для карточки с диаграммой (уменьшили, чтобы помещались) */
    [data-card-id="2qe2q90mmjugyup"] .css-179z6mc,
    [data-card-id="2qe2q90mmjugyup"] .css-9mzv1p,
    [data-card-id="2qe2q90mmjugyup"] .chakra-editable {
        font-size: 1.55em !important;
        line-height: 1.15 !important;
    }

    /* Для других карточек - обычный размер */
    .css-179z6mc,
    .css-9mzv1p {
        font-size: 1.05em !important;
        line-height: 1.1 !important;
    }

    /* Показываем цифры полностью (без ... и без обрезания) */
    .css-179z6mc .chakra-editable__preview {
        height: auto !important;
        overflow: visible !important;
        text-overflow: unset !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Названия игр в легенде */
    .css-13dmy5w .css-1ajwt4j {
        text-align: center !important;
    }

    /* Для статистики под диаграммой - выравниваем по центру */
    [data-card-id="2qe2q90mmjugyup"] .node-smartLayout .css-1ajwt4j {
        text-align: center !important;
        align-items: center !important;
    }

    /* Блок 8 - картинка сверху */
    .css-q1jnko .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Блок 10 - картинка сверху */
    .css-16kzixy .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Блок 11 - исправление текста */
    .css-1s766mw {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .css-1xexl9k,
    .css-cpw5g3,
    .css-16fgfqz,
    .css-1jr302m {
        width: 100% !important;
        grid-column: span 1 !important;
    }

    /* Блок 12 - картинка сверху */
    .css-16kzixy .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Блок 13 - Команда */
    .css-17dr3i1 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 2em !important;
    }

    .css-16b66q3 {
        width: 100% !important;
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Фотографии команды - 80% ширины */
    .css-4y8669 {
        width: 80% !important;
        max-width: 300px !important;
        margin: 0 auto 1em auto !important;
    }

    .css-1j5qos6 {
        width: 100% !important;
    }

    /* Текст в карточках команды - исправление отступов */
    .css-16b66q3 .block-heading,
    .css-16b66q3 .block-paragraph {
        text-align: left !important;
        font-size: 0.9em !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Убираем разные отступы у строк в блоке команды */
    .css-16b66q3 .block-paragraph p,
    .css-16b66q3 .block-paragraph div,
    .css-16b66q3 .block-paragraph {
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-indent: 0 !important;
    }

    /* Убираем отступы у всех элементов внутри карточки команды */
    .css-16b66q3 * {
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-indent: 0 !important;
    }

    /* Заголовки в карточке команды также по левому краю */
    .css-16b66q3 .block-heading {
        text-align: left !important;
        width: 100% !important;
    }

    /* Блок 14 - картинка сверху */
    .css-16kzixy .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Блок 15 - Финансовая модель */
    .css-17dr3i1 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Цифры друг под другом */
    .css-1ajwt4j {
        margin-bottom: 1.5em;
    }

    /* Метрики/большие числа: держим компактно на мобиле */
    .css-ryl8eu {
        font-size: 1.1em !important;
    }

    /* График в блоке 15 - увеличение и убираем большой отступ */
    .block-chart {
        width: 100% !important;
        height: auto !important;
        min-height: 500px !important;
        margin-bottom: 1em !important;
    }

    /* Убираем большой отступ после графика */
    .block-chart+* {
        margin-top: 1em !important;
    }

    /* Блок 16 - картинка сверху */
    .css-p3l3e1 .node-cardAccentLayoutItem {
        order: -1 !important;
    }

    /* Smart Layout - вертикальное расположение (кроме блоков с лепестковой диаграммой) */
    .css-47ax3q,
    .css-1s766mw,
    .css-1o760m1 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* Блок 3 и блок про Deadside: возвращаем "родной" grid, чтобы лепестки и иконки считались правильно */
    .block-smartLayout .css-7iitlo {
        display: grid !important;
        grid-row-gap: 1.25em !important;
        grid-auto-rows: auto !important;
        /* центральная колонка под круг */
        grid-template-columns: 1fr min(100%, 340px) 1fr !important;
        align-items: start !important;
    }

    /* Круг/лепестки — в центральной колонке, перекрытие делает сама сетка (grid-row/column уже в HTML) */
    .block-smartLayout .css-7iitlo .css-bkqe49 {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: center !important;
        margin: 0 auto 0.25em auto !important;
    }

    /* Последний блок (контакты): картинка стала слишком маленькой — возвращаем повыше */
    [data-card-id="v8u81dsf0nbsynw"] .node-cardAccentLayoutItem,
    [data-card-id="v8u81dsf0nbsynw"] .node-cardAccentLayoutItem .card-layout-cell-bg[data-testid="card-accent-layout-item"] {
        min-height: clamp(320px, 55vh, 620px) !important;
    }

    /* Пункты под кругом: иконка слева, текст справа */
    .block-smartLayout .css-7iitlo .css-1xltk78 {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.75em !important;
        text-align: left !important;
    }

    .block-smartLayout .css-7iitlo .css-11d76un {
        flex: 0 0 auto !important;
        position: static !important;
        margin: 0 !important;
    }

    .block-smartLayout .css-7iitlo .css-1ka2dyl {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-top: 0 !important;
    }

    /* Важно: НЕ задаём общий size на .css-bkqe49, иначе ломаются лепестки/иконки */

    .css-1xltk78 {
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Timeline - вертикальное расположение */
    .css-1g8jgvv {
        /* возвращаем отступ, чтобы годы/текст не прилипали к линии */
        padding-left: 4.25em !important;
        padding-inline-start: 4.25em !important;
    }

    .css-1vftxf0 {
        /* возвращаем позиционирование маркера таймлайна */
        position: absolute !important;
        left: 1.125em !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
        margin-bottom: 0 !important;
    }

    /* (удалено) глобальное правило .css-bkqe49 — ломало лепестки/иконки */

    /* Кнопки - вертикальное расположение */
    .css-1uxa0lr {
        flex-direction: column !important;
        gap: 0.75em !important;
    }

    .css-1uxa0lr .node-button {
        width: 100% !important;
    }

    /* Callout boxes */
    .calloutBox {
        font-size: 0.9em !important;
    }

    /* Уменьшение отступов */
    .node-cardLayoutItem .card-layout-cell-bg {
        padding: 1em !important;
    }

    /* Исправление для всех card layouts */
    [data-node-view-content-inner="card"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: "accent""body" !important;
    }

    [data-layout-item-id="accent"] {
        grid-area: accent !important;
        order: -1 !important;
    }

    [data-layout-item-id="body"] {
        grid-area: body !important;
        order: 1 !important;
    }

    /* Все карточки с акцентом - картинка сверху */
    .css-ym1mlr>.card-content>[data-node-view-content-inner="card"],
    .css-tiu1p0>.card-content>[data-node-view-content-inner="card"],
    .css-16kzixy>.card-content>[data-node-view-content-inner="card"],
    .css-q1jnko>.card-content>[data-node-view-content-inner="card"],
    .css-p3l3e1>.card-content>[data-node-view-content-inner="card"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
    }

    /* Убираем границы у скролла таблицы */
    .block-table {
        border: none !important;
    }

    .block-table::-webkit-scrollbar {
        border: none !important;
        outline: none !important;
    }

    /* Улучшение для диаграмм: не трогаем ВСЕ svg внутри блока (там есть легенды/иконки),
       растягиваем только svg/canvas именно внутри chart-контейнера */
    .block-chart .chart svg,
    .block-chart .chart canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* Исправление для всех smart layouts */
    .block-smartLayout>div[data-selection-ring] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Исправление для timeline элементов */
    .css-1g8jgvv {
        grid-column: 1 !important;
    }

    /* Исправление для cycle элементов */
    .css-1xltk78 {
        grid-column: 1 / -1 !important;
    }

    /* Улучшение для карточек команды */
    .css-16b66q3 .css-4y8669 {
        flex-shrink: 0;
    }

    /* Исправление для всех grid layouts */
    .block-gridLayout .layout-content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Улучшение для финансовых метрик */
    .css-1ajwt4j .css-ryl8eu {
        margin-bottom: 0.5em;
    }

    /* Исправление для всех повторяющихся элементов */
    .node-smartLayoutCell,
    .node-gridCell {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Планшеты */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* Средние размеры для планшетов */
    body {
        font-size: 15px;
    }

    .heading[level="1"] {
        font-size: 1.8em !important;
    }

    .block-paragraph {
        font-size: 0.95em !important;
    }

    /* Таблица на планшетах */
    .block-table {
        overflow-x: auto !important;
    }

    .block-table table {
        font-size: 0.85em !important;
    }

    /* Команда на планшетах - 2 колонки */
    .css-17dr3i1 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Дополнительные исправления для очень маленьких экранов */
@media screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }

    .heading[level="1"] {
        font-size: 1.3em !important;
    }

    .heading[level="2"] {
        font-size: 1.1em !important;
    }

    .block-paragraph {
        font-size: 0.85em !important;
    }

    /* Еще больше уменьшаем таблицу */
    .block-table table {
        font-size: 0.65em !important;
    }

    .block-table td {
        padding: 0.3em !important;
    }

    /* Фотографии команды на очень маленьких экранах */
    .css-4y8669 {
        width: 90% !important;
    }

    /* Цифры еще меньше */
    .css-179z6mc,
    .css-9mzv1p {
        font-size: 1.2em !important;
    }
}