/* Page-specific additions for procurement.php (and sibling process pages), loaded after solar-roof.css. */
/* Every rule is scoped under .sr-page. */

/* Photos with a baked-in yellow stripe on the left (images/Img 3.jpg): crop it out by showing a
   portrait slice taken from the right-hand side of the square image. */
.sr-page .sr-section-media > img.sr-crop-right {
    aspect-ratio: 18 / 25;
    object-position: right center;
    max-width: 380px;
    justify-self: center;
}

/* Section headings on the accent band match the section headlines elsewhere */
.sr-page .sr-band-accent h2 {
    font-size: var(--fs-2xl);
    line-height: 1.2;
    text-wrap: balance;
}

/* Procurement headings are typed in capitals with the company name in mixed case; show them uniformly */
.sr-page .sr-section h2,
.sr-page .sr-band-accent h2,
.sr-page .sr-closing h2 {
    text-transform: uppercase;
}

/* Section headline sits above an image row */
.sr-page .sr-section > .container > h2 + .sr-section-media,
.sr-page .sr-band-accent > .container > h2 + .sr-section-media {
    margin-top: 1.5em;
}

/* Dark statement band: keep a long paragraph to a readable measure */
.sr-page .sr-closing p {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .sr-page .sr-band-accent h2 {
        font-size: 1.75rem;
    }

    .sr-page .sr-section-media > img.sr-crop-right {
        max-width: 100%;
    }
}