/*
 * AYUR Aesthetics — Services Page
 * Page ID: 2210
 *
 * Content remains editable through Elementor.
 * Design remains portable with the custom theme.
 */

body.page-id-2210:not(.elementor-editor-active) .ayur-main {
    background: #faf8f3;
    color: #064b3b;
}

/* Refined page headings */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .elementor-heading-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

body.page-id-2210:not(.elementor-editor-active)
.ayur-main h2.elementor-heading-title {
    color: #064b3b;
    font-size: clamp(36px, 4vw, 56px);
}

body.page-id-2210:not(.elementor-editor-active)
.ayur-main h3.elementor-heading-title {
    color: #064b3b;
    font-size: clamp(25px, 2.4vw, 35px);
}

/* Treatment photographs */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .service-image {
    overflow: hidden;
    border-radius: 18px;
    transition: transform .35s ease, box-shadow .35s ease;
}

body.page-id-2210:not(.elementor-editor-active)
.ayur-main .service-image img {
    border-radius: 18px;
    transition: transform .5s ease;
}

/* Existing treatment buttons */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .elementor-button {
    border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Gentle interactive effects */
@media (hover: hover) and (pointer: fine) {
    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .service-image:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 38px rgba(0, 55, 43, .13);
    }

    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .service-image:hover img {
        transform: scale(1.025);
    }

    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .elementor-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 55, 43, .12);
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main h2.elementor-heading-title {
        font-size: 38px;
    }

    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .service-image {
        border-radius: 14px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.page-id-2210 .ayur-main .service-image,
    body.page-id-2210 .ayur-main .service-image img,
    body.page-id-2210 .ayur-main .elementor-button {
        transition: none !important;
        transform: none !important;
    }
}

/* =====================================================
   AYUR SERVICES — WIDER EDITORIAL LAYOUT
   ===================================================== */

/* Expand Elementor's boxed content areas */
@media (min-width: 1025px) {
    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .e-con-boxed > .e-con-inner {
        --content-width: 1240px;
        max-width: 1240px;
        width: calc(100% - 64px);
    }
}

/* Keep category sections comfortably spaced */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .elementor-widget-heading h2 {
    margin-bottom: 12px;
}

/* Make the treatment cards feel more substantial */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .service-image {
    min-height: 340px;
    border-radius: 20px;
    isolation: isolate;
}

/* Improve text readability over photographs */
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .service-image .elementor-heading-title,
body.page-id-2210:not(.elementor-editor-active)
.ayur-main .service-image .elementor-widget-text-editor {
    color: #fff;
}

/* Consistent mobile layout */
@media (max-width: 767px) {
    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .service-image {
        min-height: 310px;
    }

    body.page-id-2210:not(.elementor-editor-active)
    .ayur-main .e-con-boxed > .e-con-inner {
        width: calc(100% - 32px);
    }
}