/*
|--------------------------------------------------------------------------
| FitOcala Insights
|--------------------------------------------------------------------------
*/

.fit-insights-body {
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(184, 146, 70, .09),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            var(--fit-bg) 0%,
            var(--fit-bg-soft) 100%
        );

    color: var(--fit-text);
}

.fit-insights-frame {
    position: relative;
    overflow: hidden;
    padding-top: 130px;
}

.fit-insights-frame .fit-page-shell {
    position: relative;
    z-index: 2;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.fit-insights-hero {
    position: relative;
    overflow: hidden;

    min-height: 500px;
    padding: clamp(70px, 8vw, 120px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 38px;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(184, 146, 70, .16),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(184, 146, 70, .07),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .015)
        ),
        rgba(8, 10, 14, .90);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 40px 110px rgba(0, 0, 0, .44),
        0 0 80px rgba(184, 146, 70, .07);
}

.fit-insights-hero::before {
    content: "";
    position: absolute;

    top: -240px;
    right: -180px;

    width: 520px;
    aspect-ratio: 1;

    border: 1px solid rgba(184, 146, 70, .12);
    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(184, 146, 70, .022),
        0 0 0 100px rgba(184, 146, 70, .014);

    pointer-events: none;
}

.fit-insights-hero h1 {
    position: relative;
    z-index: 2;

    max-width: 980px;
    margin: 0;

    color: var(--fit-text);

    font-size: clamp(52px, 6.5vw, 96px);
    font-weight: 950;
    line-height: .91;
    letter-spacing: -.07em;
}

.fit-insights-hero > p {
    position: relative;
    z-index: 2;

    max-width: 720px;
    margin: 28px 0 0;

    color: var(--fit-text-muted);

    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.75;
}

.fit-insights-actions {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 32px;
}

/*
|--------------------------------------------------------------------------
| Featured Article
|--------------------------------------------------------------------------
*/

.fit-insights-featured {
    padding: 92px 0 40px;
}

.fit-featured-article {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .9fr);

    min-height: 560px;

    border: 1px solid var(--fit-gold-border);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 14% 10%,
            rgba(184, 146, 70, .12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .015)
        ),
        rgba(9, 11, 16, .88);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 38px 100px rgba(0, 0, 0, .42),
        0 0 70px rgba(184, 146, 70, .07);
}

.fit-featured-copy {
    padding: clamp(42px, 5vw, 72px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fit-featured-copy h2 {
    max-width: 760px;
    margin: 0;

    color: var(--fit-text);

    font-size: clamp(40px, 4.8vw, 68px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.058em;
}

.fit-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 22px 0;
}

.fit-featured-meta span {
    min-height: 32px;
    padding: 0 12px;

    display: inline-flex;
    align-items: center;

    border: 1px solid rgba(184, 146, 70, .18);
    border-radius: var(--fit-radius-pill);

    background: rgba(184, 146, 70, .055);
    color: var(--fit-gold-hover);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fit-featured-copy p {
    max-width: 650px;
    margin: 0;

    color: var(--fit-text-muted);

    font-size: 16px;
    line-height: 1.75;
}

.fit-featured-copy .fit-btn {
    align-self: flex-start;
    margin-top: 28px;
}

.fit-featured-image {
    min-height: 100%;

    background:
        radial-gradient(
            circle at center,
            rgba(184, 146, 70, .13),
            var(--fit-surface)
        );

    background-position: center;
    background-size: cover;
}

.fit-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 10, 14, .12),
            rgba(8, 10, 14, .02)
        );

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Section Head
|--------------------------------------------------------------------------
*/

.fit-insights-categories,
.fit-insights-latest {
    padding: 92px 0 0;
}

.fit-insights-frame .fit-section-head {
    margin-bottom: 34px;
}

.fit-insights-frame .fit-section-head h2 {
    margin: 0;

    color: var(--fit-text);

    font-size: clamp(38px, 4.5vw, 64px);
    font-weight: 950;
    line-height: .97;
    letter-spacing: -.055em;
}

/*
|--------------------------------------------------------------------------
| Categories
|--------------------------------------------------------------------------
*/

.fit-insights-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.fit-insights-category-grid a {
    position: relative;
    overflow: hidden;

    min-height: 150px;
    padding: 24px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--fit-border-soft);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(184, 146, 70, .10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015)
        ),
        var(--fit-surface);

    color: inherit;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 22px 60px rgba(0, 0, 0, .28);

    transition:
        transform .35s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.fit-insights-category-grid a:hover {
    transform: translateY(-6px);

    border-color: var(--fit-gold-border-hover);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 32px 78px rgba(0, 0, 0, .40),
        0 0 42px rgba(184, 146, 70, .09);
}

