/* ====================================================================
   GUREXA — COMPACT CONTEXTUAL CARDS V1.0
   ==================================================================== */

.gx-context-card {
    --gx-card-accent: #3579c9;
    --gx-card-bg: #f7faff;
    --gx-card-icon: "◇";

    position: relative !important;

    min-height: 112px !important;
    height: auto !important;

    padding: 18px 18px 17px !important;

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

    overflow: hidden !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--gx-card-accent) 28%,
            #d6deea
        ) !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            var(--gx-card-bg),
            #ffffff 76%
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(17,43,77,.045) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}


/* ====================================================================
   LARGE CONTEXTUAL BACKGROUND ICON
   ==================================================================== */

.gx-context-card::after {
    content: var(--gx-card-icon);

    position: absolute;

    right: -4px;
    bottom: -20px;

    z-index: 0;

    font-family:
        "Segoe UI Symbol",
        Calibri,
        Arial,
        sans-serif;

    font-size: 96px;
    font-weight: 400;
    line-height: 1;

    color: var(--gx-card-accent);

    opacity: .075;

    pointer-events: none;

    transform: rotate(-7deg);
}


/* ====================================================================
   CARD CONTENT ABOVE BACKGROUND ICON
   ==================================================================== */

.gx-context-card > * {
    position: relative;
    z-index: 2;
}


/* ====================================================================
   HOVER
   ==================================================================== */

.gx-context-card:hover,
.gx-context-card:focus-within {
    transform: translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--gx-card-accent) 58%,
            #b9c7d8
        ) !important;

    box-shadow:
        0 10px 24px
        rgba(15,45,80,.09) !important;
}


/* ====================================================================
   FOREGROUND ICON
   ==================================================================== */

.gx-context-card
[class*="icon"],
.gx-context-card
svg,
.gx-context-card
i {
    color: var(--gx-card-accent) !important;
}


/* ====================================================================
   TITLES
   ==================================================================== */

.gx-context-card h3,
.gx-context-card h4,
.gx-context-card strong,
.gx-context-card b,
.gx-context-card
[class*="title"] {
    font-size: 19px !important;
    line-height: 1.18 !important;

    font-weight: 700 !important;

    color: #081b36 !important;

    margin-bottom: 5px !important;
}


/* ====================================================================
   SUPPORT TEXT
   ==================================================================== */

.gx-context-card p,
.gx-context-card small,
.gx-context-card
[class*="description"],
.gx-context-card
[class*="subtitle"] {
    max-width: 82%;

    margin-bottom: 0 !important;

    font-size: 15.5px !important;
    line-height: 1.32 !important;

    color: #52647d !important;
}


/* ====================================================================
   OBJECTIVES — COMPACT 5 COLUMN GRID
   ==================================================================== */

.gx-context-objective-grid {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(170px,1fr)) !important;

    gap: 13px !important;

    width: min(100%, 1440px) !important;
    margin-inline: auto !important;
}

.gx-context-objective-grid
.gx-context-card {
    min-height: 108px !important;

    padding:
        16px 15px !important;

    text-align: left !important;

    align-items: flex-start !important;
}


/* ====================================================================
   INTELLIGENCE UNIVERSE — MORE COMPACT
   ==================================================================== */

.gx-context-universe-grid {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(205px,1fr)) !important;

    gap: 14px !important;

    width: min(100%,1440px) !important;
    margin-inline: auto !important;
}

.gx-context-universe-grid
.gx-context-card {
    min-height: 150px !important;

    padding:
        20px 19px !important;
}


/* ====================================================================
   CONTEXT DEFINITIONS
   ==================================================================== */

/* Understand */

.gx-card-understand,
.gx-card-descartes {
    --gx-card-accent:#6845f5;
    --gx-card-bg:#f5f2ff;
    --gx-card-icon:"⌘";
}


/* Discover */

.gx-card-discover,
.gx-card-diogene,
.gx-card-magellan {
    --gx-card-accent:#176de0;
    --gx-card-bg:#f1f6ff;
    --gx-card-icon:"⌕";
}


/* Diagnose */

.gx-card-diagnose,
.gx-card-giovanni {
    --gx-card-accent:#e34747;
    --gx-card-bg:#fff4f4;
    --gx-card-icon:"Ψ";
}


/* Research */

.gx-card-research,
.gx-card-einstein {
    --gx-card-accent:#7c3aed;
    --gx-card-bg:#f7f2ff;
    --gx-card-icon:"◉";
}


/* Learn */

.gx-card-learn,
.gx-card-didactus {
    --gx-card-accent:#078f80;
    --gx-card-bg:#effaf7;
    --gx-card-icon:"▤";
}


/* Build */

.gx-card-build,
.gx-card-blaise {
    --gx-card-accent:#eb6d00;
    --gx-card-bg:#fff6ed;
    --gx-card-icon:"</>";
}


/* Communicate */

.gx-card-communicate,
.gx-card-iris {
    --gx-card-accent:#098b9c;
    --gx-card-bg:#effafb;
    --gx-card-icon:"◌";
}


/* Navigate */

.gx-card-navigate,
.gx-card-polaris,
.gx-card-poseidon {
    --gx-card-accent:#176ad7;
    --gx-card-bg:#eff6ff;
    --gx-card-icon:"➤";
}


/* Execute */

.gx-card-execute,
.gx-card-kyber {
    --gx-card-accent:#6d28d9;
    --gx-card-bg:#f6f1ff;
    --gx-card-icon:"⚡";
}


/* Plan */

.gx-card-plan {
    --gx-card-accent:#16884b;
    --gx-card-bg:#f1faf5;
    --gx-card-icon:"◎";
}


/* Observe */

.gx-card-galileo {
    --gx-card-accent:#168acf;
    --gx-card-bg:#eff8ff;
    --gx-card-icon:"⌁";
}


/* ====================================================================
   TABLET
   ==================================================================== */

@media (max-width: 1180px) {

    .gx-context-objective-grid {
        grid-template-columns:
            repeat(3, minmax(180px,1fr)) !important;
    }

    .gx-context-universe-grid {
        grid-template-columns:
            repeat(3, minmax(210px,1fr)) !important;
    }

}


/* ====================================================================
   MOBILE
   ==================================================================== */

@media (max-width: 768px) {

    .gx-context-objective-grid,
    .gx-context-universe-grid {
        grid-template-columns:
            repeat(2, minmax(140px,1fr)) !important;
    }

    .gx-context-card {
        min-height: 106px !important;
    }

    .gx-context-card::after {
        font-size: 78px;
    }

}


/* ====================================================================
   SMALL MOBILE
   ==================================================================== */

@media (max-width: 470px) {

    .gx-context-objective-grid,
    .gx-context-universe-grid {
        grid-template-columns: 1fr !important;
    }

}