/* =============================================================
   Ayodeji Ajadi Portfolio - Responsive Overrides
   Breakpoints aligned to Cunnet design system:
   Mobile: <= 767px | Tablet: 768-991px | Desktop: >= 1200px
   ============================================================= */

/* ---- Global Box Sizing & Overflow Prevention ---- */
*, *::before, *::after {
    box-sizing: border-box;
}
body, .elementor-section-wrap {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---- Elementor Container Base ---- */
.elementor-element.elementor-container {
    max-width: 100%;
}

/* ---- HEADER RESPONSIVE ---- */
@media (max-width: 991px) {
    .tp-header-area .elementor-widget-container {
        padding: 12px 20px;
    }
    /* Ensure header nav doesn't overflow */
    .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a {
        padding: 10px 12px;
    }
}

@media (max-width: 767px) {
    /* Mobile header - ensure hamburger is visible */
    .tp-header-area {
        padding: 10px 15px !important;
    }
    .elementor-menu-toggle {
        display: flex !important;
    }
    /* Force horizontal header menu to hide on mobile (hamburger shows) */
    .elementor-nav-menu--main .elementor-nav-menu {
        display: none;
    }
    .elementor-nav-menu--main .elementor-nav-menu--indicator {
        display: block;
    }
}

/* ---- HERO SECTION RESPONSIVE ---- */
@media (max-width: 991px) {
    /* Hero: portrait image */
    #hero-left-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #hero-middle-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 3;
    }
    #hero-right-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Hero image fits full width */
    #hero-profile-avatar .elementor-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
    }
    /* Hero video fits container */
    #hero-loop-video .elementor-video-container {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Hero headings scale down */
    #hero-main-title .elementor-heading-title {
        font-size: clamp(32px, 8vw, 60px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.5px !important;
    }
    #hero-intro-subtitle .elementor-heading-title {
        font-size: clamp(18px, 5vw, 28px) !important;
    }
    /* Hero buttons stack */
    #hero-buttons-row.e-con {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #hero-buttons-row .elementor-widget-button {
        width: 100% !important;
    }
    #hero-buttons-row .elementor-button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    /* Middle column (disciplines list) on mobile */
    #hero-middle-column {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* ---- ABOUT SECTION RESPONSIVE ---- */
@media (max-width: 991px) {
    #about-left-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }
    #about-right-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #about-awards-badge .elementor-image img {
        max-width: 200px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    #about-intro-title .elementor-heading-title {
        font-size: clamp(24px, 6vw, 44px) !important;
        line-height: 1.2 !important;
    }
    #about-buttons-row.e-con {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #about-buttons-row .elementor-button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ---- PORTFOLIO SECTION RESPONSIVE ---- */
@media (max-width: 991px) {
    #portfolio-section .e-con {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Portfolio grid */
    #portfolio-grid-section .elementor-posts-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    /* Portfolio grid: 1 column on mobile */
    #portfolio-grid-section .elementor-posts-container {
        grid-template-columns: 1fr !important;
    }
    /* Portfolio items full width */
    .elementor-posts--skin-cards .elementor-post {
        width: 100% !important;
    }
}

/* ---- GALLERY SECTION RESPONSIVE ---- */
@media (max-width: 991px) {
    #gallery-grid-section .e-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #gallery-header-section .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 767px) {
    #gallery-grid-section .e-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- COLLABORATIONS PAGE RESPONSIVE ---- */
@media (max-width: 991px) {
    #collab-header-section .e-con,
    #collab-section-header .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    #collab-details-section .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    #deborah-collab-card {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    #deborah-collab-image .elementor-image img {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}

/* ---- CONTACT PAGE RESPONSIVE ---- */
@media (max-width: 991px) {
    #contact-header-section .e-con,
    #contact-details-section .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 767px) {
    /* Contact form full width */
    .elementor-form .elementor-field-group {
        width: 100% !important;
    }
    .elementor-form .elementor-form-fields-wrapper {
        flex-direction: column !important;
    }
}

/* ---- COLLAB SECTION (HOME) RESPONSIVE ---- */
@media (max-width: 991px) {
    #collab-header-left-col,
    #collab-header-right-col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    #collab-cards-row-container {
        flex-wrap: wrap !important;
    }
    #deborah-collab-card {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ---- SERVICES SECTION (HOME) RESPONSIVE ---- */
@media (max-width: 991px) {
    #services-left-col,
    #services-right-col {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ---- TYPOGRAPHY SCALE FOR MOBILE ---- */
@media (max-width: 767px) {
    /* Large display headings */
    .elementor-heading-title[style*="font-size: 110px"],
    .elementor-heading-title[style*="font-size: 85px"],
    .elementor-heading-title[style*="font-size: 80px"],
    .elementor-heading-title[style*="font-size: 77px"] {
        font-size: clamp(32px, 9vw, 60px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
    }
    /* Section headings */
    .elementor-heading-title[style*="font-size: 60px"],
    .elementor-heading-title[style*="font-size: 50px"] {
        font-size: clamp(28px, 7vw, 48px) !important;
        line-height: 1.15 !important;
    }
}

/* ---- IMAGES RESPONSIVE ---- */
.elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* ---- BUTTONS RESPONSIVE ---- */
@media (max-width: 575px) {
    .elementor-button-wrapper {
        width: 100%;
    }
    .elementor-button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---- ELEMENTOR CONTAINER PADDING ON MOBILE ---- */
@media (max-width: 767px) {
    .elementor-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .e-con {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* Remove excessive top/bottom padding on mobile */
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ---- FOOTER RESPONSIVE ---- */
@media (max-width: 767px) {
    .tp-footer-area .elementor-widget-container {
        text-align: center !important;
    }
    /* Footer social icons centered */
    .tp-footer-area .elementor-social-icons-wrapper {
        justify-content: center !important;
    }
    /* Footer flex items stack */
    .tp-footer-area .e-con {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ---- VIDEO WIDGET RESPONSIVE ---- */
@media (max-width: 767px) {
    .elementor-widget-video .elementor-video-container {
        width: 100% !important;
    }
    .elementor-widget-video iframe,
    .elementor-widget-video video {
        width: 100% !important;
        height: auto !important;
    }
}

/* ---- PREVENT HORIZONTAL OVERFLOW ---- */
@media (max-width: 991px) {
    .elementor-widget-wrap,
    .elementor-container,
    .e-con-inner {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .e-con {
        max-width: 100% !important;
    }
}