/* ==========================================================================
   CALCULATOR INDEX PAGE STYLES
   Specific styles for calculator listing/directory page
   ========================================================================== */

/* Design system variables - Shared with other calculator pages */
:root {
    --calc-color-primary: #1B4D3E;
    --calc-color-accent: #D97706;
    --calc-color-text: #1F2937;
    --calc-color-text-secondary: #6B7280;
    --calc-color-border: #E5E7EB;
    --calc-color-background: #FFFFFF;
    --calc-color-background-subtle: #F9FAFB;
    
    --calc-font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    --calc-text-xs: 0.75rem;
    --calc-text-sm: 0.875rem;
    --calc-text-base: 1rem;
    --calc-text-lg: 1.125rem;
    --calc-text-xl: 1.25rem;
    --calc-text-2xl: 1.5rem;
    --calc-text-3xl: 2rem;
    
    --calc-space-1: 0.5rem;
    --calc-space-2: 1rem;
    --calc-space-3: 1.5rem;
    --calc-space-4: 2rem;
    --calc-space-5: 2.5rem;
    --calc-space-6: 3rem;
    
    --calc-container-max: 1280px;
}

/* Base styles for calculator index page */
.calc-index-page {
    font-family: var(--calc-font-family);
    font-size: var(--calc-text-base);
    line-height: 1.5;
    color: var(--calc-color-text);
    background: var(--calc-color-background);
    -webkit-font-smoothing: antialiased;
}

/* Scoped reset - only for calculator content, excluding navbar and footer */
.calc-index-header *,
.calc-index-container *,
.calc-index-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header */
.calc-index-header {
    background: var(--calc-color-background);
    border-bottom: 1px solid var(--calc-color-border);
    padding: var(--calc-space-6) 0;
}

/* Container */
.calc-index-container {
    max-width: var(--calc-container-max);
    margin: 0 auto;
    padding: 0 var(--calc-space-3);
}

/* Breadcrumb Navigation */
.calc-index-breadcrumb {
    display: flex;
    gap: var(--calc-space-1);
    font-size: var(--calc-text-sm);
    color: var(--calc-color-text-secondary);
    margin-bottom: var(--calc-space-2);
}

.calc-index-breadcrumb a {
    color: var(--calc-color-text-secondary);
    text-decoration: none;
}

.calc-index-breadcrumb a:hover {
    color: var(--calc-color-primary);
}

/* Page Title */
.calc-index-page-title {
    font-size: var(--calc-text-3xl);
    font-weight: 600;
    color: var(--calc-color-text);
    letter-spacing: -0.01em;
    margin-bottom: var(--calc-space-2);
}

/* Page Description */
.calc-index-page-description {
    font-size: var(--calc-text-lg);
    color: var(--calc-color-text-secondary);
    max-width: 640px;
}

/* Calculator Section */
.calc-index-section {
    padding: var(--calc-space-6) 0;
}

/* Section Header */
.calc-index-section-header {
    margin-bottom: var(--calc-space-4);
}

.calc-index-section-title {
    font-size: var(--calc-text-xl);
    font-weight: 600;
    color: var(--calc-color-text);
    margin-bottom: var(--calc-space-1);
}

.calc-index-section-description {
    font-size: var(--calc-text-sm);
    color: var(--calc-color-text-secondary);
}

/* Calculator Grid */
.calc-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--calc-space-3);
}

/* Calculator Card */
.calc-index-card {
    display: block;
    background: var(--calc-color-background);
    border: 1px solid var(--calc-color-border);
    padding: var(--calc-space-4);
    text-decoration: none;
    color: var(--calc-color-text);
    transition: all 0.15s ease;
}

.calc-index-card:hover {
    border-color: var(--calc-color-primary);
}

.calc-index-card-category {
    font-size: var(--calc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--calc-color-primary);
    margin-bottom: var(--calc-space-2);
}

.calc-index-card-title {
    font-size: 1.25rem; /* Increased from var(--calc-text-lg) which is 1.125rem */
    font-weight: 600;
    margin-bottom: var(--calc-space-2);
}

.calc-index-card-desc {
    font-size: 1rem; /* Increased from var(--calc-text-sm) which is 0.875rem */
    color: var(--calc-color-text-secondary);
    line-height: 1.6;
}

.calc-index-card-arrow {
    display: inline-block;
    margin-top: var(--calc-space-2);
    font-size: var(--calc-text-sm);
    color: var(--calc-color-primary);
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .calc-index-grid {
        grid-template-columns: 1fr;
        gap: var(--calc-space-2); /* Reduced gap on mobile */
    }
    
    .calc-index-page-title {
        font-size: var(--calc-text-2xl);
    }
    
    .calc-index-card {
        padding: var(--calc-space-3); /* Smaller padding on mobile */
    }
    
    .calc-index-card-title {
        font-size: 1.125rem; /* Slightly smaller on mobile */
    }
    
    .calc-index-card-desc {
        font-size: 0.938rem; /* Slightly smaller on mobile */
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    .calc-index-header {
        padding: var(--calc-space-3) 0; /* Reduced from space-4 */
    }
    
    .calc-index-section {
        padding: var(--calc-space-3) 0; /* Reduced from space-4 */
    }
    
    .calc-index-container {
        padding: 0 var(--calc-space-2); /* Tighter side padding */
    }
    
    .calc-index-grid {
        gap: var(--calc-space-2); /* Consistent smaller gap */
    }
    
    .calc-index-card {
        padding: var(--calc-space-2) var(--calc-space-3); /* More compact */
    }
    
    .calc-index-card-title {
        font-size: 1.0625rem; /* 17px - compact but readable */
        margin-bottom: var(--calc-space-1);
    }
    
    .calc-index-card-desc {
        font-size: 0.875rem; /* 14px - compact */
        line-height: 1.5;
    }
    
    .calc-index-card-category {
        font-size: 0.6875rem; /* Smaller category tag */
        margin-bottom: var(--calc-space-1);
    }
    
    .calc-index-card-arrow {
        margin-top: var(--calc-space-1);
        font-size: 0.8125rem;
    }
    
    .calc-index-page-title {
        font-size: 1.75rem; /* Smaller title on mobile */
        margin-bottom: var(--calc-space-2);
    }
    
    .calc-index-page-description {
        font-size: 1rem; /* Slightly smaller description */
    }
}

@media (max-width: 480px) {
    .calc-index-header {
        padding: var(--calc-space-2) 0; /* Even more compact */
    }
    
    .calc-index-section {
        padding: var(--calc-space-2) 0;
    }
    
    .calc-index-card {
        padding: var(--calc-space-2); /* Very compact on tiny screens */
    }
    
    .calc-index-page-title {
        font-size: 1.5rem; /* Even smaller on tiny screens */
    }
}