@import url(../main.css);
@import url(../base-style.css);
@import url(../structures/basic-layout.css);
@import url(../structures/text-panel.css);
@import url(../components/covers.css);
@import url(../components/breadcrumbs.css);
@import url(../components/buttons.css);
@import url(../components/auto-carousel.css);

.grid.basic-layout > .box
{
    background-color: var(--background);
    grid-column: first / pre-division 2;
    grid-row: pre-first / pos-last;
    margin-right: var(--half-gap);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}


.grid.basic-layout > .box .col
{
    grid-row: pos-first / pre-last;
}

.grid.basic-layout > .box .col:first-of-type
{
    grid-column: pos-first / pre-division 1;
}

.grid.basic-layout > .box .col:last-of-type
{
    grid-column: pos-division 1 / pre-division 2;
    margin-right: var(--half-gap);
}

.grid.basic-layout > .box label:has(#close)
{
    --size: 2;
    position: absolute;
    top: calc(var(--half-gap) * .5);
    right: 0;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: calc(var(--size) * var(--base-size));
    height: calc(var(--size) * var(--base-size));
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    box-sizing: border-box;
    border: 1px solid var(--text-color);
    justify-content: center;
    align-items: center;
}

.grid.basic-layout > .box label:has(#close)::before
{
    content: "\e0b8";
    color: var(--text-color);
    font-family: var(--esl);
    font-size: var(--base-size);
    line-height: 0;
}

.grid.basic-layout > .box label > #close
{
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.grid.basic-layout > .box:has([type="checkbox"]:checked)
{
    width: 100%;
    grid-column: pos-first / pos-middle 1;
    grid-row: pos-row 1 / pos-last;
    margin-right: 0;
    display: flex;
    align-items: center;
}

.grid.basic-layout > .box:has([type="checkbox"]:checked)::before
{
    content: 'open';
    color: var(--text-color);
    margin-left: calc(var(--half-gap) * .5);
}

.grid.basic-layout > .box:has([type="checkbox"]:checked) .col
{
    display: none;
}

.grid.basic-layout > .box:has([type="checkbox"]:checked) label:has(#close)::before
{
    content: '\e09a';
}


@media (max-width: 800px) {
    #MainHeader + .content
    {
        align-content: center;
    }

    .grid.basic-layout > .box
    {
        grid-column: first / last;
        margin-right: 0;
    }

    .grid.basic-layout > .box .col:first-of-type
    {
        grid-column: pos-first / pre-middle 2;
    }

    .grid.basic-layout > .box .col:last-of-type
    {
        grid-column: pos-middle 2 / pre-last;
        margin-right: 0;
    }

    .grid.basic-layout > .box .col
    {
        margin-top: var(--display-gap);
    }

    .grid.basic-layout > .box label:has(#close)
    {
        top: var(--half-gap);
    }

    .grid.basic-layout > .box:has([type="checkbox"]:checked)
    {
        height: var(--display-gap);
    }
}

@media (max-width: 640px) {
    .text-panel > .box.left, 
    .text-panel > .box.right, 
    .text-panel > .box.center
    {
        grid-column: first / division 2;
    }

    .grid.basic-layout > .box
    {
        display: block;
    }

    .grid.basic-layout > .box:has([type="checkbox"]:checked)
    {
        padding: 0;
        margin-top: 0;
        grid-column: pos-first / pre-division 2;
    }
}