/**
 * AtithInsights — mobile responsive fixes (all custom pages).
 * Max vertical gap between sections: 30px. Inner gaps capped at 30px.
 */

@media (max-width: 767px) {

  /* ─── Section spacing: 30px between sections (no double padding) ─── */
  body.atith-home #primary.site-main > section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.atith-home #primary.site-main > section:first-child {
    padding-top: 30px !important;
  }

  body.atith-home #primary.site-main > section + section {
    padding-top: 30px !important;
  }

  body.atith-home #primary.site-main > section:last-child {
    padding-bottom: 30px !important;
  }

  /* ─── Heroes: compact ─── */
  .home-hero,
  .smm-hero,
  .ms-hero,
  .pc-hero,
  .pm-hero,
  .about-hero,
  .contact-hero {
    min-height: auto !important;
  }

  .home-hero__inner,
  .smm-hero__inner,
  .ms-hero__inner,
  .pc-hero__inner,
  .pm-hero__inner,
  .about-hero__inner,
  .contact-hero__inner {
    gap: 24px !important;
  }

  .home-hero__content,
  .smm-hero__content,
  .ms-hero__content,
  .pc-hero__content,
  .pm-hero__content,
  .about-hero__content,
  .contact-hero__content {
    gap: 16px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .home-hero__badge {
    align-self: center !important;
  }

  .home-hero__title,
  .smm-hero__title,
  .ms-hero__title,
  .pc-hero__title,
  .pm-hero__title,
  .about-hero__title,
  .contact-hero__title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.2 !important;
  }

  .home-hero__desc,
  .smm-hero__desc,
  .ms-hero__desc,
  .pc-hero__desc,
  .pm-hero__desc,
  .about-hero__desc,
  .contact-hero__desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .home-hero__actions,
  .smm-hero__actions,
  .ms-hero__actions,
  .pc-hero__actions,
  .pm-hero__actions,
  .about-hero__actions,
  .contact-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  .home-hero__btn,
  .smm-hero__btn,
  .ms-hero__btn,
  .pc-hero__btn,
  .pm-hero__btn,
  .about-hero__btn,
  .contact-hero__btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  .home-hero__frame,
  .home-hero__image,
  .smm-hero__image-wrap,
  .smm-hero__image,
  .ms-hero__image-wrap,
  .ms-hero__image,
  .pc-hero__image,
  .pm-hero__image,
  .about-hero__image,
  .contact-hero__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .home-hero__stat-card {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 12px !important;
  }

  /* ─── Stats: compact row ─── */
  .home-stats,
  .smm-stats,
  .ms-stats,
  .about-stats,
  .pm-stats {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .home-stats__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
  }

  .smm-stats__inner,
  .ms-stats__inner,
  .pm-stats__inner {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 8px !important;
    padding: 0 12px !important;
  }

  .smm-stats__item,
  .ms-stats__item {
    gap: 8px !important;
  }

  .smm-stats__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .smm-stats__icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .smm-stats__number,
  .ms-stats__number,
  .pm-stats__number {
    font-size: clamp(22px, 6vw, 30px) !important;
  }

  .home-stats__number,
  .about-stats__number {
    font-size: clamp(28px, 7vw, 36px) !important;
  }

  .smm-stats__label,
  .ms-stats__label,
  .home-stats__label,
  .about-stats__label,
  .pm-stats__label {
    font-size: 9px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    max-width: none !important;
  }

  .about-stats__inner {
    gap: 16px 12px !important;
  }

  /* ─── Cards: no forced tall height ─── */
  .home-services__card,
  .home-why__card,
  .home-process__card,
  .home-testimonials__card,
  .smm-offer__card,
  .ms-services__card,
  .ms-testimonials__card,
  .ms-cases__card,
  .pc-solutions__card,
  .pc-pillars__card,
  .pc-results__card,
  .about-expertise__card,
  .about-why__card,
  .contact-info__card,
  .contact-expertise__card,
  .contact-features__card,
  .contact-faq__item,
  .pm-services__card,
  .pm-testimonials__card {
    min-height: auto !important;
    padding: 20px 18px !important;
  }

  .home-why__card--offset {
    margin-top: 0 !important;
  }

  .contact-features__card {
    min-height: auto !important;
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }

  .contact-features__split {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .contact-features__icon--circle {
    align-self: flex-start !important;
    width: 56px !important;
    height: 56px !important;
  }

  /* ─── Grids & inner gaps: max 30px ─── */
  .home-services__grid,
  .home-why__cards,
  .home-about__features,
  .home-process__steps,
  .contact-info__grid,
  .contact-expertise__grid,
  .contact-form__inner,
  .about-why__cards,
  .about-expertise__grid,
  .smm-offer__grid,
  .ms-services__grid,
  .pm-services__grid {
    gap: 16px !important;
  }

  .home-why__inner,
  .about-why__inner,
  .smm-why__inner,
  .ms-framework__inner,
  .pc-advantage__inner,
  .home-about__inner {
    gap: 24px !important;
  }

  /* ─── Split sections → stack ─── */
  .home-about__inner,
  .smm-why__inner,
  .ms-framework__row,
  .pc-advantage__inner,
  .pc-insights__inner,
  .contact-form__inner,
  .contact-location__card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-location__visual {
    padding: 24px 20px !important;
  }

  .contact-location__content {
    padding: 24px 20px !important;
    gap: 20px !important;
  }

  .contact-form__card {
    padding: 22px 18px 24px !important;
  }

  /* ─── Section headers: compact ─── */
  .home-process__header,
  .home-faq__header,
  .smm-faq__header,
  .ms-faq__header,
  .pc-faq__header,
  .contact-faq__header,
  .pm-faq__header,
  [class*="__header"] {
    margin-bottom: 24px !important;
  }

  /* ─── FAQ: no extra whitespace after CTA ─── */
  .home-faq__cta,
  .smm-faq__cta,
  .ms-faq__cta,
  .pc-faq__cta,
  .contact-faq__cta,
  .pm-faq__cta {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-faq__list,
  .smm-faq__list,
  .ms-faq__list,
  .pc-faq__list,
  .contact-faq__list,
  .pm-faq__list {
    gap: 12px !important;
  }

  /* ─── CTA banners: compact ─── */
  .home-cta__content,
  .smm-cta__content,
  .ms-cta__content,
  .about-cta__content,
  .pc-cta__content,
  .pm-cta__content,
  .contact-cta__content {
    padding: 30px 20px !important;
    gap: 20px !important;
  }

  .home-cta__banner,
  .smm-cta__banner,
  .ms-cta__banner,
  .about-cta__banner,
  .contact-cta__banner,
  .pm-cta__banner {
    border-radius: 24px !important;
  }

  .home-cta__title,
  .smm-cta__title,
  .ms-cta__title,
  .about-cta__title,
  .contact-cta__title,
  .pm-cta__title {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  .contact-cta__actions {
    max-width: 100% !important;
  }

  [class*="__title"] {
    word-break: break-word;
  }

  /* ─── Visual blocks: no fixed min-height ─── */
  .pc-pillars__visual,
  .pc-insights__chart,
  .pc-results__media,
  .pc-hero__visual-wrap,
  .ms-performance__visual,
  .pm-hero__visual {
    min-height: auto !important;
  }

  .pc-pillars__card--featured,
  .pc-pillars__card--standard {
    min-height: auto !important;
  }

  /* ─── Testimonial cards ─── */
  .home-testimonials__card,
  .ms-testimonials__card,
  .pc-testimonials__card,
  .smm-stories__card,
  .pm-testimonials__card {
    min-height: auto !important;
    padding: 22px 20px !important;
  }

  /* ─── FAQ questions: wrap text on mobile ─── */
  .home-faq__question,
  .smm-faq__question,
  .ms-faq__question,
  .pc-faq__question,
  .contact-faq__question,
  .pm-faq__question,
  button.faq-toggle {
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }

  .home-faq__question span:first-child,
  .smm-faq__question span:first-child,
  .ms-faq__question span:first-child,
  .pc-faq__question span:first-child,
  .contact-faq__question span:first-child,
  .pm-faq__question span:first-child,
  button.faq-toggle > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .faq-arrow,
  [class*="faq__chevron"] {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }

  .home-faq__item,
  .smm-faq__item,
  .ms-faq__item,
  .pc-faq__item,
  .contact-faq__item,
  .pm-faq__item {
    overflow: hidden !important;
  }

  /* ─── Inner containers: mobile padding ─── */
  [class*="__inner"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ─── Header/footer: compact mobile padding ─── */
  header.site-header .site-header__inner,
  footer.site-footer .site-footer__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header.site-header .site-nav,
  header.site-header .site-nav-bar {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 12px !important;
  }

  header.site-header .site-nav-actions {
    gap: 8px !important;
  }

  header.site-header .site-nav-cta--mobile {
    padding: 7px 11px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  header.site-header .atith-menu-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 399px) {
  .smm-stats__inner,
  .ms-stats__inner,
  .pm-stats__inner {
    gap: 8px 4px !important;
  }

  .smm-stats__label,
  .ms-stats__label {
    font-size: 8px !important;
  }

  .smm-stats__number,
  .ms-stats__number {
    font-size: 20px !important;
  }
}