/* =========================================================================
   Doctor portal — landing page composition.
   ========================================================================= */

.doctor-hero {
    background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--cr-border);
    padding: 4rem 0 3rem;
}
.doctor-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 980px) {
    .doctor-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.doctor-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); }

.patient-widget {
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: 1rem;
    box-shadow: var(--cr-shadow-card-hover);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.patient-widget-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--cr-border);
}
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.vital-tile {
    background: var(--cr-bg-muted);
    border-radius: .625rem;
    padding: .625rem .75rem;
    text-align: center;
}
.vital-tile .label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cr-muted); }
.vital-tile .value { font-size: 1.125rem; font-weight: 700; }

.doctor-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 880px) { .doctor-features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .doctor-features-grid { grid-template-columns: 1fr; } }
.feature-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .625rem;
    background: var(--cr-accent);
    color: var(--cr-accent-foreground);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}

.doctor-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 880px) { .doctor-steps { grid-template-columns: 1fr 1fr; } }
.doctor-step {
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.doctor-step .step-circle {
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--cr-ring);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    margin-bottom: .75rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-grid ul { list-style: none; padding: 0; display: grid; gap: .375rem; }
.pricing-grid ul li {
    font-size: var(--text-sm);
    display: inline-flex; align-items: center; gap: .375rem;
}
.pricing-grid ul li::before { content: ''; }
.pricing-grid ul li .material-symbols-outlined { font-size: 1rem; color: var(--chip-green-fg); }
.pricing-highlight { border: 2px solid var(--cr-ring); }

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid details {
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
}
.faq-grid summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    color: var(--cr-muted);
    transition: transform .15s ease;
}
.faq-grid details[open] summary::after { transform: rotate(180deg); }
.faq-grid details p { margin-top: .5rem; color: var(--cr-muted); }