/* =========================================================
   ABOUT PAGE
   Page-specific layout only.

   Styling inherited from
   global.css.
   ========================================================= */


/* ---------------------------------------------------------
   PAGE WIDTH
   Note: no max-width on .about-page itself — matching other
   pages' <main>. Capping main here would clip the full-bleed
   .references band on screens wider than --container-width.
   Child sections already constrain their own width via
   global.css (.section, .page-header, .page-review-note).
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   MISSION
   Keep the existing single panel aligned with the page
   header instead of allowing it to span the full page.
   --------------------------------------------------------- */

.about-mission {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: 0;
  text-align: center;
}


/* About-page pets image */
.about-pets-section .split-image.about-pets-image {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.about-pets-section .about-pets-image img {
  width: 110%;
  max-width: 34rem;
  margin-inline: auto;
}


/* ---------------------------------------------------------
   FIRST ABOUT IMAGE

   The image-frame-small class is placed directly on the
   image in the About page HTML rather than on a wrapper.
   This rule adapts the global treatment to that markup.
   --------------------------------------------------------- */

.about-section .image-frame-small img {
  display: block;
  aspect-ratio: auto;
  object-fit: contain;
}


/* ---------------------------------------------------------
   OTHER SPLIT-SECTIONS
   --------------------------------------------------------- */

.about-page .split-copy,
.about-page .split-image {
  min-width: 0;
}

.about-page .split-image.image-frame {
  width: min(100%, 430px);
  margin-inline: auto;
}

/* Why the dog? image */
.about-page .split-image.imbed-img-med {
  width: min(100%, 18rem);
  margin-inline: auto;
  align-self: end;
}

.about-page .split-image.imbed-img-med img {
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .about-pets-section .about-pets-image {
    width: 100%;
    margin-inline: auto;
  }

  .about-pets-section .about-pets-image img {
    width: 100%;
    max-width: 30rem;
  }

  .about-page .split-section {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .about-page .split-copy {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
  }

  .about-page .split-image {
    width: 100%;
  }

  .about-page .split-section-reverse .split-copy {
    order: 1;
  }

  .about-page .split-section-reverse .split-image {
    order: 2;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  .about-page .section {
    padding-inline: calc(var(--site-gutter-mobile) / 2);
  }

  .about-page .about-mission {
    width: min(
      calc(100% - var(--site-gutter-mobile)),
      var(--content-width)
    );
    padding-inline: 0;
  }

  .about-section img.image-frame-small,
  .about-page .split-image.image-frame {
    width: min(100%, 22rem);
  }

  .about-page .page-review-note {
    width: calc(100% - var(--site-gutter-mobile));
  }
}


/* =========================================================
   END ABOUT PAGE
   ========================================================= */