/***
 * Page-specific style overrides
 *
 * Deliberately kept separate from main.css, which is meant to hold only
 * sitewide styles. Everything in this file is a one-off tweak for a
 * specific block instance on a specific page, scoped via a custom class
 * added directly to that block through its own "Additional CSS
 * Class(es)" field in the block editor (Advanced panel).
 *
 * This only works because every block's template now actually outputs
 * that field's value on its wrapper element - previously it didn't
 * (silently dropped by every block in the theme), which is why earlier
 * one-off styling here used body.postid-N selectors instead. If you're
 * adding a new override below, use a real class on the block instance,
 * not a postid selector - keep postid-scoped CSS out of both files.
 ***/


/***
 * InXpress Sales Collateral page - Icon List download cards
 *
 * Class: collateral-download-list (added to the Icon List block via
 * Additional CSS Class(es))
 *
 * Two things this fixes:
 * 1. The block's own "Icon Size" setting tops out at "Large", which
 *    still scales the thumbnail images down below their real size.
 *    This shows them at their natural/actual dimensions instead.
 * 2. Each card is already a real, working link to a downloadable PDF
 *    (every item's "Button" field has a real file URL), it just had no
 *    visible indication of that. This adds a clear "Download" label via
 *    ::after, so nothing in the template/PHP needs to change.
 ***/
.collateral-download-list .icon-wrapper img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}

.collateral-download-list .grid > a {
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.collateral-download-list .grid > a::after {
    content: "Download \2193";
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--blue-navy);
}

.collateral-download-list .grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/***
 * InXpress Sales Collateral page - compact Hero 2
 *
 * Class: collateral-hero-compact (added to the Hero 2 block via
 * Additional CSS Class(es))
 *
 * Only applies at >=1025px (this theme's own "md:" breakpoint - the
 * --w-md CSS variable, NOT 768px). Below that width, hero-2's own
 * layout switches to a single stacked column, which this doesn't touch
 * at all.
 *
 * Targets the IMAGE's own height directly, not the whole section's
 * max-height - constraining the section itself with overflow:hidden
 * clipped the HEADING text too at some widths (e.g. 1150px, where the
 * heading wraps to two lines and needs more vertical room than a fixed
 * section cap allowed). Constraining only the image's height means the
 * section's overall height simply follows whichever content needs more
 * room (text or image), so text can never get cut off.
 *
 * object-position shifts the crop to reveal the full "InXpress" wall
 * logo in the photo, clear of the fixed nav overlaying the top of the
 * hero - default centering was cropping the top of the logo right at
 * the nav's edge.
 ***/
@media (min-width: 1025px) {
    .collateral-hero-compact .image-inner img {
        height: 380px !important;
        min-height: 0 !important;
        object-position: 50% 30%;
    }

    .collateral-hero-compact > div {
        align-items: center;
    }
}