/* ==========================================================================
   Gotezu — site-wide mobile production layer (320px–768px)
   Desktop layout unchanged. All rules scoped inside max-width media queries.
   ========================================================================== */

/* ── 1. Foundation: overflow, containers, rhythm ── */
@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  main,
  .svc,
  .cs-page,
  .gall,
  .contact-page,
  .page-activity-detail,
  .act-grid {
    overflow-x: hidden;
  }
}

/* ── 2. Fluid media ── */
@media (max-width: 768px) {
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  iframe,
  embed,
  object {
    max-width: 100%;
  }

  svg {
    max-width: 100%;
  }

  img[width],
  img[height] {
    height: auto;
  }

  .gotezu-nav__logo img,
  .logo-wall__group img,
  .press-logo {
    height: auto;
  }
}

/* ── 3. Typography: release narrow max-width locks ── */
@media (max-width: 768px) {
  .svc-section__title,
  .svc-hero__title-line,
  .csm-hero__title,
  .csm-main__lead,
  .cs-hero__title,
  .actd-hero__title,
  .gall-hero__title,
  .faq-tabs__title,
  .blog-highlights__title,
  .core-values__title,
  .why-gotezu__title,
  .our-services__title,
  .experience-gotezu__title,
  .vt-section__title {
    max-width: none;
    overflow-wrap: break-word;
  }

  .svc-hero__title-line,
  .svc-hero__title span {
    white-space: normal;
  }

  .svc-section__lead,
  .svc-prose p,
  .cs-hero__lead,
  .contact-hero__lead,
  .act-hero__lead {
    max-width: none;
  }
}

/* ── 4. Buttons & CTAs ── */
@media (max-width: 768px) {
  .rts-btn,
  .btn-primary,
  .btn-primary-alta,
  a.rts-btn,
  .faq-tabs__tab {
    min-height: 44px;
  }

  .hero-gotezu__btn,
  .hero-gotezu__btn--primary,
  .hero-gotezu__btn--ghost,
  .svc-hero__cta,
  .svc-cta__btn,
  .cs-btn,
  .csm-btn,
  .contact-panel__submit,
  .blog-highlights__more,
  .actd-btn,
  .contact-form-bar__submit,
  .svcp-quote-bar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .hero-gotezu__btn,
  .svc-hero__cta,
  .svc-cta__btn,
  .cs-btn,
  .csm-btn,
  .contact-panel__submit,
  .blog-highlights__more,
  .actd-btn,
  .contact-form-bar__submit {
    width: 100%;
    max-width: 320px;
  }

  .hero-gotezu__cta {
    max-width: 100%;
  }

  .cs-hero__actions,
  .cs-detail-hero__actions {
    align-items: center !important;
    justify-content: center !important;
  }

  .cs-hero__actions .cs-btn,
  .cs-detail-hero__actions .cs-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 5. Forms ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-form-bar__row,
  .cta-input-arae,
  .svcp-quote-bar__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .cta-input-arae input[type="email"] {
    width: 100%;
    min-width: 0;
  }

  .cta-input-arae .rts-btn,
  .cta-input-arae button[type="submit"],
  .svcp-quote-bar__submit {
    width: 100%;
    min-height: 44px;
  }
}

