/*
 * TradeVest Securities
 * Service Page Styles
 *
 * Individual service-page presentation only.
 *
 * Typography remains governed by the global theme.
 * This file controls service-page layout, spacing,
 * cards, suitability, risks and responsive presentation.
 *
 * @package TradeVest_Securities
 */


/* =========================================================
   1. SERVICE PAGE FOUNDATION
   ========================================================= */

.tv-service-page {
    position: relative;
}

.tv-service-page > .tv-section {
    padding-block: clamp(4.5rem, 8vw, 6.5rem);
}


/* =========================================================
   2. SERVICE HERO
   ========================================================= */

.tv-service-hero {
    position: relative;

    overflow: hidden;
}

.tv-service-hero::before {
    position: absolute;

    top: -180px;
    right: -140px;

    width: 440px;
    height: 440px;

    background:
        radial-gradient(
            circle,
            rgba(15, 118, 110, 0.09) 0%,
            rgba(15, 118, 110, 0) 70%
        );

    content: "";

    pointer-events: none;
}

.tv-service-hero .tv-page-hero__inner {
    position: relative;

    z-index: 1;
}


/*
 * Service-page hero uses the global page typography.
 *
 * Only constrain the text width here.
 * Do not override H1 font-size, weight or line-height.
 */

.tv-service-page .tv-page-hero__title {
    max-width: 800px;

    margin-inline: auto;
}

.tv-service-page .tv-page-hero__description {
    max-width: 700px;

    margin-inline: auto;
}


/* =========================================================
   3. SERVICE OVERVIEW
   ========================================================= */

.tv-service-overview {
    background: #FAFBFA;
}

.tv-service-overview__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(3rem, 7vw, 6.5rem);

    align-items: start;
}

.tv-service-overview__heading {
    max-width: 520px;
}


/*
 * Typography intentionally inherits from the global theme.
 *
 * Only layout-related properties are defined here.
 */

.tv-service-overview__heading h2 {
    max-width: 480px;

    margin: 0.75rem 0 0;
}

.tv-service-overview__content {
    max-width: 680px;
}

.tv-service-overview__content p {
    margin: 0 0 1.25rem;

    color: var(--tv-text-secondary);

    font-size: 1.05rem;
    line-height: 1.8;
}

.tv-service-overview__content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   4. WHO IT MAY BE SUITABLE FOR
   ========================================================= */

.tv-service-suitability {
    background: var(--tv-white);
}

.tv-service-suitability__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(3rem, 7vw, 6.5rem);

    align-items: start;
}

.tv-service-suitability__heading {
    max-width: 500px;
}


/*
 * Typography remains controlled by the global theme.
 *
 * Only spacing and width are defined here.
 */

.tv-service-suitability__heading h2 {
    max-width: 480px;

    margin: 0.75rem 0 1.25rem;
}

.tv-service-suitability__heading > p {
    max-width: 480px;

    margin: 0;

    color: var(--tv-text-secondary);

    font-size: 1.05rem;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   Suitability List
   --------------------------------------------------------- */

.tv-service-suitability__content {
    display: flex;

    flex-direction: column;

    border-top: 1px solid var(--tv-border);
}

.tv-service-suitability__item {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    column-gap: 20px;

    padding: 1.5rem 0;

    border-bottom: 1px solid var(--tv-border);
}

.tv-service-suitability__number {
    display: flex;

    align-items: flex-start;
    justify-content: flex-start;

    padding-top: 3px;

    color: var(--tv-teal);

    font-size: 0.72rem;
    font-weight: var(--tv-weight-semibold);
    line-height: 1;
    letter-spacing: 0.06em;
}

.tv-service-suitability__item-content h3 {
    margin: 0 0 0.5rem;

    color: var(--tv-navy);

    font-size: 1.12rem;
    line-height: 1.4;
}

.tv-service-suitability__item-content p {
    max-width: 620px;

    margin: 0;

    color: var(--tv-text-secondary);

    font-size: 0.96rem;
    line-height: 1.72;
}


/* =========================================================
   5. SERVICE FEATURES
   ========================================================= */

.tv-service-features {
    background: var(--tv-bg-soft);
}

.tv-service-features__grid {
    display: grid;

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

    gap: 1.25rem;

    margin-top: 3rem;
}

.tv-service-feature {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding: 2rem;

    background: var(--tv-white);

    border: 1px solid var(--tv-border);
    border-radius: var(--tv-radius-lg);

    transition:
        transform var(--tv-transition-fast),
        border-color var(--tv-transition-fast),
        box-shadow var(--tv-transition-fast);
}

.tv-service-feature:hover {
    transform: translateY(-3px);

    border-color: rgba(15, 118, 110, 0.28);

    box-shadow: var(--tv-shadow-sm);
}


/* ---------------------------------------------------------
   Feature Number
   --------------------------------------------------------- */

.tv-service-feature__number {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    margin-bottom: 1.35rem;

    color: var(--tv-teal);

    border: 1px solid rgba(15, 118, 110, 0.24);
    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: var(--tv-weight-semibold);
    line-height: 1;
    letter-spacing: 0.04em;
}

.tv-service-feature h3 {
    margin: 0 0 0.65rem;

    color: var(--tv-navy);

    font-size: 1.18rem;
    line-height: 1.35;
}

.tv-service-feature p {
    margin: 0;

    color: var(--tv-text-secondary);

    font-size: 0.96rem;
    line-height: 1.72;
}


/* =========================================================
   6. SERVICE RISKS & CONSIDERATIONS
   ========================================================= */

.tv-service-risks {
    background: var(--tv-white);
}

.tv-service-risks__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(3rem, 7vw, 6.5rem);

    align-items: start;
}

