/*
 * Mobile Responsive Styles for Edinburgh Weight Clinic
 * Critical for 80% mobile users
 */

/* General fixes for all screen sizes */

/* Force remove padding from cards that should have no padding */
.ewc-card[style*="padding: 0"] {
    padding: 0 !important;
}

/* Ensure images in cards touch borders */
.ewc-card[style*="padding: 0"] > div:first-child {
    margin: 0 !important;
    padding: 0 !important;
}

.ewc-card[style*="padding: 0"] > div:first-child img {
    display: block !important;
    border-radius: 0 !important;
}

/* Center text in review cards */
.ewc-reviews-masonry .ewc-card {
    text-align: center !important;
}

.ewc-reviews-masonry .ewc-card > div:first-child {
    justify-content: center !important;
}

.ewc-reviews-masonry .ewc-card p {
    text-align: center !important;
}

/* Center text in expert opinion cards */
section div[style*="repeat(auto-fit, minmax(500px"] .ewc-card {
    text-align: center !important;
}

section div[style*="repeat(auto-fit, minmax(500px"] .ewc-card blockquote,
section div[style*="repeat(auto-fit, minmax(500px"] .ewc-card p {
    text-align: center !important;
}

/* Remove bottom padding from booking iframe */
#booking iframe {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#booking .ewc-card {
    line-height: 0 !important;
}

