:root {
    --border: #AAA;
    --fill: #FFF6;
}

/* INFO: sections gap */
@media (max-width: 819.999px) {
    :root {
        --gap: 20px;
    }
}

@media (min-width: 820px) {
    :root {
        --gap: 40px;
    }
}
/* <<< */

html,
body {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    /* Не позволява промяна на размера на текста при завъртане на екрана (landscape/portrait) */
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

    -webkit-tap-highlight-color: transparent; /* Remove Gray Highlight When Tapping Links in Mobile Safari */
    scroll-behavior: smooth;
}

body {
    overflow-y: scroll; /* показва вертикален scrolbar независимо от съдържанието / предотвратява подскачането на съдържанието при динамично зареждане на съдържание */
    min-width: 320px;
    font-family: sans-serif;
}

/* TODO: remove for test only */
body.grid {
    height: 100%; /* показва грида по пълната височина на екрана. Ако го има НЕ фиксира footer в дъното на прозореца (footerfix.js) */
    background-repeat: repeat;
    background-position: top center;
}

@media (max-width: 979.999px) {
    body.grid { background-image: url(/svg/wireframe/gridm.svg); }
}

@media (min-width: 980px) {
    body.grid { background-image: url(/svg/wireframe/gridd.svg); }
}

header,
footer,
hgroup,
article,
section {
    background-color: #88cbf555;
    box-sizing: border-box;

    > div {
        /* padding: 10px; */
        background-color: #FFF9;
        box-sizing: border-box;
    }

    .p1 { padding: 10px; }
}
/* <<< */

hgroup {
    text-align: center;

    h1 {
        border: 1px solid var(--border);
        background-color: #FFF;
        box-sizing: border-box;
        padding: 10px;
    }
}

hgroup,
article,
section {
    padding: 0 var(--gap);
}

main hgroup,
main article,
main section {
    margin: var(--gap) auto;
}

header section,
footer section {
    margin: 0 auto;
}

/* Tablet & Desktop */
@media (min-width: 700px) {
    hgroup {
        max-width: 700px;
    }
}

@media (min-width: 920px) {
    article {
        max-width: 920px;
    }
}

/* Desktop */
@media (min-width: 1360px) {
    section {
        max-width: 1360px;
    }
}

/* INFO: logo */
header picture {
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
    padding: 10px 15px;
    border: 1px solid var(--border);
    background-color: var(--fill);
    display: inline-block;
    box-sizing: border-box;
}
/* <<< */

main picture,
footer picture,
main video,
main figure {
    padding: 0;
    margin: 0;
    display: block;
    max-width: 100%;
    background-color: var(--fill);
    border: 1px solid var(--border);
    box-sizing: border-box;

    background-repeat: no-repeat;
    background-position: center;

    min-height: 100px;
    min-width: 100px;
}

main picture {
    background-image: url(/svg/wireframe/picture64.svg);
}

main video {
    width: 100%;
    background-image: url(/svg/wireframe/video64.svg);
}

main figure {
    width: 100%;
    background-image: url(/svg/wireframe/user64.svg);
}

.ar1 {
    aspect-ratio: 1 / 1;
}

.ar43 {
    aspect-ratio: 4 / 3;
}

.ar169 {
    aspect-ratio: 16 / 9;
}

picture.thumb { /* INFO: thumb */
    width: 60px;
    background-size: 32px;
}

picture.icon { /* INFO: icon */
    background-image: url(/svg/wireframe/picture32.svg);
    display: inline-block;
    background-size: 24px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
}

figure.face {
    background-image: url(/svg/wireframe/user32.svg);
    display: inline-block;
    background-size: 32px;
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
}

a.button {
    display: inline-block;
    background-color: var(--fill);
    border: 1px solid var(--border);
    padding: 10px 30px;
    white-space: nowrap;
}

a.button.solid {
    background-color: #CCCC;
}


/* Grid */
.g2,
.g3,
.g12,
.g21,
.g4 {
    margin: var(--gap) 0;
}

.g2 > div,
.g3 > div,
.g12 > div,
.g21 > div,
.g4 > div {
    border: 1px solid var(--border);
    background-color: var(--fill);
    box-sizing: border-box;
    padding: 10px;
}

/* INFO: Подравнява последния div (бунотинте) в долната част на реда */
div.ab {
    display: flex;
    flex-direction: column;

    > div:last-child {
        margin-top: auto;
    }

    a.button {
        display: block;
        text-align: center;
        padding: 10px;
        background-color: #FFF;
        border: 1px solid #CCC;
        border-radius: 5px;
        text-decoration: none;
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }
}
/* <<< */

