/* ============================================================
   PHOTO SIZE BUDGET — site-wide cap on content photography
   ------------------------------------------------------------
   WHY THIS FILE EXISTS

   Photo sizing on this site was set per component, in eight
   different places: style.css, css/st-ui.css, the <style> blocks
   that page-asset-management.php / page-facility-management.php
   print in the body, and four plugin stylesheets. Most of those
   components cap their image height. Three did not, so on every
   solution, topic and project page the body photograph grew to
   the full reading column: measured at 1150 x 767 = 882,000px2
   at a 1600px viewport, taller than the fold on a laptop.

   The previous fix for this was per-page: st-solutions.css still
   carries hand-written caps for body.postid-3378 and .postid-3407.
   That does not scale to 690 URLs. This file replaces that
   approach with one budget applied everywhere.

   THE BUDGET

   Reference = the largest content photo before this file:
     1150 x 767 = 882,050px2   (.st-hero-visual on a solution page)
   Cap = a quarter of that:
      220,512px2
   Satisfied by a 520 x 380 box:
     520 x 380 = 197,600px2    (22.4% of the reference)

   Every in-flow photograph is held inside that box. Cropping is
   done with object-fit so nothing is stretched.

   WHAT IS DELIBERATELY EXEMPT

   - Page banners (.page-header-bg, .fm-hero-bg). These are
     position:absolute scrims behind the H1, not photographs in
     the reading flow; shrinking them would leave a bare
     coloured band where the banner used to be.
   - Logos, icons, badges, certificate marks and product-card
     thumbnails. They are already far below the budget, so the
     caps below never bind on them.
   - Viewports under 768px. A phone column is ~340px wide, so a
     full-width photo there is already inside the budget.

   LOADS LAST, USES !important, for the same reason
   st-gold-buttons.css does: several page templates print their
   own <style> block in the document body, which would otherwise
   win on document order.

   To revert: dequeue 'st-photo-budget' in functions.php.
   ============================================================ */

:root {
  --st-photo-max-w: 520px;   /* widest a content photo may render */
  --st-photo-max-h: 380px;   /* tallest a content photo may render */
  --st-photo-max-w-wide: 720px;  /* full-bleed band images (see 3) */
  --st-photo-max-h-wide: 300px;  /* 720 x 300 = 216,000px2, still under cap */
}