.tv-service-risks__heading {
    max-width: 500px;
}


/*
 * Typography remains controlled by the global theme.
 *
 * Only spacing and width are defined here.
 */

.tv-service-risks__heading h2 {
    max-width: 460px;

    margin: 0.75rem 0 1.25rem;
}

.tv-service-risks__heading > p {
    max-width: 480px;

    margin: 0;

    color: var(--tv-text-secondary);

    font-size: 1.05rem;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   Risk List
   --------------------------------------------------------- */

.tv-service-risks__content {
    display: flex;

    flex-direction: column;

    border-top: 1px solid var(--tv-border);
}

.tv-service-risk {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    column-gap: 20px;

    padding: 1.5rem 0;

    border-bottom: 1px solid var(--tv-border);
}

.tv-service-risk__number {
    display: flex;

    align-items: flex-start;
    justify-content: flex-start;

    padding-top: 3px;

    color: var(--tv-teal);

    font-size: 0.72rem;
    font-weight: var(--tv-weight-semibold);
    line-height: 1;
    letter-spacing: 0.06em;
}

.tv-service-risk h3 {
    margin: 0 0 0.5rem;

    color: var(--tv-navy);

    font-size: 1.12rem;
    line-height: 1.4;
}

.tv-service-risk p {
    max-width: 620px;

    margin: 0;

    color: var(--tv-text-secondary);

    font-size: 0.96rem;
    line-height: 1.72;
}


/* =========================================================
   7. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .tv-service-overview__layout,
    .tv-service-suitability__layout,
    .tv-service-risks__layout {
        gap: 3.5rem;
    }

    .tv-service-features__grid {
        gap: 1rem;
    }

}


/* =========================================================
   8. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .tv-service-page > .tv-section {
        padding-block: 4rem;
    }


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

    .tv-service-hero::before {
        top: -120px;
        right: -180px;

        width: 340px;
        height: 340px;
    }


    /* -----------------------------------------------------
       Overview
       ----------------------------------------------------- */

    .tv-service-overview__layout {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .tv-service-overview__heading,
    .tv-service-overview__content {
        max-width: none;
    }

    .tv-service-overview__heading h2 {
        max-width: none;
    }


    /* -----------------------------------------------------
       Suitability
       ----------------------------------------------------- */

    .tv-service-suitability__layout {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .tv-service-suitability__heading {
        max-width: none;
    }

    .tv-service-suitability__heading h2 {
        max-width: none;
    }

    .tv-service-suitability__heading > p {
        max-width: none;
    }

    .tv-service-suitability__item {
        grid-template-columns: 34px minmax(0, 1fr);

        column-gap: 14px;

        padding: 1.35rem 0;
    }


    /* -----------------------------------------------------
       Features
       ----------------------------------------------------- */

    .tv-service-features__grid {
        grid-template-columns: 1fr;

        margin-top: 2.5rem;
    }

    .tv-service-feature {
        padding: 1.75rem;
    }


    /* -----------------------------------------------------
       Risks
       ----------------------------------------------------- */

    .tv-service-risks__layout {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .tv-service-risks__heading {
        max-width: none;
    }

    .tv-service-risks__heading h2 {
        max-width: none;
    }

    .tv-service-risks__heading > p {
        max-width: none;
    }

    .tv-service-risk {
        grid-template-columns: 34px minmax(0, 1fr);

        column-gap: 14px;

        padding: 1.35rem 0;
    }

}


/* =========================================================
   9. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .tv-service-page > .tv-section {
        padding-block: 3.5rem;
    }

    .tv-service-feature {
        padding: 1.5rem;
    }

    .tv-service-feature__number {
        margin-bottom: 1.15rem;
    }

    .tv-service-suitability__item {
        grid-template-columns: 30px minmax(0, 1fr);

        column-gap: 12px;
    }

    .tv-service-risk {
        grid-template-columns: 30px minmax(0, 1fr);

        column-gap: 12px;
    }

}


/* =========================================================
   10. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .tv-service-feature:hover {
        transform: none;

        border-color: var(--tv-border);

        box-shadow: none;
    }

}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

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

    .tv-service-feature {
        transition: none;
    }

}