/*
  Phase 8J: Mobile stabilization patch.

  Purpose:
  - Keep the current desktop design intact.
  - Add a final responsive override layer after Phase 8I.
  - Stabilize phone/tablet layouts before deeper mobile-first refactoring.

  Scope:
  - Global overflow/media guards.
  - Header/offcanvas behavior at tablet and phone widths.
  - Homepage hero height, type scale, CTA wrapping, and decorative overflow.
  - Mobile section spacing, breadcrumbs, footer, and content readability.
*/

:root {
  --phase8j-gutter: clamp(16px, 4vw, 24px);
  --phase8j-section-mobile: 56px;
  --phase8j-section-tablet: 72px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

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

iframe,
video,
canvas {
  display: block;
}

.large-container,
.large-container-1,
.small-container,
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-left: var(--phase8j-gutter);
  padding-right: var(--phase8j-gutter);
}

.project-details-page-content,
.phase3-content-page .project-details-page-content,
.phase8d-articles-index {
  overflow-wrap: anywhere;
}

.primary-btn-1,
.primary-btn-5,
.sidebar-toggle-button,
.offcanvas__close button {
  min-width: 44px;
  min-height: 44px;
}

.primary-btn-1,
.primary-btn-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.header-area .header-main,
.header-style-two .header-main {
  gap: 16px;
}

.header-logo img,
.offcanvas__logo img {
  display: block;
  height: auto;
}

.offcanvas__info {
  width: min(400px, 100vw);
  max-width: 100vw;
}

.offcanvas__wrapper {
  min-height: 100%;
}

.mean-container .mean-nav ul li a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.banner-section-2 .banner-area-2 {
  max-width: min(760px, 100%);
}

.banner-section-2 .banner-title,
.banner-section-2 h1.banner-title,
.banner-section-2 h2.banner-title {
  text-wrap: balance;
}

.banner-section-2 .banner-text {
  max-width: 680px;
}

/* Tablet and small laptop stabilization: use the offcanvas menu before the full desktop nav crowds. */
@media (max-width: 1199.98px) {
  .header-style-two .mean__menu-wrapper,
  .mean__menu-wrapper.d-none.d-lg-block {
    display: none !important;
  }

  .header__hamburger.d-xl-none,
  .header-style-two .header__hamburger.d-xl-none {
    display: flex !important;
    align-items: center;
  }

  .header-style-two .header-right {
    align-items: center;
    gap: 16px;
  }

  .header-style-two .header-main {
    min-height: 82px;
  }

  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: 660px;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    font-size: clamp(44px, 6vw, 62px);
    line-height: 1.08;
  }

  .breadcrumb__area.pt-160 {
    padding-top: 128px;
  }

  .breadcrumb__area.pb-160 {
    padding-bottom: 128px;
  }
}

/* Tablet content spacing. */
@media (max-width: 991.98px) {
  .section-space,
  .section-space-medium,
  .section-space-bottom-2 {
    padding-top: var(--phase8j-section-tablet) !important;
    padding-bottom: var(--phase8j-section-tablet) !important;
  }

  .Project-details-page.section-space,
  .contact-page-section.section-space,
  .phase8d-articles-index.section-space {
    padding-top: var(--phase8j-section-tablet) !important;
    padding-bottom: var(--phase8j-section-tablet) !important;
  }

  .project-details-page-content :where(h2, h3, h4, h5, h6) {
    line-height: 1.22;
  }

  .footer-widget-2.pl-50,
  .footer-widget-4.pr-30 {
    padding-left: var(--phase8j-gutter) !important;
    padding-right: var(--phase8j-gutter) !important;
  }
}

