/* ============================================================
   custom-base.css — общие шрифты и компоненты слайдов
   Подключать ПЕРЕД лекционным custom.css
   ============================================================ */

/* --- Шрифты --- */

@font-face {
    font-family: textbook;
    font-weight: 400;
    src: local(textbook);
    src: url('/utils/fonts/textbook-regular.woff'),
        url('/utils/fonts/textbook-regular.ttf');
}

@font-face {
    font-family: textbook-light;
    font-weight: 200;
    src: local(textbook-light);
    src: url('/utils/fonts/textbook-light.woff'),
        url('/utils/fonts/textbook-light.ttf');
}

@font-face {
    font-family: textbook-bold;
    font-weight: 700;
    src: local(textbook-bold);
    src: url('/utils/fonts/textbook-bold.woff'),
        url('/utils/fonts/textbook-bold.ttf');
}

@font-face {
    font-family: yandexsans;
    font-weight: 400;
    src: local(yandexsans);
    src: url('/utils/fonts/Yandex%20Sans%20Display-Regular.woff'),
        url('/utils/fonts/Yandex%20Sans%20Display-Regular.ttf');
}

@font-face {
    font-family: yandexsans;
    font-weight: 200;
    src: local(yandexsans);
    src: url('/utils/fonts/Yandex%20Sans%20Display-Light.woff'),
        url('/utils/fonts/Yandex%20Sans%20Display-Light.ttf');
}

@font-face {
    font-family: yandexsans;
    font-weight: 700;
    src: local(yandexsans);
    src: url('/utils/fonts/Yandex%20Sans%20Display-Bold.woff'),
        url('/utils/fonts/Yandex%20Sans%20Display-Bold.ttf');
}

/* --- Базовые стили reveal.js --- */

.reveal {
    font-family: yandexsans, textbook;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    font-family: yandexsans, textbook-bold;
}

li {
    font-size: 0.8em !important;
    line-height: 1.4;
}

ol {
    margin-bottom: 0.2em !important;
}

img {
    object-fit: contain;
}

/* --- Highlight-цвет для inline code --- */

.reveal code {
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.1);
    padding: 0.05em 0.25em;
    border-radius: 3px;
}

.reveal pre code {
    color: inherit;
    background: none;
    padding: 0;
}

/* --- Компонент: плюсы/минусы --- */

ul.opinion {
    list-style: none;
    padding-left: 0;

    li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 5px;
    }

    li.plus::before {
        content: "+";
        position: absolute;
        left: 0;
        color: #4caf50;
    }

    li.minus::before {
        content: "−";
        position: absolute;
        left: 0;
        color: #e53935;
    }

    li.circle::before {
        content: "○";
        position: absolute;
        left: 0;
    }
}

/* --- Компонент: сравнение двух подходов --- */

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    text-align: left;
}

.compare-block {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5em;
    padding: 0.8em 1em;

    h3 {
        margin-bottom: 0.4em;
        font-size: 0.9em;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
}

/* --- Компонент: временная шкала --- */

.timeline {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    text-align: left;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 0.8em;

    .timeline-label {
        min-width: 110px;
        font-weight: 700;
        font-size: 0.75em;
        color: #ffd54f;
        text-align: right;
    }

    .timeline-arrow {
        font-size: 1.2em;
        opacity: 0.5;
        white-space: nowrap;
    }

    .timeline-desc {
        font-size: 0.75em;
        opacity: 0.85;
    }
}

/* --- Компонент: грид иконок инструментов --- */

.tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

.reveal .tool-block {
    width: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;

    * {
        margin: 0;
    }

    img {
        box-sizing: border-box;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: 1em;
        padding: 0.3em;
    }

    p {
        font-size: 0.7em;
        text-align: center;
    }
}

/* --- Компонент: центрирующая обёртка --- */

.reveal .wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* --- Компонент: схема архитектуры (flow-диаграмма) --- */

.arch-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    flex-wrap: wrap;
    font-size: 0.75em;
}

.arch-box {
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.4em;
    padding: 0.4em 0.8em;
    text-align: center;
    min-width: 90px;
}

.arch-box.highlight {
    border-color: #ffd54f;
    color: #ffd54f;
}

.arch-arrow {
    font-size: 1.4em;
    opacity: 0.6;
}

/* --- Компонент: iframe-контейнер --- */

.iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
}