/**
 * Module Detail Page Styles
 */

.module-hero {
    background: linear-gradient(135deg, var(--bs-primary-dark, #001a3d) 0%, var(--bs-primary, #002b5c) 100%);
    padding: 4rem 0 3.5rem;
    color: #f1f5f9;
}

.module-hero .breadcrumb-nav { font-size: 0.82rem; margin-bottom: 1.25rem; }
.module-hero .breadcrumb-nav a { color: rgba(255,255,255,0.55); text-decoration: none; }
.module-hero .breadcrumb-nav a:hover { color: #fff; }
.module-hero .breadcrumb-nav .sep { color: rgba(255,255,255,0.3); margin: 0 0.4rem; }
.module-hero .breadcrumb-nav .current { color: rgba(255,255,255,0.75); }

.module-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 0.5rem; }
.module-hero .subtitle { font-size: 1.05rem; color: rgba(255,255,255,0.7); max-width: none; margin-bottom: 0; }
.module-badges .badge { font-size: 0.72rem; font-weight: 600; }

.module-composer-cmd {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #93c5fd;
    vertical-align: middle;
    user-select: all;
}

/* Features */
.module-features { padding: 3.5rem 0; }
.module-features h2 { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin-bottom: 1.5rem; }

.feature-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
}

.feature-card .feature-icon {
    width: 40px; height: 40px;
    background: var(--bs-primary, #002b5c);
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; margin-bottom: 0.75rem;
}

.feature-card h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.875rem; color: #64748b; line-height: 1.55; margin-bottom: 0; max-width: none; }

/* Screenshots */
.module-screenshot img { border: 1px solid #e2e8f0; }

/* Use Cases */
.module-usecases { padding: 3rem 0; }
.module-usecases h2 { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin-bottom: 1.25rem; }
.usecase-list { padding-left: 1.25rem; }
.usecase-list li { font-size: 0.95rem; color: #374151; line-height: 1.7; margin-bottom: 0.5rem; }

/* Install, API, Config */
.module-install, .module-api, .module-config { padding: 3rem 0; }
.module-install h2, .module-api h2, .module-config h2 { font-size: 1.4rem; font-weight: 700; color: #0f172a; margin-bottom: 1.25rem; }
.module-install p, .module-api p, .module-config p { max-width: none; font-size: 0.95rem; color: #374151; line-height: 1.7; }
.module-install pre, .module-api pre, .module-config pre {
    background: #1e293b; color: #e2e8f0; border-radius: 0.5rem;
    padding: 1rem 1.25rem; font-size: 0.85rem; overflow-x: auto; margin: 1rem 0;
}
.module-install code, .module-api code, .module-config code { color: #93c5fd; }
.module-install table, .module-api table, .module-config table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1rem 0;
}
.module-install table th, .module-api table th, .module-config table th {
    background: #f1f5f9; padding: 0.5rem 0.75rem; font-weight: 600; text-align: left; border-bottom: 2px solid #e2e8f0; color: #334155;
}
.module-install table td, .module-api table td, .module-config table td {
    padding: 0.5rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #374151; vertical-align: top;
}

/* CTA */
.module-cta {
    background: var(--bs-primary, #002b5c); color: #fff; padding: 3.5rem 0;
}
.module-cta h2 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; }
.module-cta p { font-size: 0.95rem; color: rgba(255,255,255,0.75); max-width: none; margin-bottom: 1.5rem; }

@media (max-width: 768px) {
    .module-hero { padding: 3rem 0 2.5rem; }
    .module-features, .module-usecases, .module-install, .module-api, .module-config { padding: 2rem 0; }
}