/* g2*/
/* Mobile */
@media (max-width: 979.999px) {
    .g2 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}
/* Tablet & Desktop */
@media (min-width: 980px) {
    .g2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
    }
}
/* <<< */

/* g3 */
/* Mobile */
@media (max-width: 659.999px) {
    .g3 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

/* Tablet & Desktop */
@media (min-width: 660px) {
    .g3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap);
    }
}
/* <<< */
/* g12 & g21 */
/* Mobile */
@media (max-width: 659.999px) {
    .g12 > div:not(:last-child),
    .g21 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}
/* Tablet & Desktop */
@media (min-width: 660px) {
    .g12,
    .g21 {
        display: grid;
        gap: var(--gap);
    }

    .g12 {
        grid-template-columns: 1fr 2fr;
    }

    .g21 {
        grid-template-columns: 2fr 1fr;
    }
}
/* <<< */

/* g4*/
/* Mobile  */
@media (max-width: 479.999px) {
    .g4 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}
/* Mobile & Tablet */
@media (min-width: 480px) and (max-width: 979.999px) {
    .g4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
    }
}
/* Desktop */
@media (min-width: 980px) {
    .g4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gap);
    }
}
/* <<< */

/* Flex */
.f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
}

.f2 > div,
.f3 > div,
.f32 > div,
.f4 > div,
.f43 > div {
    border: 1px solid var(--border);
    background-color: var(--fill);
    box-sizing: border-box;
    padding: 10px;
}

/* INFO: f2 */
@media (max-width: 819.999px) {
    .f2 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 820px) {
    .f2 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f2 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    .f2 div.ab {
        display: flex;
        flex-direction: column;
    }

    .f2 div.ab > div:last-child {
        margin-top: auto;
    }
    /* <<< */

    .f2 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}
/* <<< */

/* INFO: f3, f32 */
@media (max-width: 499.999px) {
    .f32 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (max-width: 659.999px) {
    .f3 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 500px) {
    .f32 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f32 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    .f32 div.ab {
        display: flex;
        flex-direction: column;
    }

    .f32 div.ab > div:last-child {
        margin-top: auto;
    }
    /* <<< */
}

@media (min-width: 660px) {
    .f3 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f3 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    .f3 div.ab {
        display: flex;
        flex-direction: column;
    }

    .f3 div.ab > div:last-child {
        margin-top: auto;
    }
    /* <<< */

    .f3 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }

    .f3 > div.c2 {
        width: calc(2 * (100% - var(--gap) * 2) / 3 + var(--gap)); /* Разделя контейнера на 3 равни части, отчитайки gap и обединява 2 от тях */
    }
}

@media (min-width: 500px) and (max-width: 979.999px) {
    .f32 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f32 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }

    .f32 > div.c2 {
        width: calc(2 * (100% - var(--gap) * 2) / 3 + var(--gap)); /* Разделя контейнера на 3 равни части, отчитайки gap и обединява 2 от тях */
    }
}
/* <<< */

/* INFO: f4, f43 */
@media (max-width: 499.999px) {
    .f43 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }

    .f4 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 500px) {
    .f4,
    .f43 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f4 > div,
    .f43 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
    }

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    .f4 div.ab,
    .f43 div.ab {
        display: flex;
        flex-direction: column;
    }

    .f4 div.ab > div:last-child,
    .f43 div.ab > div:last-child {
        margin-top: auto;
    }
    /* <<< */
}

@media (min-width: 500px) and (max-width: 979.999px) {
    .f4 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f4 > div {
        width: calc((100% - var(--gap) * 3) / 4); /* INFO: Разделя контейнера на 4 равни части, отчитайки gap */
    }

    .f4 > div.c2 {
        width: calc(2 * (100% - var(--gap) * 3) / 4 + var(--gap)); /* Разделя контейнера на 4 равни части, отчитайки gap и обединява 2 от тях */
    }

    .f4 > div.c3 {
            width: calc(3 * (100% - var(--gap) * 3) / 4 + var(--gap) * 2); /* Разделя контейнера на 4 равни части, отчитайки gap и обединява 3 от тях */
    }
}

@media (min-width: 500px) and (max-width: 659.999px) {
    .f43 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 660px) and (max-width: 979.999px) {
    .f43 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f43 > div {
        width: calc((100% - var(--gap) * 3) / 4); /* INFO: Разделя контейнера на 4 равни части, отчитайки gap */
    }
}
/* <<< */

/* INFO: float */
.cf::after {
    content: '';
    display: table;
    clear: both;
}

.cf .fl {
    float: left;
}

.cf .fr {
    float: right;
}
/* <<< */