/**
 * Stockz.net Responsive Framework
 * Bootstrap-inspired mobile-first responsive system
 * Include this on ALL pages: <link rel="stylesheet" href="/css/responsive.css">
 */

/* ==========================================================================
   BASE RESPONSIVE SETTINGS
   ========================================================================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Fluid images */
img {
    max-width: 100%;
    height: auto;
}

/* Touch-friendly tap targets (minimum 44px) */
a, button, input[type="submit"], input[type="button"], .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Better box model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   CONTAINER SYSTEM
   ========================================================================== */

.container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* ==========================================================================
   HEADER / NAVIGATION - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack header elements */
    header .header-content,
    header .header-content > div {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    /* Logo smaller on mobile */
    .logo {
        font-size: 20px !important;
    }
    
    .logo-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Search full width on mobile */
    .search-container {
        order: 3;
        width: 100%;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Header right section */
    .header-right {
        gap: 8px !important;
    }
    
    /* Hide market status on mobile */
    .market-status {
        display: none !important;
    }
    
    /* User menu compact */
    .user-menu {
        padding: 4px 8px !important;
    }
    
    .user-name {
        display: none !important; /* Hide name, show only avatar */
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .login-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .login-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   MARKET BAR - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .market-bar {
        padding: 8px 0;
    }
    
    .market-bar-content {
        gap: 12px !important;
        padding: 0 8px;
    }
    
    .market-item {
        gap: 6px !important;
        flex-shrink: 0;
    }
    
    .market-label {
        font-size: 11px !important;
    }
    
    .market-price {
        font-size: 13px !important;
    }
    
    .market-change {
        font-size: 11px !important;
        padding: 1px 6px !important;
    }
    
    .market-divider {
        display: none;
    }
    
    .crypto-icon {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   TRENDING BAR - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .trending-bar {
        padding: 8px 0;
    }
    
    .trending-content {
        gap: 10px !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    
    .trending-label {
        font-size: 12px !important;
        white-space: nowrap;
    }
    
    .trending-tickers {
        gap: 6px !important;
        flex-wrap: nowrap;
    }
    
    .trending-ticker {
        padding: 4px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
}

/* ==========================================================================
   MAIN CONTENT GRID - MOBILE
   ========================================================================== */

@media (max-width: 1023px) {
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .sidebar {
        order: 2;
    }
    
    .main-content {
        order: 1;
    }
}

@media (max-width: 767px) {
    main {
        padding: 16px 0 !important;
    }
    
    .content-grid {
        gap: 16px !important;
    }
}

/* ==========================================================================
   SECTIONS / CARDS - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .section {
        border-radius: 8px !important;
        margin-bottom: 16px !important;
    }
    
    .section-header {
        padding: 12px 16px !important;
    }
    
    .section-title {
        font-size: 16px !important;
    }
    
    .section-content {
        padding: 12px 16px !important;
    }
    
    .section-link {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   CHARTS - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .chart-container {
        height: 200px !important;
        padding: 12px !important;
    }
    
    .chart-header {
        padding: 0 12px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .chart-price {
        font-size: 24px !important;
    }
    
    .chart-change {
        font-size: 14px !important;
    }
    
    /* Interactive chart controls */
    .chart-controls {
        margin-bottom: 12px !important;
    }
    
    .chart-range-buttons {
        gap: 2px !important;
        flex-wrap: wrap;
    }
    
    .range-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        min-width: auto;
    }
    
    .interactive-chart-module {
        padding: 12px !important;
        margin: 16px 0 !important;
    }
    
    .interactive-chart-module .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   SECTOR GRID - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 12px !important;
    }
    
    .sector-item {
        padding: 10px 8px !important;
    }
    
    .sector-name {
        font-size: 11px !important;
    }
    
    .sector-change {
        font-size: 14px !important;
    }
}

@media (max-width: 400px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   MOVERS LIST - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .movers-tabs {
        border-bottom: 1px solid var(--border-color);
    }
    
    .mover-tab {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    .mover-item {
        padding: 10px 12px !important;
    }
    
    .mover-logo {
        width: 24px !important;
        height: 24px !important;
    }
    
    .mover-symbol {
        font-size: 13px !important;
    }
    
    .mover-price {
        font-size: 11px !important;
    }
    
    .mover-change {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }
}

/* ==========================================================================
   STOCK CARDS ROW - MOBILE (Bootstrap-like)
   ========================================================================== */

.stock-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

.stock-cards-row .stock-card {
    flex: 1 1 180px;
    min-width: 160px;
}

@media (max-width: 767px) {
    .stock-cards-row {
        gap: 8px;
        margin: 16px 0;
    }
    
    .stock-cards-row .stock-card {
        flex: 1 1 calc(50% - 4px);
        min-width: calc(50% - 4px);
        max-width: calc(50% - 4px);
        padding: 12px !important;
    }
    
    .stock-card .card-logo {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stock-card .card-symbol {
        font-size: 14px !important;
    }
    
    .stock-card .card-name {
        font-size: 11px !important;
    }
    
    .stock-card .card-price {
        font-size: 16px !important;
    }
    
    .stock-card .card-change {
        font-size: 12px !important;
    }
}

@media (max-width: 400px) {
    .stock-cards-row .stock-card {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   ARTICLES GRID - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .articles-grid {
        padding: 12px !important;
        gap: 16px !important;
    }
    
    .article-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
    }
    
    .article-image {
        width: 100% !important;
        height: 120px !important;
    }
    
    .article-content h3 {
        font-size: 14px !important;
    }
    
    .article-meta {
        font-size: 11px !important;
    }
    
    .article-excerpt {
        font-size: 12px !important;
    }
    
    /* Articles list on stock pages */
    .articles-list {
        gap: 12px !important;
    }
    
    .article-item {
        padding: 12px !important;
    }
    
    .article-item-title {
        font-size: 14px !important;
    }
    
    .article-item-excerpt {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   NEWSLETTER - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .newsletter {
        padding: 20px 16px !important;
    }
    
    .newsletter h3 {
        font-size: 16px !important;
    }
    
    .newsletter p {
        font-size: 13px !important;
    }
    
    .newsletter-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .newsletter-form input {
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    .newsletter-form button {
        padding: 12px 20px !important;
        width: 100%;
    }
    
    .newsletter-cta {
        padding: 24px 16px !important;
        margin: 32px 0 !important;
    }
    
    .newsletter-cta h3 {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   COMMENTS - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .comments-section {
        padding: 16px !important;
    }
    
    .comment-form textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 80px !important;
    }
    
    .comment {
        padding: 12px !important;
    }
    
    .comment-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .comment-content {
        font-size: 14px !important;
    }
    
    .comment-actions {
        gap: 12px !important;
    }
    
    .vote-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    
    /* Homepage comments sidebar */
    .homepage-comment {
        padding: 10px 12px !important;
    }
    
    .homepage-comment-text {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   DATA TABLES - MOBILE (Responsive)
   ========================================================================== */

@media (max-width: 767px) {
    .data-table {
        margin: 24px -16px !important;
        width: calc(100% + 32px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table table {
        min-width: 500px;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* Stats grid on stock pages */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-item {
        padding: 12px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
    
    .stat-value {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   COMPARISON GRID - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .comparison-card {
        padding: 16px !important;
    }
    
    .comparison-card .value {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   ARTICLE PAGE - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .article-container {
        padding: 0 16px !important;
    }
    
    .article-hero {
        padding: 24px 0 16px !important;
    }
    
    .article-category {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    
    .article-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    
    .article-subtitle {
        font-size: 16px !important;
    }
    
    .article-meta {
        gap: 10px !important;
    }
    
    .author-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .author-name {
        font-size: 14px !important;
    }
    
    .meta-item {
        font-size: 12px !important;
    }
    
    .article-content {
        padding: 16px 0 !important;
    }
    
    .article-content p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    .article-content h2 {
        font-size: 22px !important;
        margin: 32px 0 16px !important;
    }
    
    .article-content h3 {
        font-size: 18px !important;
    }
    
    .article-content li {
        font-size: 16px !important;
    }
    
    .pull-quote {
        padding: 20px !important;
        margin: 24px 0 !important;
    }
    
    .pull-quote p {
        font-size: 18px !important;
    }
    
    .key-takeaways,
    .risk-box,
    .info-box {
        padding: 16px !important;
        margin: 24px 0 !important;
    }
    
    .key-takeaways li,
    .risk-box p,
    .info-box p {
        font-size: 14px !important;
    }
    
    .rating-box {
        padding: 20px !important;
    }
    
    .rating-box .rating {
        font-size: 36px !important;
    }
}

/* ==========================================================================
   STOCK PAGE - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    /* Stock header */
    .stock-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    
    .stock-info {
        width: 100%;
    }
    
    .stock-logo-large {
        width: 48px !important;
        height: 48px !important;
    }
    
    .stock-name {
        font-size: 14px !important;
    }
    
    .stock-symbol-large {
        font-size: 20px !important;
    }
    
    .stock-price-large {
        font-size: 28px !important;
    }
    
    .stock-change-large {
        font-size: 16px !important;
    }
    
    /* About section */
    .about-text {
        font-size: 14px !important;
        -webkit-line-clamp: 4;
    }
    
    /* News items */
    .news-item {
        padding: 12px 0 !important;
    }
    
    .news-title {
        font-size: 14px !important;
    }
    
    .news-meta {
        font-size: 11px !important;
    }
    
    /* Related stocks */
    .related-list {
        gap: 6px !important;
    }
    
    .related-item {
        padding: 10px 12px !important;
    }
    
    .related-logo {
        width: 28px !important;
        height: 28px !important;
    }
    
    .related-symbol {
        font-size: 14px !important;
    }
    
    .related-name {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   ADMIN PAGES - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .admin-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    .nav-links {
        gap: 12px !important;
        font-size: 13px !important;
    }
    
    .form-section {
        padding: 16px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .form-group label {
        font-size: 13px !important;
    }
    
    input[type="text"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px !important;
    }
    
    .btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        width: 100%;
    }
    
    .brief-item {
        padding: 12px !important;
    }
    
    .brief-title {
        font-size: 14px !important;
    }
    
    .article-actions {
        flex-direction: column;
        gap: 8px !important;
    }
    
    .article-actions .btn,
    .article-actions form {
        width: 100%;
    }
    
    .article-actions form .btn {
        width: 100%;
    }
}

/* ==========================================================================
   PROFILE PAGE - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }
    
    .profile-form {
        padding: 16px !important;
    }
}

/* ==========================================================================
   FOOTER - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    footer {
        padding: 16px 0 !important;
        margin-top: 24px !important;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .footer-links a {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

/* Text alignment */
@media (max-width: 767px) {
    .text-center-mobile { text-align: center !important; }
}

/* Spacing adjustments */
@media (max-width: 767px) {
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 8px !important; }
    .mb-mobile-2 { margin-bottom: 16px !important; }
    .p-mobile-1 { padding: 8px !important; }
    .p-mobile-2 { padding: 16px !important; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    header, footer, .newsletter, .comments-section, .sidebar {
        display: none !important;
    }
    
    .article-container {
        max-width: 100% !important;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ==========================================================================
   MARKET BAR - FIX: WRAP TO 2 LINES, NO SCROLL
   ========================================================================== */

@media (max-width: 767px) {
    .market-bar-content {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: visible !important;
        overflow: visible !important;
    }
    
    .market-item {
        flex: 0 0 auto;
        min-width: 0;
    }
}

@media (max-width: 500px) {
    .market-bar-content {
        justify-content: space-around !important;
        gap: 8px 16px !important;
        padding: 4px 12px !important;
    }
    
    .market-item {
        flex: 0 0 calc(50% - 12px);
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .market-bar-content {
        gap: 6px 10px !important;
    }
    
    .market-item {
        flex: 0 0 calc(50% - 8px);
    }
    
    .market-label {
        font-size: 10px !important;
    }
    
    .market-price {
        font-size: 12px !important;
    }
    
    .market-change {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
}

/* ==========================================================================
   FIX: TRENDING TICKERS VERTICAL ALIGNMENT
   ========================================================================== */

.trending-bar {
    display: flex;
    align-items: center;
}

.trending-content {
    display: flex;
    align-items: center !important;
}

.trending-tickers {
    display: flex;
    align-items: center !important;
}

.trending-ticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .trending-bar {
        min-height: 40px;
    }
    
    .trending-content {
        min-height: 36px;
        align-items: center !important;
    }
    
    .trending-label {
        display: flex;
        align-items: center;
        line-height: 1;
    }
    
    .trending-ticker {
        height: 28px;
        line-height: 28px;
        padding: 0 10px !important;
    }
}

/* ==========================================================================
   FIX: ENSURE RESIZE RESPONSIVENESS (viewport units + flexbox)
   ========================================================================== */

/* Use viewport-relative units for key elements */
.container {
    width: min(100% - 32px, var(--container-max, 1320px));
    margin-inline: auto;
}

/* Ensure flexbox layouts reflow on resize */
/* NOTE: content-grid uses CSS Grid, not flexbox - don't override it here */
.market-bar-content,
.trending-content,
.stock-cards-row,
.sector-grid,
.comparison-grid {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Landscape phone - keep compact */
    .market-bar { padding: 4px 0; }
    .trending-bar { padding: 4px 0; }
}