/**
 * AG Depoimentos
 * Frontend
 */
/* ==========================================
   Variáveis
========================================== */

:root {
    --ag-depoimentos-gap: 2rem;
    --ag-depoimentos-radius: 8px;
    --ag-depoimentos-transition: .35s ease;
    --ag-depoimentos-primary: #222;
    --ag-depoimentos-background: #fff;
    /* Avaliação */
    
    --ag-depoimentos-star-active: #F4B400;
    --ag-depoimentos-star-inactive: #D9D9D9;
    --ag-depoimentos-color-default: #d9d9d9;
    --ag-depoimentos-color-active: #878787;
    --ag-depoimentos-color-title: #0000C6;
    --ag-depoimentos-color-description: #575756;
    --ag-depoimentos-color-texto: #000000;
    --ag-depoimentos-color-nome: #0000C6;
    --ag-depoimentos-color-cargo: #7FE3FA;
    --ag-depoimentos-color-empresa: #00C9FF;
}
/* ==========================================
   Wrapper
========================================== */

.ag-depoimentos {
    position: relative;
    width: 100%;
}
.ag-depoimentos-container {
    width: 100%;
    margin: 0 auto;
}
/* ==========================================
   Cabeçalho da seção
========================================== */

.ag-depoimentos-section-header {
    width: 100%;
    max-width: 920px;
    margin: 0 auto 2rem;
    text-align: center;
}
.ag-depoimentos-section-title {
    margin: 0 0 .85rem;
    color: var(--ag-depoimentos-color-title);
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.1;
}
.ag-depoimentos-section-description {
    color: var(--ag-depoimentos-color-description);
    font-size: var(--fs-body-lg);
    line-height: 1.7;
}
.ag-depoimentos-section-description p:last-child {
    margin-bottom: 0;
}
/* ==========================================
   Grid
========================================== */

.ag-depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ag-depoimentos-gap);
}
@media (max-width: 992px) {
    .ag-depoimentos-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   Card
========================================== */

.ag-depoimento {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    background: var(--ag-depoimentos-background);
    border-radius: var(--ag-depoimentos-radius);
    transition: transform var(--ag-depoimentos-transition), box-shadow var(--ag-depoimentos-transition);
}
.ag-depoimento:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
}
/* ==========================================
   Foto / Avatar
========================================== */

.ag-depoimento-foto,
.ag-depoimento-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}
.ag-depoimento-foto img,
.ag-depoimento-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ==========================================
   Nome
========================================== */

.ag-depoimento-nome {
    margin: 0 0 .3rem;
    color: var(--ag-depoimentos-color-nome);
    font-size: var(--fs-h3);
    font-weight: 700;
}
/* ==========================================
   Cargo
========================================== */

.ag-depoimento-cargo {
    margin: 0 0 1.2rem;
    color: var(--ag-depoimentos-color-cargo);
    opacity: 1;
}
/* ==========================================
   Empresa
========================================== */

.ag-depoimento-empresa {
    margin: 0 0 1.2rem;
    color: var(--ag-depoimentos-color-empresa);
    opacity: 1;
}
/* ==========================================
   Texto
========================================== */

.ag-depoimento-texto {
    color: var(--ag-depoimentos-color-texto);
    line-height: 1.8;
}
.ag-depoimento-texto p {
    line-height: 1.3;
}
.ag-depoimento-texto p:last-child {
    margin-bottom: 0;
}
/* ==========================================
   Avaliação
========================================== */
/*
 * Container das estrelas.
 *
 * O template utiliza:
 *
 * .ag-depoimento-nota
 */

.ag-depoimento-nota {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: 2rem;
    font-size: var(--fs-body-xl);
    line-height: 1;
    white-space: nowrap;
}
/*
 * Cada estrela.
 */

.ag-depoimento-nota span {
    display: inline-block;
    color: var(--ag-depoimentos-star-inactive);
    font-size: 1em;
    line-height: 1;
    transition: color .25s ease, transform .25s ease;
}
/*
 * Estrela ativa.
 */

.ag-depoimento-nota span.is-active {
    color: var(--ag-depoimentos-star-active);
}
/*
 * Pequeno efeito visual no hover
 * quando o usuário passa sobre a avaliação.
 */

.ag-depoimento-nota:hover span.is-active {
    transform: scale(1.05);
}
/* ==========================================
   Meta do Autor
========================================== */

.ag-depoimento-autor {
    margin-top: 1.5rem;
}
/*
 * Container de cargo e empresa.
 */

.ag-depoimento-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--ag-depoimentos-color-description);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
}
/*
 * Cargo.
 */

.ag-depoimento-meta .ag-depoimento-cargo {
    margin: 0;
    color: var(--ag-depoimentos-color-cargo);
}
/*
 * Empresa.
 */

.ag-depoimento-meta .ag-depoimento-empresa {
    margin: 0;
    color: var(--ag-depoimentos-color-empresa);
}
/*
 * Separador entre cargo e empresa.
 */

.ag-depoimento-separador {
    opacity: .5;
}
/* ==========================================
   Empresa / Logo
========================================== */

.ag-depoimento-empresa img {
    display: block;
    max-width: 180px;
    height: auto;
}
/* ==========================================
   Responsivo
========================================== */

@media (max-width: 768px) {
    .ag-depoimento {
        padding: 2rem;
    }
    .ag-depoimento-nota {
        margin-top: 1.5rem;
        font-size: var(--fs-body-lg);
    }
}
@media (max-width: 480px) {
    .ag-depoimento {
        padding: 1.5rem;
    }
    .ag-depoimento-foto,
    .ag-depoimento-avatar {
        width: 75px;
        height: 75px;
    }
    .ag-depoimento-nota {
        gap: .2rem;
    }
}