/* ═══════════════════════════════════════════════════
   TMS — page-vma.css  v1.7.0
   Styles for comprehensive Virtual Medical Assistant page.
   Reuses ss- classes from page-service-single.css.
   This file adds VMA-specific sections only.
═══════════════════════════════════════════════════ */

/* ── Trust Bar ── */
.vma-trust-bar {
    background: #fff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 16px var(--content-padding);
}
.vma-trust__inner {
    max-width: var(--max-width); margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap;
}
.vma-trust__item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--color-text-muted);
    white-space: nowrap;
}
.vma-trust__item i { color: var(--color-primary); font-size: 13px; }
.vma-trust__sep { color: var(--color-border); font-size: 18px; }

/* ── Specialty Grid ── */
.vma-spec__grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 16px; margin-top: 40px;
}
.vma-spec__card {
    background: var(--sc-bg, #EBF2FF);
    border-radius: var(--radius-md);
    padding: 20px 12px; text-align: center;
    transition: var(--transition-base);
    cursor: default;
}
.vma-spec__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vma-spec__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: #fff; color: var(--sc-c, #1A6FD8);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin: 0 auto 10px;
    transition: transform 0.3s ease;
}
.vma-spec__card:hover .vma-spec__icon { transform: scale(1.1) rotate(8deg); }
.vma-spec__card span {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--color-text); letter-spacing: -0.01em; line-height: 1.3;
}

/* ── Key Differentiators ── */
.vma-diff { }
.vma-diff__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px; margin-top: 48px;
}
.vma-diff__card {
    background: #fff; border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    padding: 32px 28px; position: relative;
    transition: var(--transition-slow);
}
.vma-diff__card:hover {
    border-color: rgba(26,111,216,0.25);
    box-shadow: var(--shadow-md); transform: translateY(-4px);
}
.vma-diff__num {
    position: absolute; top: 20px; right: 24px;
    font-size: 36px; font-weight: 900; color: var(--color-primary-light);
    line-height: 1; letter-spacing: -0.04em;
}
.vma-diff__icon {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 18px;
}
.vma-diff__card h3 {
    font-size: 16px; font-weight: 800; color: var(--color-text);
    letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px;
}
.vma-diff__card p {
    font-size: 14.5px; color: var(--color-text-muted); line-height: 1.75;
}

/* ── Case Study ── */
.vma-case { }
.vma-case__inner {
    background: #fff; border-radius: var(--radius-xl);
    border: 1.5px solid var(--color-border);
    padding: 48px; position: relative; overflow: hidden;
}
.vma-case__inner::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 4px; background: var(--gradient-primary);
}
.vma-case__label {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary-light); color: var(--color-primary);
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(26,111,216,0.15);
    margin-bottom: 28px;
}
.vma-case__grid {
    display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start;
}
.vma-case__content h2 {
    font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; color: var(--color-text);
    letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 16px;
}
.vma-case__summary {
    font-size: 16px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: 28px;
}
.vma-case__results {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; background: var(--color-surface);
    border-radius: var(--radius-md); padding: 24px; margin-bottom: 28px;
}
.vma-case__result { text-align: center; }
.vma-case__result strong {
    display: block; font-size: 24px; font-weight: 900;
    color: var(--color-primary); letter-spacing: -0.04em;
    line-height: 1.1; margin-bottom: 4px;
}
.vma-case__result span {
    display: block; font-size: 11.5px; color: var(--color-text-faint);
    font-weight: 500; line-height: 1.4;
}
.vma-case__quote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    padding: 20px 24px; border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 15px; font-style: italic; color: var(--color-text-muted);
    line-height: 1.7; margin: 0;
}
.vma-case__quote cite {
    display: block; font-style: normal; margin-top: 10px;
    font-size: 13px; font-weight: 700; color: var(--color-primary);
}
.vma-case__solution {
    background: var(--color-surface); border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    padding: 28px;
}
.vma-case__solution h3 {
    font-size: 17px; font-weight: 800; color: var(--color-text);
    letter-spacing: -0.03em; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 1.5px solid var(--color-border);
}
.vma-case__solution ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vma-case__solution li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--color-text-body); line-height: 1.5;
}
.vma-case__solution li i { color: var(--color-accent); flex-shrink: 0; margin-top: 3px; font-size: 12px; }