.fit-insights-category-grid a span {
    color: var(--fit-gold);

    font-size: 11px;
    font-weight: 950;
    letter-spacing: .14em;
}

.fit-insights-category-grid a strong {
    color: var(--fit-text);

    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -.025em;
}

/*
|--------------------------------------------------------------------------
| Latest Articles
|--------------------------------------------------------------------------
*/

.fit-insights-latest {
    padding-bottom: 110px;
}

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

.fit-insight-card {
    position: relative;
    overflow: hidden;

    min-width: 0;

    border: 1px solid var(--fit-border-soft);
    border-radius: 28px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015)
        ),
        var(--fit-surface);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 26px 68px rgba(0, 0, 0, .32);

    transition:
        transform .38s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.fit-insight-card:hover {
    transform: translateY(-7px);

    border-color: var(--fit-gold-border-hover);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 36px 88px rgba(0, 0, 0, .44),
        0 0 46px rgba(184, 146, 70, .08);
}

.fit-insight-card-image {
    min-height: 240px;

    background:
        radial-gradient(
            circle at center,
            rgba(184, 146, 70, .12),
            var(--fit-surface)
        );

    background-position: center;
    background-size: cover;
}

.fit-insight-card-body {
    padding: 24px;
}

.fit-insight-card-body > span {
    display: block;
    margin-bottom: 11px;

    color: var(--fit-gold);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fit-insight-card-body h3 {
    margin: 0;

    color: var(--fit-text);

    font-size: 23px;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.fit-insight-card-body p {
    margin: 16px 0 0;

    color: var(--fit-text-muted);

    font-size: 14px;
    line-height: 1.7;
}

.fit-insight-card-body a {
    display: inline-flex;
    margin-top: 22px;

    color: var(--fit-gold-hover);

    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.fit-dashboard-empty {
    grid-column: 1 / -1;

    padding: 44px;

    border: 1px solid var(--fit-border-soft);
    border-radius: 26px;

    background: var(--fit-surface);

    text-align: center;
}

.fit-dashboard-empty h3 {
    margin: 0 0 8px;
    color: var(--fit-text);
}

.fit-dashboard-empty p {
    margin: 0;
    color: var(--fit-text-muted);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .fit-insights-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {

    .fit-featured-article {
        grid-template-columns: 1fr;
    }

    .fit-featured-image {
        min-height: 340px;
        order: -1;
    }
}

@media (max-width: 720px) {

    .fit-insights-frame {
        padding-top: 110px;
    }

    .fit-insights-hero {
        min-height: auto;
        padding: 54px 24px;
        border-radius: 28px;
    }

    .fit-insights-hero h1 {
        font-size: clamp(46px, 13vw, 64px);
    }

    .fit-insights-actions {
        flex-direction: column;
        width: 100%;
    }

    .fit-insights-actions .fit-btn {
        width: 100%;
    }

    .fit-insights-category-grid,
    .fit-insights-grid {
        grid-template-columns: 1fr;
    }

    .fit-featured-copy {
        padding: 34px 24px;
    }

    .fit-featured-image {
        min-height: 270px;
    }
}