/* Display */
.flex{display: flex; flex: 1; min-width: 0;}
.flex-row{flex-direction: row;}
.flex-col{flex-direction: column;}
.flex-center{justify-content: center; align-items: center;}
.end{justify-content: end;}
.flex-vert{align-items: center;}

.grid{display: grid; min-width: 0;}
.grid-row-3{grid-template-rows: 1fr 2fr 1fr;}

.col-3{grid-template-columns: minmax(5rem, 1fr) minmax(5rem, 1fr) minmax(5rem, 1fr);}

.theme-col-2{grid-template-columns: 1fr 1fr;}
.col-5{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}
.header-col-2{grid-template-columns: 12fr 1fr;}
.inp-col-2{grid-template-columns: 1fr 1fr;}

.grid-center{place-items: center;}

.space-between{justify-content: space-between;}
.start{justify-content: start;}

body.mobile-menu-open{
    overflow: hidden;
}

/* Espaçamentos */
.s-sm{padding: var(--s-sm);}
.gap-md{gap: var(--s-md);}
.gap-lg{gap: var(--s-lg);}
.gap-xxl{gap: var(--s-xl);}


/* Icons */
.ic-bd-btn{border: 1px solid #c91414ee; border-radius: 30%;}


/* Tamanhos width */ 
.w-inpt{width: var(--w-inpt);}
.w-xl{width: var(--w-xl);}
.w-lg{width: var(--w-lg);}
.w-md{width: var(--w-md);}
.w-sm{width: var(--w-sm);}

/* Tamanhos height */
.h-xl{height: var(--h-xl);}
.h-lg{height: var(--h-lg);}
.h-md{height: var(--h-md);}
.h-sm{height: var(--h-sm);}



/* Nav-bar */
.items-nav{
    font-family: var(--goog-bold);
    font-size: var(--f-lg);
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    padding: .5rem;
    transition: .3s ease-in;
}

.items-nav:hover{border-bottom: 3px solid var(--clr-text-primary);}

.header-actions{
    gap: var(--s-sm);
    justify-self: end;
}

.mobile-menu-toggle,
.mobile-menu-close{
    display: none;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--b-rd-card);
    background-color: var(--clr-bg-inp);
}

.mobile-menu-toggle span,
.mobile-menu-close span{
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background-color: var(--clr-text-primary);
}

.mobile-menu-toggle{
    gap: .3rem;
}

.mobile-nav-backdrop,
.mobile-nav{
    display: none;
}



/* Main Content -- GRID -- */
.main-col-3{
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 60rem) minmax(8rem, 12rem);
    grid-template-areas: 'pub1 main pub2';
    column-gap: var(--s-xxl);
    justify-content: center;
    align-items: start;
}
.main{grid-area: main;}
.lf-pub{grid-area: pub1;}
.rt-pub{grid-area: pub2;}
.top-pub{grid-area: pubtop;}
.bottom-pub{grid-area: pubbottom;}

.pub-slot{
    width: 100%;
}

.pub-slot:empty{
    display: none;
}

.lf-pub:not(:empty),
.rt-pub:not(:empty){
    min-height: 37.5rem;
}

.top-pub,
.bottom-pub{
    display: none;
}

.row-3{
    grid-template-rows: minmax(1rem, auto) minmax(1rem, auto) minmax(1rem, auto);
    column-gap: var(--s-md);
}

@media (min-width: 761px) {
    .main-col-3:not(:has(.lf-pub:not(:empty), .rt-pub:not(:empty))){
        grid-template-columns: minmax(0, 60rem);
        grid-template-areas: 'main';
    }

    

    
}

@media (max-width: 1200px) {
    .main-col-3{
        grid-template-columns: minmax(0, 60rem);
        grid-template-areas: 'main';
        column-gap: var(--s-md);
    }

    .lf-pub,
    .rt-pub{
        display: none;
    }
}

@media (max-width: 1024px) {
    .header-col-2{
        grid-template-columns: 1fr auto;
    }

    .nav{
        flex-wrap: wrap;
        row-gap: var(--s-sm);
    }
}

@media (max-width: 760px) {
    .main-col-3{
        grid-template-columns: 1fr;
        grid-template-areas: 'main';
        padding: 0 var(--s-md);
    }

    .col-3 {
    grid-template-columns: 1fr;
    }

    .main-col-3:has(.top-pub:not(:empty), .bottom-pub:not(:empty)){
        grid-template-areas:
            'pubtop'
            'main'
            'pubbottom';
        row-gap: var(--s-md);
    }

    .lf-pub,
    .rt-pub{
        display: none;
    }

    .top-pub:not(:empty),
    .bottom-pub:not(:empty){
        display: block;
        min-height: 6.25rem;
    }

    .header-col-2,
    .inp-col-2{
        grid-template-columns: 1fr;
    }

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

    .header-col-2{
        grid-template-columns: 1fr auto;
        gap: var(--s-md);
        padding: var(--s-md);
    }

    .header-nav{
        display: none;
    }

    .header-actions{
        justify-self: end;
        flex: 0;
    }

    .mobile-menu-toggle{
        display: grid;
    }

    .mobile-nav-backdrop{
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background-color: rgba(0, 0, 0, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease-out;
    }

    .mobile-nav{
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 21;
        width: min(18rem, 86vw);
        height: 100vh;
        padding: var(--s-xl) var(--s-md);
        background-color: var(--clr-bg-surface);
        border-left: 1px solid var(--clr-bg-elevated);
        box-shadow: rgba(0, 0, 0, .18) -8px 0 24px;
        transform: translateX(100%);
        transition: transform .22s ease-out;
    }

    .mobile-menu-open .mobile-nav{
        transform: translateX(0);
    }

    .mobile-menu-open .mobile-nav-backdrop{
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-close{
        display: grid;
        position: absolute;
        top: var(--s-md);
        right: var(--s-md);
    }

    .mobile-menu-close span{
        grid-area: 1 / 1;
    }

    .mobile-menu-close span:first-child{
        transform: rotate(45deg);
    }

    .mobile-menu-close span:last-child{
        transform: rotate(-45deg);
    }

    .mobile-nav-list{
        display: flex;
        flex-direction: column;
        gap: var(--s-sm);
        margin-top: var(--s-xxl);
    }

    .mobile-nav .items-nav{
        width: 100%;
        border-bottom: 1px solid var(--clr-bg-elevated);
        padding: var(--s-md) var(--s-sm);
    }

    .mobile-nav .items-nav:hover{
        border-bottom-color: var(--clr-text-primary);
    }

    .end{
        justify-content: flex-start;
    }

    .h-lg{
        height: auto;
        min-height: var(--h-lg);
    }

    .w-lg,
    .w-md,
    .w-sm{
        width: 100%;
    }
}