/* ── Benefits ── */
.vma-benefits { }
.vma-benefits__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px; margin-top: 48px;
}
.vma-benefits__item {
    display: flex; gap: 20px; align-items: flex-start;
    background: #fff; border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    padding: 28px; transition: var(--transition-slow);
}
.vma-benefits__item:hover {
    border-color: rgba(26,111,216,0.2);
    box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.vma-benefits__icon {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: var(--bi-bg, #EBF2FF); color: var(--bi-c, #1A6FD8);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.vma-benefits__item h3 {
    font-size: 15px; font-weight: 800; color: var(--color-text);
    letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.3;
}
.vma-benefits__item p {
    font-size: 14px; color: var(--color-text-muted); line-height: 1.75;
}

/* ── Testimonials ── */
.vma-testimonials { }
.vma-test__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 48px;
}
.vma-test__card {
    background: var(--color-surface); border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    padding: 28px; transition: var(--transition-base);
}
.vma-test__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.vma-test__stars { color: #F59E0B; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.vma-test__card > p {
    font-size: 15px; color: var(--color-text-body); line-height: 1.8;
    margin-bottom: 20px; font-style: italic;
}
.vma-test__author {
    display: flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--color-border); padding-top: 16px;
}
.vma-test__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.vma-test__author strong { display: block; font-size: 14px; color: var(--color-text); font-weight: 700; }
.vma-test__author span  { display: block; font-size: 12px; color: var(--color-text-faint); margin-top: 2px; }

/* ── Additional Services ── */
.vma-additional { }
.vma-additional__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; margin-top: 48px;
}
.vma-additional__card {
    background: #fff; border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-border);
    padding: 28px; display: flex; flex-direction: column;
    text-decoration: none; transition: var(--transition-slow);
}
.vma-additional__card:hover {
    border-color: rgba(26,111,216,0.25);
    box-shadow: var(--shadow-md); transform: translateY(-4px);
}
.vma-additional__icon {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    background: var(--ai-bg, #EBF2FF); color: var(--ai-c, #1A6FD8);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px;
}
.vma-additional__card h3 {
    font-size: 16px; font-weight: 800; color: var(--color-text);
    letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.3;
}
.vma-additional__card p {
    font-size: 14px; color: var(--color-text-muted); line-height: 1.75; flex: 1; margin-bottom: 18px;
}
.vma-additional__link {
    font-size: 13.5px; font-weight: 700; color: var(--color-primary);
    display: flex; align-items: center; gap: 6px;
    transition: gap 0.2s;
}
.vma-additional__card:hover .vma-additional__link { gap: 10px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .vma-diff__grid        { grid-template-columns: repeat(2, 1fr); }
    .vma-benefits__grid    { grid-template-columns: repeat(2, 1fr); }
    .vma-additional__grid  { grid-template-columns: repeat(2, 1fr); }
    .vma-spec__grid        { grid-template-columns: repeat(4, 1fr); }
    .vma-case__grid        { grid-template-columns: 1fr; }
    .vma-case__results     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .vma-test__grid        { grid-template-columns: 1fr 1fr; }
    .vma-spec__grid        { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .vma-diff__grid        { grid-template-columns: 1fr; }
    .vma-benefits__grid    { grid-template-columns: 1fr; }
    .vma-benefits__item    { flex-direction: column; }
    .vma-additional__grid  { grid-template-columns: 1fr; }
    .vma-test__grid        { grid-template-columns: 1fr; }
    .vma-spec__grid        { grid-template-columns: repeat(3, 1fr); }
    .vma-case__results     { grid-template-columns: 1fr 1fr; }
    .vma-trust__inner      { justify-content: flex-start; }
    .vma-trust__sep        { display: none; }
}

/* ── 2-Column Solutions Layout ── */
.vma-sol2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.vma-sol2col__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 900px) {
    .vma-sol2col { grid-template-columns: 1fr; }
}

/* ── Specialty icon color override via CSS var ── */
.vma-spec__icon {
    color: var(--sc-c, #1A6FD8);
}