/* ================================================================
# DACOG Search Engine – System Architecture
# File: stocks-page.css
# Path: /static/css/stocks-page.css
# Version: 3.0.0
# Description: Mathematical-Unit Financial Profile (Light/Hero Theme)
# ================================================================*/

/* 1. Base Wrapper & Hero Architecture */
.market-profile-wrapper {
    padding-bottom: 3.125rem; /* 50px */
}

.market-header {
    padding: 3.5rem 2rem;
    border-bottom: 0.25rem solid var(--dacog-accent-warning, #ffc107); /* 4px */
    background: linear-gradient(135deg, var(--dacog-bg-topbar) 0%, #000000 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Subtle data-grid pattern for financial feel */
.market-header::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 0.0625rem, transparent 0.0625rem);
    background-size: 1.875rem 1.875rem; /* 30px */
    pointer-events: none;
}

.hero-image-container img {
    width: 11.25rem; /* 180px */
    height: 7.5rem; /* 120px */
    object-fit: cover;
    border: 0.125rem solid var(--dacog-accent-warning, #ffc107);
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    border-radius: 0.75rem;
    background: var(--dacog-bg-nav);
    padding: 0.25rem;
    position: relative;
    z-index: 2;
}

.header-text {
    position: relative;
    z-index: 2;
}

/* 2. Theme-Aware Data Cards */
.market-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    padding: 1.5rem;
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.market-card:hover {
    -webkit-transform: translateY(-0.125rem);
    -moz-transform: translateY(-0.125rem);
    -ms-transform: translateY(-0.125rem);
    -o-transform: translateY(-0.125rem);
    transform: translateY(-0.125rem);
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
}

/* 3. Section Titles & Typography */
.market-section-title {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09375rem; /* 1.5px */
    color: var(--dacog-text-main);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.market-section-title::after {
    content: "";
    flex-grow: 1;
    height: 0.0625rem;
    background: var(--dacog-border-color);
    margin-left: 0.9375rem; /* 15px */
}

/* 4. Index Tables & Financial Metrics */
.table thead th {
    background-color: var(--dacog-bg-base);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--dacog-text-muted);
    letter-spacing: 0.0625rem;
    border: none;
    padding: 0.75rem;
}

.theme-hero .table { color: var(--dacog-text-main); }
.theme-hero .table > :not(caption) > * > * { border-bottom-color: var(--dacog-border-color); }

.font-monospace {
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
    font-weight: 600;
}

.text-success-custom { color: var(--dacog-accent-green) !important; }
.text-danger-custom { color: var(--dacog-accent-danger) !important; }

/* 5. Sidebar: Intelligence Brief Card (Dark/Premium) */
.market-brief-card {
    background: linear-gradient(145deg, var(--dacog-bg-topbar), #000000);
    color: #ffffff;
    border-left: 0.3125rem solid var(--dacog-accent-warning, #ffc107) !important;
    border: none;
}

.market-brief-card .text-muted, 
.market-brief-card .opacity-75 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.market-brief-card .border-white {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 6. Tiered Access & Security Gates */
.content-locked-blur {
    -webkit-filter: blur(0.4375rem); /* ~7px */
    filter: blur(0.4375rem);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 0.5;
    -webkit-transition: filter 0.4s ease;
    transition: filter 0.4s ease;
}

.lock-overlay-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
}

/* ==========================================================================
   7. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 62em) { /* 992px */
    .market-header { 
        flex-direction: column; 
        text-align: center; 
        padding: 2rem 1rem;
    }
    
    .hero-image-container {
        margin-left: 0 !important;
    }
    
    .header-text { 
        margin-left: 0 !important; 
        margin-top: 1.5rem; 
    }
}

@media screen and (max-width: 30em) { /* 480px */
    .market-card {
        padding: 1.25rem;
    }
    
    .content-locked-blur { 
        -webkit-filter: blur(0.625rem); /* Heavier blur for mobile */
        filter: blur(0.625rem); 
    }
    
    .header-text h1.display-5 {
        font-size: 2.25rem;
    }
}