/* pages/solutions.css — Solutions list: only what is unique to this page */

/* =====================================================================
   R02 note 1 — compact page hero. The band itself is the shared
   .page-hero--compact modifier (components-content.css, introduced by R01
   for solution-details.html and reused here unchanged, so the two
   neighbouring pages are exactly the same height). What is page-specific is
   this photograph's focal point at the shorter band.
   ===================================================================== */
/* the rows of patch cabling read across the whole band at 35%; at 50% and below the
   lower half falls into the dark rail, at 65% and above the subject leaves the frame */
.page-hero--compact .page-hero__image { object-position: 50% 35%; }

/* §2.1 ladder, rung 1 — block padding only, never the type scale. This page keeps its
   full-size description where solution-details.html has a small sub-line, so below 1200,
   where the content and not the floor sets the band, it needs one step less padding to
   land on the same height. At 1200 and above the 180px floor governs on both pages and
   the shared padding is restored untouched. */
.page-hero--compact .page-hero__inner { padding-block: var(--space-xs); }

@media (min-width: 768px) {
    .page-hero--compact .page-hero__inner { padding-block: var(--space-sm); }
}

@media (min-width: 1200px) {
    .page-hero--compact .page-hero__inner { padding-block: var(--space-md); }
}

/* =====================================================================
   R02 note 5 — the solution cards carry the solution photograph instead of
   the icon. Everything else is the approved .card--media project card: zero
   card padding, the image flush to the card's inner edges inside the .photo
   frame, one shared hover (lift, gold border, 1.00 → 1.05 image scale inside
   overflow:hidden). The only page difference is the frame ratio — the
   supplied photographs are 16:9, the project cards are 4:3.
   ===================================================================== */
.card--solution .card__media { aspect-ratio: 16 / 9; }