/*
    Custom Solutions page, restyled to match maintenance.css.
    The 2024 rules for this page in spectron.css size things in vw/vh, which made the cards tall and narrow on
    phones; every rule here starts with .page-custom-solutions so it outranks them without editing that file.
*/

/* The page headings are divs in the frozen markup, so they borrow the maintenance h1 and h2 looks by class. */
.page-custom-solutions .custom-header {
    letter-spacing: normal;
    color: var(--sp-ink);
    line-height: 1.2;
}

.page-custom-solutions .cs-title {
    margin: 0 0 3rem;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

.page-custom-solutions .cs-heading {
    margin: 0 0 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sp-ink);
    font-size: 2.2rem;
    font-weight: 800;
    text-align: left;
}

/* spectron.css centred this block at 62vw; maintenance running text is left-aligned at 72ch. */
.page-custom-solutions .content {
    max-width: 72ch;
    margin: 0;
    padding-top: 0;
    text-align: left;
    font-size: 1.15rem;
}

    .page-custom-solutions .content p {
        font-size: 1.15rem;
    }

    /* The one-line opener reads as the page's lead, like the lead line of the maintenance alert. */
    .page-custom-solutions .content p:first-child {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 1.25rem;
    }

/* Logos sit on a strip between thin rules, like the rows of the maintenance part list. */
.page-custom-solutions .partners {
    --logo-scale: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin: 3rem 0 0;
    padding: 2rem 0;
    border-top: 1px solid var(--sp-rule);
    border-bottom: 1px solid var(--sp-rule);
}

    .page-custom-solutions .partners img {
        display: block;
        height: calc(var(--logo-h) * var(--logo-scale));
        width: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
    }

    /* The logo files carry very different blank margins (Rockwell's mark fills a third of its height, Lockheed's
       all of it), so one shared height made some look tiny. These heights give each mark about the same ink. */
    .page-custom-solutions .partners img:nth-child(1) { --logo-h: 60px; }
    .page-custom-solutions .partners img:nth-child(2) { --logo-h: 34px; }
    .page-custom-solutions .partners img:nth-child(3) { --logo-h: 44px; }
    .page-custom-solutions .partners img:nth-child(4) { --logo-h: 100px; }
    .page-custom-solutions .partners img:nth-child(5) { --logo-h: 80px; }

/* Past solutions use the maintenance photo cards (.sp-cards / .sp-card); these undo the old vw/vh sizing.
   spectron.css makes .solutions a flex row, which beats .sp-cards' grid on specificity, so grid is restated. */
.page-custom-solutions .solutions {
    display: grid;
    margin: 0;
}

.page-custom-solutions .solution {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    text-align: left;
}

    /* These are full-bleed photos, not product shots on white, so they fill the frame; 3:2 is the photos' own
       shape, so only the 4:3 farm photo loses a thin strip of sky and table. */
    .page-custom-solutions .solution img {
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        padding: 0;
    }

.page-custom-solutions .cs-caption {
    flex: 1;
    padding: 1rem 1.1rem 1.25rem;
    border-top: 1px solid var(--sp-rule);
}

.page-custom-solutions .solution-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.page-custom-solutions .solution-description {
    font-size: 1.05rem;
    line-height: 1.6;
}

.page-custom-solutions .sp-section:last-child {
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    /* undo the 60vw column and 40vh photos from spectron.css's 800px rule */
    .page-custom-solutions .solution {
        width: auto;
        margin: 0;
    }

        .page-custom-solutions .solution img {
            height: auto;
            aspect-ratio: 3 / 2;
        }

    .page-custom-solutions .partners {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .page-custom-solutions .cs-title {
        font-size: 2.4rem;
        margin-bottom: 2rem;
    }

    .page-custom-solutions .cs-heading {
        font-size: 1.8rem;
    }

    .page-custom-solutions .content p:first-child {
        font-size: 1.25rem;
    }

    .page-custom-solutions .partners {
        --logo-scale: 0.8;
        gap: 1.25rem 2rem;
        padding: 1.5rem 0;
    }
}

/* ------------------------------------------------------------ centred */
/* the section headings centred (the 2px rule under them still runs the full column), and the narrow text blocks in
   the middle of their space rather than against the left edge */
.page-custom-solutions .cs-heading {
    text-align: center;
}

.page-custom-solutions .sp-prose {
    margin-left: auto;
    margin-right: auto;
}