/* ==========================================================
   VANTAGENS
   ========================================================== */

.advantages {
    background:
        var(--color-bg);
}


/* ==========================================================
   HEADER DA SEÇÃO
   ========================================================== */

.advantages__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap:
        clamp(
            var(--space-6),
            7vw,
            var(--space-15)
        );

    margin-bottom:
        clamp(
            var(--space-8),
            8vw,
            var(--space-15)
        );
}


.advantages__heading {
    max-width: 820px;
}


.advantages__title {
    max-width: 820px;

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

    letter-spacing: -0.035em;
}


.advantages__intro {
    max-width: 500px;

    padding-bottom: 0.4rem;
}


.advantages__intro p + p {
    margin-top: var(--space-2);
}


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

.advantages__grid {
    display: grid;

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

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

    border-left:
        1px solid var(--color-border);
}


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

.advantage-card {
    position: relative;

    min-height: 390px;

    padding:
        clamp(
            1.75rem,
            3vw,
            2.5rem
        );

    overflow: hidden;

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

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

    background:
        rgba(255, 255, 255, 0.28);

    transition:
        background-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}


.advantage-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        var(--color-accent);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform var(--transition-base);
}


.advantage-card:hover {
    z-index: 2;

    background:
        var(--color-surface);

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-card-hover);
}


.advantage-card:hover::before {
    transform:
        scaleX(1);
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.advantage-card__icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

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

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

    border-radius:
        50%;

    color:
        var(--color-accent);

    background:
        rgba(255, 255, 255, 0.48);

    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}


.advantage-card__icon svg {
    width: 22px;
    height: 22px;

    fill: none;
}


.advantage-card:hover
.advantage-card__icon {
    background:
        var(--color-surface-dark);

    border-color:
        var(--color-surface-dark);

    color:
        var(--color-accent-soft);
}


/* ==========================================================
   NUMERAÇÃO
   ========================================================== */

.advantage-card__number {
    position: absolute;

    top: 2rem;
    right: 2rem;

    color:
        rgba(16, 24, 32, 0.32);

    font-size:
        var(--font-size-xs);

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

    letter-spacing:
        0.14em;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.advantage-card__title {
    max-width: 260px;

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

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

    line-height:
        1.05;
}


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

.advantage-card__text {
    max-width: 290px;

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

    font-size:
        0.96rem;

    line-height:
        1.75;
}


/* ==========================================================
   FOOTER DA SEÇÃO
   ========================================================== */

.advantages__footer {
    display: flex;
    justify-content: flex-end;

    margin-top:
        var(--space-5);
}


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

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

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

    font-size:
        var(--font-size-sm);

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

    line-height: 1;

    transition:
        color var(--transition-base);
}


.text-link span {
    position: relative;
}


.text-link span::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -5px;

    width: 100%;
    height: 1px;

    background:
        var(--color-accent);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform var(--transition-base);
}


.text-link svg {
    width: 17px;
    height: 17px;

    fill: none;

    transition:
        transform var(--transition-base);
}


.text-link:hover {
    color:
        var(--color-accent);
}


.text-link:hover span::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.text-link:hover svg {
    transform:
        translateY(3px);
}


/* ==========================================================
   REVEAL STAGGER
   ========================================================== */

.advantages__grid
.advantage-card:nth-child(2) {
    transition-delay:
        80ms;
}


.advantages__grid
.advantage-card:nth-child(3) {
    transition-delay:
        160ms;
}


.advantages__grid
.advantage-card:nth-child(4) {
    transition-delay:
        240ms;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .advantage-card:hover {
        transform: none;
    }

}