@media (max-width: 992px) {

    .page-layout {

        flex-direction: column;
        align-items: stretch;

        gap: 25px;

    }

    .right-sidebar {

        width: 100%;
        min-width: 100%;
        max-width: 700px;

        margin: 0 auto;

        order: 2;

    }

    .site-content {

        order: 1;
        width: 100%;
        min-width: 0;
        padding-right: 0;

    }

    .sidebar-card {

        width: 100%;

    }
    

}

@media (max-width: 1200px) {

    .right-sidebar {

        width: 320px;
        min-width: 320px;

    }

    .sidebar-card {

        padding: 18px;

    }

    #appointments-calendar {

        width: 100%;

    }

}

@media (max-width: 768px) {

    .right-sidebar {

        max-width: 100%;

    }

    .sidebar-card {

        padding: 16px;

    }

    .sidebar-card h3 {

        font-size: 20px;

    }

    .appointment-card {

        padding: 14px;

    }

    .appointment-service {

        font-size: 16px;

    }

    .appointment-time,
    .appointment-master {

        font-size: 14px;

    }

}

@media (max-width: 480px) {

    .sidebar-card {

        padding: 12px;

    }

    .cancel-btn {

        width: 100%;

    }

}

@media (max-width: 1200px) {

    body[data-client-authenticated="true"] .articles {
        width: min(900px, calc(100% - 350px));
        margin-right: 350px;
    }

}

@media (max-width: 992px) {

    body[data-client-authenticated="true"] .articles,
    .articles {
        width: 100%;
        margin-inline: auto;
    }

    .right-sidebar {
        position: sticky;
        top: 8px;
        right: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        overflow-x: hidden;
        overflow-y: auto;
        order: -1;
        align-self: stretch;
        z-index: 1000;
        padding: 8px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 24px;
        background: rgba(247, 245, 242, 0.96);
        box-shadow: 0 14px 38px rgba(43, 35, 24, 0.16);
        backdrop-filter: blur(12px);
    }

    .right-sidebar .sidebar-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .site-content {
        order: 1;
    }

}

@media (max-width: 768px) {

    .page-layout {
        width: calc(100% - 24px);
        margin: 24px auto;
        gap: 20px;
    }

    .articles .vk-gallery {
        aspect-ratio: 4 / 3;
    }

    .articles .vk-gallery-btn {
        width: 34px;
        height: 34px;
    }

    .article-video-player {
        border-radius: 14px;
    }

    .article-video-controls {
        gap: 6px;
        min-height: 58px;
        padding: 18px 10px 8px;
    }

    .article-video-button {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    .article-video-volume-wrap {
        display: none;
    }

    .article-rich-text .ql-indent-4,
    .article-rich-text .ql-indent-5,
    .article-rich-text .ql-indent-6,
    .article-rich-text .ql-indent-7,
    .article-rich-text .ql-indent-8 {
        margin-left: 3em;
    }

}

@media (max-width: 520px) {

    .articles .vk-post {
        border-radius: 13px;
    }

    .article-video-time {
        font-size: 11px;
    }

    .article-video-mute {
        display: none;
    }

    .vk-footer,
    .vk-actions {
        flex-wrap: wrap;
    }

    .comment-form {
        flex-direction: column;
    }

    .comment-form input[type="text"],
    .comment-form button[type="submit"] {
        width: 100%;
    }

    .comment-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

}

@media (max-width: 640px) {

    .right-sidebar {
        top: 6px;
        max-height: calc(100dvh - 12px);
        padding: 6px;
        border-radius: 18px;
    }

    .right-sidebar .sidebar-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .right-sidebar .sidebar-card {
        padding: 14px;
        border-radius: 16px;
    }

    .right-sidebar .sidebar-card h3 {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .right-sidebar .appointment-card {
        padding: 12px;
    }

    .right-sidebar .cancel-btn {
        margin-top: 14px;
        padding: 11px;
        font-size: 15px;
    }

}

@media (hover: none) {

    .articles .card:hover {
        transform: none;
    }

}