/*
Theme Name: HAI Theme
Arquivo: assets/css/lojas-archive.css
Autor: Heber Silva
Versão: 1.0
Descrição: Layout do Guia de Lojas
*/

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

    /* Paleta Via Werneck */

    --cor-primaria:#A00040;
    --cor-secundaria:#FF6040;
    --cor-destaque:#E04040;
    --cor-hover:#C00040;

    /* Interface */

    --cor-fundo:#F7F7F8;
    --cor-card:#FFFFFF;
    --cor-borda:#ECECEC;

    --texto:#1E1E1E;
    --texto-secundario:#666666;
    --texto-claro:#999999;

    /* Layout */

    --radius:20px;

    --container:1800px;

    /* Sombras */

    --shadow-sm:0 5px 18px rgba(0,0,0,.05);

    --shadow-md:0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:0 18px 45px rgba(0,0,0,.12);

    /* Transições */

    --transition:.30s ease;

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--cor-fundo);

    color:var(--texto);

    font-family:"Hanken Grotesk",sans-serif;

}

/* ==========================================================
   RESET ASTRA
========================================================== */

.post-type-archive-lojas #primary{

    width:100%;

    max-width:100%;

    margin:0;

    padding:0;

}

.post-type-archive-lojas .site-content,
.post-type-archive-lojas .ast-container,
.post-type-archive-lojas .content-area{

    width:100%;

    max-width:100%;

    margin:0;

    padding:0;

}

.post-type-archive-lojas .entry-content{

    margin:0;

}

.post-type-archive-lojas article{

    margin:0;

}

.archive-lojas{

    width:100%;

    overflow:hidden;

}

/* ==========================================================
   CONTAINER
========================================================== */

.archive-container{

    width:min(95%,var(--container));

    margin:auto;

    padding:0 20px;

}

/* ==========================================================
   HERO
========================================================== */

.archive-hero{

    position:relative;

    padding:90px 0 70px;

    text-align:center;

    background:#FFFFFF;

    border-bottom:1px solid var(--cor-borda);

}

.archive-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(160,0,64,.04),

        transparent 65%

    );

    pointer-events:none;

}

.archive-subtitulo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(160,0,64,.08);

    color:var(--cor-primaria);

    font-size:.80rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.archive-hero h1{

    margin-top:22px;

    font-size:clamp(2.2rem,4vw,3.8rem);

    font-weight:800;

    color:var(--texto);

}

.archive-hero p{

    margin:22px auto 0;

    max-width:720px;

    font-size:1.08rem;

    line-height:1.8;

    color:var(--texto-secundario);

}

/* ==========================================================
   FILTROS
========================================================== */

.archive-filtros{

    background:#FFFFFF;

    padding:40px 0;

    border-bottom:1px solid var(--cor-borda);

}

/* ==========================================================
   PESQUISA
========================================================== */

.pesquisa-wrapper{

    position:relative;

    max-width:700px;

    margin:0 auto 35px;

}

.pesquisa-wrapper i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#A9A9A9;

    font-size:18px;

}

.pesquisa-wrapper input{

    width:100%;

    height:60px;

    border:none;

    outline:none;

    border-radius:16px;

    padding:0 24px 0 58px;

    background:#F5F5F5;

    font-size:16px;

    transition:var(--transition);

}

.pesquisa-wrapper input:focus{

    background:#FFFFFF;

    box-shadow:

        0 0 0 3px rgba(160,0,64,.12);

}

/* ==========================================================
   CATEGORIAS
========================================================== */

.categorias{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

    margin-bottom:28px;

}

.categoria-btn{

    border:none;

    cursor:pointer;

    padding:12px 22px;

    border-radius:50px;

    background:#EFEFEF;

    color:#555;

    font-size:.92rem;

    font-weight:600;

    transition:var(--transition);

}

.categoria-btn:hover{

    background:var(--cor-primaria);

    color:#FFFFFF;

}

.categoria-btn.ativo{

    background:var(--cor-primaria);

    color:#FFFFFF;

}

/* ==========================================================
   CONTADOR
========================================================== */

.resultado-lojas{

    text-align:center;

    color:var(--texto-secundario);

    font-size:.95rem;

}

.resultado-lojas strong{

    color:var(--cor-primaria);

    font-size:1.1rem;

}
/* ==========================================================
   GRID
========================================================== */

