/* Final small-screen guardrails.
   Keep this file last in the cascade: page-specific styles are allowed to
   design components, while these rules prevent common mobile regressions. */

@media (max-width: 760px) {
  html,
  body,
  #a2t-main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #a2t-main-content :where(main, section, article, aside, nav, form, fieldset, div) {
    min-width: 0;
  }

  #a2t-main-content :where(img, picture, video, canvas, svg, iframe) {
    max-width: 100%;
  }

  #a2t-main-content :where(img, video) {
    height: auto;
  }

  #a2t-main-content :where(iframe) {
    width: 100%;
    border: 0;
  }

  /* Prevent browser zoom on focused fields and keep controls in their card. */
  #a2t-main-content :where(input, select, textarea) {
    max-width: 100%;
    font-size: 16px;
  }

  #a2t-main-content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
    width: 100%;
  }

  /* IDs, email addresses, filenames and provider errors must never widen a card. */
  #a2t-main-content :where(p, li, dd, td, th, code, pre, a, strong, small, span) {
    overflow-wrap: anywhere;
  }

  #a2t-main-content :where(pre) {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  /* Unknown and legacy tables remain usable rather than clipping the page. */
  #a2t-main-content :where(.table-responsive, .table-wrap, [class*="table-wrap"]) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  #a2t-main-content > table,
  #a2t-main-content :where(article, section, form) > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Page breadcrumbs are redundant with the mobile nav and consume scarce space. */
  .a2t-global-breadcrumb-shell,
  #a2t-main-content :where(.pm-breadcrumb, .pd-v3-breadcrumb, .pd-v6-breadcrumb, .a2t-global-breadcrumb, .a2t-checkout-breadcrumb, .a2t-cart-breadcrumb, .a2t-dashboard-breadcrumb, .a2cw-breadcrumb) {
    display: none !important;
  }

  /* Desktop rails become ordinary flow content on phones. */
  #a2t-main-content :where(.a2t-checkout-pay, .a2t-cart-summary, .a2t-payment-receipt, .pd-v10-review-rail-sticky, .a2cw-sidebar, .a2t-service-sidebar, [class*="right-rail"]) {
    position: static !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
  }

  /* Inline desktop grid declarations must not survive at phone width. */
  #a2t-main-content .a2t-settings-grid,
  #a2t-main-content .a2t-checkout-grid,
  #a2t-main-content .a2t-payment-grid,
  #a2t-main-content .a2t-cart-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Native and custom dialogs remain reachable above the mobile keyboard. */
  dialog,
  #a2t-main-content :where(.modal-dialog, [role="dialog"]) {
    width: min(100% - 24px, 560px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* PayPal/Card hosted elements must stay inside the payment card. */
  #a2t-main-content :where([id*="paypal" i], [class*="paypal" i], [id*="card-field" i], [class*="card-field" i]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #a2t-main-content :where(button, .btn, [class*="button"], input[type="submit"], input[type="button"]) {
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (max-width: 390px) {
  #a2t-main-content :where(.a2t-payment-result-actions, .a2t-checkout-hero-points, .a2t-checkout-hero-actions, [class*="action-row"], [class*="button-row"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  #a2t-main-content :where(.a2t-payment-result-actions, .a2t-checkout-hero-actions, [class*="action-row"], [class*="button-row"]) > * {
    width: 100%;
    max-width: 100%;
  }
}

/* Blog listing owns its compact phone typography after the global guards. */
@media (max-width: 700px) {
  .a2t-blog-page #a2t-main-content .blog-intro h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: .98 !important;
  }

  .a2t-blog-page #a2t-main-content .blog-post h2 {
    font-size: clamp(1.2rem, 5.8vw, 1.45rem) !important;
    line-height: 1.13 !important;
  }

  .a2t-blog-page #a2t-main-content .slide-title {
    font-size: clamp(1.65rem, 7.4vw, 2.05rem) !important;
    line-height: 1.02 !important;
  }

  .a2t-blog-page #a2t-main-content .dots-container .dot {
    width: 8px;
    min-width: 8px;
    height: 8px;
    min-height: 8px !important;
    padding: 0;
  }

  .a2t-blog-page #a2t-main-content .dots-container .dot.active {
    width: 24px;
  }

  .a2t-blog-page #a2t-main-content .blog-post-media img,
  .a2t-blog-page #a2t-main-content .slide-image-container img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 380px) {
  .a2t-blog-page #a2t-main-content .slide-title {
    font-size: clamp(1.5rem, 7.8vw, 1.82rem) !important;
  }
}

/* Post detail becomes a clean reading column with the site's mobile shell. */
@media (max-width: 760px) {
  .a2t-post-detail-page .a2t-global-breadcrumb-shell,
  .a2t-post-detail-page #a2t-main-content .a2t-toc-card {
    display: none !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-article-title-pro {
    font-size: clamp(1.65rem, 7.2vw, 2.05rem) !important;
    line-height: 1.06 !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-content-pro::before,
  .a2t-post-detail-page #a2t-main-content .a2t-content-heading-icon,
  .a2t-post-detail-page #a2t-main-content .a2t-main-content-icon {
    display: none !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-content-pro h1,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro h2,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro h3,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro h4 {
    padding-left: 0 !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-content-pro p,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro ul,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro ol,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro blockquote,
  .a2t-post-detail-page #a2t-main-content .a2t-content-pro pre {
    margin-left: 0 !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-article-image-pro img {
    width: 100%;
    height: 100%;
  }

  /* The global mobile action-row rule uses a column flex direction on some
     pages. Its 140px flex basis then becomes button height in this footer.
     Keep article navigation as compact controls instead of card-sized CTAs. */
  .a2t-post-detail-page #a2t-main-content .a2t-article-footer-pro .a2t-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-article-footer-pro .a2t-action-row > :is(.a2t-btn, .a2t-btn-dark) {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    align-self: start !important;
    justify-content: center !important;
    border-radius: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .a2t-post-detail-page #a2t-main-content .a2t-article-title-pro {
    font-size: clamp(1.58rem, 7.3vw, 1.82rem) !important;
  }

  .a2t-post-detail-page #a2t-main-content .a2t-article-footer-pro .a2t-action-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Services landing uses the same single phone rail as the rest of the site.
   Earlier service layers applied an outer shell gutter and then padded the
   hero again, which compressed the opening copy into an unnecessarily narrow
   column. Cards below the hero keep their own intentional inset. */
@media (max-width: 760px) {
  body:has(.a2t-services-pro) #a2t-main-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(.a2t-services-pro) #a2t-main-content .a2t-services-pro {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 38px 16px 56px !important;
  }

  body:has(.a2t-services-pro) #a2t-main-content .a2t-service-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 40px !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body:has(.a2t-services-pro) #a2t-main-content .a2t-service-hero > div,
  body:has(.a2t-services-pro) #a2t-main-content .a2t-service-lead {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 380px) {
  body:has(.a2t-services-pro) #a2t-main-content .a2t-services-pro {
    padding-inline: 14px !important;
  }
}