/* ==========================================================================
   Final Mobile Article Overflow Fixes
   Fixes the remaining iPhone QA issues on Managing Stress, Blood Pressure,
   Heart Health, and the compact Tap-to-Call control.
   Loaded after earlier mobile rules so these overrides win.
   ========================================================================== */

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  main,
  main > section,
  main .container,
  .pre-footer-inner,
  .cta-band-inner {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main .container,
  .pre-footer-inner,
  .cta-band-inner {
    width: min(100% - 28px, var(--container, 1180px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main [style*="display:grid"][style*="grid-template-columns"],
  main [style*="display: grid"][style*="grid-template-columns"],
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns:2fr 1fr"],
  main [style*="grid-template-columns: 2fr 1fr"],
  main [style*="grid-template-columns:1.5fr"],
  main [style*="grid-template-columns: 1.5fr"],
  main [style*="grid-template-columns:2fr"],
  main [style*="grid-template-columns: 2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main [style*="display:flex"],
  main [style*="display: flex"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main p,
  main li,
  main a,
  main span,
  main h1,
  main h2,
  main h3 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Managing Stress: force the article and sidebar into one readable column. */
  body.managing-stress-page main > section:nth-of-type(2) .container > div[style*="grid-template-columns"],
  body.managing-stress-page main [style*="grid-template-columns:2fr 1fr"],
  body.managing-stress-page main [style*="grid-template-columns: 2fr 1fr"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  body.managing-stress-page .body-copy,
  body.managing-stress-page .strategy-card-list,
  body.managing-stress-page .strategy-card,
  body.managing-stress-page .article-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.managing-stress-page .article-sidebar-card {
    position: static !important;
    top: auto !important;
  }

  body.managing-stress-page .strategy-card {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 20px !important;
  }

  body.managing-stress-page .strategy-card h3,
  body.managing-stress-page .strategy-card p {
    max-width: 100% !important;
  }

  /* Blood Pressure: remove the old 650px minimum row width and turn rows into cards. */
  body.blood-pressure-page .bp-category-chart,
  body.blood-pressure-page .bp-log-card,
  body.blood-pressure-page .article-reading-layout,
  body.blood-pressure-page .article-info-card,
  body.blood-pressure-page .article-cta-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.blood-pressure-page .bp-category-chart > div,
  body.blood-pressure-page .bp-log-card > div,
  body.blood-pressure-page .bp-category-row,
  body.blood-pressure-page .bp-crisis-row,
  body.blood-pressure-page .bp-log-row,
  body.blood-pressure-page .bp-log-row > span,
  body.blood-pressure-page .bp-category-row > span,
  body.blood-pressure-page .bp-crisis-row > span {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.blood-pressure-page .bp-category-header,
  body.blood-pressure-page .bp-log-header {
    display: none !important;
  }

  body.blood-pressure-page .bp-category-row,
  body.blood-pressure-page .bp-crisis-row,
  body.blood-pressure-page .bp-log-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
    align-items: start !important;
  }

  body.blood-pressure-page .bp-category-row > div:first-child,
  body.blood-pressure-page .bp-crisis-row > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.blood-pressure-page .bp-log-row > span {
    grid-column: 1 / -1 !important;
    line-height: 1.35 !important;
  }

  body.blood-pressure-page .article-cta-card .btn,
  body.blood-pressure-page .article-info-card .btn,
  body.blood-pressure-page .article-cta-card a[href^="tel:"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.blood-pressure-page .article-cta-card p {
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  body.blood-pressure-page section[style*="padding:var(--space-9)"] {
    padding-top: clamp(42px, 10vw, 72px) !important;
    padding-bottom: clamp(42px, 10vw, 72px) !important;
  }

  /* Heart Health resource image: keep the baked-in card fully visible on phones. */
  body.heart-health-page .resource-detail-hero {
    padding-bottom: 28px !important;
  }

  body.heart-health-page .resource-detail-image {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: #ffffff !important;
    border-radius: 24px !important;
  }

  body.heart-health-page .resource-detail-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body.heart-health-page .resource-article-body-section {
    padding-top: 42px !important;
  }
}

@media (max-width: 520px) {
  .mobile-tap-call {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 82px !important;
    width: auto !important;
    max-width: 96px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  .mobile-tap-call::after {
    content: "Call";
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
  }

  .mobile-tap-call svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Final spacing polish: contact map + booking progress breathing room */
.contact-map-section {
  padding-bottom: clamp(64px, 7vw, 104px) !important;
}

.contact-map-actions {
  margin-top: clamp(22px, 2.8vw, 34px) !important;
  margin-bottom: clamp(18px, 3.5vw, 42px) !important;
}

.contact-map-section + .pre-footer-cta,
.contact-map-section + .cta-band {
  margin-top: 0 !important;
}

.booking-widget-shell {
  margin-top: clamp(18px, 2.6vw, 32px) !important;
}

.booking-widget-progress {
  padding-top: clamp(34px, 3.5vw, 44px) !important;
  padding-bottom: clamp(28px, 3vw, 36px) !important;
}

.booking-widget-step {
  gap: 10px !important;
  padding-inline: clamp(12px, 1.6vw, 18px) !important;
}

.booking-progress-meta {
  margin-top: 2px !important;
}

.booking-progress-note {
  padding-top: clamp(18px, 2.2vw, 26px) !important;
  padding-bottom: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.65 !important;
}

.booking-widget-layout {
  padding-top: clamp(38px, 4vw, 54px) !important;
}

@media (max-width: 900px) {
  .booking-widget-progress {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  .booking-progress-note {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 640px) {
  .contact-map-section {
    padding-bottom: 72px !important;
  }

  .contact-map-actions {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  .booking-widget-layout {
    padding-top: 34px !important;
  }
}

/* Final mobile footer override: keep footer link groups in two columns site-wide. */
@media (max-width: 720px) {
  .site-footer {
    padding-top: 32px !important;
    padding-bottom: 92px !important;
  }

  .site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: min(100% - 32px, var(--container, 1180px)) !important;
    max-width: 100% !important;
    gap: 26px 20px !important;
    align-items: start !important;
  }

  .site-footer .footer-grid > .footer-brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .site-footer .footer-grid > .footer-column {
    grid-column: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    text-align: left !important;
  }

  .site-footer .footer-grid > .footer-column:nth-child(2) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  .site-footer .footer-grid > .footer-column:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
  }

  .site-footer .footer-grid > .footer-column:nth-child(4) {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
  }

  .site-footer .footer-grid > .footer-column:nth-child(5) {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
  }

  .site-footer .footer-column h3 {
    margin: 0 0 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.13em !important;
    text-align: left !important;
  }

  .site-footer .footer-column a,
  .site-footer .footer-column p,
  .site-footer .footer-column li,
  .site-footer .hours-row {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .site-footer .footer-column a {
    margin-bottom: 7px !important;
  }

  .site-footer .footer-contact-item {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    margin-bottom: 8px !important;
  }

  .site-footer .footer-contact-item span:last-child {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .site-footer .hours-row {
    display: grid !important;
    grid-template-columns: minmax(50px, 0.75fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  .site-footer .footer-note {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .site-footer .footer-bottom {
    width: min(100% - 32px, var(--container, 1180px)) !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .site-footer .footer-bottom-links {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 16px !important;
  }
}

@media (max-width: 360px) {
  .site-footer .footer-grid {
    gap: 24px 16px !important;
  }

  .site-footer .footer-column a,
  .site-footer .footer-column p,
  .site-footer .footer-column li,
  .site-footer .hours-row {
    font-size: 12px !important;
  }
}