@media (min-width: 768px) {

/* ------------------------------------------------------------
   1. ROOT CAUSE — the solution/topic/project hero was never
      laid out in two columns
   ------------------------------------------------------------
   st-authority.css has always carried

     @media (min-width:900px){ .st-hero.has-visual{
       grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) } }

   but no template ever printed the has-visual class, so the
   grid stayed single-column and the hero photo stretched to the
   full 1150px column. :has() applies the rule the markup was
   always meant to get, which alone takes the hero photo from
   1150 x 767 down to about 510 x 340 (173,000px2 — 20% of the
   reference). The caps in section 2 then hold it there.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .st-hero:has(.st-hero-visual),
  .st-hero.has-visual {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   2. CONTENT PHOTOS — the budget
   ------------------------------------------------------------
   .st-hero-visual   solution / topic / project hero photo
   .st-figure        generic figure printed by st_auth_img()
   .st-section-figure  the image that breaks up long prose
   Measured before: 1150 x 767 (882k). After: <= 520 x 380 (198k).
   ------------------------------------------------------------ */
.st-hero-visual,
.st-figure,
.st-section-figure {
  max-width: var(--st-photo-max-w) !important;
}
.st-section-figure,
.st-figure {
  margin-inline: auto !important;   /* centred once it is narrower than the column */
}
.st-hero-visual > img,
.st-hero-visual > svg,
.st-figure > img,
.st-section-figure > img {
  max-height: var(--st-photo-max-h) !important;
  object-fit: cover;
}

/* Arabic mirror of the same hero slot. */
.st-ar-hero-visual {
  max-width: var(--st-photo-max-w) !important;
}
.st-ar-hero-visual > img,
.st-ar-hero-visual > svg {
  max-height: var(--st-photo-max-h) !important;
  object-fit: cover;
}

/* ------------------------------------------------------------
   3. FULL-BLEED BAND IMAGES
   ------------------------------------------------------------
   .st-rhythm-wide is the one photo that is meant to span the
   reading column and interrupt the prose. Measured before:
   1152 x 420 = 484,000px2, which is 2.2x the budget. Held to
   720 x 300 = 216,000px2 and kept centred so the band still
   reads as a break rather than a card.
   ------------------------------------------------------------ */
.st-rhythm-wide {
  max-width: var(--st-photo-max-w-wide) !important;
  margin-inline: auto !important;
}
.st-rhythm-wide img {
  /* !important so the #st-main-content backstop in section 5, which
     is a stronger selector, does not pull the band back to 520px. */
  max-width: 100% !important;
  max-height: var(--st-photo-max-h-wide) !important;
  height: var(--st-photo-max-h-wide) !important;
  object-fit: cover;
}

/* ------------------------------------------------------------
   4. HAND-BUILT PAGE TEMPLATES
   ------------------------------------------------------------
   These set their photo heights in a <style> block inside the
   page body, so they need the same treatment by name.
     .fm-hero-real   was 572 x 520 = 297k  (1.35x budget)
     .am2-hero-photo was 519 x 480 = 249k  (1.13x budget)
     .about-preview-image was 551 x 400 = 220k (exactly at the line)

   .fm-real-photo (478 x 390 = 186k) and .am2-figure (278 x 603
   = 168k) already measured inside the budget and are left alone.
   ------------------------------------------------------------ */
.fm-hero-real,
.am2-hero-photo,
.about-preview-image {
  max-width: var(--st-photo-max-w) !important;
}
.fm-hero-real img,
.about-preview-image img {
  max-height: var(--st-photo-max-h) !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* .am2-hero-photo sizes itself with aspect-ratio and holds the
   image at height:100%, so the cap belongs on the wrapper. */
.am2-hero-photo {
  aspect-ratio: 3 / 2 !important;
}

/* The ehc-* page templates (octopus-wms, security-defense-wms,
   sira-platform, saif-cybersecurity, warehouse-safety, military-
   expo-ready and the rest) share one image slot family:

     .ehc-<page>-hero-img img   height:380px            — fits
     .ehc-<page>-split-img img  height:100% + min-height — does not

   The split/feature variants stretch to whatever the text column
   beside them happens to be, so the width cap alone left square
   images: 520 x 520 = 270,400px2 on /octopus-wms/ and
   /security-defense-wms/, 520 x 438 on /sira-platform/. Every one
   of them already sets object-fit:cover, so capping the height
   crops rather than distorts. Written as an attribute match so a
   new ehc-* page is covered the day it is added. */
[class*="ehc-"][class*="-img"] > img {
  max-height: var(--st-photo-max-h) !important;
}

/* ------------------------------------------------------------
   5. BACKSTOP
   ------------------------------------------------------------
   Anything not named above — a photo added to a new template, a
   figure pasted into post content, an image a plugin prints —
   still cannot exceed the budget. Width only, so natural aspect
   ratios are preserved and nothing is cropped by surprise.

   header.php prints one <main id="st-main-content"> landmark on
   every template, so anchoring here covers the whole site and
   still leaves the navbar and footer logos out of scope.

   Excluded: banner scrims and decorative layers, which are
   position:absolute and are named *-bg / *-bgfx throughout this
   codebase. Shrinking one of those would leave a bare coloured
   band where the banner used to be.

   Cards, product tiles and cover grids need no exclusion: they
   were measured well inside the budget (product tile 229 x 184
   = 42k, brochure cover 362 x 512 = 185k), so a 520px width cap
   never binds on them.
   ------------------------------------------------------------ */
#st-main-content img:not([class*="-bg"]) {
  max-width: var(--st-photo-max-w);
}
/* Portrait documents (A4 brochure covers, ratio 1:1.414) reach the
   budget on height rather than width, so they are capped on width
   until the height that follows from the aspect ratio fits:
     380 x 535 = 203,300px2.
   The other cover grids were measured and already fit, so they are
   left alone: .strc-card-cover 365 x 516 = 188k, .stbl-card-cover
   362 x 512 = 185k, .strc-featured-media 300 x 425 = 127k. */
.st-arb-cover {
  max-width: 380px !important;
}

} /* end @media (min-width: 768px) */

/* ------------------------------------------------------------
   6. REDUCED MOTION / PRINT — nothing to do, but keep the caps
      so a printed page does not go back to full-bleed photos.
   ------------------------------------------------------------ */
@media print {
  .st-hero-visual,
  .st-figure,
  .st-section-figure,
  .st-rhythm-wide {
    max-width: var(--st-photo-max-w) !important;
  }
}