/**
 * ElevateSol responsive polish — mobile & tablet layouts
 * Loaded after elevatesol-pro.css and vex.css
 */

/* ── Global ─────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.common-front {
    overflow-x: hidden;
    max-width: 100vw;
}

.common-front img:not([width]) {
    max-width: 100%;
    height: auto;
}

.common-front table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.common-front .container {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
}

@media (min-width: 576px) {
    .common-front .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Remove legacy side-panel drawer (replaced by main nav + contact CTA) */
.side_panel_sidebar_parent,
.fixed-sidebar-menu-holder,
.fixed-sidebar-menu-overlay {
    display: none !important;
}

/* Anchor offset for fixed header */
[id] {
    scroll-margin-top: 88px;
}

/* ── Mobile nav overlay ─────────────────────────────────── */
.es-mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.es-mobile-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.es-menu-open {
    overflow: hidden;
}

/* ── Header (≤1200px) ───────────────────────────────────── */
@media (max-width: 1200px) {
    .header__content__venor {
        height: 70px;
        padding: 0 16px;
    }

    .header__logo {
        margin-left: 0;
        margin-right: auto;
    }

    .header__logo img {
        max-height: 36px;
        width: auto;
    }

    .header__actions__venor {
        margin-right: 46px;
        gap: 8px;
    }

    .header__action-btn--start-project {
        padding: 0 12px !important;
        font-size: 13px !important;
        height: 34px !important;
        line-height: 34px !important;
    }

    .header__btn__venor {
        right: 16px;
        z-index: 100;
    }

    /* Fix black sliver: vex uses translate3d(281px) but panel width varies */
    .header__menu__venor {
        width: min(300px, 88vw);
        padding: 20px 18px 28px;
        overflow-y: auto;
        max-height: calc(100vh - 70px);
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%) !important;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s ease, visibility 0.35s ease;
    }

    .header__menu__venor.header__menu__venor--active {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }

    .header__nav-item {
        margin-bottom: 10px;
        height: auto !important;
        width: 100%;
    }

    .header__nav-link {
        font-size: 15px;
        line-height: 1.45;
        height: auto;
        padding: 6px 0;
    }

    .es-nav-mobile-cta {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .es-nav-mobile-cta-btn {
        display: block !important;
        width: 100%;
        text-align: center;
        margin: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .header__action.header__action--signin {
        display: block;
    }
}

@media (max-width: 767px) {
    .header__action.header__action--signin {
        display: none;
    }
}

@media (min-width: 1201px) {
    .es-nav-mobile-cta {
        display: none !important;
    }

    .es-mobile-nav-overlay {
        display: none !important;
    }
}

/* ── Legacy section typography ──────────────────────────── */
.portfolio-section h3,
.blog-section .blog-section-title,
.typed-section h3 {
    font-size: clamp(1.625rem, 4.5vw, 2.75rem) !important;
    line-height: 1.2 !important;
}

.portfolio-section h4 span,
.blog-section .blog-section-subtitle span {
    font-size: 12px;
}

.portfolio-section,
.blog-section.es-home-blog {
    padding: clamp(48px, 8vw, 70px) 0;
}

.portfolio-section h3,
.blog-section .blog-section-title {
    margin-bottom: 1.75rem;
}

/* ── Typed CTA band ─────────────────────────────────────── */
.typed-section {
    padding: clamp(40px, 7vw, 55px) 0;
}

.typed-section h2 {
    font-size: 13px;
    margin-bottom: 0.5rem;
}

.typed-section h3 {
    margin-bottom: 1rem;
}

.typed-section H4,
.typed-section h4.parent-typed-text {
    font-size: clamp(1rem, 3vw, 1.125rem) !important;
    line-height: 1.55 !important;
    height: auto !important;
    max-width: none;
    margin-bottom: 1.25rem;
}

.typed-section a.btn.btn-style1 {
    margin-top: 0;
}

@media (max-width: 991px) {
    .typed-section .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .typed-section .col-md-6.text-left {
        text-align: left !important;
    }
}

/* ── Footer ─────────────────────────────────────────────── */
.footer-section .footer-wrapper {
    padding: clamp(40px, 7vw, 60px) 15px clamp(30px, 5vw, 40px);
}

.footer-section .footer-wrapper .col-md-3 {
    margin-bottom: 2rem;
}

.footer-section h4.title {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    line-height: 1.35;
}

.footer-section .menu-quick-link-container ul li a {
    font-size: 14px;
    line-height: 1.6;
}

.container-copyright .copyright-text {
    text-align: center;
    padding: 0 16px;
}

.container-copyright .copyright-text p {
    font-size: 13px;
    line-height: 1.6;
}

/* ── Grids & cards ──────────────────────────────────────── */
@media (max-width: 991px) {
    .es-case-grid,
    .es-case-grid--2,
    .es-case-grid--3,
    .es-portfolio-grid,
    .es-results-cards,
    .es-features-grid,
    .es-process-grid,
    .es-about-values-grid,
    .es-team-grid,
    .es-testimonial-grid,
    .es-services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .es-home-cases-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .es-home-trust-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .es-clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .es-portfolio-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 2rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .es-portfolio-filters::-webkit-scrollbar {
        display: none;
    }

    .es-filter {
        flex-shrink: 0;
    }

    .es-cta-inner {
        text-align: center;
    }

    .es-cta-actions {
        width: 100%;
        justify-content: center;
    }

    .es-cta-actions .btn,
    .es-cta-actions .es-btn-ghost {
        flex: 1 1 auto;
        min-width: 140px;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .es-home-trust-stats,
    .es-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .es-home-trust-stat {
        padding: 1rem 0.75rem;
    }

    .es-home-trust-stat strong {
        font-size: 1.375rem;
    }

    .es-stat-value {
        font-size: 1.5rem;
    }

    .es-clients-grid {
        grid-template-columns: 1fr 1fr;
    }

    .es-client-logo {
        min-height: 96px;
        padding: 1rem 0.75rem;
    }

    .es-client-logo img {
        max-width: 100px;
        max-height: 36px;
    }

    .es-client-name {
        font-size: 0.6875rem;
    }
}

/* ── Homepage hero ──────────────────────────────────────── */
@media (max-width: 991px) {
    .es-home-hero {
        min-height: auto;
        padding: 92px 0 56px;
    }

    .es-home-hero--carousel {
        padding: 88px 0 0;
    }

    .es-home-hero-scroll {
        display: none;
    }

    .es-home-hero-visual {
        order: -1;
        max-width: 420px;
        margin: 0 auto;
    }

    .es-home-hero-content {
        text-align: center;
    }

    .es-home-hero-actions,
    .es-home-hero-trust {
        justify-content: center;
    }

    .es-home-hero-trust {
        gap: 0.65rem 1.25rem;
    }
}

@media (max-width: 575px) {
    .es-home-hero {
        padding: 84px 0 48px;
    }

    .es-home-hero--carousel {
        padding: 84px 0 0;
    }

    .es-home-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .es-home-hero-actions .btn,
    .es-home-hero-actions .es-btn-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .es-home-hero-trust {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .es-home-about-actions {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .es-home-about-actions .btn,
    .es-home-about-actions .es-btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

    .es-home-about-content {
        width: 100%;
        min-width: 0;
    }

    .es-home-about-grid {
        min-width: 0;
    }

    .es-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .es-hero-actions .btn,
    .es-hero-actions .es-btn-ghost {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .es-cta-actions {
        flex-direction: column;
    }

    .es-cta-actions .btn,
    .es-cta-actions .es-btn-ghost {
        width: 100%;
    }
}

/* ── Section spacing ────────────────────────────────────── */
@media (max-width: 767px) {
    .es-home-about,
    .es-home-trust,
    .es-home-cases,
    .es-services-fast,
    .es-why-choose,
    .es-case-studies-list,
    .es-featured-cases,
    .es-related-cases,
    .es-about-story,
    .es-about-values,
    .es-about-process,
    .es-about-specialties,
    .es-about-team,
    .es-about-clients,
    .es-clients-strip,
    .es-about-testimonials,
    .es-article,
    .es-blog-list,
    .es-portfolio-page,
    .es-project-detail,
    .es-service-intro,
    .es-service-section,
    .es-features-grid-section,
    .es-process-section,
    .es-cta,
    .es-results-page,
    .es-case-detail {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .es-section-header {
        margin-bottom: 1.75rem;
    }

    .es-mini-slides {
        grid-template-columns: 1fr;
    }
}

/* ── Blog listing cards ─────────────────────────────────── */
@media (max-width: 575px) {
    .es-blog-card-body {
        padding: 1.25rem;
    }

    .es-blog-card-body h2 {
        font-size: 1.125rem;
    }

    .es-article-body {
        font-size: 1rem;
    }

    .es-article-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ── Contact page ───────────────────────────────────────── */
.banner-section {
    padding: clamp(100px, 18vw, 200px) 0 clamp(48px, 8vw, 80px) !important;
    background-position: center !important;
    background-size: cover !important;
}

h1.banner-title {
    font-size: clamp(1.75rem, 6vw, 2.875rem) !important;
    line-height: 1.15 !important;
    max-width: none;
}

p.banner-desc {
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
    line-height: 1.65;
    max-width: none;
}

.iframe-contact {
    padding: clamp(40px, 7vw, 60px) 0;
}

.iframe-contact h3 {
    font-size: clamp(1.375rem, 4vw, 2rem);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

.iframe-contact .row > [class*="col-"] {
    margin-bottom: 1.5rem;
}

.iframe-contact .contact-element-wrapper {
    margin-bottom: 1rem;
}

.contact-map {
    margin-top: 0;
    line-height: 0;
}

.contact-map iframe,
.contact-map embed,
.contact-map object {
    width: 100% !important;
    max-width: 100%;
    min-height: 280px;
    height: clamp(280px, 50vw, 420px) !important;
    border: 0;
}

/* ── Floating UI (WhatsApp + scroll top) ────────────────── */
@media (max-width: 767px) {
    .progress-wrap {
        right: 16px;
        bottom: 88px;
        width: 44px;
        height: 44px;
    }

    .codeless-add-purchase-button {
        bottom: 16px;
        right: 16px;
        height: 56px;
        padding-right: 6px;
    }

    .codeless-add-purchase-button i.icon {
        height: 44px;
        width: 44px;
        margin: 6px;
    }

    .codeless-add-purchase-button i.icon svg {
        height: 24px;
    }

    .codeless-add-purchase-button i.icon:after {
        height: 56px;
        width: 56px;
    }
}

/* Cookie consent bar */
@media (max-width: 575px) {
    .cookie-consent {
        padding: 12px 16px;
    }

    .cookie-consent__message {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    button.js-cookie-consent-agree.cookie-consent__agree {
        width: 100%;
        margin: 8px 0 0;
    }
}

/* ── Touch targets ──────────────────────────────────────── */
@media (max-width: 991px) {
    .btn.btn-style1,
    .es-btn-ghost,
    .es-btn-outline,
    .es-filter,
    .header__nav-link {
        min-height: 44px;
    }

    .header__nav-link.es-nav-dropdown-toggle {
        display: flex !important;
        align-items: center;
    }
}

/* ── Desktop refinements ────────────────────────────────── */
@media (min-width: 1201px) {
    .common-front .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .common-front .container {
        max-width: 1200px;
    }
}

/* ── Pricing page ───────────────────────────────────────── */
@media (max-width: 991px) {
    .pricing-elements {
        padding: 48px 0;
    }

    .pricing-elements .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    .pricing-elements h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.25;
    }

    .venor-price-box {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Search & legacy project pages ──────────────────────── */
@media (max-width: 767px) {
    .project-content .col-md-4,
    .project-content .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .members-section .col-md-3,
    .members-section .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    .post-body,
    .entry-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    .post-body img,
    .entry-content img {
        max-width: 100%;
        height: auto;
    }
}