/* =========================================================
   AIVITA Mobile Responsive Fixes
   Applies only to tablet / mobile screens.
   Do not affect desktop layout.
========================================================= */

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box;
    }

    img,
    iframe,
    video {
        max-width: 100%;
    }

    /* -----------------------------
       General Page Containers
    ----------------------------- */

    .page-content,
    .contact-content,
    .main-content {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .portfolio-item,
    .contact-section {
        padding: 22px 16px !important;
        border-radius: 14px !important;
    }

    h1,
    h2,
    h3 {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* -----------------------------
       Home Page
    ----------------------------- */

    .main-hero {
        min-height: 72vh !important;
        height: auto !important;
        padding: 100px 22px 50px !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    .hero-content h2 {
        font-size: clamp(2rem, 9vw, 3.2rem) !important;
        line-height: 1.15 !important;
    }

    .hero-content h3 {
        font-size: clamp(1.1rem, 5vw, 1.6rem) !important;
        line-height: 1.35 !important;
    }

    .content-section {
        width: calc(100% - 28px) !important;
        margin: 30px auto !important;
        padding: 0 !important;
    }

    .content-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .clinic-image,
    .clinic-description {
        width: 100% !important;
        max-width: 100% !important;
    }

    .clinic-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    .clinic-description p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .video-wrapper,
    .video-container {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

    .quote-section {
        padding: 35px 18px !important;
    }

    .quote-container p {
        font-size: 1.35rem !important;
        line-height: 1.45 !important;
    }

    /* -----------------------------
       Services Page
    ----------------------------- */

    .services-page .services-hero,
    .services-page .services-hero.detox-hero,
    .services-page .services-hero.experience-hero,
    .services-page .services-hero.rejuvenation-hero,
    .services-page .ipsc-family-hero.services-hero.rejuvenation-hero,
    .services-page .aesthetic-wellness-hero.services-hero.rejuvenation-hero {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 52px 0 !important;
        overflow: hidden !important;
    }

    .services-page .services-hero:first-of-type {
        margin-top: 110px !important;
    }

    .services-page .services-content-wrapper {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        background: transparent !important;
    }

    .services-page .services-image-container,
    .services-page .services-text-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .services-page .services-image-container {
        height: 260px !important;
        max-height: 260px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        order: 1 !important;
    }

    .services-page .services-text-container {
        order: 2 !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
    }

    .services-page .services-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    .services-page .services-title {
        font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .services-page .services-subtitle {
        font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }

    .services-page .services-description {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        text-align: left !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .service-items-section,
    #service-items-section.service-items-section,
    #aesthetic-items-section.service-items-section {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 42px 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .service-items-container,
    #service-items-section .service-items-container,
    #aesthetic-items-section .service-items-container {
        width: calc(100% - 28px) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        justify-items: center !important;
    }

    .service-item,
    #service-items-section .service-item,
    #aesthetic-items-section .service-item {
        width: 100% !important;
        max-width: 320px !important;
        height: 170px !important;
        min-height: 170px !important;
        flex: none !important;
        margin: 0 auto !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .service-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .service-item span {
        width: 86% !important;
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .palm-bg-wrapper {
        margin-top: 0 !important;
        padding: 42px 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .palm-bg-wrapper .services-cards-section,
    .palm-bg-wrapper .palm-bg {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    .palm-bg-wrapper .services-cards-container {
        width: calc(100% - 28px) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        transform: none !important;
    }

    .palm-bg-wrapper .service-card {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 20px 18px !important;
        transform: none !important;
    }

    .palm-bg-wrapper .service-card h3 {
        font-size: 1.12rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .palm-bg-wrapper .service-card p {
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
    }

    .experience-hero .services-text-container ul {
        padding-left: 20px !important;
        text-align: left !important;
    }

    /* -----------------------------
       News / Event Gallery
    ----------------------------- */

    .news-intro-section {
        min-height: 70vh !important;
        padding: 100px 18px 50px !important;
    }

    .news-intro-content h2 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.15 !important;
    }

    .news-intro-content h3 {
        font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
    }

    .news-intro-content p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .intro-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .intro-btn {
        width: min(100%, 280px) !important;
        text-align: center !important;
    }

    .success-stories-section,
    .event-photos-section {
        padding: 45px 14px !important;
    }

    .vertical-carousel-container,
    .story-content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .story-image,
    .story-details {
        width: 100% !important;
        max-width: 100% !important;
    }

    .story-image img {
        height: 240px !important;
        object-fit: cover !important;
    }

    .event-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 0 4px 12px !important;
        margin-bottom: 24px !important;
        scroll-snap-type: x mandatory !important;
    }

    .event-filter-btn {
        flex: 0 0 auto !important;
        min-width: 160px !important;
        max-width: 220px !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 0.86rem !important;
        line-height: 1.25 !important;
        scroll-snap-align: start !important;
    }

    .event-gallery-block {
        width: 100% !important;
        padding: 22px 14px !important;
        border-radius: 18px !important;
    }

    .event-gallery-header h3 {
        font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }

    .event-gallery-slider {
        height: 240px !important;
        border-radius: 14px !important;
    }

    .event-gallery-prev,
    .event-gallery-next {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.55rem !important;
    }

    .event-collage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .event-collage-item {
        border-radius: 10px !important;
    }

    .event-video-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .event-video-frame {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 14px !important;
    }

    .event-video-text,
    .event-gallery-text {
        padding: 18px 14px !important;
        margin-top: 18px !important;
    }

    .event-gallery-text p {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .story-modal .modal-content,
    .team-modal .modal-content,
    .service-modal-content {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        max-height: 86vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .modal-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .modal-image,
    .modal-text {
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal-image img {
        max-height: 280px !important;
        object-fit: cover !important;
    }

    /* -----------------------------
       About Us
    ----------------------------- */

    .about-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .about-image,
    .about-text {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    .about-text h3 {
        font-size: 1.55rem !important;
        line-height: 1.3 !important;
    }

    .about-text p,
    .about-text li {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .slider-container,
    .slide img,
    .slide iframe {
        height: 260px !important;
        max-height: 260px !important;
        object-fit: cover !important;
    }

    .team-section {
        padding: 28px 0 !important;
    }

    .team-title {
        font-size: 1.7rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .team-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    .team-member {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .team-member img {
        width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
    }

    .location-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .location-image,
    .location-text {
        width: 100% !important;
        max-width: 100% !important;
    }

    .location-text {
        text-align: left !important;
    }

    .location-text h4 {
        text-align: center !important;
        font-size: 1.45rem !important;
    }

    .location-detail-item {
        padding: 18px 0 !important;
    }

    /* -----------------------------
       Collaboration
    ----------------------------- */

    .collaboration-content {
        padding: 18px 0 !important;
    }

    .partner-logo-row {
        flex-direction: column !important;
        gap: 18px !important;
        padding: 22px 16px !important;
    }

    .partner-logo-card {
        width: min(100%, 260px) !important;
        min-height: 110px !important;
    }

    /* -----------------------------
       Contact / Booking
    ----------------------------- */

    .location-flex,
    .contact-info,
    .booking-form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .map-container iframe {
        height: 300px !important;
    }

    .entrance-guide-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        font-size: 1rem !important;
    }

    .submit-button {
        width: 100% !important;
        min-height: 46px !important;
    }

    /* -----------------------------
       Footer
    ----------------------------- */

    .static-footer {
        padding: 22px 16px 26px !important;
        text-align: center !important;
    }

    .footer-container,
    .footer-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer-info p,
    .footer-bottom p {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 108px !important;
    }

    .services-page .services-hero:first-of-type {
        margin-top: 95px !important;
    }

    .services-page .services-image-container {
        height: 220px !important;
        max-height: 220px !important;
    }

    .services-page .services-hero-image {
        max-height: 220px !important;
    }

    .service-item,
    #service-items-section .service-item,
    #aesthetic-items-section .service-item {
        max-width: 300px !important;
        height: 155px !important;
        min-height: 155px !important;
    }

    .palm-bg-wrapper .service-card {
        padding: 18px 16px !important;
    }

    .event-gallery-slider {
        height: 210px !important;
    }

    .event-collage-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .team-member img {
        height: 240px !important;
    }

    .slider-container,
    .slide img,
    .slide iframe {
        height: 230px !important;
        max-height: 230px !important;
    }
}

/* =========================================================
   Final Mobile Fix: Experience image should not be cropped
========================================================= */

@media (max-width: 768px) {
    body.services-page .services-hero.experience-hero {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 45px 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    body.services-page .services-hero.experience-hero .services-content-wrapper {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 22px !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.services-page .services-hero.experience-hero .services-image-container {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        transform: none !important;
        border-radius: 16px !important;
        background: transparent !important;
    }

    body.services-page .services-hero.experience-hero .services-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: top center !important;
        transform: none !important;
        border-radius: 16px !important;
    }

    body.services-page .services-hero.experience-hero .services-text-container {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        overflow: visible !important;
        transform: none !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    body.services-page .services-hero.experience-hero {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 36px 0 !important;
        overflow: visible !important;
    }

    body.services-page .services-hero.experience-hero .services-content-wrapper {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.services-page .services-hero.experience-hero .services-image-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.services-page .services-hero.experience-hero .services-hero-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: top center !important;
        transform: none !important;
    }

    body.services-page .services-hero.experience-hero .services-text-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        transform: none !important;
    }
}