/*
 * Enerpize hub listing (home, category and search results).
 * Scoped under .enh-home; the shared views that daftra renders never carry it.
 * Shares the tokens the article page uses so the two pages read as one design.
 */

.enh-home {
    --enh-ink: #0C2532;
    --enh-body: #415565;
    --enh-muted: #7C8B99;
    --enh-line: #E6EBF2;
    --enh-tint: #F6F8FA;
    --enh-brand: #026BFF;
    --enh-radius: 14px;
    padding: 0 0 80px;
    color: var(--enh-body);
}

/* ---------------------------------------------------------------- hero --- */

/* The enerpize site is white with navy copy and blue/green accents, so the
   listing opens on a soft tint band rather than a saturated colour slab. */
.enh-home-hero {
    position: relative;
    margin-bottom: 60px;
    overflow: hidden;
    border-bottom: 1px solid var(--enh-line);
    /* the tint the marketing pages alternate with white */
    background: #F1F5FA;
    isolation: isolate;
}

/* decoration ------------------------------------------------------------- */

/*
 * Colours sampled off the live portal: #026BFF solid, #309CFC cyan and #CCD8F0
 * pale. No green — the portal keeps green for calls to action only.
 */
.enh-deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.enh-deco > * {
    position: absolute;
    will-change: transform;
}

/* a wide, very low glow so the headline sits on something rather than flat tint */
.enh-deco__glow {
    inset-block-start: -22%;
    inset-inline-start: 50%;
    width: 900px;
    height: 460px;
    translate: -50% 0;
    background: radial-gradient(closest-side, rgba(2, 107, 255, .10), transparent 72%);
}

.enh-deco__disc {
    border-radius: 50%;
}

/* the pale disc bleeding off the leading edge */
.enh-deco__disc--soft {
    inset-block-start: -96px;
    inset-inline-start: -118px;
    width: 268px;
    height: 268px;
    background: radial-gradient(circle at 34% 30%, #DCE6F9, #C7D6F1);
    opacity: .75;
}

/* and the small saturated one under it — the portal's signature accent */
.enh-deco__disc--brand {
    inset-block-end: -46px;
    inset-inline-start: 58px;
    width: 104px;
    height: 104px;
    background: linear-gradient(140deg, #309CFC, #026BFF);
    opacity: .9;
}

/* the plus motif, repeated as a light field */
.enh-deco__dots {
    inset-block-start: 58%;
    inset-inline-start: 6%;
    width: 120px;
    height: 84px;
    background-image:
        linear-gradient(rgba(2, 107, 255, .22) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(2, 107, 255, .22) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}

.enh-deco__waves {
    inset-block-start: 52px;
    inset-inline-end: 62px;
    width: 180px;
    height: 38px;
    color: rgba(48, 156, 252, .5);
}

.enh-deco__plus {
    inset-block-start: 112px;
    inset-inline-start: 13%;
    width: 22px;
    height: 22px;
    color: rgba(2, 107, 255, .32);
}

/* motion ----------------------------------------------------------------- */

/* Each shape gets its own duration so they never fall into step, and the
   amplitudes stay small enough that nothing competes with the search field. */
@keyframes enh-float-soft {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(26px, 30px, 0) scale(1.07); }
}

@keyframes enh-float-brand {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(34px, -26px, 0) scale(1.12); }
}

@keyframes enh-wave {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .5; }
    50%      { transform: translate3d(-16px, 5px, 0); opacity: .82; }
}

@keyframes enh-twinkle {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: .2; }
    50%      { transform: rotate(90deg) scale(1.22); opacity: .45; }
}

@keyframes enh-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
    50%      { transform: translate3d(0, 14px, 0) scale(1.08); opacity: 1; }
}

@keyframes enh-fade {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

.enh-deco__glow      { animation: enh-breathe 17s ease-in-out infinite; }
.enh-deco__disc--soft  { animation: enh-float-soft 23s ease-in-out infinite; }
.enh-deco__disc--brand { animation: enh-float-brand 27s ease-in-out infinite; }
.enh-deco__waves     { animation: enh-wave 13s ease-in-out infinite; }
.enh-deco__plus      { animation: enh-twinkle 10s ease-in-out infinite; }
.enh-deco__dots      { animation: enh-fade 19s ease-in-out infinite; }

.enh-home .enh-home-hero__inner {
    position: relative;
    padding-top: 84px;
    padding-bottom: 72px;
    text-align: center;
}

.enh-home-hero__crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--enh-muted);
}

.enh-home-hero__crumbs a {
    color: var(--enh-muted);
}

.enh-home-hero__crumbs a:hover {
    color: var(--enh-brand);
    text-decoration: none;
}

.enh-home .enh-home-hero__inner h1 {
    max-width: 980px;
    margin: 0 auto;
    color: var(--enh-ink);
    font-size: 50px !important;
    font-weight: 800;
    line-height: 1.26 !important;
    letter-spacing: -.5px;
}

.enh-home-hero__lead {
    max-width: 600px;
    margin: 20px auto 0;
    color: var(--enh-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
}

/* search ----------------------------------------------------------------- */

.enh-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 620px;
    margin: 38px auto 0;
    padding: 6px 6px 6px 0;
    border: 1px solid transparent;
    /* the portal keeps form controls and buttons at 2px */
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(12, 37, 50, .08);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.enh-search:focus-within {
    border-color: var(--enh-brand);
    box-shadow: 0 2px 14px rgba(2, 107, 255, .14);
}

.enh-search__icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-inline-start: 18px;
    color: var(--enh-muted);
}

.enh-home .enh-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 6px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--enh-ink);
    font-size: 16px;
}

.enh-home .enh-search input::placeholder {
    color: var(--enh-muted);
}

