/* =========================================================
   PsychCura Homepage · Platform Features
   Final · 2026
========================================================= */


/* =========================================================
   Section / Design Tokens
========================================================= */

.pc-home-features {
    --pc-hf-navy: #102a43;
    --pc-hf-text: #486174;
    --pc-hf-muted: #748897;

    --pc-hf-cyan: #08b8d1;
    --pc-hf-cyan-dark: #078ca2;

    --pc-hf-line: #deeaee;
    --pc-hf-surface: #ffffff;
    --pc-hf-background: #f7fbfc;

    position: relative;

    overflow: hidden;

    padding: 90px 0;

    background:
        radial-gradient(circle at 5% 10%,
            rgba(8, 184, 209, .10),
            transparent 27%),
        radial-gradient(circle at 95% 90%,
            rgba(16, 42, 67, .055),
            transparent 27%),
        var(--pc-hf-background);
}


.pc-home-features::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -210px;
    top: -210px;

    border:
        55px solid rgba(8, 184, 209, .04);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   Heading
========================================================= */

.pc-hf-head {
    position: relative;

    z-index: 1;

    max-width: 840px;

    margin:
        0 auto 42px;

    text-align: center;
}


.pc-hf-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 11px;

    color:
        var(--pc-hf-cyan-dark);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .14em;

    line-height: 1.3;

    text-transform: uppercase;
}


.pc-hf-eyebrow i {
    line-height: 1;
}


.pc-hf-head h2 {
    margin: 0;

    color:
        var(--pc-hf-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.25rem,
            4vw,
            3.7rem);

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -.035em;
}


.pc-hf-head p {
    max-width: 720px;

    margin:
        16px auto 0;

    color:
        var(--pc-hf-text);

    font-size: .95rem;

    line-height: 1.8;
}


/* =========================================================
   Main Feature Grid
========================================================= */

.pc-hf-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    gap: 16px;
}


/* =========================================================
   Main Feature Card
========================================================= */

.pc-hf-card {
    /*
     * Default feature identity:
     * Therapy Client Portal / blue
     */
    --pc-hf-accent: #17658c;
    --pc-hf-accent-bg: #edf7fd;
    --pc-hf-accent-border: #d7ebf7;
    --pc-hf-accent-orb: rgba(23, 101, 140, .045);

    position: relative;

    min-width: 0;
    min-height: 315px;

    padding: 24px;

    border:
        1px solid var(--pc-hf-line);

    border-radius: 22px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    color: inherit;

    text-decoration: none;

    background:
        var(--pc-hf-surface);

    box-shadow:
        0 9px 25px rgba(15, 35, 52, .04);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.pc-hf-card:visited {
    color: inherit;
}


button.pc-hf-card {
    width: 100%;

    appearance: none;
    -webkit-appearance: none;

    font: inherit;

    text-align: left;

    cursor: pointer;
}


.pc-hf-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -90px;
    top: -95px;

    border-radius: 50%;

    background:
        var(--pc-hf-accent-orb);

    pointer-events: none;
}


.pc-hf-card:hover {
    color: inherit;

    border-color:
        var(--pc-hf-accent-border);

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(15, 35, 52, .075);
}


/* =========================================================
   Feature Color Identities
========================================================= */


/* ---------------------------------------------------------
   Therapy Client Portal · Blue
--------------------------------------------------------- */

.pc-hf-card.is-portal {
    --pc-hf-accent: #17658c;
    --pc-hf-accent-bg: #edf7fd;
    --pc-hf-accent-border: #d7ebf7;
    --pc-hf-accent-orb: rgba(23, 101, 140, .045);
}


/* ---------------------------------------------------------
   Mental Health Resources · Green
--------------------------------------------------------- */

.pc-hf-card.is-resources {
    --pc-hf-accent: #14785c;
    --pc-hf-accent-bg: #edf9f4;
    --pc-hf-accent-border: #d8eee5;
    --pc-hf-accent-orb: rgba(20, 120, 92, .045);
}


/* ---------------------------------------------------------
   Quick Self-Assessment · Amber
--------------------------------------------------------- */

