/*
 * TradeVest Securities
 * Responsive Design
 *
 * @package TradeVest_Securities
 */


/* =========================================================
   1. LARGE TABLETS / SMALL DESKTOPS
   ========================================================= */

@media (max-width: 1200px) {

    .tv-container {
        width: min(calc(100% - 48px), var(--tv-container));
    }

    .tv-container--narrow {
        width: min(calc(100% - 48px), var(--tv-container-narrow));
    }

    .tv-main-nav__list {
        gap: 24px;
    }

    .tv-service-card {
        padding: 26px;
    }

    .tv-why,
    .tv-contact-layout {
        gap: 60px;
    }

    .tv-hero__inner {
        gap: 48px;
    }

    .tv-hero__title {
        font-size: clamp(3rem, 5vw, 4rem);
    }
}


/* =========================================================
   2. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       DESIGN SCALE
       ----------------------------------------------------- */

    :root {
        --tv-text-hero: 3.5rem;
        --tv-text-3xl: 2.25rem;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .tv-header {
        min-height: 70px;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       WHY TRADEVEST
       ----------------------------------------------------- */

    .tv-why {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tv-why__intro {
        position: static;
    }


    /* -----------------------------------------------------
       APPROACH
       ----------------------------------------------------- */

    .tv-approach__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 30px;
    }

    .tv-approach__line {
        display: none;
    }


    /* -----------------------------------------------------
       INSIGHTS
       ----------------------------------------------------- */

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

    .tv-insights-grid .tv-article-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);
        max-width: none;

        margin-inline: auto;
    }


    /* -----------------------------------------------------
       LEADERSHIP
       ----------------------------------------------------- */

    .tv-leadership-grid {
        gap: 24px;
    }

    .tv-leader__image {
        width: min(100%, 320px);
        aspect-ratio: 1;
    }


    /* -----------------------------------------------------
       TESTIMONIALS
       ----------------------------------------------------- */

    .tv-testimonial {
        flex-basis: calc((100% - 24px) / 2);
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .tv-about-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tv-about-intro__heading {
        position: static;
    }

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

    .tv-about-principle:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 10px);
        max-width: none;

        margin-inline: auto;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .tv-contact-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tv-contact-info {
        max-width: 720px;
    }


    /* -----------------------------------------------------
       FAQ
       ----------------------------------------------------- */

    .tv-faq-grid {
        gap: 20px 30px;
    }


    /* -----------------------------------------------------
       HOMEPAGE HERO
       ----------------------------------------------------- */

    .tv-hero {
        min-height: auto;
    }

    .tv-hero__inner {
        grid-template-columns: 1fr;
        gap: 56px;

        padding-block: 80px;
    }

    .tv-hero__content {
        max-width: 760px;
    }

    .tv-hero__visual {
        width: 100%;
        justify-self: center;
    }

    .tv-hero-visual {
        width: min(100%, 600px);
        min-height: 460px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .tv-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 35px;
    }

    .tv-footer__brand {
        grid-column: 1 / -1;
        max-width: 500px;
    }

    .tv-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;

        padding-block: 20px;
    }

    .tv-footer__legal {
        justify-content: flex-start;
    }


    /* -----------------------------------------------------
       FORMS
       ----------------------------------------------------- */

    .tv-form-grid {
        gap: 16px;
    }
}


