/*---*\
Hero Block
Full-bleed hero with background image, dark-blue left gradient overlay,
bold white title + description, and a responsive card grid.

KEY FEATURES:
- Background image (object-fit cover) behind the full hero zone
- Left-to-right gradient: dark blue (90%) solid to 35%, fading to transparent by 75%
- White text content (title + description) in the left/overlayed portion
- Card grid: 1 col mobile → 2 col tablet → 3 col desktop (3+2 centered rows)
- Cards are white with a subtle shadow; teal title, gray description, teal outline button

DESIGN TOKENS (from Figma):
- Teal:       #00a99d
- Blue:       #1a2f5c
- Gray:       #86939e
- Shadow:     rgba(134,147,158,0.25)
- Card radius: 6px

IMPLEMENTATION NOTES:
- !important used on hero title color and font-weight to prevent the site's global
  heading rules from overriding to a light weight or non-white colour
\*---*/

/* ==========================================================================
   HERO ZONE — background image + overlay + content
   ========================================================================== */

.hero-block__hero-zone {
    position: relative;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 50px;
    min-height: 400px;
}

/* Background image layer — fills the hero zone entirely */
.hero-block__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-block__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Left-dominant overlay matching Figma:
   solid dark blue to 35%, then fades to transparent by 75% */
.hero-block__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(26, 47, 92, 0.92) 0%,
        rgba(26, 47, 92, 0.92) 35%,
        rgba(26, 47, 92, 0.5)  55%,
        rgba(26, 47, 92, 0)    75%
    );
    pointer-events: none;
}

/* ==========================================================================
   CONTENT CONTAINER
   ========================================================================== */

.hero-block__container {
    position: relative;
    z-index: 1;
    width: calc(100% - 40px);
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ==========================================================================
   TEXT SECTION (title + description)
   ========================================================================== */

.hero-block__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1060px;
}

/*
 * Use parent + child selector (.hero-block .hero-block__title) to reach specificity (0,2,0),
 * which beats the global theme rule `div[class*="hero"] h1` at (0,1,2) even when both
 * carry !important. Same pattern applied to description p to defeat `div[class*="hero"] p`
 * which forces color:#000, font-weight:bold, font-size:42px on all paragraphs inside any
 * element whose class contains "hero".
 */
.hero-block .hero-block__title {
    margin: 0;
    font-family: 'brandon-grotesque', Helvetica, Arial, sans-serif;
    font-weight: 700 !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-block .hero-block__description {
    font-family: var(--fb-font-body);
    font-weight: var(--fb-font-body-weight);
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
}

.hero-block .hero-block__description p {
    margin: 0 0 12px;
    font-family: var(--fb-font-body);
    font-size: 16px !important;
    font-weight: var(--fb-font-body-weight) !important;
    line-height: 27.2px !important;
    color: #ffffff !important;
}

.hero-block .hero-block__description p:last-child {
    margin-bottom: 0;
}

.hero-block .hero-block__description strong,
.hero-block .hero-block__description b {
    font-weight: 700 !important;
    color: #ffffff !important;
}

.hero-block .hero-block__description a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* ==========================================================================
   CARD GRID
   ========================================================================== */

.hero-block__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.hero-block__cards .btn {
    width: 100%;
}

.hero-block__card {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(134, 147, 158, 0.25);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 260px;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-block__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.hero-block .hero-block__card-title {
    margin: 0;
    font-family: 'brandon-grotesque', Helvetica, Arial, sans-serif;
    font-weight: 700 !important;
    font-size: 22.4px !important;
    line-height: 48px !important;
    color: #00a99d !important;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.hero-block .hero-block__card-desc {
    margin: 0;
    font-family: var(--fb-font-body);
    font-size: 16px !important;
    font-weight: var(--fb-font-body-weight) !important;
    line-height: 1.7 !important;
    color: #86939e !important;
    text-align: center;
}

/* Teal outline card button */
.hero-block .hero-block__card-btn,
.hero-block .btn-hero-block__card-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    border: 2px solid #00a99d;
    border-radius: 6px;
    background: transparent;
    color: #00a99d !important;
    font-family: 'brandon-grotesque', Helvetica, Arial, sans-serif;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s, color 0.2s;
}

/* ==========================================================================
   TABLET (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {

    .hero-block__hero-zone {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .hero-block__container {
        gap: 55px;
    }

    .hero-block .hero-block__title {
        font-size: 52px !important;
    }

    .hero-block__cards {
        gap: 24px;
    }

    .hero-block__card {
        flex: 1 1 calc(50% - 24px);
        max-width: calc(50% - 12px);
        padding: 32px;
    }
}

/* ==========================================================================
   DESKTOP (min-width: 1025px)
   ========================================================================== */

@media (min-width: 1025px) {
    .hero-block + section {
        padding-top: 172px;
    }

    .hero-block__hero-zone {
        padding-top: 120px;
        padding-bottom: 0;
        overflow: visible;
    }

    .hero-block__container {
        gap: 80px;
    }

    .hero-block .hero-block__title {
        font-size: 72px !important;
        line-height: 72px !important;
    }

    .hero-block__cards {
        gap: 32px;
        margin-bottom: -70px;
    }

    .hero-block__card {
        flex: 1 1 calc(33.333% - 22px);
        max-width: 399px;
        padding: 32px;
        gap: 20px;
    }

    .hero-block__card-btn:hover,
    .btn-hero-block__card-btn:hover {
        background: #00a99d;
        color: #ffffff !important;
    }
}