/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    h1{
        font-size:52px;
    }

    h2{
        font-size:36px;
    }

    .hero-container,
    .featured-post,
    .about-grid{

        grid-template-columns:1fr;
        gap:50px;

    }

    .article-grid,
    .category-grid,
    .analysis-grid{

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

    }

    .resource-grid{

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

    }

    .footer-grid{

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

    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    section{

        padding:60px 0;

    }

    h1{

        font-size:42px;

    }

    h2{

        font-size:30px;

    }

    .header-container{

        flex-direction:column;
        gap:20px;
        padding:20px 0;

    }

    .header-search{

        width:100%;

    }

    .nav-menu{

        flex-wrap:wrap;
        gap:20px;

    }

    .article-grid,
    .category-grid,
    .analysis-grid,
    .resource-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

    .newsletter-box{

        flex-direction:column;

        padding:40px;

    }

    .newsletter-form{

        width:100%;

    }

    .hero{

        text-align:center;

    }

    .hero-search{

        max-width:100%;

    }

    .hero-tags{

        justify-content:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   LEARNING ROADMAP - RESPONSIVE
========================================================== */

@media (max-width: 1024px) {

    .roadmap-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 768px) {

    .learning-roadmap {
        padding: 60px 0;
    }

    .roadmap-grid {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 32px;
    }

    .roadmap-card {
        gap: 16px;

        padding: 23px 20px;
    }

    .roadmap-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        border-radius: 14px;

        font-size: 20px;
    }

    .roadmap-number {
        top: 15px;
        right: 16px;

        font-size: 34px;
    }

    .roadmap-content {
        padding-right: 25px;
    }

    .roadmap-content h3 {
        font-size: 18px;
    }

    .roadmap-content p {
        font-size: 13px;
    }

}


@media (max-width: 480px) {

    .roadmap-card {
        gap: 13px;

        padding: 20px 16px;
    }

    .roadmap-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 12px;

        font-size: 18px;
    }

    .roadmap-number {
        font-size: 28px;
    }

    .roadmap-content {
        padding-right: 18px;
    }

    .roadmap-level {
        font-size: 10px;
    }

    .roadmap-content h3 {
        font-size: 16px;
    }

    .roadmap-content p {
        font-size: 13px;

        line-height: 1.6;
    }

    .roadmap-link {
        font-size: 13px;
    }

}

/* ==========================================================
   LEARNING LEVEL SECTION - RESPONSIVE
========================================================== */

@media (max-width: 1024px) {

    .lesson-list {
        grid-template-columns: 1fr;
    }

    .level-overview {
        max-width: 100%;
    }

}


@media (max-width: 768px) {

    .learning-level-section {
        padding: 60px 0;
    }

    .level-overview {
        grid-template-columns: 1fr;

        gap: 12px;

        margin: 30px auto 35px;
    }

    .level-overview-item {
        padding: 16px;
    }

    .lesson-list {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .lesson-card {
        gap: 12px;

        padding: 20px;
    }

    .lesson-number {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 11px;
    }

    .lesson-card-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        margin-left: -6px;

        font-size: 16px;
    }

    .lesson-card-content h3 {
        font-size: 16px;
    }

    .lesson-card-content p {
        font-size: 13px;
    }

}


@media (max-width: 480px) {

    .lesson-card {
        display: grid;

        grid-template-columns: auto 1fr;

        gap: 12px;

        padding: 17px;
    }

    .lesson-number {
        grid-row: span 2;
    }

    .lesson-card-icon {
        margin-left: 0;
    }

    .lesson-card-content {
        grid-column: 2;
    }

    .lesson-card-content h3 {
        font-size: 15px;
    }

    .lesson-card-content p {
        font-size: 12px;
    }

    .lesson-label {
        font-size: 10px;
    }

}
/* ==========================================================
   LEARNING CATEGORIES
========================================================== */

@media(max-width:1024px){

    .learning-level{

        margin-top:50px;

    }

}

@media(max-width:768px){

    .learning-level h3{

        text-align:center;

    }

}

/* ==========================================================
   FEATURED LEARNING
========================================================== */

@media(max-width:1024px){

    .learning-banner{

        grid-template-columns:1fr;

        text-align:center;

    }

    .learning-stats{

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

    }

}