.archive-grid{

    padding:70px 0 90px;

}

.lojas-grid{

    display:grid;

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

    gap:28px;

    align-items:stretch;

}

/* ==========================================================
   CARD
========================================================== */

.loja-item{

    opacity:0;

    transform:
        translateY(40px)
        scale(.96);

}

.loja-item.card-visible{

    animation:cardReveal .70s cubic-bezier(.22,.61,.36,1) forwards;

}

.loja-card{

    position:relative;

    height:100%;

    background:var(--cor-card);

    border-radius:var(--radius);

    overflow:hidden;

    border:1px solid var(--cor-borda);

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* ==========================================================
   BARRA SUPERIOR
========================================================== */

.loja-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #A00040,
        #C00040,
        #E04040,
        #FF6040
    );

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .35s ease;

    z-index:10;

}

.loja-card:hover::before{

    transform:scaleX(1);

}

.loja-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   LINK
========================================================== */

.loja-link{

    display:flex;

    flex-direction:column;

    height:100%;

    text-decoration:none;

    color:inherit;

}

/* ==========================================================
   ÁREA DA LOGO
========================================================== */

.loja-logo-area{

    position:relative;

    height:230px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;

    border-bottom:1px solid var(--cor-borda);

    overflow:hidden;

}

/* ==========================================================
   HALO DA LOGO
========================================================== */

.logo-bg{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle,
            rgba(160,0,64,.05),
            transparent 72%
        );

    opacity:0;

    transition:.40s;

}

.loja-card:hover .logo-bg{

    opacity:1;

}

/* ==========================================================
   LOGO
========================================================== */

.loja-logo-area img{

    position:relative;

    z-index:2;

    max-width:180px;

    max-height:120px;

    object-fit:contain;

    transition:
        transform .35s ease;

}

.loja-card:hover .loja-logo-area img{

    transform:
        scale(1.08)
        translateY(-4px);

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.logo-placeholder{

    width:95px;

    height:95px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F5F5F5;

    color:#B8B8B8;

    font-size:34px;

    z-index:2;

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.loja-logo-area::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.70),

        transparent

    );

    transform:skewX(-25deg);

}

.loja-card:hover .loja-logo-area::after{

    animation:shine .8s ease;

}

/* ==========================================================
   ANIMAÇÃO SHINE
========================================================== */

@keyframes shine{

    from{

        left:-140%;

    }

    to{

        left:170%;

    }

}
/* ==========================================================
   CONTEÚDO DO CARD
========================================================== */

.loja-conteudo{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

/* ==========================================================
   CATEGORIA
========================================================== */

.loja-categoria{

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:40px;

    background:#F3F3F3;

    color:#666;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    transition:var(--transition);

}

.loja-card:hover .loja-categoria{

    background:rgba(160,0,64,.10);

    color:var(--cor-primaria);

}

/* ==========================================================
   NOME DA LOJA
========================================================== */

.loja-conteudo h2{

    margin:0;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.35;

    color:var(--texto);

    transition:var(--transition);

}

.loja-card:hover h2{

    color:var(--cor-primaria);

}

/* ==========================================================
   LOCALIZAÇÃO
========================================================== */

.loja-localizacao{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:22px;

    color:var(--texto-secundario);

    font-size:.95rem;

}

.loja-localizacao i{

    color:#555;

    transition:var(--transition);

}

.loja-card:hover .loja-localizacao i{

    color:var(--cor-primaria);

}

.loja-localizacao strong{

    color:var(--texto);

    font-weight:700;

}

/* ==========================================================
   DIVISOR
========================================================== */

.loja-divider{

    width:100%;

    height:1px;

    margin:28px 0 22px;

    background:var(--cor-borda);

}

/* ==========================================================
   RODAPÉ DO CARD
========================================================== */

.loja-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

}

/* ==========================================================
   BOTÃO
========================================================== */

.loja-botao{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:.90rem;

    font-weight:600;

    color:#555;

    transition:var(--transition);

}

.loja-botao i{

    transition:.30s;

}

.loja-card:hover .loja-botao{

    color:var(--cor-primaria);

}

.loja-card:hover .loja-botao i{

    transform:translateX(6px);

}

/* ==========================================================
   BADGE DA LOJA
========================================================== */

.loja-badge{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:62px;

    height:34px;

    padding:0 14px;

    border-radius:40px;

    background:#F5F5F5;

    color:#666;

    font-size:.82rem;

    font-weight:700;

    transition:var(--transition);

}

