/*------------------------------------*\
    LAYOUT
\*------------------------------------*/

@use "../../helpers";

.ds_layout {
    @include helpers.ds_layout();
    margin-bottom: 6rem;
}

/**
    * GRID KEY
    * c: content
    * f: feedback
    * h: header
    * l: list (e.g. category items, search results)
    * g: grid
    * n: navigation (e.g. subpages of a publication or guide)
    * p: partner branding
    * s: sidebar
    */

// short abbreviations of grid area names so things are easy to read later on
$grid-area-content:     c;
$grid-area-feedback:    f;
$grid-area-footer:      z;
$grid-area-header:      h;
$grid-area-list:        l;
$grid-area-grid:        g;
$grid-area-navigation:  n;
$grid-area-partner:     p;
$grid-area-sidebar:     s;

// this includes body for increased specificity
body .ds_layout > *[class] {
    margin-left: 0;
    margin-right: 0;
    width: auto;
}

.ds_layout {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;

    // default template areas definition based on guide,
    // which is a relatively safe fallback
    grid-template-areas:
        'h h'
        'p p'
        'n n'
        'c c'
        's s'
        'f f';
    margin-right: 0;
    margin-bottom: 0;

    &__content {
        grid-area: $grid-area-content;
    }

    &__footer {
        grid-area: $grid-area-footer;
    }

    &__feedback {
        grid-area: $grid-area-feedback;
    }

    &__header {
        grid-area: $grid-area-header;
    }

    &__list {
        grid-area: $grid-area-list;
    }

    &__grid {
        grid-area: $grid-area-grid;
    }

    &__navigation {
        grid-area: $grid-area-navigation;
    }

    &__partner {
        grid-area: $grid-area-partner;
        align-self: start;
        @include helpers.ds_block-margins;
    }

    &__sidebar {
        grid-area: $grid-area-sidebar;
    }

    &--category-list {
        grid-template-areas:
            'h h'
            'c c'
            'l l'
            'g g'
            'f f';
    }

    &--guide {
        grid-template-areas:
            'h h'
            'p p'
            'n n'
            'c c'
            's s'
            'f f';
    }

    // DEPRECATED navigation grid area 'n' for search results is deprecated - this will be removed in a future release
    &--search-results {
        grid-template-areas:
            'h h'
            'n n'
            'c c'
            'l l'
            'f f';
    }

    &--search-results--filters {
        grid-template-areas:
            'h h'
            'c c'
            's s'
            'l l'
            'f f';
    }

    &--question-page {
        grid-template-areas:
            'h h'
            'p p'
            'n n'
            'c c'
            'z z'
            's s'
            'f f';
    }
}

@include helpers.ds_media-query(small) {
    .ds_layout {
        grid-template-columns: repeat(6, 1fr);

        grid-template-areas:
            'h h h h h h'
            'p p p p p p'
            'n n n n n n'
            'c c c c c c'
            's s s s s s'
            'f f f f f f';

        &--category-list {
            grid-template-areas:
                'h h h h h h'
                'c c c c c c'
                'l l l l l l'
                'g g g g g g'
                'f f f f f f';
        }

        &--guide {
            grid-template-areas:
                'h h h h h h'
                'p p p p p p'
                'n n n n n n'
                'c c c c c c'
                's s s s s s'
                'f f f f f f';
        }

        // DEPRECATED navigation grid area 'n' for search results is deprecated - this will be removed in a future release
        &--search-results {
            grid-template-areas:
                'h h h h h h'
                'n n n n n n'
                'c c c c c c'
                'l l l l l l'
                'f f f f f f';
        }

        &--search-results--filters {
            grid-template-areas:
                'h h h h h h'
                'c c c c c c'
                's s s s s s'
                'l l l l l l'
                'f f f f f f';
        }

        &--question-page {
            grid-template-areas:
                'h h h h h h'
                'p p p p p p'
                'n n n n n n'
                'c c c c c c'
                'z z z z z z'
                's s s s s s'
                'f f f f f f';
        }
    }
}

@include helpers.ds_media-query(medium) {
    .ds_layout {
        grid-template-areas:
            'h h h h h h h h p p p p'
            'n n n n n n n n . . . .'
            'c c c c c c c c s s s s'
            'f f f f f f f f . . . .';

        grid-template-columns: repeat(12, 1fr);

        &--article {
            grid-template-areas:
                'h h h h h h h h p p p p'
                'c c c c c c c c s s s s'
                'f f f f f f f f . . . .';
        }

        &--guide {
            grid-template-areas:
                'h h h h h h h h p p p p'
                'n n n n n n n n . . . .'
                'c c c c c c c c s s s s'
                'f f f f f f f f . . . .';
        }

        &--category-list {
            grid-template-areas:
                'h h h h h h h h h h h h'
                'c c c c c c c c c c c c'
                'l l l l l l l l . . . .'
                'g g g g g g g g g g g g'
                'f f f f f f f f . . . .';
        }

        // DEPRECATED navigation grid area 'n' for search results is deprecated - this will be removed in a future release
        &--search-results {
            grid-template-areas:
                'h h h h h h h h . . . .'
                'n n n n n n n n . . . .'
                'c c c c c c c c . . . .'
                'l l l l l l l l . . . .'
                'f f f f f f f f . . . .';
        }

        &--search-results--filters {
            grid-template-areas:
                'h h h h h h h h . . . .'
                'c c c c c c c c . . . .'
                's s s s l l l l l l l l'
                '. . . . f f f f f f f f';
        }

        &--question-page {
            grid-template-areas:
                'h h h h h h h h p p p p'
                'n n n n n n n n . . . .'
                'c c c c c c c c s s s s'
                'z z z z z z z z s s s s'
                'f f f f f f f f . . . .';
        }
    }
}

@include helpers.ds_media-query(large) {
    .ds_layout {
        &--article {
            grid-template-areas:
                'h h h h h h h h . p p p'
                'c c c c c c c c . s s s'
                'f f f f f f f f . . . .';
        }

        &--guide {
            grid-template-areas:
                'h h h h h h h h . p p p'
                'n n n n n n n n . . . .'
                'c c c c c c c c . s s s'
                'f f f f f f f f . . . .';
        }

        &--question-page {
            grid-template-areas:
                'h h h h h h h h . p p p'
                'n n n n n n n n . . . .'
                'c c c c c c c c . s s s'
                'z z z z z z z z . s s s'
                'f f f f f f f f . . . .';
        }
    }
}