/* same primary button as the portal header: 2px radius, gradient middle stop
   sliding 50% -> 85% on hover, and the .btn-shine sheen sweeping across */
.enh-home .enh-search button {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(90deg, #1073FE 0%, #026BFF 50%, #005AD9 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    /* the gradient swaps instantly, as it does on the portal; only the sheen moves */
}

.enh-home .enh-search button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -50px;
    left: -75px;
    width: 50px;
    height: 155px;
    background: rgba(255, 255, 255, .24);
    opacity: .2;
    transform: rotate(-35deg);
    transition: left 550ms cubic-bezier(.19, 1, .22, 1), opacity 550ms;
    pointer-events: none;
}

.enh-home .enh-search button:hover::after {
    left: 120%;
}

.enh-home .enh-search button:hover {
    background: linear-gradient(90deg, #1073FE 0%, #026BFF 85%, #005AD9 100%);
}

/* category chips --------------------------------------------------------- */

.enh-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.enh-chip-cat {
    padding: 9px 18px;
    border: 1px solid var(--enh-line);
    border-radius: 2px;
    background: #fff;
    color: var(--enh-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.enh-chip-cat:hover {
    border-color: var(--enh-brand);
    color: var(--enh-brand);
    text-decoration: none;
}

.enh-chip-cat.is-active {
    background: var(--enh-brand);
    border-color: var(--enh-brand);
    color: #fff;
}

.enh-chip-cat.is-active:hover {
    background: #005AD9;
    border-color: #005AD9;
    color: #fff;
}

/* ------------------------------------------------------------- sections --- */

.enh-section {
    margin-bottom: 64px;
}

.enh-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.enh-home .enh-section__head h2 {
    margin: 0;
    color: var(--enh-ink);
    font-size: 28px !important;
    font-weight: 800;
    line-height: 1.35 !important;
}

.enh-section__link {
    color: var(--enh-brand);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.enh-empty {
    padding: 48px 0;
    color: var(--enh-muted);
    font-size: 17px;
    text-align: center;
}

/* ---------------------------------------------------------------- tiles --- */

.enh-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--enh-line);
    border-radius: var(--enh-radius);
    background: #fff;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.enh-tile:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(12, 37, 50, .13);
    text-decoration: none;
}

.enh-tile__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--enh-tint);
}

.enh-tile__media {
    overflow: hidden;
}

.enh-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.enh-tile:hover .enh-tile__media img {
    transform: scale(1.04);
}

/* matches the article page's related-post cards */
.enh-tile__tag {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(6, 20, 32, .78);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.enh-tile__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 18px;
}

.enh-home .enh-tile__body h3 {
    margin: 0;
    color: var(--enh-ink);
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.55 !important;
    transition: color .2s ease;
}

.enh-tile:hover .enh-tile__body h3 {
    color: var(--enh-brand);
}

.enh-tile__excerpt {
    margin: 0;
    color: var(--enh-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}

.enh-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: auto;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--enh-line);
}

.enh-tile__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--enh-muted);
    font-size: 13px;
}

.enh-tile__date svg {
    width: 14px;
    height: 14px;
}

.enh-tile__more {
    color: var(--enh-brand);
    font-size: 14px;
    font-weight: 700;
}

/* ----------------------------------------------------------------- grid --- */

.enh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* --------------------------------------------------------------- pager --- */

.enh-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.enh-pager__page,
.enh-pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--enh-line);
    border-radius: 10px;
    background: #fff;
    color: var(--enh-ink);
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.enh-pager__page:hover,
.enh-pager__step:hover {
    border-color: var(--enh-brand);
    color: var(--enh-brand);
    text-decoration: none;
}

.enh-pager__page.is-current {
    background: var(--enh-brand);
    border-color: var(--enh-brand);
    color: #fff;
}

.enh-pager__step.is-disabled {
    color: #C4CDD5;
    cursor: default;
}

.enh-pager__gap {
    padding: 0 4px;
    color: var(--enh-muted);
    font-weight: 600;
}

.enh-pager__step.is-disabled:hover {
    border-color: var(--enh-line);
    color: #C4CDD5;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1199px) {
    .enh-home .enh-home-hero__inner h1 {
        font-size: 40px !important;
    }
}

@media (max-width: 991px) {
    .enh-home-hero {
        margin-bottom: 44px;
    }

    .enh-deco__waves,
    .enh-deco__plus,
    .enh-deco__dots {
        display: none;
    }

    .enh-deco__disc--soft {
        width: 190px;
        height: 190px;
    }

    .enh-deco__disc--brand {
        width: 74px;
        height: 74px;
    }

    .enh-home-hero__inner {
        padding-top: 44px;
        padding-bottom: 36px;
    }

    .enh-home .enh-home-hero__inner h1 {
        font-size: 32px !important;
    }

    .enh-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enh-section {
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .enh-home {
        padding-bottom: 56px;
    }

    .enh-home .enh-home-hero__inner h1 {
        font-size: 26px !important;
    }

    .enh-home-hero__lead {
        font-size: 16px;
    }

    .enh-search {
        margin-top: 24px;
    }

    .enh-home .enh-search button {
        padding: 0 18px;
    }

    /* a scroll strip instead of six full-width buttons filling the first screen */
    .enh-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: -15px;
        padding-inline: 15px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .enh-chips::-webkit-scrollbar {
        display: none;
    }

    .enh-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .enh-home .enh-section__head h2 {
        font-size: 22px !important;
    }
}

/* ----------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    .enh-deco > *,
    .enh-tile,
    .enh-tile .enh-tile__media img,
    .enh-home .enh-search button::after {
        animation: none !important;
        transition: none !important;
    }
}