.loja-card:hover .loja-badge{

    background:rgba(160,0,64,.10);

    color:var(--cor-primaria);

}

/* ==========================================================
   CARD SEM LOGO
========================================================== */

.logo-placeholder i{

    transition:.35s;

}

.loja-card:hover .logo-placeholder i{

    transform:scale(1.10);

    color:var(--cor-primaria);

}

/* ==========================================================
   NENHUM RESULTADO
========================================================== */

.sem-lojas{

    grid-column:1/-1;

    text-align:center;

    padding:90px 30px;

    background:#FFFFFF;

    border-radius:var(--radius);

    border:1px solid var(--cor-borda);

    box-shadow:var(--shadow-sm);

}

.sem-lojas i{

    font-size:60px;

    color:#CFCFCF;

    margin-bottom:22px;

}

.sem-lojas h2{

    margin-bottom:14px;

    font-size:2rem;

    color:var(--texto);

}

.sem-lojas p{

    color:var(--texto-secundario);

    line-height:1.8;

}

/* ==========================================================
   ANIMAÇÃO DE ENTRADA
========================================================== */

@keyframes cardReveal{

    from{

        opacity:0;

        transform:
            translateY(45px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}
/* ==========================================================
   NOTEBOOKS
========================================================== */

@media (max-width:1400px){

    .archive-container{

        width:min(96%,1400px);

    }

    .lojas-grid{

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

    }

}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:1024px){

    .archive-hero{

        padding:70px 0 55px;

    }

    .archive-hero h1{

        font-size:2.7rem;

    }

    .archive-container{

        width:95%;

    }

    .lojas-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:24px;

    }

}

/* ==========================================================
   CELULARES
========================================================== */

@media (max-width:768px){

    .archive-container{

        width:94%;

        padding:0;

    }

    .archive-hero{

        padding:55px 0 40px;

    }

    .archive-hero h1{

        font-size:2rem;

    }

    .archive-hero p{

        font-size:.95rem;

    }

    .pesquisa-wrapper{

        margin-bottom:25px;

    }

    .pesquisa-wrapper input{

        height:54px;

        font-size:15px;

    }

    .categorias{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:10px;

        scrollbar-width:none;

    }

    .categorias::-webkit-scrollbar{

        display:none;

    }

    .categoria-btn{

        flex-shrink:0;

        white-space:nowrap;

    }

    .lojas-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .loja-logo-area{

        height:180px;

    }

    .loja-logo-area img{

        max-width:140px;

        max-height:90px;

    }

    .loja-conteudo{

        padding:22px;

    }

    .loja-conteudo h2{

        font-size:1.25rem;

    }

    .loja-localizacao{

        margin-top:16px;

    }

    .loja-divider{

        margin:20px 0 16px;

    }

}

/* ==========================================================
   MOBILE COMPACTO
========================================================== */

@media (max-width:480px){

    .archive-hero{

        padding:45px 0 35px;

    }

    .archive-subtitulo{

        font-size:.72rem;

    }

    .archive-hero h1{

        font-size:1.75rem;

    }

    .archive-hero p{

        font-size:.90rem;

        line-height:1.6;

    }

    .loja-logo-area{

        height:160px;

    }

    .loja-logo-area img{

        max-width:120px;

        max-height:80px;

    }

    .loja-conteudo{

        padding:20px;

    }

    .loja-categoria{

        font-size:.72rem;

    }

    .loja-conteudo h2{

        font-size:1.15rem;

    }

    .loja-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .loja-badge{

        align-self:flex-end;

    }

}

/* ==========================================================
   CARD EXPANSÍVEL (PREPARAÇÃO)
========================================================== */

@media (hover:none){

    .loja-card{

        cursor:pointer;

    }

    .loja-card.expanded{

        box-shadow:var(--shadow-lg);

    }

    .loja-card.expanded .loja-categoria{

        background:rgba(160,0,64,.10);

        color:var(--cor-primaria);

    }

    .loja-card.expanded h2{

        color:var(--cor-primaria);

    }

    .loja-card.expanded .loja-botao{

        color:var(--cor-primaria);

    }

    .loja-card.expanded .loja-botao i{

        transform:translateX(6px);

    }

}

/* ==========================================================
   FIM DO ARQUIVO
========================================================== */