.pc-hf-card.is-assessment {
    --pc-hf-accent: #946316;
    --pc-hf-accent-bg: #fff8e8;
    --pc-hf-accent-border: #f3e5bf;
    --pc-hf-accent-orb: rgba(148, 99, 22, .045);
}


/* ---------------------------------------------------------
   Mental Health Articles · PsychCura Cyan
--------------------------------------------------------- */

.pc-hf-card.is-articles {
    --pc-hf-accent: #078ca2;
    --pc-hf-accent-bg: #eafafd;
    --pc-hf-accent-border: #d2edf2;
    --pc-hf-accent-orb: rgba(8, 184, 209, .05);
}


/* =========================================================
   Main Card Icon
========================================================= */

.pc-hf-icon {
    position: relative;

    z-index: 1;

    width: 52px;
    height: 52px;

    flex:
        0 0 52px;

    border-radius: 16px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color:
        var(--pc-hf-accent);

    background:
        var(--pc-hf-accent-bg);

    font-size: 1.08rem;

    line-height: 1;
}


.pc-hf-icon i {
    margin: 0;

    line-height: 1;
}


/* =========================================================
   Feature Category Badge
========================================================= */

.pc-hf-card-label {
    position: relative;

    z-index: 1;

    width: fit-content;

    max-width: 100%;

    margin-top: 20px;

    padding:
        6px 10px;

    border:
        1px solid var(--pc-hf-accent-border);

    border-radius: 999px;

    color:
        var(--pc-hf-accent);

    background:
        var(--pc-hf-accent-bg);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .035em;

    line-height: 1.2;

    text-transform: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .55);
}


/* =========================================================
   Main Card Content
========================================================= */