/* =========================================================
   3. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .tv-main-nav {
        display: none;
    }

    .tv-header__actions {
        display: none;
    }

    .tv-menu-toggle {
        position: relative;
        z-index: 2;

        display: block;

        flex: 0 0 auto;
    }

    .tv-mobile-navigation {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        z-index: var(--tv-z-mobile-menu);

        display: none;

        padding: 12px 20px 24px;

        background: var(--tv-white);

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

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

    .tv-mobile-navigation.is-open {
        display: block;
    }

    .tv-mobile-nav__list {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .tv-mobile-nav__list > li {
        margin: 0;
        padding: 0;
    }

    .tv-mobile-nav__list > li > a {
        display: flex;
        align-items: center;

        min-height: 52px;

        padding-inline: 4px;

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

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

        font-size: var(--tv-text-sm);
        font-weight: var(--tv-weight-medium);

        transition:
            color var(--tv-transition-fast),
            background-color var(--tv-transition-fast);
    }

    .tv-mobile-nav__list > li:last-child > a {
        border-bottom: 0;
    }

    .tv-mobile-nav__list > li > a:hover {
        color: var(--tv-navy);
    }

    .tv-mobile-nav__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 14px;
        padding-top: 14px;

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

    .tv-mobile-nav__action {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 46px;

        padding-inline: 14px;

        background: var(--tv-white);
        color: var(--tv-navy);

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

        font-size: var(--tv-text-sm);
        font-weight: var(--tv-weight-semibold);

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

    .tv-mobile-nav__action:hover {
        background: var(--tv-bg-soft);
        border-color: var(--tv-teal);
        color: var(--tv-teal);
        transform: translateY(-1px);
    }

    .tv-mobile-nav__action--primary {
        background: var(--tv-teal);
        border-color: var(--tv-teal);
        color: var(--tv-white);
    }

    .tv-mobile-nav__action--primary:hover {
        background: var(--tv-teal-dark);
        border-color: var(--tv-teal-dark);
        color: var(--tv-white);
    }
}


/* =========================================================
   4. MOBILE — 767PX
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --tv-text-hero: 2.75rem;
        --tv-text-4xl: 2.5rem;
        --tv-text-3xl: 2rem;
        --tv-text-2xl: 1.5rem;
        --tv-text-xl: 1.25rem;
        --tv-text-lg: 1.0625rem;
        --tv-text-base: 1rem;
        --tv-header-height: 70px;
    }


    /* -----------------------------------------------------
       CONTAINERS
       ----------------------------------------------------- */

    .tv-container,
    .tv-container--narrow {
        width: calc(100% - 40px);
    }


    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    h1 {
        line-height: 1.08;
    }

    h2 {
        line-height: 1.15;
    }


    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    .tv-section {
        padding-block: var(--tv-space-9);
    }

    .tv-section__header {
        margin-bottom: var(--tv-space-6);
    }

    .tv-section__description {
        font-size: var(--tv-text-base);
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .tv-btn {
        min-height: 48px;
        padding-inline: 18px;
    }


    /* -----------------------------------------------------
       MOBILE NAV
       ----------------------------------------------------- */

    .tv-mobile-navigation {
        padding-inline: 0;
    }

    .tv-mobile-navigation .tv-container {
        width: calc(100% - 40px);
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .tv-service-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tv-service-card {
        min-height: 0;
        padding: 26px;
    }

    .tv-service-card__icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;

        margin-bottom: 24px;
    }


    /* -----------------------------------------------------
       WHY TRADEVEST
       ----------------------------------------------------- */

    .tv-why {
        gap: 40px;
    }

    .tv-principle {
        grid-template-columns: 42px 1fr;

        gap: 14px;

        padding-block: 20px;
    }

    .tv-principle__icon {
        width: 42px;
        height: 42px;
    }

    .tv-principle__icon svg {
        width: 21px;
        height: 21px;
    }


    /* -----------------------------------------------------
       APPROACH
       ----------------------------------------------------- */

    .tv-approach__steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tv-approach__step {
        display: grid;

        grid-template-columns: 50px 1fr;

        column-gap: 16px;

        align-items: start;
    }

    .tv-approach__marker {
        grid-row: 1 / span 2;

        width: 50px;
        height: 50px;

        margin-bottom: 0;
    }

    .tv-approach__title {
        margin-top: 3px;
    }

    .tv-approach__description {
        max-width: none;
        margin-top: 4px;
    }


    /* -----------------------------------------------------
       INSIGHTS
       ----------------------------------------------------- */

    .tv-insights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tv-insights-grid .tv-article-card:last-child {
        grid-column: auto;
        width: auto;
        margin-inline: 0;
    }

    .tv-article-card__content {
        padding: 22px;
    }


    /* -----------------------------------------------------
       LEADERSHIP
       ----------------------------------------------------- */

    .tv-leadership-grid {
        grid-template-columns: 1fr;

        max-width: 400px;

        gap: 24px;
    }

    .tv-leader__image {
        width: 300px;
        max-width: calc(100% - 32px);

        height: auto;
        aspect-ratio: 1;

        margin-top: 26px;
    }

    .tv-leader__content {
        padding: 16px 18px 20px;
    }

    .tv-leader__name {
        font-size: var(--tv-text-xl);
    }


    /* -----------------------------------------------------
       TESTIMONIALS
       ----------------------------------------------------- */

    .tv-testimonials-track {
        gap: 16px;
    }

    .tv-testimonial {
        flex-basis: 100%;

        min-height: 310px;

        padding: 26px;
    }


    /* -----------------------------------------------------
       FINAL CTA
       ----------------------------------------------------- */

    .tv-final-cta {
        padding-block: 64px;
    }

    .tv-final-cta__title {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.12;
    }

    .tv-final-cta__description {
        font-size: var(--tv-text-base);
        line-height: 1.7;
    }

    .tv-final-cta__inner .tv-btn {
        width: 100%;
        max-width: 320px;
    }


    /* -----------------------------------------------------
       CONTACT / FORMS
       ----------------------------------------------------- */

    .tv-contact-form {
        padding: 24px;
    }

    .tv-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tv-form-group--full {
        grid-column: auto;
    }


    /* -----------------------------------------------------
       FAQ
       ----------------------------------------------------- */

    .tv-faq-section {
        padding-block: var(--tv-space-8);
    }

    .tv-faq-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tv-faq-column {
        gap: 14px;
    }

    .tv-faq-question {
        min-height: 66px;
        padding: 18px;
        gap: 14px;
    }

    .tv-faq-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;

        font-size: 18px;
    }

    .tv-faq-answer {
        padding: 0 18px 18px;
    }


    /* -----------------------------------------------------
       MODAL
       ----------------------------------------------------- */

    .tv-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .tv-modal__dialog {
        width: 100%;

        max-height: calc(100vh - 24px);

        padding: 28px 22px 24px;

        border-radius: var(--tv-radius-xl);
    }


    /* -----------------------------------------------------
       INNER PAGE HERO
       ----------------------------------------------------- */

    .tv-page-hero {
        padding-block: 72px 64px;
    }

    .tv-page-hero__title {
        font-size: clamp(2.35rem, 11vw, 3.2rem);
    }

    .tv-page-hero__description {
        font-size: var(--tv-text-base);
    }


    /* -----------------------------------------------------
       INNER PAGE SPACING
       ----------------------------------------------------- */

    .tv-page > .tv-section,
    .tv-page > .tv-section--soft {
        padding-block: var(--tv-space-9);
    }

    .tv-page-hero + .tv-section {
        padding-top: var(--tv-space-8);
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .tv-about-intro {
        gap: 30px;
    }

    .tv-about-intro__heading h2 {
        font-size: 2.25rem;
    }

    .tv-about-intro__content p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .tv-about-principles {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tv-about-principle,
    .tv-about-principle:last-child {
        width: auto;
        max-width: none;

        grid-column: auto;

        padding: 25px;
    }

    .tv-about-principle > span {
        margin-bottom: 30px;
    }


    /* -----------------------------------------------------
       SINGLE ARTICLE
       ----------------------------------------------------- */

    .tv-post-header {
        padding-block: 64px 36px;
    }

    .tv-post-title {
        font-size: clamp(2.25rem, 10vw, 3.25rem);
    }

    .tv-post-featured-image {
        width: calc(100% - 40px);

        margin-bottom: 40px;

        border-radius: var(--tv-radius-md);
    }

    .tv-post-content {
        width: calc(100% - 40px);
        padding-bottom: 70px;
    }

    .tv-post-content p,
    .tv-post-content li {
        font-size: 1rem;
        line-height: 1.8;
    }


    /* -----------------------------------------------------
       404
       ----------------------------------------------------- */

    .tv-404 {
        min-height: 55vh;
        padding-block: 80px;
    }


    /* -----------------------------------------------------
       HOMEPAGE HERO
       ----------------------------------------------------- */

    .tv-hero__inner {
        gap: 42px;
        padding-block: 64px 72px;
    }

    .tv-hero__title {
        margin-bottom: 20px;

        font-size: clamp(2.6rem, 11vw, 3.5rem);
        line-height: 1.06;
    }

    .tv-hero__description {
        margin-bottom: 26px;
        font-size: 1rem;
    }

    .tv-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tv-hero__actions .tv-btn {
        width: 100%;
        max-width: 330px;
    }

    .tv-hero__visual {
        width: 100%;
    }

    .tv-hero-visual {
        width: min(100%, 570px);
        min-height: 380px;
    }

    .tv-hero-visual__grid {
        inset: 2% 0 5% 4%;

        border-radius: 22px;

        background-size: 32px 32px;
    }

    .tv-hero-visual__panel {
        width: 94%;
        border-radius: 18px;
    }

    .tv-hero-visual__panel-top {
        padding: 17px 18px;
    }

    .tv-hero-visual__chart {
        height: 190px;
        padding: 14px 15px 0;
    }

    .tv-hero-visual__footer {
        padding: 16px 18px 18px;
    }

    .tv-hero-visual__floating-card {
        right: 0;
        bottom: 3%;

        min-width: 135px;

        padding: 14px 16px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .tv-site-footer {
        padding-top: 58px;
    }

    .tv-footer {
        grid-template-columns: 1fr;

        gap: 32px;

        padding-bottom: 40px;
    }

    .tv-footer__brand {
        grid-column: auto;
    }

    .tv-footer__description {
        margin-top: 16px;
    }

    .tv-footer__bottom {
        gap: 14px;

        min-height: auto;

        padding: 20px 0 24px;
    }

    .tv-footer__legal {
        gap: 12px 18px;
    }
}


/* =========================================================
   5. SMALL MOBILE — 600PX
   ========================================================= */

@media (max-width: 600px) {

    .tv-container,
    .tv-container--narrow {
        width: calc(100% - 32px);
    }

    :root {
        --tv-text-hero: 2.4rem;
    }

    .tv-mobile-navigation {
        padding: 10px 16px 20px;
    }

    .tv-mobile-navigation .tv-container {
        width: calc(100% - 32px);
    }

    .tv-service-card {
        padding: 22px;
    }

    .tv-service-card__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;

        margin-bottom: 22px;
    }

    .tv-principle {
        grid-template-columns: 40px 1fr;
        gap: 13px;
    }

    .tv-principle__icon {
        width: 40px;
        height: 40px;
    }

    .tv-principle__icon svg {
        width: 20px;
        height: 20px;
    }

    .tv-approach__step {
        grid-template-columns: 46px 1fr;
        column-gap: 14px;
    }

    .tv-approach__marker {
        width: 46px;
        height: 46px;
    }

    .tv-approach__marker svg {
        width: 21px;
        height: 21px;
    }

    .tv-contact-form {
        padding: 20px;
    }

    .tv-faq-grid {
        gap: 12px;
    }

    .tv-faq-question {
        min-height: 62px;
        padding: 16px;
    }

    .tv-faq-answer {
        padding: 0 16px 16px;
    }

    .tv-modal {
        padding: 8px;
    }

    .tv-modal__dialog {
        max-height: calc(100vh - 16px);
        padding: 26px 18px 22px;
    }


    /* -----------------------------------------------------
       HOMEPAGE HERO
       ----------------------------------------------------- */

    .tv-hero__inner {
        padding-block: 54px 60px;
    }

    .tv-hero__title {
        font-size: 2.45rem;
    }

    .tv-hero__actions .tv-btn {
        max-width: none;
    }

    .tv-hero-visual {
        min-height: 330px;
    }

    .tv-hero-visual__panel-top {
        padding: 14px 15px;

        font-size: var(--tv-text-xs);
    }

    .tv-hero-visual__chart {
        height: 160px;
    }

    .tv-hero-visual__footer {
        padding: 13px 15px 15px;
    }

    .tv-hero-visual__footer strong {
        font-size: 0.78rem;
    }

    .tv-hero-visual__floating-card {
        right: 0;
        bottom: 1%;

        min-width: 120px;

        padding: 12px 14px;
    }

    .tv-leader__image {
        width: 260px;
    }

    .tv-post-featured-image,
    .tv-post-content {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   6. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .tv-btn:hover,
    .tv-service-card:hover,
    .tv-article-card:hover,
    .tv-about-principle:hover,
    .tv-leader:hover,
    .tv-testimonial:hover {
        transform: none;
    }

    .tv-service-card:hover,
    .tv-article-card:hover,
    .tv-about-principle:hover,
    .tv-leader:hover,
    .tv-testimonial:hover {
        box-shadow: none;
    }
}


/* =========================================================
   7. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tv-btn:hover,
    .tv-modal__close:hover,
    .tv-header__login:hover,
    .tv-footer__social-link:hover,
    .tv-service-card:hover,
    .tv-article-card:hover,
    .tv-about-principle:hover,
    .tv-leader:hover,
    .tv-testimonial:hover {
        transform: none;
    }
}