@layer pages {

    .doctor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
        grid-template-areas:
            "title   widget"
            "hero    widget"
            "content widget";
        align-items: start;
        column-gap: var(--space-5);
        row-gap: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .doctor-title {
        grid-area: title;
    }

    .doctor-hero {
        grid-area: hero;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "photo info"
            "photo review";
        gap: var(--space-3);
    }

    .doctor-hero__photo {
        grid-area: photo;
        align-self: start;
        width: 10.5rem;
        height: 10.5rem;
        object-fit: cover;
        border-radius: var(--radius);
    }

    .doctor-hero__info {
        grid-area: info;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .doctor-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .doctor-hero__rating {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .doctor-hero__rating-value {
        font-weight: var(--weight-medium);
    }

    .doctor-hero__review {
        grid-area: review;
        align-self: end;
    }

    .doctor-widget {
        grid-area: widget;

        background: var(--color-bg);
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        padding: var(--space-4);
    }

    .doctor-content {
        grid-area: content;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        margin-top: var(--space-3);
    }

    .doctor-prices {
        grid-column: 1 / -1;
        min-width: 0;
        margin-top: var(--space-3);
        padding: var(--space-4);
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .doctor-prices service-list-by-doctor-id {
        display: block;
        width: 100%;
    }

    .doctor-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .doctor-prose {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        line-height: 1.5;

        a {
            color: var(--color-brand);
        }
    }

    .doctor-edu {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin: 0;
    }

    .doctor-edu__row {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: var(--space-3);
        align-items: baseline;
    }

    .doctor-edu__year {
        color: var(--color-text-muted);
    }

    .doctor-edu__text {
        margin: 0;
        line-height: 1.5;
    }

    @media (max-width: 64rem) {
        .doctor {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "title"
                "hero"
                "widget"
                "content";
            row-gap: var(--space-3);
            margin-bottom: var(--space-5);
        }

        .doctor-title {
            font-size: 25px;
        }

        .doctor-hero {
            grid-template-areas:
                "photo info"
                "review review";
            gap: var(--space-2) var(--space-3);
        }

        .doctor-hero__photo {
            width: 4.75rem;
            height: 4.75rem;
        }

        .doctor-content {
            gap: var(--space-4);
            margin-top: var(--space-2);
        }

        .doctor-section {
            gap: var(--space-3);
        }

        .doctor-edu__row {
            grid-template-columns: 3rem minmax(0, 1fr);
            column-gap: var(--space-2);
        }

        .doctor-widget {
            background: transparent;
            border: none;
            padding: 0;
        }
    }

    #reviews-wrapper {
        display: grid;
        grid-template-rows: 25rem;
        transition: ease-in-out grid-template-rows .3s;
        overflow: hidden;
        position: relative;

        &:before {
            content: '';
            position: absolute;
            height: 112px;
            inset: auto 0 0 0;
            background: linear-gradient(to top, var(--color-bg), transparent);
        }

        &.open {
            &:before {
                display: none;
            }
        }
    }
}