/* ── 6. Grids → single column on mobile ── */
@media (max-width: 768px) {
  .blog-highlights__grid,
  .cs-card-grid,
  .csm-related__grid,
  .act-grid__list,
  .svc-outcomes,
  .svc-modules,
  .svc-quotes,
  .svc-related,
  .svc-steps,
  .svc-audience,
  .csm-main__cols,
  .csm-metrics,
  .contact-offices__grid,
  .contact-main__inner,
  .svcp-why-grid,
  .svcp-audience-bento,
  .svcp-split,
  .svcp-split--reverse,
  .svcp-cases-bento {
    grid-template-columns: 1fr !important;
  }

  .svc-modules .svc-module:last-child:nth-child(odd),
  .svcp-audience-bento__intro,
  .svcp-audience-bento__item--1,
  .svcp-audience-bento__item--2,
  .svcp-audience-bento__item--3,
  .svcp-audience-bento__item--4,
  .svcp-audience-bento__item--5,
  .svcp-audience-bento__item--6 {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ── 7. Flex / split layouts → stack ── */
@media (max-width: 768px) {
  .contact-main__inner,
  .contact-panel__grid,
  .svc .contact-panel--form-only .contact-panel__inner,
  .hero-gotezu__inner,
  .svc-hero__inner,
  .svc-overview,
  .svc-approach,
  .experience-gotezu__head,
  .training-scroll__grid,
  .our-services__head {
    flex-direction: column;
  }

  .svc-overview__visual,
  .svc-overview__copy,
  .svcp-split__copy,
  .svcp-split__media,
  .svcp-split--reverse .svcp-split__copy,
  .svcp-split--reverse .svcp-split__media {
    order: unset;
    width: 100%;
    max-width: 100%;
  }

  .svc-overview__visual {
    justify-self: center;
  }
}

/* ── 8. Hero sections ── */
@media (max-width: 768px) {
  .hero-gotezu__inner,
  .svc-hero__inner,
  .about-hero__top,
  .about-hero__stage,
  .act-hero__inner,
  .cs-hero__inner,
  .csm-hero__inner,
  .gall-hero {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .hero-gotezu,
  .svc-hero,
  .about-hero,
  .act-hero,
  .cs-hero {
    min-height: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .svc-hero__visual,
  .hero-gotezu__grid {
    width: 100%;
    max-width: min(100%, 460px);
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .svc-hero__pills,
  .csm-hero__tags,
  .svc-cities {
    max-width: none;
    width: 100%;
  }
}

/* ── 9. Cards & sections spacing ── */
@media (max-width: 768px) {
  .svc-module,
  .svc-quote,
  .act-card,
  .cs-card,
  .blog-highlights__card,
  .our-services__card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .svc-section,
  .faq-tabs,
  .blog-highlights,
  .contact-panel,
  .why-gotezu,
  .experience-gotezu,
  .clients-grid,
  .core-values,
  .cs-grid-section,
  .act-grid,
  .contact-main,
  .contact-offices-section,
  .contact-map-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── 10. Tables ── */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive,
  .rts-table-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── 11. Footer ── */
@media (max-width: 768px) {
  .rts-cta-wrapper .background-cta .row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .rts-cta-wrapper .cta-left-wrapepr {
    text-align: center;
  }

  .rts-cta-wrapper .cta-left-wrapepr .title {
    font-size: clamp(22px, 5vw, 28px);
  }

  .footer-one-single-wized {
    margin-bottom: 28px;
  }

  .bg-footer-one .row.pt--120 {
    padding-top: 60px !important;
  }

  .rts-footer-area .col-xl-3,
  .rts-footer-area .col-md-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 12. Mobile navigation ── */
@media (max-width: 1199px) {
  .side-bar {
    width: min(365px, 92vw);
    max-width: 100%;
    padding: 36px 20px 28px;
  }

  .side-bar.show {
    right: 0;
  }

  .rts-sidebar-menu-desktop .body-mobile .mainmenu > li > a,
  .rts-sidebar-menu-desktop .body-mobile .mainmenu > li > .menu-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
  }

  .rts-sidebar-menu-desktop .body-mobile .submenu {
    padding-left: 12px;
  }

  .rts-sidebar-menu-desktop .body-mobile .submenu li a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
  }

  .rts-sidebar-menu-desktop .body-mobile .submenu:not(.active) {
    display: none;
  }

  .rts-sidebar-menu-desktop .body-mobile .submenu.active {
    display: block;
  }

  .rts-sidebar-menu-desktop .quote-btnmenu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    min-height: 44px;
    margin: 16px 10px 0;
    text-align: center;
  }

  .close-icon-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  body.mobile-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  #anywhere-home.bgshow {
    opacity: 0.7;
    pointer-events: auto;
  }
}

/* ── 13. Full-bleed sections ── */
@media (max-width: 768px) {
  .why-gotezu--decorated,
  .contact-intro,
  .gall-intro,
  .about-hero,
  [class*="--full-bleed"] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── 14. Modals, video, carousels ── */
@media (max-width: 768px) {
  #video-overlay iframe,
  .video-overlay iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .modal-dialog {
    max-width: calc(100vw - 40px);
    margin: 16px auto;
  }

  .swiper,
  .swiper-container,
  .our-services__track,
  .vt-row {
    max-width: 100%;
  }
}

/* ── 15. Service pages: benefits deck overflow ── */
@media (max-width: 768px) {
  .svcp-benefits-deck-outer {
    margin: 0 -20px;
  }

  .svcp-benefits-deck-wrap {
    scroll-padding-inline: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .svcp-benefit-card {
    flex: 0 0 min(85vw, 300px);
    min-height: 320px;
  }

  .svcp-benefit-card:first-child {
    margin-left: 0;
  }

  .svcp-benefit-card:not(:first-child) {
    margin-left: -18px;
  }

  .svcp .contact-panel--with-mascot .contact-panel__mascot img {
    width: min(280px, 82vw);
  }

  .svcp .contact-panel--with-mascot .contact-panel__card {
    transform: none;
    max-width: 100%;
  }
}

/* ── 16. About story image (overlap fix) ── */
@media (max-width: 768px) {
  .about-story__media {
    max-width: min(300px, 88vw);
    height: auto;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .about-story__image {
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
    display: block;
    margin: 0 auto;
  }
}

/* ── 17. Floating widgets clearance ── */
@media (max-width: 768px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .rts-footer-area,
  .svc-cta,
  .csm-closer,
  .contact-form-bar__submit,
  .faq-tabs__foot {
    margin-bottom: 0;
  }

  /* GetButton.io WhatsApp widget */
  div[class*="widget"],
  div[id*="gb-widget"],
  div[id*="GetButton"] {
    max-width: calc(100vw - 24px);
  }
}

/* ── 18. Legacy template utilities ── */
@media (max-width: 768px) {
  .custom-ctr {
    width: 100% !important;
    max-width: 100% !important;
  }

  .buttons-sparsh {
    flex-direction: column;
    gap: 10px;
  }

  .buttons-sparsh button {
    width: 100%;
  }

  .policy-content,
  .terms-content,
  .rts-single-wized,
  .rts-breadcrumb-area {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── 19. Small phones (≤480px) ── */
@media (max-width: 480px) {
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  .svc-hero__pill,
  .cs-hero__crumb {
    font-size: 12px;
    padding: 8px 12px;
  }

  .press-grid {
    grid-template-columns: 1fr;
  }

  .gall-grid {
    grid-template-columns: 1fr;
  }

  .about-hero__card--accent {
    padding: 24px 20px 180px;
  }
}