/* Tablet breakpoint (768px and below) */
@media (max-width: 768px) {

    /* Show hamburger, hide desktop nav on tablet too */
    .ewc-desktop-nav {
        display: none !important;
    }

    .ewc-hamburger {
        display: flex !important;
    }

    /* Hero Section - Stack columns */
    section:first-of-type > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Hero text padding */
    section:first-of-type {
        padding: 2rem 1rem !important;
    }

    /* Stats Section - Remove borders on mobile, stack better */
    section:nth-of-type(2) > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    section:nth-of-type(2) > div > div > div[style*="border-left"] {
        border-left: none !important;
        border-right: none !important;
        border-top: 2px solid rgba(255,255,255,0.2) !important;
        border-bottom: 2px solid rgba(255,255,255,0.2) !important;
        padding: 2rem 1rem !important;
    }

    /* Trust badges - stack */
    section:nth-of-type(3) > div > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Why Choose Us - 2 columns on tablet */
    .ewc-card {
        padding: 2rem 1.5rem !important;
    }

    /* Reviews - 2 columns on tablet */
    .ewc-reviews-masonry {
        column-count: 2 !important;
        column-gap: 1.5rem !important;
    }

    /* Expert quotes - stack */
    section div[style*="repeat(auto-fit, minmax(500px"] {
        grid-template-columns: 1fr !important;
    }

    /* What to Expect Timeline - stack image and text */
    div[style*="grid-template-columns: 350px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 350px 1fr"] > div:first-child {
        height: 300px !important;
    }

    div[style*="grid-template-columns: 350px 1fr"] > div:last-child {
        padding: 2rem !important;
    }

    /* About section - stack */
    section div[style*="grid-template-columns: 500px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Contact/Location - stack map and details */
    .ewc-contact-layout {
        grid-template-columns: 1fr !important;
    }

    /* Medications/Injections grid */
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Section padding reduction */
    section {
        padding: 3rem 1rem !important;
    }

    /* Heading sizes */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.35rem !important;
    }

    /* Stats font sizes */
    div[style*="font-size: 5.5rem"] {
        font-size: 3.5rem !important;
    }

    /* Buttons */
    .ewc-btn {
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
    }

    /* Price badge */
    div[style*="Prices from just"] {
        padding: 0.75rem 1.5rem !important;
        border-radius: 30px !important;
    }

    div[style*="Prices from just"] span[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
}

/* Mobile breakpoint (480px and below) */
@media (max-width: 480px) {

    /* Footer credits - stack on mobile */
    .ewc-footer-content > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    /* CENTER ALL TEXT ON MOBILE */
    section,
    div,
    p,
    h1, h2, h3, h4, h5, h6,
    li {
        text-align: center !important;
    }

    /* Exception: Keep left-aligned for specific elements */
    .ewc-card p[style*="text-align: left"] {
        text-align: center !important;
    }

    /* Header */
    .ewc-header {
        padding: 0.5rem 0.5rem !important;
    }

    .ewc-header-content {
        padding: 0.75rem 0.75rem !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .ewc-header::before {
        left: 0.5rem !important;
        right: 0.5rem !important;
    }

    /* Hide desktop nav, show hamburger */
    .ewc-desktop-nav {
        display: none !important;
    }

    .ewc-hamburger {
        display: flex !important;
        flex-shrink: 0 !important;
    }

    /* Logo sizing - smaller on mobile to fit with hamburger */
    .ewc-header-content > .ewc-logo,
    .ewc-header-content > .custom-logo-link {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .ewc-logo,
    .custom-logo-link {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .ewc-logo img,
    .custom-logo-link img {
        max-height: 45px !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        display: block !important;
    }

    .ewc-header-content > .ewc-hamburger {
        flex: 0 0 35px !important;
        width: 35px !important;
        padding: 0.25rem !important;
        margin-left: 0.5rem !important;
    }

    .ewc-hamburger span {
        width: 22px !important;
        height: 2.5px !important;
    }

    /* Hero section */
    section:first-of-type {
        padding: 1.5rem 1rem !important;
    }

    /* Hero card padding */
    section:first-of-type div[style*="padding: 3rem"] {
        padding: 2rem 1.5rem !important;
    }

    section:first-of-type h2[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }

    /* Feature list spacing */
    div[style*="display: flex"][style*="gap: 1rem"] span {
        font-size: 0.95rem !important;
    }

    /* Stats section */
    section:nth-of-type(2) {
        padding: 2rem 1rem !important;
    }

    div[style*="font-size: 5.5rem"] {
        font-size: 2.5rem !important;
    }

    div[style*="font-size: 1.5rem"][style*="font-weight: 700"] {
        font-size: 1.25rem !important;
    }

    /* Reviews - single column on mobile */
    .ewc-reviews-masonry {
        column-count: 1 !important;
    }

    /* Why Choose Us - single column */
    div[style*="repeat(auto-fit, minmax(260px"] {
        grid-template-columns: 1fr !important;
    }

    /* How It Works - single column */
    div[style*="repeat(auto-fit, minmax(320px"] {
        grid-template-columns: 1fr !important;
    }

    /* Card padding */
    .ewc-card {
        padding: 1.5rem 1rem !important;
    }

    /* Section padding */
    section {
        padding: 2.5rem 1rem !important;
    }

    /* Font sizes */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    p {
        font-size: 0.95rem !important;
    }

    /* Buttons */
    .ewc-btn {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.25rem !important;
    }

    /* CTA button container */
    div[style*="display: flex"][style*="gap: 1rem"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
    }

    div[style*="display: flex"][style*="gap: 1rem"][style*="flex-wrap: wrap"] a {
        width: 100% !important;
        text-align: center !important;
    }

    /* Pricing badge */
    div[style*="Prices from just"] {
        padding: 0.625rem 1.25rem !important;
    }

    div[style*="Prices from just"] span:first-child {
        font-size: 0.875rem !important;
    }

    div[style*="Prices from just"] span[style*="font-size: 2rem"] {
        font-size: 1.35rem !important;
    }

    /* Timeline badges */
    div[style*="position: absolute"][style*="Week"] {
        top: 10px !important;
        left: 1rem !important;
        font-size: 0.75rem !important;
        padding: 0.375rem 1rem !important;
    }

    /* Step circles */
    div[style*="width: 100px"][style*="height: 100px"][style*="border-radius: 50%"] {
        width: 80px !important;
        height: 80px !important;
    }

    div[style*="width: 100px"][style*="height: 100px"][style*="border-radius: 50%"] span {
        font-size: 2.5rem !important;
    }

    /* FAQ */
    details summary {
        font-size: 1.05rem !important;
    }

    /* Notice box with exclamation */
    div[style*="display: flex"][style*="gap: 1rem"] p {
        font-size: 0.95rem !important;
    }

    /* Contact buttons */
    div[style*="flex-direction: column"] a {
        font-size: 0.95rem !important;
    }

    /* Map height on mobile */
    iframe[src*="google.com/maps"] {
        min-height: 300px !important;
    }

    /* Booking iframe */
    iframe[src*="semble.io"] {
        height: 600px !important;
    }
}

/* Very small phones (360px and below) */
@media (max-width: 360px) {

    /* Extra compact spacing */
    section {
        padding: 2rem 0.75rem !important;
    }

    .ewc-card {
        padding: 1.25rem 0.875rem !important;
    }

    /* Smaller text */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    h3 {
        font-size: 1.15rem !important;
    }

    p, li {
        font-size: 0.9rem !important;
    }

    /* Stats */
    div[style*="font-size: 5.5rem"],
    div[style*="font-size: 3.5rem"],
    div[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }

    /* Buttons */
    .ewc-btn {
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
    }

    /* Price badge */
    div[style*="Prices from just"] span[style*="font-size: 2rem"],
    div[style*="Prices from just"] span[style*="font-size: 1.35rem"] {
        font-size: 1.15rem !important;
    }
}

/* Landscape phones */
@media (max-width: 812px) and (orientation: landscape) {

    /* Reduce vertical padding in landscape */
    section {
        padding: 2rem 1rem !important;
    }

    /* Hero card */
    section:first-of-type div[style*="padding: 3rem"] {
        padding: 1.5rem !important;
    }

    /* Step circles smaller in landscape */
    div[style*="width: 100px"][style*="height: 100px"] {
        width: 70px !important;
        height: 70px !important;
    }
}