/* =========================================================
   CYBER STRATEGY TRANSLATOR
   HERO CARD CSS
   Use with front-page.php containing:
   <section class="cst-hero cst-home-hero">
========================================================= */


/* HERO SECTION */

.cst-home-hero {
    padding: 48px 0 88px !important;
    min-height: auto !important;
    position: relative;
    overflow: hidden;
}


/* HERO INNER CONTAINER */

.cst-home-hero .cst-container {
    width: min(1600px, calc(100% - 80px)) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


/* TWO-COLUMN HERO LAYOUT */

.cst-home-hero .cst-hero-grid {
    display: grid !important;
    grid-template-columns: 860px 520px !important;
    gap: 80px !important;
    justify-content: center !important;
    align-items: stretch !important;
}


/* LEFT TEXT CARD */

.cst-home-hero .cst-hero-card {
    width: 860px !important;
    max-width: 860px !important;
    min-height: 620px !important;

    padding: 70px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.11),
            rgba(255,255,255,0.045)
        ) !important;

    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 34px !important;

    box-shadow:
        0 24px 70px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    overflow: hidden !important;
}


/* MAIN WHITE HEADLINE
   Intended line break:
   Line 1: Your IT team and your board
   Line 2: are having two completely different conversations.
*/

.cst-home-hero .cst-hero-card strong {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    color: #ffffff !important;

    font-size: 3.6rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;

    margin: 0 0 30px !important;
}


/* GOLD DIVIDER */

.cst-hero-divider {
    display: block !important;

    width: 64px !important;
    height: 3px !important;

    background: #d9b45f !important;

    margin: 0 0 34px !important;
}


/* BODY COPY */

.cst-home-hero .cst-hero-card p {
    max-width: 720px !important;

    color: rgba(255,255,255,0.88) !important;

    font-size: 1.16rem !important;
    line-height: 1.85 !important;

    margin: 0 0 34px !important;
}


/* BUTTON ROW */

.cst-home-hero .cst-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
}


/* RIGHT IMAGE CARD */

.cst-home-hero .ct-hero-image {
    width: 520px !important;
    max-width: 520px !important;
    min-height: 620px !important;

    display: block !important;
}


.cst-home-hero .ct-hero-image img {
    width: 100% !important;
    height: 620px !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center top !important;

    border-radius: 34px !important;

    border: 1px solid rgba(255,255,255,0.14) !important;

    box-shadow:
        0 24px 70px rgba(0,0,0,0.38) !important;
}


/* TABLET */

@media (max-width: 1500px) {

    .cst-home-hero .cst-container {
        width: min(100% - 48px, 760px) !important;
    }

    .cst-home-hero .cst-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
    }

    .cst-home-hero .cst-hero-card,
    .cst-home-hero .ct-hero-image {
        width: 100% !important;
        max-width: 760px !important;
        min-height: auto !important;
        margin: 0 auto !important;
    }

    .cst-home-hero .ct-hero-image img {
        height: auto !important;
        max-height: 680px !important;
    }

    .cst-home-hero .cst-hero-card strong {
        max-width: 100% !important;
        font-size: 3rem !important;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .cst-home-hero {
        padding: 32px 0 64px !important;
    }

    .cst-home-hero .cst-container {
        width: min(100% - 32px, 100%) !important;
    }

    .cst-home-hero .cst-hero-card {
        padding: 34px !important;
        border-radius: 26px !important;
    }

    .cst-home-hero .cst-hero-card strong {
        font-size: 2.15rem !important;
        line-height: 1.12 !important;
        letter-spacing: -0.035em !important;
    }

    .cst-home-hero .cst-hero-card p {
        max-width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.72 !important;
    }

    .cst-home-hero .ct-hero-image img {
        border-radius: 26px !important;
    }
}

/* Make Book a Briefing button solid blue */

.cst-nav .cst-button,
.cst-site-header .cst-button,
a.cst-button[href*="contact"],
a.cst-button[href*="briefing"] {
    background: ##2f80c9 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #1f6fae !important;
    box-shadow: none !important;
}

.cst-nav .cst-button:hover,
.cst-site-header .cst-button:hover,
a.cst-button[href*="contact"]:hover,
a.cst-button[href*="briefing"]:hover {
    background: #155d96 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #155d96 !important;
}