@media(max-width:768px){

    .learning-banner{

        padding:35px 25px;

    }

    .learning-circle{

        width:220px;

        height:220px;

        font-size:80px;

    }

    .learning-stats{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   LEARNING ARTICLES
========================================================== */

@media(max-width:768px){

    .learning-group{

        margin-top:40px;

    }

}


/* ==========================================================
   FAQ
========================================================== */

@media(max-width:768px){

    .faq-question{

        font-size:16px;

        padding:20px;

    }

    .faq-answer p{

        padding:0 20px 20px;

    }

}

/* ==========================================================
   LEARN CTA
========================================================== */

@media(max-width:768px){

    .cta-box{

        padding:45px 25px;

    }

}

@media(max-width:768px){

    .article-meta{

        flex-direction:column;

        gap:8px;

    }

}

/* ==========================================================
   FEATURED ARTICLE
========================================================== */

@media(max-width:1024px){

    .featured-post{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .article-meta{

        flex-direction:column;

        gap:10px;

    }

}

/* ==========================================================
   PAGINATION
========================================================== */

@media(max-width:768px){

    .pagination{

        gap:8px;

    }

    .pagination a{

        padding:10px 14px;

        font-size:14px;

    }

}


@media(max-width:768px){

    .breadcrumb{

        font-size:13px;

        gap:8px;

    }

}

@media(max-width:768px){

    .lesson-top{

        flex-wrap:wrap;

    }

    .lesson-meta{

        gap:15px;

        flex-direction:column;

    }

}


@media(max-width:768px){

    .progress-info{

        flex-direction:column;

        gap:20px;

    }

}


/* ==========================================================
   FEATURED IMAGE
========================================================== */

@media(max-width:768px){

    .lesson-image{

        padding-bottom:50px;

    }

    .lesson-image img{

        border-radius:18px;

    }

}

@media(max-width:768px){

    .summary-box{

        padding:30px 25px;

    }

}

@media(max-width:768px){

    .toc-box{

        padding:25px;

    }

}

/* ==========================================================
   LESSON CONTENT
========================================================== */

@media(max-width:768px){

    .lesson-article{
        max-width:100%;
    }

    .lesson-article section{
        margin:0 0 18px;
        padding:0;
    }

    .lesson-article h2{
        margin:0 0 7px;
    }

    .lesson-article p{
        margin:0 0 11px;
        line-height:1.65;
    }

}


/* ==========================================================
   LESSON NAVIGATION
========================================================== */

@media(max-width:768px){

    .lesson-nav{

        flex-direction:column;

    }

}

/* ==========================================================
   SHARE ARTICLE
========================================================== */

@media(max-width:768px){

    .share-box{

        padding:40px 25px;

    }

}

/* ==========================================================
   AUTHOR
========================================================== */

@media(max-width:768px){

    .author-card{

        flex-direction:column;

        text-align:center;

    }

}


/* ==========================================================
   MARKET SNAPSHOT
========================================================== */

@media(max-width:1024px){

    .snapshot-grid{

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

    }

}

@media(max-width:768px){

    .snapshot-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   MARKET OUTLOOK
========================================================== */

@media(max-width:1024px){

    .outlook-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   ANALYSIS CARD
========================================================== */

@media(max-width:1024px){

    .analysis-card{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   WATCHLIST
========================================================== */

@media(max-width:1024px){

    .watchlist-grid{

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

    }

}

@media(max-width:768px){

    .watchlist-grid{

        grid-template-columns:1fr;

    }

    .stock-meta{

        flex-direction:column;

        gap:10px;

    }

}

/* ==========================================================
   SECTOR PERFORMANCE
========================================================== */

@media(max-width:1024px){

    .sector-grid{

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

    }

}

@media(max-width:768px){

    .sector-grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   TOOLKIT DASHBOARD
========================================================== */

@media(max-width:1024px){

    .dashboard-grid{

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

    }

}

@media(max-width:768px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .dashboard-card{

        padding:30px;

    }

}
@media (max-width:768px){

.starter-step{

    grid-template-columns:1fr;
    text-align:center;

}

.starter-number{

    margin:auto;

}

}

/* ==========================================================
   BOOK LIBRARY
========================================================== */

@media(max-width:1024px){

    .book-grid{

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

    }

}

@media(max-width:768px){

    .book-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   FREE COURSES
========================================================== */

@media(max-width:1024px){

    .course-grid{

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

    }

}

@media(max-width:768px){

    .course-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   TODAY'S LEARNING PICKS
========================================================== */

@media(max-width:768px){

    .pick-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:1024px){

.calculator-grid{

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

}

}

@media(max-width:768px){

.calculator-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   ABOUT PAGE RESPONSIVE
========================================================== */


/* ==========================================================
   LARGE TABLET
========================================================== */

@media (max-width:1200px){

    .about-hero__highlights{
        grid-template-columns:repeat(2,1fr);
    }

    .about-hero__title{
        font-size:3.2rem;
    }

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

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .about-story{
        padding:85px 0;
    }

    .story-journey{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }

    .journey-card{
        padding:30px 24px;
    }

    .about-purpose{
        padding:85px 0;
    }

    .purpose-grid{
        gap:24px;
    }

    .purpose-card{
        padding:35px 30px;
    }

    .about-values{
        padding:85px 0;
    }

    .values-grid{
        gap:24px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .about-hero{
        padding:90px 0 70px;
    }

    .about-hero__title{
        font-size:2.5rem;
    }

    .about-hero__description{
        font-size:1rem;
    }

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

    .about-hero__actions .btn{
        width:100%;
        justify-content:center;
    }

    .about-hero__highlights{
        grid-template-columns:1fr;
    }


    /* WHY WE EXIST */

    .about-story{
        padding:70px 0;
    }

    .story-quote{
        padding:30px 25px;
        margin-bottom:40px;
    }

    .story-quote blockquote{
        font-size:1.15rem;
        line-height:1.6;
    }

    .story-journey{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:45px;
    }

    .journey-card{
        padding:28px 25px;
    }

    .story-content p{
        font-size:.98rem;
        line-height:1.8;
    }


    /* MISSION & VISION */

    .about-purpose{
        padding:70px 0;
    }

    .purpose-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .purpose-card{
        padding:32px 25px;
    }

    .purpose-card__icon{
        width:62px;
        height:62px;
        margin-bottom:20px;
    }

    .purpose-card h3{
        font-size:1.3rem;
    }

    .purpose-footer{
        margin-top:35px;
    }


    /* VALUES */

    .about-values{
        padding:70px 0;
    }

    .values-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .value-card{
        padding:30px 25px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .about-hero{
        padding:70px 0 55px;
    }

    .about-hero__title{
        font-size:2rem;
        line-height:1.25;
    }

    .about-section-badge,
    .section-badge{
        font-size:.72rem;
    }

    .about-highlight-card{
        padding:25px;
    }


    /* WHY WE EXIST */

    .about-story{
        padding:60px 0;
    }

    .story-quote{
        padding:25px 20px;
        border-left-width:3px;
    }

    .story-quote blockquote{
        font-size:1.05rem;
    }

    .journey-card{
        padding:25px 22px;
    }

    .journey-number{
        width:50px;
        height:50px;
        margin-bottom:18px;
    }


    /* MISSION & VISION */

    .about-purpose{
        padding:60px 0;
    }

    .purpose-card{
        padding:27px 22px;
    }

    .purpose-card__icon{
        width:58px;
        height:58px;
        font-size:1.3rem;
    }

    .purpose-card p{
        font-size:.95rem;
        line-height:1.75;
    }

    .purpose-footer p{
        flex-direction:column;
        gap:7px;
    }


    /* VALUES */

    .about-values{
        padding:60px 0;
    }

    .value-card{
        padding:27px 22px;
    }

    .value-card > i{
        width:58px;
        height:58px;
        font-size:1.25rem;
    }

}

/* ==========================================================
   CONTACT PAGE RESPONSIVE
========================================================== */

@media (max-width:1024px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

}
@media (max-width:768px){

    .contact-hero{
        padding:90px 0 65px;
    }

    .contact-hero__title{
        font-size:2.5rem;
    }

    .contact-hero__description{
        font-size:1rem;
        line-height:1.8;
    }

}

@media (max-width:768px){

    .contact-section{
        padding:70px 0;
    }

    .contact-info,
    .contact-form-wrapper{
        padding:30px 25px;
    }

    .contact-form__submit{
        width:100%;
        justify-content:center;
    }

}

@media (max-width:480px){

    .contact-hero{
        padding:70px 0 55px;
    }

    .contact-hero__title{
        font-size:2rem;
        line-height:1.25;
    }

    .contact-section-badge{
        font-size:.72rem;
    }

}

@media (max-width:480px){

    .contact-section{
        padding:60px 0;
    }

    .contact-info,
    .contact-form-wrapper{
        padding:27px 22px;
    }

    .contact-info__item{
        gap:14px;
    }

    .contact-info__icon{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

}

@media (max-width:768px){

    .global-search-results{
        position:absolute;

        left:0;
        right:0;

        width:100%;

        max-height:360px;
    }

}



/* ==========================================================
   ABOUT — HERO HIGHLIGHTS RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

  .about-hero__highlights {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 640px) {

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

  .about-highlight-card {
    min-height: auto;
    padding: 24px;
  }

}

/* ==========================================================
   INVESTOR STARTER KIT — RESPONSIVE
========================================================== */

@media (max-width: 768px) {

  .starter-broker-links {
    display: grid;

    grid-template-columns: 1fr;
  }


  .starter-broker-link {
    width: 100%;
  }


  .starter-final-cta {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }


  .starter-final-button {
    width: 100%;
  }

}


@media (max-width: 480px) {

  .starter-broker-box {
    padding: 15px;
  }


  .starter-broker-link {
    padding: 11px 12px;

    gap: 8px;
  }


  .broker-name {
    font-size: 0.85rem;
  }


  .broker-action {
    font-size: 0.72rem;
  }


  .starter-final-cta {
    padding: 22px 20px;

    border-radius: 16px;
  }


  .starter-final-cta h3 {
    font-size: 1.1rem;
  }


  .starter-final-cta p {
    font-size: 0.86rem;
  }

}

/* ==========================================================
   BLOG ARTICLE CARDS - FINAL MOBILE FIX
   ----------------------------------------------------------
   This is intentionally placed at the end so it wins over
   earlier generic responsive rules.
========================================================== */

@media (max-width:768px){

    .article-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:25px !important;
        width:100% !important;
        height:auto !important;
        overflow:visible !important;
    }

    .article-grid .article-card{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .article-grid .article-card img{
        display:block !important;
        width:100% !important;
        height:210px !important;
        flex:0 0 210px !important;
        max-width:100% !important;
        object-fit:cover !important;
    }

    .article-grid .article-card .article-content{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        padding:22px !important;
        overflow:visible !important;
    }

    .article-grid .article-card .article-content h3{
        font-size:20px !important;
        line-height:1.35 !important;
        margin:15px 0 !important;
    }

    .article-grid .article-card .article-content p{
        font-size:15px !important;
        line-height:1.65 !important;
        margin-bottom:15px !important;
    }

    .article-grid .article-card .article-content a,
    .article-grid .article-card .read-more{
        display:inline-block !important;
        width:max-content !important;
        max-width:100% !important;
        margin-top:auto !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        z-index:5 !important;
        color:var(--primary) !important;
        font-weight:600 !important;
        cursor:pointer !important;
    }
}

@media (max-width:480px){

    .article-grid{
        gap:20px !important;
    }

    .article-grid .article-card img{
        height:190px !important;
        flex-basis:190px !important;
    }

    .article-grid .article-card .article-content{
        padding:20px !important;
    }

    .article-grid .article-card .article-content h3{
        font-size:18px !important;
    }

    .article-grid .article-card .article-content p{
        font-size:14px !important;
    }
}

/* ==========================================================
   RECOMMENDED PLATFORMS (index.html)
   Fixed 3-column grid had no mobile override, causing
   cramped/overflowing cards on small screens.
========================================================== */

@media(max-width:1024px){

    .platforms-grid{

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

    }

}

@media(max-width:768px){

    .platforms-grid{

        grid-template-columns:1fr;

    }

    .platform-card{

        min-height:auto;

        padding:22px;

    }

}