/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   components.css

   Caminho:
   assets/css/components.css

   Versão:
   2.0.0

   Descrição:
   Componentes reutilizáveis do projeto.

   ============================================================================= */


/* =============================================================================
   BOTÃO PRIMÁRIO
   ========================================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border:1px solid var(--color-title);

    background:transparent;

    color:var(--color-title);

    font-size:.90rem;

    font-weight:var(--fw-medium);

    letter-spacing:.18em;

    text-transform:uppercase;

    transition:var(--transition-default);

}

.button:hover{

    background:var(--color-title);

    color:var(--color-white);

}


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

.button-dark{

    background:var(--color-title);

    color:var(--color-white);

}

.button-dark:hover{

    background:var(--color-accent);

    border-color:var(--color-accent);

}


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

.button-light{

    border-color:rgba(255,255,255,.45);

    color:var(--color-white);

}

.button-light:hover{

    background:var(--color-white);

    color:var(--color-title);

}


/* =============================================================================
   LINHA EDITORIAL
   ========================================================================== */

.editorial-divider{

    width:80px;

    height:1px;

    margin:var(--space-lg) 0;

    background:var(--color-line);

}


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

.editorial-card{

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

}


/* =============================================================================
   IMAGEM EDITORIAL
   ========================================================================== */

.editorial-card img{

    width:100%;

    border-radius:var(--radius-md);

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

    transition:var(--transition-slow);

}

.editorial-card:hover img{

    transform:scale(1.015);

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

}


/* =============================================================================
   LEGENDA
   ========================================================================== */

.caption{

    max-width:720px;

}

.caption h3{

    margin-bottom:14px;

}

.caption p{

    color:var(--color-text-soft);

}


/* =============================================================================
   ETIQUETA
   ========================================================================== */

.label{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-accent);

    font-size:var(--fs-caption);

    font-weight:var(--fw-semibold);

    letter-spacing:.30em;

    text-transform:uppercase;

}


/* =============================================================================
   CITAÇÃO
   ========================================================================== */

.quote{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.quote p{

    font-family:var(--font-title);

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.5;

    color:var(--color-title);

}

.quote footer{

    margin-top:var(--space-md);

    color:var(--color-text-soft);

    letter-spacing:.20em;

    text-transform:uppercase;

    font-size:var(--fs-caption);

}


/* =============================================================================
   BLOCO CENTRALIZADO
   ========================================================================== */

.center-block{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


/* =============================================================================
   GRID DUAS COLUNAS
   ========================================================================== */

.grid-two{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:var(--space-xl);

    align-items:center;

}


/* =============================================================================
   GRID TRÊS COLUNAS
   ========================================================================== */

.grid-three{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:var(--space-lg);

}


/* =============================================================================
   IMAGEM RESPONSIVA
   ========================================================================== */

.responsive-image{

    width:100%;

    height:auto;

    border-radius:var(--radius-md);

}


/* =============================================================================
   SOMBRA SUAVE
   ========================================================================== */

.shadow-soft{

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

}


/* =============================================================================
   SOMBRA MÉDIA
   ========================================================================== */

.shadow-medium{

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

}


/* =============================================================================
   TEXTO CENTRAL
   ========================================================================== */

.text-center{

    text-align:center;

}


/* =============================================================================
   TEXTO ESQUERDA
   ========================================================================== */

.text-left{

    text-align:left;

}


/* =============================================================================
   TEXTO DIREITA
   ========================================================================== */

.text-right{

    text-align:right;

}


/* =============================================================================
   ESPAÇAMENTOS
   ========================================================================== */

.mt-lg{

    margin-top:var(--space-lg);

}

.mt-xl{

    margin-top:var(--space-xl);

}

.mb-lg{

    margin-bottom:var(--space-lg);

}

.mb-xl{

    margin-bottom:var(--space-xl);

}


/* =============================================================================
   OCULTAR
   ========================================================================== */

.hidden{

    display:none !important;

}