.pc-hf-card h3 {
    position: relative;

    z-index: 1;

    margin:
        13px 0 0;

    color:
        var(--pc-hf-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.2rem;

    font-weight: 500;

    line-height: 1.3;
}


.pc-hf-card p {
    position: relative;

    z-index: 1;

    margin:
        10px 0 0;

    color:
        var(--pc-hf-text);

    font-size: .77rem;

    line-height: 1.7;
}


.pc-hf-action {
    position: relative;

    z-index: 1;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    margin-top: auto;

    padding-top: 20px;

    color:
        var(--pc-hf-accent);

    font-size: .7rem;

    font-weight: 800;

    line-height: 1.35;
}


.pc-hf-action i {
    transition:
        transform .18s ease;
}


.pc-hf-card:hover .pc-hf-action {
    color:
        var(--pc-hf-accent);
}


.pc-hf-card:hover .pc-hf-action i {
    transform:
        translateX(3px);
}


/* =========================================================
   Additional Features Row
========================================================= */

.pc-hf-more {
    position: relative;

    z-index: 1;

    margin-top: 22px;

    padding:
        16px 18px;

    border:
        1px solid #dce9ed;

    border-radius: 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background:
        rgba(255, 255, 255, .84);

    box-shadow:
        0 6px 18px rgba(15, 35, 52, .025);
}


.pc-hf-more-links {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


/* =========================================================
   Mini Feature Links
========================================================= */

.pc-hf-mini-link {
    /*
     * Neutral fallback.
     */
    --pc-hf-mini-accent: #526b7b;
    --pc-hf-mini-border: #e0eaee;
    --pc-hf-mini-bg: #ffffff;

    min-height: 36px;

    padding:
        0 12px;

    border:
        1px solid var(--pc-hf-mini-border);

    border-radius: 999px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color:
        var(--pc-hf-mini-accent);

    background:
        var(--pc-hf-mini-bg);

    font-size: .68rem;

    font-weight: 700;

    line-height: 1.25;

    text-decoration: none;

    white-space: nowrap;

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


.pc-hf-mini-link:visited {
    color:
        var(--pc-hf-mini-accent);
}


.pc-hf-mini-link i {
    color:
        var(--pc-hf-mini-accent);

    line-height: 1;
}


.pc-hf-mini-link:hover {
    color:
        var(--pc-hf-mini-accent);

    border-color:
        var(--pc-hf-mini-border);

    background:
        var(--pc-hf-mini-bg);

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 12px rgba(15, 35, 52, .045);
}


/* ---------------------------------------------------------
   Ask a Psychologist · Purple
--------------------------------------------------------- */

.pc-hf-mini-link.is-ask {
    --pc-hf-mini-accent: #83569e;
    --pc-hf-mini-border: #eadcf1;
    --pc-hf-mini-bg: #f8f0fc;
}


/* ---------------------------------------------------------
   Resource Account · Green / Teal
--------------------------------------------------------- */

.pc-hf-mini-link.is-resource-account {
    --pc-hf-mini-accent: #14785c;
    --pc-hf-mini-border: #d8eee5;
    --pc-hf-mini-bg: #edf9f4;
}


/* ---------------------------------------------------------
   Online Therapy · PsychCura Cyan
--------------------------------------------------------- */

.pc-hf-mini-link.is-therapy {
    --pc-hf-mini-accent: #078ca2;
    --pc-hf-mini-border: #d2edf2;
    --pc-hf-mini-bg: #eefbfd;
}


/* ---------------------------------------------------------
   Privacy · Slate / Navy
--------------------------------------------------------- */

.pc-hf-mini-link.is-privacy {
    --pc-hf-mini-accent: #476273;
    --pc-hf-mini-border: #dbe5ea;
    --pc-hf-mini-bg: #f3f7f9;
}


/* =========================================================
   Explore All Features Link
========================================================= */

.pc-hf-all {
    flex:
        0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--pc-hf-cyan-dark);

    font-size: .74rem;

    font-weight: 800;

    line-height: 1.35;

    text-decoration: none;
}


.pc-hf-all:visited {
    color:
        var(--pc-hf-cyan-dark);
}


.pc-hf-all i {
    transition:
        transform .18s ease;
}


.pc-hf-all:hover {
    color:
        var(--pc-hf-navy);
}


.pc-hf-all:hover i {
    transform:
        translateX(3px);
}


/* =========================================================
   Accessibility
========================================================= */

.pc-home-features a:focus-visible,

.pc-home-features button:focus-visible {
    outline:
        3px solid rgba(8, 184, 209, .28);

    outline-offset: 3px;
}


/* =========================================================
   Large Tablet
========================================================= */

@media (max-width: 991.98px) {

    .pc-home-features {
        padding:
            72px 0;
    }


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


    .pc-hf-card {
        min-height: 285px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 640px) {

    .pc-home-features {
        padding:
            58px 0;
    }


    .pc-hf-head {
        margin-bottom: 30px;
    }


    .pc-hf-head h2 {
        font-size:
            clamp(2rem,
                10vw,
                2.8rem);
    }


    .pc-hf-head p {
        font-size: .89rem;

        line-height: 1.72;
    }


    .pc-hf-grid {
        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .pc-hf-card {
        min-height: 0;

        padding: 21px;

        border-radius: 19px;
    }


    .pc-hf-action {
        margin-top: 22px;
    }


    .pc-hf-more {
        align-items: stretch;

        flex-direction: column;

        gap: 15px;

        padding: 15px;
    }


    .pc-hf-more-links {
        display: grid;

        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        width: 100%;
    }


    .pc-hf-mini-link {
        width: 100%;

        white-space: normal;

        text-align: center;
    }


    .pc-hf-all {
        justify-content: center;

        padding-top: 3px;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

    .pc-hf-more-links {
        grid-template-columns:
            1fr;
    }


    .pc-hf-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        border-radius: 14px;
    }


    .pc-hf-card-label {
        font-size: .59rem;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pc-hf-card,
    .pc-hf-action i,
    .pc-hf-mini-link,
    .pc-hf-all,
    .pc-hf-all i {
        transition: none;
    }


    .pc-hf-card:hover,
    .pc-hf-mini-link:hover {
        transform: none;
    }


    .pc-hf-card:hover .pc-hf-action i,

    .pc-hf-all:hover i {
        transform: none;
    }

}