/*
DOCUMENTAÇÃO DO ARQUIVO: css/components/categorias.css
Cartões da página inicial: imagem, sobreposição escura, textos e animações. Até 600px ficam empilhados; entre 601px e 1100px usam duas colunas.
*/
/* ==========================================================
   CATEGORIAS
========================================================== */

/* Aplica as declarações abaixo a .categorias. */
.categorias {

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding: 30px 0 72px;
}

/* Aplica as declarações abaixo a .categorias-header. */
.categorias-header {
    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width: 700px;
    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin: 0 auto 36px;
    /* Alinhamento horizontal do texto dentro de sua área. */
    text-align: center;
}

/* Aplica as declarações abaixo a .categoria-tag. */
.categoria-tag{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:inline-block;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:8px 18px;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:30px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FDECEF;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:14px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Espaço externo na direção inferior. */
    margin-bottom:18px;

}

/* Aplica as declarações abaixo a .categorias-header h2. */
.categorias-header h2 {
    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size: 38px;
    /* Cor do texto e referência para desenhos que usam currentColor. */
    color: #F56A9A;
    /* Espaço externo na direção inferior. */
    margin-bottom: 14px;
    /* Altura das linhas; valores sem unidade multiplicam o tamanho da fonte. */
    line-height: 1.2;
}

/* Aplica as declarações abaixo a .categorias-header p. */
.categorias-header p{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#666;

    /* Altura das linhas; valores sem unidade multiplicam o tamanho da fonte. */
    line-height:1.8;

}


/* GRID */

/* Aplica as declarações abaixo a .categorias-grid. */
.categorias-grid{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:grid;

    /* Tamanhos das colunas; fr divide o espaço restante e minmax(0, ...) permite encolher sem transbordar. */
    grid-template-columns:2fr 1fr;

    /* Tamanhos das linhas da grade; repeat repete medidas e auto acompanha o conteúdo. */
    grid-template-rows:repeat(3,180px);

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:22px;

}


/* LINKS */

/* Aplica as declarações abaixo a .categoria-principal, .categoria-card. */
.categoria-principal,
.categoria-card{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:relative;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

    /* Tratamento do conteúdo que ultrapassa os limites; hidden recorta a parte excedente. */
    overflow:hidden;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:26px;

    /* Controla enfeites do texto, como o sublinhado dos links. */
    text-decoration:none;

}


/* CARD GRANDE */

/* Aplica as declarações abaixo a .categoria-principal. */
.categoria-principal{

    /* Linhas ocupadas pelo item; 1 / 4 abrange da primeira à quarta linha delimitadora. */
    grid-row:1 / 4;

}


/* IMAGENS */

/* Aplica as declarações abaixo a .categoria-principal img, .categoria-card img. */
.categoria-principal img,
.categoria-card img{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:100%;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:100%;

    /* Como a imagem preenche sua caixa; cover preenche mantendo a proporção e pode recortar as bordas. */
    object-fit:cover;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

}


/* SOBREPOSIÇÃO */

/* Aplica as declarações abaixo a .categoria-overlay. */
.categoria-overlay{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;

    /* Atalho para top, right, bottom e left; 0 encosta nas quatro bordas. */
    inset:0;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Direção dos filhos no flex; column organiza de cima para baixo. */
    flex-direction:column;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:flex-end;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:28px;

 /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
 background:linear-gradient(
    to top,
    rgba(0,0,0,.78) 5%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.05) 100%
);

}


/* BADGE */

/* Aplica as declarações abaixo a .categoria-badge. */
.categoria-badge{

    /* Alinhamento deste item, sobrepondo o align-items do contêiner. */
    align-self:flex-start;

    /* Espaço externo na direção inferior. */
    margin-bottom:auto;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:8px 14px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFFFFF;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:20px;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:12px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:700;

}


/* TÍTULOS */

/* Aplica as declarações abaixo a .categoria-overlay h3. */
.categoria-overlay h3{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#FFF;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:30px;

    /* Espaço externo na direção inferior. */
    margin-bottom:10px;

}

/* Aplica as declarações abaixo a .categoria-card h3. */
.categoria-card h3{

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:24px;

}


/* TEXTO */

/* Aplica as declarações abaixo a .categoria-overlay p. */
.categoria-overlay p{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#FFF;

    /* Altura das linhas; valores sem unidade multiplicam o tamanho da fonte. */
    line-height:1.6;

    /* Espaço externo na direção inferior. */
    margin-bottom:18px;

}


