/*
 * About page (/about-us/, page 89) media layout.
 * The page is classic-editor HTML: each section floats one image right.
 * The images had different widths (320 vs 140) and the report card, a
 * designed PNG with its own border, picked up the site-wide image frame
 * from Additional CSS on top. This gives every section image one frame,
 * one width and one aspect ratio, and stacks them on phones.
 * Additional CSS prints after theme styles, hence body-level selectors
 * and !important on the frame properties it also sets.
 */
body.page-id-89 .entry-content img.alignright {
  float: right;
  width: 300px !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 4px 0 24px 40px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
}

/* Portrait report card: show the whole cover inside the same 4:3 frame. */
body.page-id-89 .entry-content img.alignright[src*="impact-report"] {
  object-fit: contain;
  padding: 12px;
  background: #f3f5f7;
  box-sizing: border-box;
}

/* Section breaks: give each heading room and keep floats from overlapping. */
body.page-id-89 .entry-content h4 {
  clear: both;
  margin-top: 40px;
}

/* Icons, banners and the flyer button are graphics, not photos: no frame. */
body.page-id-89 .entry-content img:not(.alignright) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Arrow links: a comfortable tap target. */
body.page-id-89 .entry-content strong > a {
  display: inline-block;
  padding: 4px 0;
}

/* Film embed: full width at 16:9 instead of the fixed oEmbed size. */
body.page-id-89 .entry-content iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

@media (max-width: 767px) {
  body.page-id-89 .entry-content img.alignright {
    float: none;
    display: block;
    width: 100% !important;
    max-width: 480px;
    margin: 8px 0 20px !important;
  }
}