/* Phone stabilization. */
@media (max-width: 767.98px) {
  :root {
    --phase8j-gutter: clamp(16px, 5vw, 22px);
  }

  body,
  p {
    line-height: 1.62;
  }

  .header-style-two .header-main {
    min-height: 72px;
  }

  .header-style-two .header-right {
    gap: 10px;
  }

  .header-logo img {
    width: min(150px, 44vw);
  }

  .header-action {
    display: none !important;
  }

  .sidebar-toggle-button {
    min-width: 48px;
    min-height: 48px;
  }

  .offcanvas__info {
    width: 100vw;
    border-left: 0;
  }

  .offcanvas__wrapper {
    padding: 22px var(--phase8j-gutter);
  }

  .offcanvas__top.mb-40,
  .mobile-menu.mb-40 {
    margin-bottom: 24px;
  }

  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: 540px;
  }

  .banner-section-2 .banner-main-2 {
    align-items: center;
    background-position: center center !important;
  }

  .banner-section-2 .banner-main-2 > .large-container {
    padding-left: var(--phase8j-gutter);
    padding-right: var(--phase8j-gutter);
  }

  .banner-section-2 .banner-area-2 {
    max-width: 100%;
    padding-top: 38px;
    padding-bottom: 46px;
  }

  .banner-section-2 .banner-sub-title {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    font-size: clamp(32px, 9.4vw, 44px);
    line-height: 1.1;
    max-width: 12.5em;
  }

  .banner-section-2 .banner-text,
  .banner-section-2 p.banner-text {
    max-width: 34rem;
    margin-top: 14px;
    padding-right: 0;
    padding-bottom: 26px;
    font-size: 16px;
    line-height: 1.55;
  }

  .banner-section-2 .banner-btn-area-2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-width: 320px;
  }

  .banner-section-2 .primary-btn-1 {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .banner-section-2 .socials-area {
    display: none;
  }

  .banner-section-2 .shape-area-2 {
    opacity: 0.45;
  }

  .banner-dot-inner {
    bottom: 18px;
  }

  .breadcrumb__area.pt-160,
  .breadcrumb__area.pt-95 {
    padding-top: 92px !important;
  }

  .breadcrumb__area.pb-160,
  .breadcrumb__area.pb-95 {
    padding-bottom: 72px !important;
  }

  .breadcrumb__title {
    font-size: clamp(32px, 10vw, 46px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .breadcrumb__menu ul {
    row-gap: 8px;
    flex-wrap: wrap;
  }

  .section-space,
  .section-space-medium,
  .section-space-bottom-2,
  .Project-details-page.section-space,
  .contact-page-section.section-space,
  .phase8d-articles-index.section-space,
  .features-section.pt-80,
  .footer-top.section-space-medium {
    padding-top: var(--phase8j-section-mobile) !important;
    padding-bottom: var(--phase8j-section-mobile) !important;
  }

  .features-section.pt-80 {
    padding-top: 48px !important;
  }

  .features-section.pb-80 {
    padding-bottom: 48px !important;
  }

  .project-details-page-content :where(h2) {
    font-size: clamp(28px, 8vw, 38px);
  }

  .project-details-page-content :where(h3) {
    font-size: clamp(24px, 7vw, 32px);
  }

  .project-details-page-content :where(h4, h5, h6),
  .project-details-page-title {
    font-size: clamp(19px, 5.5vw, 24px);
  }

  .project-details-page-content ul,
  .project-details-page-content ol {
    padding-left: 1.25rem;
  }

  .phase3-related-grid {
    grid-template-columns: 1fr;
  }

  .footer-widget-2.pl-50,
  .footer-widget-4.pr-30 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }
}

/* Very narrow phones. */
@media (max-width: 374.98px) {
  .banner-section-2 .banner-active,
  .banner-section-2 .swiper-wrapper,
  .banner-section-2 .swiper-slide,
  .banner-section-2 .banner-main-2 {
    min-height: 510px;
  }

  .banner-section-2 .banner-title,
  .banner-section-2 h1.banner-title,
  .banner-section-2 h2.banner-title {
    font-size: 31px;
  }

  .banner-section-2 .banner-text,
  .banner-section-2 p.banner-text {
    font-size: 15px;
  }

  .primary-btn-1,
  .primary-btn-5 {
    font-size: 13px;
  }
}