/* VK-Flex (Athena Flexbox System) */
.vk-flex {
    display: flex;
}

.vk-flex--inline {
    display: inline-flex;
}

/* Direction Modifiers */
.vk-flex--dir-column {
    flex-direction: column;
}

@media (max-width: 959px) {
    .vk-flex--dir-column-until-tablet-portrait {
        flex-direction: column;
    }
}

@media (max-width: 599px) {
    .vk-flex--dir-column-phone {
        flex-direction: column;
    }
}

/* Wrapping Modifiers */
.vk-flex--wrap {
    flex-wrap: wrap;
}

@media (max-width: 599px) {
    .vk-flex--wrap-phone {
        flex-wrap: wrap;
    }
}

/* Vertical Alignment */
.vk-flex--v-align-center {
    align-items: center;
}

@media (min-width: 960px) {
    .vk-flex--v-align-center-from-tablet-landscape {
        align-items: center;
    }
}

.vk-flex--v-align-end {
    align-items: flex-end;
}

/* Horizontal Alignment */
.vk-flex--h-align-center,
.vk-flex--center {
    justify-content: center;
}

.vk-flex--h-align-left {
    justify-content: flex-start;
}

.vk-flex--h-align-right {
    justify-content: flex-end;
}

@media (min-width: 1280px) {
    .vk-flex--h-align-right-desktop {
        justify-content: flex-end;
    }
}

@media (max-width: 599px) {
    .vk-flex--h-align-right-phone {
        justify-content: flex-end;
    }
}

.vk-flex--space-between {
    justify-content: space-between;
}

/* Gap Modifiers */
.vk-flex--gap {
    gap: var(--gap);
}

.vk-flex--gap-double {
    gap: var(--gap-double);
}

.vk-flex--gap-triple {
    gap: calc(var(--gap) * 3);
}

/* Flex Items */
.vk-flex__item--fixed {
    flex: 0 0 auto;
}

.vk-flex__item--flexible {
    flex: 1 1 auto;
}

.vk-flex__item--basis-50 {
    flex-basis: 50%;
}

.vk-flex__item--basis-100 {
    flex-basis: 100%;
}

.vk-flex__item--narrow {
    flex: 0 0 100px;
}

@media (max-width: 599px) {
    .vk-flex__item--narrow {
        flex: 0 0 75px;
    }
}

/* Item Alignment */
.vk-flex__item--left {
    margin-right: auto;
}

.vk-flex__item--right {
    margin-left: auto;
}

@media (min-width: 960px) {
    .vk-flex__item--right-from-tablet-landscape {
        margin-left: auto;
    }
}

@media (min-width: 600px) {
    .vk-flex__item--right-from-tablet {
        margin-left: auto;
    }
}

@media (max-width: 599px) {
    .vk-flex__item--right-phone {
        margin-left: auto;
    }
}

/* Item Order */
.vk-flex__item--pull {
    order: -1;
}

@media (min-width: 1280px) {
    .vk-flex__item--pull-desktop {
        order: -1;
    }
}

@media (min-width: 600px) and (max-width: 1279px) {
    .vk-flex__item--pull-tablet {
        order: -1;
    }
}

@media (max-width: 599px) {
    .vk-flex__item--pull-phone {
        order: -1;
    }
}

.vk-flex__item--push {
    order: 1;
}

@media (min-width: 1280px) {
    .vk-flex__item--push-desktop {
        order: 1;
    }
}

@media (min-width: 600px) and (max-width: 1279px) {
    .vk-flex__item--push-tablet {
        order: 1;
    }
}

@media (max-width: 599px) {
    .vk-flex__item--push-phone {
        order: 1;
    }
}

@media (min-width: 960px) {
    .vk-flex__item--push-from-tablet-landscape {
        order: 1;
    }
}

/* VK-Sidebar-Layout (Athena Design System) */
.vk-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-double);
}

.vk-sidebar-layout__header {
    grid-column: 1 / -1;
}

/* Desktop layout - sidebar on the side */
@media (min-width: 960px) {
    .vk-sidebar-layout {
        grid-template-columns: 1fr 280px;
    }

    .vk-sidebar-layout__content {
        grid-column: 1;
        grid-row: 2;
    }

    .vk-sidebar-layout__sidebar {
        grid-column: 2;
        grid-row: 2;
    }

    /* With context variant */
    .vk-sidebar-layout--has-context {
        grid-template-columns: 1fr 280px 200px;
    }

    .vk-sidebar-layout--has-context .vk-sidebar-layout__content {
        grid-column: 1;
    }

    .vk-sidebar-layout--has-context .vk-sidebar-layout__context {
        grid-column: 2;
        grid-row: 2;
    }

    .vk-sidebar-layout--has-context .vk-sidebar-layout__sidebar {
        grid-column: 3;
        grid-row: 2;
    }
}

/* VK-Columns-Container (Athena Design System) */
.vk-columns-container {
    column-count: 1;
    column-gap: var(--gap-double);
}

@media (min-width: 600px) {
    .vk-columns-container {
        column-count: 2;
    }
}

@media (min-width: 1280px) {
    .vk-columns-container {
        column-count: 2;
    }
}

/* Large desktop with content-container: 3 columns */
.content-container .vk-columns-container {
    @media (min-width: 1562px) {
        column-count: 3;
    }
}

.vk-columns-container > * {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* VK-Masonry (Athena Design System) */
.vk-masonry {
    column-count: 1;
    column-gap: var(--gap-double);
}

@media (min-width: 600px) and (max-width: 959px) {
    .vk-masonry {
        column-count: 2;
    }
}

@media (min-width: 960px) {
    .vk-masonry {
        column-count: 3;
    }
}

.vk-masonry__item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--gap-double);
}