/* BOTÃO */

/* Aplica as declarações abaixo a .categoria-overlay strong. */
.categoria-overlay strong{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#FFF;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:16px;

}

/* ==========================================================
   HOVER
========================================================== */

/* Aplica as declarações abaixo a .categoria-principal, .categoria-card. */
.categoria-principal,
.categoria-card{

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

/* Aplica as declarações abaixo a .categoria-principal img, .categoria-card img. */
.categoria-principal img,
.categoria-card img{

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:
        transform .60s ease;

}

/* Aplica as declarações abaixo a .categoria-principal:hover, .categoria-card:hover. :hover corresponde ao ponteiro sobre o elemento. */
.categoria-principal:hover,
.categoria-card:hover{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateY(-8px);

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

/* Aplica as declarações abaixo a .categoria-principal:hover img, .categoria-card:hover img. :hover corresponde ao ponteiro sobre o elemento. */
.categoria-principal:hover img,
.categoria-card:hover img{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:scale(1.08);

}

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

/* Condição de aplicação: (max-width:768px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (max-width:768px){

    /* Aplica as declarações abaixo a .categorias. */
.categorias{

        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding:60px 0;

    }

    /* Aplica as declarações abaixo a .categorias-header. */
.categorias-header{

        /* Espaço externo na direção inferior. */
        margin-bottom:35px;
        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding:0 10px;

    }

    /* Aplica as declarações abaixo a .categorias-header h2. */
.categorias-header h2{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:30px;

    }

    /* Aplica as declarações abaixo a .categorias-header p. */
.categorias-header p{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:15px;

    }

    /* Aplica as declarações abaixo a .categorias-grid. */
.categorias-grid{

        /* Tamanhos das colunas; fr divide o espaço restante e minmax(0, ...) permite encolher sem transbordar. */
        grid-template-columns:1fr;
        /* Tamanhos das linhas da grade; repeat repete medidas e auto acompanha o conteúdo. */
        grid-template-rows:auto;
        /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
        gap:18px;

    }

    /* Aplica as declarações abaixo a .categoria-principal. */
.categoria-principal{

        /* Linhas ocupadas pelo item; 1 / 4 abrange da primeira à quarta linha delimitadora. */
        grid-row:auto;
        /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
        height:240px;

    }

    /* Aplica as declarações abaixo a .categoria-card. */
.categoria-card{

        /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
        height:170px;

    }

    /* Aplica as declarações abaixo a .categoria-overlay. */
.categoria-overlay{

        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding:20px;

    }

    /* Aplica as declarações abaixo a .categoria-overlay h3. */
.categoria-overlay h3{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:24px;

    }

    /* Aplica as declarações abaixo a .categoria-card h3. */
.categoria-card h3{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:20px;

    }

    /* Aplica as declarações abaixo a .categoria-overlay p. */
.categoria-overlay p{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:14px;

        /* Espaço externo na direção inferior. */
        margin-bottom:12px;

    }

    /* Aplica as declarações abaixo a .categoria-overlay strong. */
.categoria-overlay strong{

        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size:15px;

    }

}
/* Tablets: mantém os cartões legíveis em duas colunas. */
/* Condição de aplicação: (min-width: 601px) and (max-width: 1100px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (min-width: 601px) and (max-width: 1100px) {
    /* Aplica as declarações abaixo a .categorias. */
.categorias {
        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding: 32px 0 48px;
    }

    /* Aplica as declarações abaixo a .categorias-grid. */
.categorias-grid {
        /* Tamanhos das colunas; fr divide o espaço restante e minmax(0, ...) permite encolher sem transbordar. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Tamanhos das linhas da grade; repeat repete medidas e auto acompanha o conteúdo. */
        grid-template-rows: auto;
        /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
        gap: 20px;
    }

    /* Aplica as declarações abaixo a .categoria-principal, .categoria-card. */
.categoria-principal,
    .categoria-card {
        /* Linhas ocupadas pelo item; 1 / 4 abrange da primeira à quarta linha delimitadora. */
        grid-row: auto;
        /* Altura mínima; vh usa a altura da janela e dvh acompanha a área visível dinâmica. */
        min-height: 320px;
        /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
        height: auto;
    }

    /* Aplica as declarações abaixo a .categoria-overlay. */
.categoria-overlay {
        /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
        padding: 22px;
    }

    /* Aplica as declarações abaixo a .categoria-overlay h3. */
.categoria-overlay h3 {
        /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
        font-size: 26px;
    }
}