/* ====================================================
   TradingSkillLab — Responsive Stylesheet
   ==================================================== */

/* ── Mobile (< 768px) ── */
@media(max-width:768px){
    body{overflow-x:hidden}
    .hidden-mobile{display:none}
    .hidden-desktop{display:block}

    /* Typography */
    h1{font-size:26px}
    h2{font-size:18px}
    h3{font-size:15px}
    .hero h1{font-size:26px}
    .stat-num{font-size:22px}

    /* Container */
    .container{padding:0 16px}
    .logo img{height:34px}

    /* Navigation — Slide-in drawer */
    body.menu-open{overflow:hidden}
    .hamburger{display:flex}
    .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:98;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
    .nav-backdrop.visible{opacity:1;visibility:visible}
    .nav{display:none;position:fixed;top:0;right:0;width:auto;max-width:100vw;max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--color-white);border-radius:0;box-shadow:-4px 0 32px rgba(0,0,0,.12);flex-direction:column;gap:0;padding:0;z-index:99;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s ease}
    .nav.open{display:flex;transform:translateX(0);visibility:visible}
    .nav::-webkit-scrollbar{width:4px}
    .nav::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}
    .nav .nav-list{flex-direction:column;gap:0;width:100%;padding-top:64px}
    .nav a,.nav .nav-list a{padding:12px 24px;font-size:15px;border-bottom:1px solid var(--color-border);color:var(--color-text)}
    .nav a:last-child,.nav .nav-list li:last-child a{border-bottom:none}
    .nav a:hover,.nav .nav-list a:hover{background:var(--color-section-bg)}

    /* Header search */
    .header-search-inner form{max-width:none}
    .header-search-inner input{font-size:16px}
    .header-search-inner button{padding:10px 14px;font-size:14px;white-space:nowrap}
    .header-search.active{max-height:80px}
    .header-search>.container{padding-top:10px;padding-bottom:10px;padding-left:8px;padding-right:8px}
    .hamburger span{background:var(--color-text-secondary)}

    /* Hero */
    .hero{padding:40px 0 32px}
    .hero-grid{grid-template-columns:1fr}
    .hero-trust{gap:12px;flex-direction:column}

    /* Grids */
    .broker-grid,.strategy-grid,.path-grid{grid-template-columns:1fr}
    .strategy-grid{gap:16px}
    .comp-grid,.basic-grid,.glossary-grid,.plat-grid{grid-template-columns:1fr}

    /* Tables */
    .compare-tabs{overflow-x:auto;flex-wrap:nowrap}
    .quick-compare .table-wrap{overflow-x:auto}
    .quick-compare .table-wrap table{min-width:640px}

    /* Stats */
    .stats-bar{grid-template-columns:repeat(2,1fr);gap:12px;padding:20px}

    /* Spotlight */
    .spotlight{grid-template-columns:1fr;text-align:center;padding:20px}
    .spotlight-stats{justify-content:center}
    .spotlight-stats span{font-size:11px}

    /* FAQ */
    .faq-grid{grid-template-columns:1fr}

    /* Newsletter */
    .newsletter-inner{grid-template-columns:1fr;gap:20px}
    .newsletter-form-row{flex-direction:column}

    /* Footer */
    .footer-grid{grid-template-columns:1fr}
    .footer-brand p{max-width:100%}
    .footer-bottom{flex-direction:column;text-align:center;gap:6px}
    .footer-legal{justify-content:center}
    .footer-legal a{display:inline-block}

    /* Sections */
    .section{padding:40px 0}

    /* Article body */
    .article-body{max-width:100%;min-width:0;padding:20px}
    .article-body h2{font-size:18px}
    .article-body .chart-placeholder{min-height:150px}

    /* Strategy card */
    .strategy-card-img{height:100px}

    /* Next steps */
    .next-steps-grid{grid-template-columns:1fr}

    /* Section header */
    .section-header{flex-direction:column;align-items:flex-start;gap:4px}

    /* Share float */
    .share-float{display:none}

    /* Glossary mobile */
    .why-grid{grid-template-columns:1fr}
    .related-terms{gap:6px}
    .glossary-term{padding:16px}
    .confusion-pair{padding:14px}
    .why-box{padding:16px}

    /* Feedback */
    .feedback-box{flex-direction:column;align-items:flex-start}

    /* Sidebar */
    .sidebar{position:static}
    .content-with-sidebar{grid-template-columns:1fr}

    /* Archive / Page Hero */
    .page-hero h1{font-size:26px}
    .page-hero{padding:28px 0}
    .page-content-card{padding:20px;max-width:100%;min-width:0}
    .page-content-card .entry-content table{font-size:12px}
    .page-content-card .entry-content th,
    .page-content-card .entry-content td{padding:8px 10px}
    .single-post-header h1{font-size:24px}

    /* Article Hero (Single Basics) */
    .article-hero h1{font-size:26px}
    .article-hero{padding:28px 0}

    /* Comparison Hero */
    .comp-hero h1{font-size:26px}
    .comp-hero{padding:28px 0}
    .comp-hero-platforms{gap:10px}

    /* Review Hero */
    .review-hero h1{font-size:26px}
    .review-hero{padding:28px 0}
    .review-hero-row{flex-direction:column;gap:16px}
    .review-hero-logo{width:56px;height:56px}
    .review-hero-logo svg{width:28px;height:28px}
    .review-hero-actions{flex-direction:column}
    .review-hero-risk{max-width:100%}

    /* Pros/Cons */
    .pros-cons{grid-template-columns:1fr}

    /* Winner box */
    .winner-box{padding:20px}
    .winner-box h3{font-size:18px}

    /* Buttons mobile */
    .btn-primary,.btn-outline{width:100%;justify-content:center}

    /* Cards */
    .broker-card{padding:20px}
    .path-card{padding:20px}

    /* Filter bar mobile */
    .filter-inner{flex-direction:column;align-items:flex-start}
    .filter-tabs{overflow-x:auto;width:100%;padding-bottom:4px}
    .filter-summary{display:none}
    .pagination-wrap{flex-direction:column;align-items:center}

    /* Beginner CTA */
    .beginner-cta{padding:28px 20px}
    .beginner-cta h2{font-size:18px}

    /* About / Contact mobile */
    .about-stats{grid-template-columns:1fr;gap:12px}
    .values-grid{grid-template-columns:1fr}
    .who-grid{grid-template-columns:1fr}
    .about-cta{padding:24px 20px}
    .contact-methods{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .form-submit{flex-direction:column;align-items:stretch}
    .form-submit .form-note{text-align:center}

    /* Pagination mobile */
    .pagination a,.pagination span{min-width:32px;height:32px;font-size:12px}
}

/* ── Tablet (769px - 1024px) ── */
@media(min-width:769px)and(max-width:1024px){
    .broker-grid,.strategy-grid{grid-template-columns:repeat(2,1fr)}
    .comp-grid,.basic-grid,.glossary-grid,.plat-grid{grid-template-columns:repeat(2,1fr)}
    .hero-grid{grid-template-columns:1fr 1fr;gap:24px}
    .hero h1{font-size:28px}
    .content-with-sidebar{grid-template-columns:1fr 260px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
    .stat-num{font-size:24px}
    .path-grid{grid-template-columns:repeat(2,1fr)}
    .single-content{max-width:100%}
    .share-float{display:none}
    .values-grid{grid-template-columns:1fr 1fr}
    .who-grid{grid-template-columns:1fr 1fr}
    .page-content-card{padding:28px}
}

/* ── Large Desktop ── */
@media(min-width:1025px){
    .single-post-header h1{font-size:32px}
}