/* Project overrides on top of theme CSS.
   Loaded after the colour stylesheet (style.css / blue.css / etc.) in baseof.html. */

/* --- Image sizing -----------------------------------------------------------
   Theme defaults set fixed pixel widths (intro 38rem, cta 20rem) but no height
   cap. Lab JPGs end up overwhelming the fold. Cap height and let images cover. */

section.intro img,
section.cta .twocols .image img,
section.image .twocols .image img {
    max-height: 500px;
    object-fit: cover;
    width: auto;
    max-width: 100%;
}

/* --- About page imagery -----------------------------------------------------
   Theme treats every <p><img> inside section.about as a circular avatar
   (width:20rem, aspect-ratio:1, border-radius:100%). Override so the
   FFwebsite_2.jpg lab photo renders as a normal rectangular image. */

section.about .container p img {
    aspect-ratio: auto;
    border-radius: 1rem;
    width: 100%;
    max-width: 100%;
    max-height: 500px;
    object-fit: cover;
}

/* --- Vertical spacing -------------------------------------------------------
   Theme uses 4.5rem top / 5rem bottom on every section, plus a 2rem collapsed
   top between adjacent plain sections (~7rem total gap, ~140px). Tighten. */

section,
section.image.alt {
    padding: 2.5rem 0 3rem;
}

section:not(.hasbackgroundcolor) + section:not(.hasbackgroundcolor) {
    padding-top: 1rem;
}