/* PHONYX About Us Mobile Fix v1.0.3
   Mobile only: 4px side spacing + full-width Pagelayer content + justified paragraphs.
   Desktop is intentionally untouched. */
@media (max-width: 767px) {

  /* Break out of narrow theme/Pagelayer wrappers. */
  body.phx-about-mobile-page #page,
  body.phx-about-mobile-page #primary,
  body.phx-about-mobile-page #main,
  body.phx-about-mobile-page .site,
  body.phx-about-mobile-page .site-main,
  body.phx-about-mobile-page .content-area,
  body.phx-about-mobile-page .content-container,
  body.phx-about-mobile-page .entry-content,
  body.phx-about-mobile-page .pagelayer-content,
  body.phx-about-mobile-page .pagelayer-row,
  body.phx-about-mobile-page .pagelayer-row-holder,
  body.phx-about-mobile-page .pagelayer-inner_row,
  body.phx-about-mobile-page .pagelayer-inner_row-holder,
  body.phx-about-mobile-page .pagelayer-col,
  body.phx-about-mobile-page .pagelayer-col-holder,
  body.phx-about-mobile-page .pagelayer-ele,
  body.phx-about-mobile-page .pagelayer-text,
  body.phx-about-mobile-page .pagelayer-text-holder {
    box-sizing: border-box !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Every row uses the actual phone viewport. */
  body.phx-about-mobile-page .pagelayer-row {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Remove the narrow-column geometry. */
  body.phx-about-mobile-page .pagelayer-row-holder,
  body.phx-about-mobile-page .pagelayer-inner_row,
  body.phx-about-mobile-page .pagelayer-inner_row-holder,
  body.phx-about-mobile-page .pagelayer-col,
  body.phx-about-mobile-page .pagelayer-col-holder,
  body.phx-about-mobile-page [class*="pagelayer-col"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Strip nested side padding that was creating the thin central column. */
  body.phx-about-mobile-page .entry-content,
  body.phx-about-mobile-page .pagelayer-content,
  body.phx-about-mobile-page .pagelayer-row-holder,
  body.phx-about-mobile-page .pagelayer-inner_row-holder,
  body.phx-about-mobile-page .pagelayer-col-holder,
  body.phx-about-mobile-page .pagelayer-ele,
  body.phx-about-mobile-page .pagelayer-ele-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Exactly 4px left/right for visible content. */
  body.phx-about-mobile-page .pagelayer-text,
  body.phx-about-mobile-page .pagelayer-text-holder,
  body.phx-about-mobile-page .pagelayer-heading,
  body.phx-about-mobile-page .pagelayer-heading-holder,
  body.phx-about-mobile-page .pagelayer-wp-title,
  body.phx-about-mobile-page .entry-content > p,
  body.phx-about-mobile-page .entry-content > h1,
  body.phx-about-mobile-page .entry-content > h2,
  body.phx-about-mobile-page .entry-content > h3,
  body.phx-about-mobile-page .entry-content > ul,
  body.phx-about-mobile-page .entry-content > ol {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Two-sided alignment for body copy. */
  body.phx-about-mobile-page .pagelayer-text,
  body.phx-about-mobile-page .pagelayer-text-holder,
  body.phx-about-mobile-page .pagelayer-text p,
  body.phx-about-mobile-page .pagelayer-text-holder p,
  body.phx-about-mobile-page .pagelayer-text-holder span,
  body.phx-about-mobile-page .entry-content p {
    text-align: justify !important;
    text-justify: inter-word !important;
    font-size: 17px !important;
    line-height: 1.46 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: auto !important;
  }

  /* Headings remain left aligned. */
  body.phx-about-mobile-page .pagelayer-heading,
  body.phx-about-mobile-page .pagelayer-heading-holder,
  body.phx-about-mobile-page .pagelayer-heading-holder h1,
  body.phx-about-mobile-page .pagelayer-heading-holder h2,
  body.phx-about-mobile-page .pagelayer-heading-holder h3,
  body.phx-about-mobile-page .entry-content h1,
  body.phx-about-mobile-page .entry-content h2,
  body.phx-about-mobile-page .entry-content h3 {
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Compact mobile section spacing. */
  body.phx-about-mobile-page .entry-content p,
  body.phx-about-mobile-page .pagelayer-text-holder p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  body.phx-about-mobile-page .pagelayer-heading-holder h1,
  body.phx-about-mobile-page .entry-content h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  body.phx-about-mobile-page .pagelayer-heading-holder h2,
  body.phx-about-mobile-page .entry-content h2 {
    font-size: 30px !important;
    line-height: 1.16 !important;
  }
}