/* ------------------------------------------------------------------
   Commodities, Private equity and Carbon pages. Loaded after style.css and property.css
   (the layouts, sizes and motion are Property's, reused unchanged).
   This file holds only what differs between pages: where each photograph is cropped.
   Every rule is scoped to its own page class, so Property and the homepage are untouched.
------------------------------------------------------------------- */

/* opening photograph: the wide crop trims from the top and bottom only */
.page-commodities .p-hero-img img { object-position: 50% 58%; }
.page-private-equity .p-hero-img img { object-position: 50% 52%; }
.page-carbon .p-hero-img img { object-position: 50% 30%; }   /* keeps the tallest turbine's blade tips in frame */

/* second section: wide band */
.page-commodities .p-inv-img img { object-position: 50% 62%; }
.page-private-equity .p-inv-img img { object-position: 50% 18%; }   /* keeps the two principals' hair nets in frame when the band is wider than 21:9 */
.page-carbon .p-inv-img img { object-position: 50% 55%; }

/* third and fourth sections keep Property's 50% 55%; adjust here only when a subject needs it */
.page-commodities .p-fam-img img { object-position: 50% 62%; }
.page-private-equity .p-biz-img img { object-position: 50% 20%; }   /* keeps both heads in a frame that is wider than 3:2 */

/* a phone shows the purpose-made portrait / 4:3 crop whole */
@media (max-width: 600px) {
  .page-commodities .p-hero-img img, .page-private-equity .p-hero-img img, .page-carbon .p-hero-img img,
  .page-commodities .p-inv-img img, .page-private-equity .p-inv-img img, .page-carbon .p-inv-img img,
  .page-commodities .p-fam-img img, .page-private-equity .p-biz-img img { object-position: 50% 50%; }
}

/* where the second heading is written as two phrases, each sits on its own line (as the third and fourth headings do) */
.page-commodities .p-inv-h span, .page-private-equity .p-inv-h span, .page-carbon .p-inv-h span { display: block; text-wrap: balance; }

/* Private equity: the opening call to action ("Discuss an ownership decision") is longer than Property's, so it takes a wider column
   and the paragraph one column less. Desktop only; below 901px the page already stacks the two. */
@media (min-width: 901px) {
  .page-private-equity .p-hero-foot .lede { grid-column: 1 / span 7; }
  .page-private-equity .p-hero-foot .cta { grid-column: 8 / span 5; }
}

/* Private equity, investors heading only. The first sentence ("Look beyond the stake.") stays on one line and the second may take two, so the
   heading is three balanced lines at the same scale as the headings of the other sections. The text column is made a size container so the size
   can never exceed what lets that first sentence (about 9.3em wide) fit its column: 10.6cqw. Desktop only: below 901px the page stacks and the
   heading has the full width. No forced breaks and no nowrap: each sentence is its own block and wraps naturally. */
@media (min-width: 901px) {
  .page-private-equity #investors .p-fam-text { container-type: inline-size; }
  .page-private-equity #investors .p-fam-h { font-size: max(1.7rem, min(clamp(1.7rem, min(3.1vw, 5.4svh), 3rem), 10.6cqw)); }   /* never smaller than the page's minimum (1.7rem) */
}

/* Carbon, businesses heading: the second sentence wraps greedily rather than balanced, so a narrow column reads "A practical way / forward." rather than leaving "A practical" alone. */
.page-carbon .p-inv-h span { text-wrap: wrap; }
