/* Mobile composition layer. Loaded after page-specific styles. */

@media (max-width: 48rem) {
    :root {
        --container-pad: 1rem;
        --mobile-section-gap: 2.5rem;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        line-height: 1.45;
    }

    h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
    h2 { font-size: clamp(1.375rem, 6.4vw, 1.75rem); }
    h3 { font-size: clamp(1.2rem, 5.3vw, 1.5rem); }

    main,
    main > *,
    .container,
    .content-wrapper,
    .content-wrapper > *,
    .service,
    .service-section,
    .service-section > * {
        min-width: 0;
        max-width: 100%;
    }

    .content-wrapper h1,
    .content-wrapper h2,
    .content-wrapper h3,
    .content-wrapper p,
    .content-wrapper li,
    .doctor-card__name,
    .medical-field-card__name,
    .file-card__title,
    .service-row__name {
        overflow-wrap: anywhere;
    }

    .content-wrapper img,
    .service-content img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .content-wrapper table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .breadcrumbs {
        margin-block: 1rem;
        overflow: hidden;
    }

    .breadcrumbs ul {
        gap: .35rem .5rem;
    }

    .breadcrumbs li {
        gap: .5rem;
        font-size: .8125rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        width: 1rem;
        height: 1rem;
    }

    .btn {
        min-height: 3rem;
        white-space: normal;
        text-align: center;
    }

    /* Homepage hero and compact actions. */
    .banner-grid {
        gap: 0;
    }

    .banner-info {
        padding: 1.5rem 0 1rem;
    }

    .banner-info + div {
        display: flex;
        justify-content: center;
        max-height: 23rem;
        overflow: hidden;
    }

    .banner-info + div img {
        width: 100%;
        max-height: 23rem;
        object-fit: contain;
        object-position: center bottom;
    }

    .banner-cta {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .services,
    .medical-field-section,
    .promotions-section,
    .specialists-section,
    .reviews-section,
    .news-section,
    .aggregators-section,
    .yandex-reviews-section {
        margin-top: var(--mobile-section-gap) !important;
    }

    .services {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .services .service {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        min-height: 4.5rem;
        padding: .75rem 1rem;
    }

    .services .service > .flex {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    .services .service > .flex > .arrow-icon {
        display: none;
    }

    .services .service > .text-xl {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 1rem;
        line-height: 1.25;
    }

    .services .service > .text-sm {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: .2rem;
    }

    .medical-field-wrapper {
        grid-template-rows: 20rem;
    }

    .medical-field-section .medical-fields {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .medical-field-section .medical-fields .field {
        padding: .75rem 1rem;
        white-space: normal;
        text-overflow: clip;
    }

    .promotions {
        gap: .75rem;
    }

    .promotion {
        min-height: 13rem;
    }

    .promotion .content {
        width: min(68%, 16rem);
    }

    /* Catalogues and cards. */
    .medical-fields-grid,
    .medical-field-tiles,
    .doctors-grid,
    .related-services__grid,
    .news-wrapper {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }

    .medical-field-card,
    .related-service-card,
    .review-card,
    .accordion-item {
        padding: 1rem;
    }

    .medical-field-card {
        align-items: center;
    }

    .medical-field-card .icon-wrapper {
        flex: 0 0 auto;
    }

    .doctor-card {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        min-height: 9.5rem;
    }

    .doctor-card__photo {
        width: 100%;
        height: 100%;
        min-height: 9.5rem;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .doctor-card__body {
        gap: .4rem;
        padding: .875rem;
    }

    .doctor-card__name {
        font-size: 1rem;
    }

    .doctor-card__meta,
    .doctor-card__formats {
        gap: .35rem;
    }

    .slider-wrapper {
        margin-inline: -1rem;
        padding-inline: 1rem;
    }

    .slider .swiper-slide {
        width: min(84vw, 20rem);
    }

    /* Service pages: banner, steps, advantages and prices. */
    .cta-block {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
    }

    .cta-block__info {
        width: 100%;
        padding: 1.25rem 1rem;
    }

    .cta-block__actions,
    .file-card__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: .5rem;
    }

    .cta-block__actions .btn,
    .file-card__actions .btn {
        width: 100%;
    }

    .cta-block__media {
        width: 100%;
        max-height: 19rem;
        padding: 0 1rem;
        overflow: hidden;
    }

    .cta-block__media img {
        width: 100%;
        max-height: 19rem;
        object-fit: contain;
        object-position: center bottom;
    }

    .service {
        gap: 2.5rem;
    }

    .service-section {
        gap: 1rem;
    }

    .service-reasons,
    .service-preparation,
    .service-steps,
    .advantages {
        grid-template-columns: 1fr !important;
    }

    .service-reasons {
        display: grid;
        gap: 0;
    }

    .service-step {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: .875rem;
    }

    .service-preparation__card,
    .service-step {
        padding: 1rem;
    }

    .advantages .advantage-card {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        align-items: center;
        width: 100%;
        max-width: none;
        gap: .875rem;
    }

    .service-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .75rem 1rem;
        align-items: center;
        padding: 1rem;
    }

    .service-row__info {
        grid-column: 1 / -1;
    }

    .service-row__price {
        grid-column: 1;
        white-space: nowrap;
    }

    .service-row__cta,
    .service-row > .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .service-row__cta .btn {
        width: 100%;
    }

    .file-card {
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    /* Doctor detail page. */
    .doctor {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.25rem;
    }

    .doctor-title {
        font-size: clamp(1.65rem, 7vw, 2rem);
    }

    .doctor-hero {
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: .75rem 1rem;
    }

    .doctor-hero__photo {
        width: 6rem;
        height: 7.5rem;
    }

    .doctor-widget,
    .doctor-prices {
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        overflow-x: clip;
    }

    .doctor-widget {
        width: calc(100% + (2 * var(--container-pad)));
        max-width: none;
        margin-inline: calc(-1 * var(--container-pad));
    }

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

    /* Reviews and external aggregators. */
    .aggregators-section__grid {
        grid-template-columns: 1fr;
    }

    .aggregator-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .75rem;
        padding: 1rem;
    }

    .aggregator-card__mark {
        grid-column: 1 / -1;
        justify-self: start;
        width: min(11rem, 70%);
        height: 3rem;
        flex-basis: auto;
    }

    .aggregator-card__body {
        grid-column: 1;
    }

    .aggregator-card__arrow {
        grid-column: 2;
        align-self: center;
    }

    .yandex-reviews-section__head {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .yandex-reviews-section__widget iframe {
        width: 100%;
        height: 36rem;
    }

    /* Contacts and footer. */
    .contacts-page__intro {
        margin: 1.5rem 0;
    }

    .clinic-card {
        gap: 1rem;
        padding: 1rem;
    }

    .clinic-card__map iframe {
        min-height: 14rem;
    }

    .clinic-fact {
        gap: .75rem;
    }

    .clinic-fact__icon {
        width: 2.75rem;
        height: 2.75rem;
        flex-basis: 2.75rem;
    }

    .site-footer {
        margin-top: var(--mobile-section-gap);
        padding-block: 1.5rem;
    }

    .site-footer__top,
    .site-footer__menu,
    .site-footer__contact-list {
        gap: 1.5rem;
    }

    .site-footer__actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
    }

    .site-footer__social {
        min-width: 0;
    }
}

@media (max-width: 23.5rem) {
    .doctor-card {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .doctor-card__spec,
    .doctor-card__rating {
        font-size: .7rem;
    }

    .clinic-card,
    .medical-field-card,
    .related-service-card,
    .review-card {
        padding: .875rem;
    }
}