/*
|--------------------------------------------------------------------------
| JPL Homepage Hero Cards + Client Colour Overrides
|--------------------------------------------------------------------------
| Load this file LAST.
*/

:root {
    --jpl-red: #e32b22;
}

/* ---------------------------------------------------------------
   Client colour requirement
   All eyebrow / top labels across the public website = JPL red.
--------------------------------------------------------------- */
.eyebrow,
.process .eyebrow,
.process .muted {
    color: var(--jpl-red) !important;
}

.process-card .num {
    color: var(--jpl-red) !important;
}

/* ---------------------------------------------------------------
   Homepage hero cards
   Shorter image on top + white content area underneath.
--------------------------------------------------------------- */
.hero-grid.hero-grid-below-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
    align-items: stretch;
    background: #f8f8f8;
}

.hero-card.hero-card-below-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    overflow: hidden;

    /* Client specifically requested square edges */
    border-radius: 0 !important;

    background: #ffffff;
    box-shadow: 0 14px 38px rgba(0,0,0,.09);
}

/* Remove the old image overlay from the previous hero design */
.hero-card.hero-card-below-content::after {
    display: none !important;
    content: none !important;
}

/* Image section — substantially shorter than the previous full-height hero */
.hero-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(320px, 39vw, 500px);
    overflow: hidden;
    background: #e9e9e9;
}

.hero-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: transform .55s ease;
}

.hero-card-media:hover img,
.hero-card.hero-card-below-content:hover .hero-card-media img {
    transform: scale(1.035) !important;
}

/* White content section below image */
.hero-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;

    padding: 25px 26px 26px;

    background: #ffffff;
    color: #222222;
}

.hero-card-copy {
    flex: 1;
}

.hero-card-body h2 {
    margin: 0 0 10px;

    color: #1f1f1f;
    font-family: "Arial Nova", Arial, Helvetica, sans-serif;
    font-size: clamp(21px, 1.65vw, 29px);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 800;

    text-shadow: none !important;
}

.hero-card-description {
    max-width: none !important;
    margin: 0 !important;

    color: #666666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

.hero-card-description p {
    margin: 0 0 8px;
}

.hero-card-description p:last-child {
    margin-bottom: 0;
}

/* Button moves below the description, no longer over the image */
.hero-card-button {
    align-self: flex-start;
    margin-top: auto;

    border-color: #202020;
    background: transparent;
    color: #202020;
}

.hero-card-button:hover {
    background: #202020;
    color: #ffffff;
}

/* Neutralise old absolute overlay content rules if any cached styles remain */
.hero-card.hero-card-below-content .hero-content {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1180px) {
    .hero-grid.hero-grid-below-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-card-media {
        height: 430px;
    }
}

@media (max-width: 760px) {
    .hero-grid.hero-grid-below-content {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px;
    }

    .hero-card-media {
        height: min(62vh, 460px);
        min-height: 330px;
    }

    .hero-card-body {
        padding: 22px 20px 24px;
    }

    .hero-card-body h2 {
        font-size: 25px;
    }
}