/* vn-callout-trio — Home "You love her" section
   Source: Latest mockups/corrected/index.html (.love-section, .callout-card). */

.vn-trio {
    --vn-trio-top-icon: clamp(28px, 2.2vw, 42px);
    --vn-trio-list-icon: 22px;
    display: grid;
    grid-template-columns: 0.86fr 1.1fr 0.83fr;
    gap: clamp(24px, 3vw, 58px);
    align-items: stretch;
    max-width: 1747px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 30px) clamp(24px, 4vw, 74px);
    font-family: var(--vn-font-body);
    color: var(--vn-ink);
}

.vn-trio > * { min-width: 0; }

.vn-trio .vn-trio__heading {
    margin: 0 0 24px;
    font-family: var(--vn-font-display);
    font-size: clamp(2rem, 2.6vw, 3.5rem);
    font-weight: 600;
    line-height: 1.27;
    letter-spacing: -0.02em;
    color: var(--vn-navy);
}

.vn-trio__body p {
    margin: 0 0 22px;
    font-size: clamp(1.05rem, 1.15vw, 1.8125rem);
    font-weight: 500;
    line-height: 1.35;
}

.vn-trio__body p:last-child { margin-bottom: 0; }

.vn-trio__body strong {
    font-weight: 700;
    color: var(--vn-navy);
}

/* Photo fills its column height */
.vn-trio__photo {
    position: relative;
    overflow: hidden;
}

.vn-trio__photo .vn-img-cover {
    position: absolute;
    inset: 0;
}

.vn-trio-fade-yes .vn-trio__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(232, 232, 232, 0.4) 10%,
        transparent 22%);
    pointer-events: none;
}

.vn-trio__card {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2vw, 32px);
    margin: 20px;
    padding: clamp(24px, 2.4vw, 44px) clamp(20px, 2vw, 36px);
    background-color: var(--vn-mist);
    border-radius: 10px;
}

.vn-trio .vn-trio__card-icon {
    width: var(--vn-trio-top-icon);
    margin: 0 auto;
    color: var(--vn-navy);
}

.vn-trio__card .vn-icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.vn-trio__card-icon i { font-size: var(--vn-trio-top-icon); }

.vn-trio .vn-trio__card-heading {
    margin: 0;
    font-family: var(--vn-font-display);
    font-size: clamp(1.4rem, 1.6vw, 2.4375rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--vn-navy);
}

.vn-trio .vn-trio__list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 0 0 0 40px; /* the mockup keeps the browser's default list indent */
    list-style: none;
}

.vn-trio__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    font-size: clamp(1rem, 1.1vw, 1.9375rem);
    font-weight: 500;
    line-height: 1.3;
}

.vn-trio__list .vn-icon {
    width: var(--vn-trio-list-icon);
    margin-top: 4px;
    color: var(--vn-ink);
}

.vn-trio__list .vn-icon i { font-size: var(--vn-trio-list-icon); }

.vn-trio__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    text-align: center;
}

.vn-trio .vn-trio__phone-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

a.vn-trio__phone-row:focus-visible { outline: 2px solid var(--vn-navy); outline-offset: 4px; }

.vn-trio__phone .vn-icon { width: 26px; color: var(--vn-navy); }

.vn-trio__phone-num {
    font-size: clamp(1.5rem, 1.5vw, 2.1rem);
    font-weight: 700;
    white-space: nowrap;
}

.vn-trio__tagline {
    font-size: clamp(1.05rem, 1.15vw, 2.0625rem);
    font-weight: 700;
}

@media (max-width: 1024px) {
    .vn-trio {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px 32px;
    }

    .vn-trio__card { grid-column: 1 / -1; margin: 0; }
    .vn-trio__photo { min-height: 320px; border-radius: 12px; }

    .vn-trio .vn-trio__heading { font-size: 1.85rem; margin-bottom: 18px; }
    .vn-trio__body p { font-size: 1.05rem; margin-bottom: 16px; }
}

@media (max-width: 767px) {
    .vn-trio {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 20px;
    }

    .vn-trio__photo { aspect-ratio: 16 / 10; min-height: 0; }
    /* The white ramp only reads as a blend beside the copy column */
    .vn-trio-fade-yes .vn-trio__photo::after { display: none; }

    .vn-trio__card { padding: 24px 20px; }
    .vn-trio__list li { font-size: 1.05rem; }
}

@media (max-width: 480px) {
    .vn-trio__phone-num { font-size: 1.4rem; }
}