/* css/v5-guide.css */
/* Классы для отображения контента руководства (tutorial.html) */

/* ============================================================
   КОНСТАНТЫ РУКОВОДСТВА
   Меняй здесь — применится везде
   ============================================================ */

:root {
    /* Ширина картинки относительно родителя */
    --guide-img-width-landscape: 50%;   /* альбомный режим */
    --guide-img-width-portrait: 90%;    /* портретный режим */

    /* Отступы вокруг картинки */
    --guide-img-margin: var(--v5-gap-normal) 0;

    /* Рамка и радиус */
    --guide-img-radius: var(--v5-radius);
    --guide-img-border: var(--v5-border-width) solid var(--v5-primary-base);
}

/* ============================================================
   КАРТИНКА В ПОТОКЕ (без обтекания)
   Ландшафт: 50% ширины родителя, по центру
   Портрет:  90% ширины родителя, по центру
   ============================================================ */

.guide-img {
    display: block;
    width: var(--guide-img-width-landscape);
    max-width: 100%;
    height: auto;
    margin: var(--guide-img-margin);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--guide-img-radius);
    border: var(--guide-img-border);
}

/* Иконки в заголовках глав туториала */
#tutorialContent h2 {
    display: flex;
    align-items: center;
    gap: var(--v5-gap-normal);
}

#tutorialContent h2 .v5-icon {
    height: calc(32px * var(--v5-scale));
    width: calc(32px * var(--v5-scale));
    flex-shrink: 0;
}

#tutorialContent h3 {
    display: flex;
    align-items: center;
    gap: var(--v5-gap-normal);
}

#tutorialContent h3 .v5-icon {
    height: calc(28px * var(--v5-scale));
    width: calc(28px * var(--v5-scale));
    flex-shrink: 0;
}

#tutorialContent h4 {
    display: flex;
    align-items: center;
    gap: var(--v5-gap-normal);
}

#tutorialContent h4 .v5-icon {
    height: calc(24px * var(--v5-scale));
    width: calc(24px * var(--v5-scale));
    flex-shrink: 0;
}

/* ============================================================
   ПОРТРЕТ — картинка шире (90% родителя)
   ============================================================ */

@media (orientation: portrait) {
    .guide-img {
        width: var(--guide-img-width-portrait);
    }
}