/* =========================================================
   ICPIES Mobile Responsiveness & Visual Optimization
   ========================================================= */

/* ---- A. Navigation: model-nav as mobile nav, hide Elementor dropdown ---- */
@media (max-width: 767px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
  }
}

/* ---- B. Meta-nav: Submission/Registration visible on mobile ---- */
@media (max-width: 767px) {
  .meta-nav {
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }
  .meta-nav .e-con-inner {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .meta-nav-link-one,
  .meta-nav-link-two {
    padding: 6px 15px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .meta-nav p {
    font-size: 0.85em !important;
  }
}
@media (max-width: 480px) {
  .meta-nav-link-one,
  .meta-nav-link-two {
    padding: 5px 10px !important;
  }
  .meta-nav p {
    font-size: 0.8em !important;
  }
}

/* ---- C. Banner: Unlock aspect-ratio, use min-height ---- */
@media (max-width: 767px) {
  .elementor-element-3bc557d,
  .elementor-element-98d8f16 {
    aspect-ratio: unset !important;
    min-height: 280px !important;
  }
  .elementor-element-3b258de {
    padding: 15px 12px !important;
  }
  .elementor-element-5e9110f {
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  .elementor-element-d9f69ff .elementor-heading-title {
    font-size: 0.9em !important;
    letter-spacing: 1px !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-3bc557d,
  .elementor-element-98d8f16 {
    min-height: 220px !important;
  }
  .elementor-element-3b258de {
    padding: 10px 8px !important;
  }
  .elementor-element-5e9110f {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 360px) {
  .elementor-element-3bc557d,
  .elementor-element-98d8f16 {
    min-height: 180px !important;
  }
}

/* ---- D. Homepage Counter/Stats Section ---- */
@media (max-width: 767px) {
  .elementor-element-8b9a4bd {
    padding: 15px 10px !important;
  }
  .elementor-element-1ddafb8 .elementor-heading-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .elementor-element-f8a4abc {
    padding: 10px 5px !important;
  }
  .elementor-element-6eba95e {
    gap: 8px !important;
  }
  .elementor-counter-number-wrapper {
    font-size: 2em !important;
  }
}
@media (max-width: 480px) {
  .elementor-counter-number-wrapper {
    font-size: 1.6em !important;
  }
  .elementor-element-a4ae9b0 .elementor-heading-title,
  .elementor-element-239248f .elementor-heading-title,
  .elementor-element-afe8752 .elementor-heading-title,
  .elementor-element-58a4173 .elementor-heading-title {
    font-size: 0.85em !important;
  }
  .elementor-element-1942075,
  .elementor-element-e6282ce,
  .elementor-element-a24509e,
  .elementor-element-365d98d {
    padding: 8px 5px !important;
  }
  .elementor-12 .elementor-element.elementor-element-8b9a4bd {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
@media (max-width: 360px) {
  .elementor-counter-number-wrapper {
    font-size: 1.4em !important;
  }
}

/* ---- E. Homepage Awards Grid (override inline CSS) ---- */
@media (max-width: 480px) {
  .awards-grid-4col {
    gap: 10px !important;
  }
  .awards-grid-4col .award-box {
    padding: 8px !important;
    border-radius: 8px !important;
  }
  .awards-grid-4col .award-box h5 {
    font-size: 0.85em !important;
  }
  .awards-grid-4col .award-icon {
    font-size: 22px !important;
  }
}

/* ---- F. Homepage Keynote Speakers (override inline CSS) ---- */
@media (max-width: 767px) {
  .keynote-container {
    gap: 15px !important;
  }
  .keynote-item {
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 6px !important;
  }
  .keynote-photo {
    width: 80px !important;
    height: 100px !important;
  }
  .keynote-name {
    font-size: 15px !important;
  }
  .keynote-institution {
    font-size: 12px !important;
  }
  .keynote-title-cn {
    font-size: 11px !important;
  }
}
@media (max-width: 480px) {
  .keynote-item {
    padding: 10px !important;
    gap: 10px !important;
  }
  .keynote-photo {
    width: 60px !important;
    height: 80px !important;
  }
  .keynote-name {
    font-size: 14px !important;
  }
}

/* ---- G. Homepage Invited Speakers (vertical stack on mobile) ---- */
@media (max-width: 767px) {
  .invited-container {
    flex-direction: column !important;
    overflow-x: hidden !important;
    gap: 12px !important;
  }
  .invited-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px !important;
  }
  .invited-photo {
    width: 70px !important;
    height: 90px !important;
  }
  .invited-name {
    font-size: 14px !important;
  }
  .invited-institution {
    font-size: 12px !important;
  }
}
@media (max-width: 480px) {
  .invited-item {
    padding: 10px !important;
  }
  .invited-photo {
    width: 55px !important;
    height: 70px !important;
  }
}

/* ---- H. Section Border Box ---- */
@media (max-width: 767px) {
  .section-border-box {
    padding: 8px !important;
    margin: 15px auto !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  }
}
@media (max-width: 480px) {
  .section-border-box {
    padding: 5px !important;
    margin: 10px auto !important;
    border-radius: 8px !important;
  }
}

/* ---- I. News/Committee Section: Fix invalid flex values ---- */
@media (max-width: 767px) {
  .container .item1,
  .container .item3 {
    flex: 0 0 auto !important;
    width: 80px !important;
  }
  .container .item2,
  .container .item4 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}
@media (max-width: 480px) {
  .container .item1,
  .container .item3 {
    width: 60px !important;
  }
}

/* ---- J. Homepage Call for Papers Cards ---- */
@media (max-width: 767px) {
  .elementor-element-3ca8ae1 .elementor-heading-title {
    font-size: 1.6em !important;
    line-height: 1.1em !important;
  }
  .elementor-element-cfc9266 {
    padding: 0 15px !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-3ca8ae1 .elementor-heading-title {
    font-size: 1.3em !important;
    line-height: 1.2em !important;
  }
  .elementor-element-d1c198d,
  .elementor-element-c425cea,
  .elementor-element-7a5806b,
  .elementor-element-ff6936c {
    padding: 15px 10px !important;
  }
  .elementor-element-0c8337b .elementor-heading-title,
  .elementor-element-af2375a .elementor-heading-title,
  .elementor-element-abdbe8b .elementor-heading-title,
  .elementor-element-a884752 .elementor-heading-title {
    font-size: 16px !important;
  }
}
@media (max-width: 360px) {
  .elementor-element-3ca8ae1 .elementor-heading-title {
    font-size: 1.1em !important;
  }
}

/* ---- K. Homepage CTA Sections ---- */
@media (max-width: 767px) {
  .elementor-element-aa8ee22,
  .elementor-element-2b41cf9 {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
    padding-left: 2em !important;
    padding-right: 2em !important;
  }
  .elementor-element-6939e4d {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  .elementor-element-6939e4d > .elementor-widget-container {
    margin: 15px !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-aa8ee22,
  .elementor-element-2b41cf9 {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
  }
  .elementor-element-6939e4d {
    font-size: 18px !important;
    line-height: 24px !important;
  }
}

/* ---- L. Fixed-Width Tables: Make scrollable ---- */
@media (max-width: 767px) {
  table[width="1000"],
  table[width="800"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}

/* ---- M. Secondary Pages Template (all inner pages) ---- */
@media (max-width: 767px) {
  /* Content/sidebar separator when stacked */
  .elementor-element-75ac4c7 {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
  }
  /* Page title */
  .elementor-element-00cf9e5 h1 {
    font-size: 1.3em !important;
  }
  /* Section heading icon+text row */
  .elementor-element-480d817 {
    gap: 8px !important;
  }
  .elementor-element-f0e830b h2 {
    font-size: 1.2em !important;
  }
  /* Sidebar buttons touch-friendly */
  .sidebar-btn a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 15px !important;
  }
}
@media (max-width: 480px) {
  .STYLE3 {
    font-size: 18px !important;
  }
  .elementor-element-00cf9e5 h1 {
    font-size: 1.1em !important;
  }
  .elementor-element-f0e830b h2 {
    font-size: 1em !important;
  }
}

/* ---- N. Speaker Images (kn.html etc.) ---- */
@media (max-width: 767px) {
  .elementor-element-b8bc457 img {
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-b8bc457 img {
    max-width: 130px !important;
  }
}

/* ---- O. Schedule/Agenda Page ---- */
@media (max-width: 767px) {
  .schedule-section {
    border-radius: 8px !important;
  }
  .schedule-header-bar {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .schedule-header-bar h2 {
    font-size: 1em !important;
  }
  .schedule-body {
    padding: 12px 10px !important;
  }
  .agenda-tabs {
    flex-wrap: wrap !important;
  }
  .agenda-tab {
    flex: 1 1 33% !important;
    min-width: 80px !important;
    padding: 8px 4px !important;
  }
  .agenda-tab .tab-date {
    font-size: 0.7em !important;
  }
  .agenda-time {
    width: 30% !important;
    white-space: normal !important;
    font-size: 0.82em !important;
  }
}
@media (max-width: 480px) {
  .agenda-tab .tab-date {
    font-size: 0.6em !important;
  }
  .agenda-time {
    width: 35% !important;
  }
  .agenda-session .session-title {
    font-size: 0.85em !important;
  }
}

/* ---- P. Overflow Fixes (mobile only) ---- */
@media (max-width: 767px) {
  body {
    overflow-x: clip !important;
  }
  .e-con,
  .e-con-inner {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
}
img {
  max-width: 100%;
  height: auto;
}

/* ---- Q. Responsive Logo ---- */
@media (max-width: 767px) {
  .custom-logo-link img,
  .elementor-widget-image img[src*="logo"] {
    max-width: 150px !important;
    height: auto !important;
  }
}
@media (max-width: 480px) {
  .custom-logo-link img,
  .elementor-widget-image img[src*="logo"] {
    max-width: 120px !important;
  }
}

/* ---- R. Mobile Nav Touch Targets ---- */
@media (max-width: 767px) {
  .model-li a {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  .model-li .elementor-nav-menu--dropdown li,
  .model-li .elementor-nav-menu--dropdown li a {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  .elementor-button {
    min-height: 44px !important;
    padding: 8px 16px !important;
  }
}

/* ---- S. Homepage Section Spacing ---- */
@media (max-width: 767px) {
  .elementor-element-901ac8c {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .elementor-element-ac630c5 {
    margin-top: 20px !important;
    padding: 15px !important;
  }
  /* Grid sections to single column */
  .elementor-element-6eba95e,
  .elementor-element-11185d5,
  .elementor-element-4083d3a,
  .elementor-element-bb9b158 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .elementor-element-901ac8c {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .elementor-element-cfc9266 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ---- T. Footer: Keep same gradient as PC ---- */
@media (max-width: 1024px) {
  .elementor-67 .elementor-element.elementor-element-528d81d:not(.elementor-motion-effects-element-type-background),
  .elementor-67 .elementor-element.elementor-element-528d81d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: linear-gradient(90deg, #108787 61%, #19adad 100%) !important;
  }
}
@media (max-width: 767px) {
  .elementor-location-footer .elementor-nav-menu {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .elementor-location-footer .elementor-nav-menu a {
    padding: 6px 0 !important;
  }
}
@media (max-width: 480px) {
  .elementor-location-footer .e-con-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}