/* ============================================
   AI Tools Lab - Feature Pages CSS
   ============================================ */

/* === Common === */
.feature-page { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.feature-hero { text-align: center; padding: 50px 20px 30px; }
.feature-hero h1 { font-size: 2.2em; margin-bottom: 12px; line-height: 1.2; }
.feature-hero p { font-size: 1.1em; color: #666; max-width: 700px; margin: 0 auto; }
.feature-hero .badge-row { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.feature-hero .badge { display: inline-block; background: #e8f5e9; color: #2e7d32; padding: 4px 14px; border-radius: 20px; font-size: 0.85em; font-weight: 500; }

/* === Filter Bar === */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 30px; }
.filter-btn { padding: 8px 18px; border: 1px solid #ddd; border-radius: 25px; background: white; cursor: pointer; font-size: 0.9em; transition: all 0.2s; color: #555; }
.filter-btn:hover, .filter-btn.active { background: #667eea; color: white; border-color: #667eea; }

/* === Tool Cards === */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 40px; }
.tool-card { background: white; border-radius: 12px; padding: 24px; border: 1px solid #eee; transition: all 0.25s; position: relative; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.tool-card .card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tool-card .card-icon { width: 48px; height: 48px; border-radius: 10px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.tool-card .card-title { font-size: 1.15em; font-weight: 600; color: #222; }
.tool-card .card-title a { color: inherit; text-decoration: none; }
.tool-card .card-title a:hover { color: #667eea; }
.tool-card .card-category { font-size: 0.8em; color: #888; margin-top: 2px; }
.tool-card .card-desc { font-size: 0.92em; color: #555; line-height: 1.6; margin-bottom: 14px; }
.tool-card .card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.82em; color: #888; }
.tool-card .card-price { background: #f8f9fa; padding: 3px 10px; border-radius: 15px; font-weight: 500; color: #333; }
.tool-card .card-rating { color: #f59e0b; }
.tool-card .featured-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 3px 10px; border-radius: 12px; font-size: 0.7em; font-weight: 600; }

/* === Comparison Table === */
.compare-table-wrap { overflow-x: auto; margin: 30px 0; }
.compare-table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.compare-table thead th { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 14px 18px; text-align: left; font-size: 0.95em; }
.compare-table tbody td { padding: 12px 18px; border-bottom: 1px solid #f0f0f0; font-size: 0.9em; }
.compare-table tbody tr:hover { background: #f8f9ff; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .winner { background: #f0fdf4; font-weight: 600; }
.compare-table .star { color: #f59e0b; }

/* === Compare Hero (2-column) === */
.compare-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 40px 20px; text-align: center; }
.compare-hero .tool-block { padding: 20px; }
.compare-hero .tool-block .tool-icon { font-size: 48px; margin-bottom: 10px; }
.compare-hero .tool-block h2 { font-size: 1.5em; margin-bottom: 5px; }
.compare-hero .vs-badge { font-size: 1.8em; font-weight: 800; color: #667eea; background: #f0f0ff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* === Score Bars === */
.score-bar-wrap { margin: 8px 0; }
.score-bar-label { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 4px; }
.score-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.score-bar-fill.blue { background: linear-gradient(90deg, #667eea, #764ba2); }
.score-bar-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
.score-bar-fill.orange { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* === Verdict Box === */
.verdict-box { background: linear-gradient(135deg, #f8f9ff, #eef2ff); border-radius: 12px; padding: 30px; margin: 30px 0; border-left: 4px solid #667eea; }
.verdict-box h3 { color: #667eea; margin-bottom: 10px; }
.verdict-box p { color: #444; line-height: 1.7; }

/* === Quick Picks === */
.quick-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 30px 0; }
.quick-pick { background: white; border-radius: 10px; padding: 20px; text-align: center; border: 2px solid #eee; transition: all 0.2s; }
.quick-pick:hover { border-color: #667eea; }
.quick-pick .pick-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 8px; }
.quick-pick .pick-name { font-size: 1.1em; font-weight: 700; color: #222; margin-bottom: 4px; }
.quick-pick .pick-reason { font-size: 0.85em; color: #666; }

/* === Pros/Cons Grid === */
.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
@media (max-width: 768px) { .pros-cons-grid { grid-template-columns: 1fr; } }
.pros-box, .cons-box { padding: 20px; border-radius: 10px; }
.pros-box { background: #f0fdf4; border: 1px solid #bbf7d0; }
.cons-box { background: #fef2f2; border: 1px solid #fecaca; }
.pros-box h4, .cons-box h4 { margin-bottom: 12px; font-size: 1em; }
.pros-box ul li::before { content: "✅ "; }
.cons-box ul li::before { content: "❌ "; }
.pros-box ul, .cons-box ul { list-style: none; padding: 0; }
.pros-box ul li, .cons-box ul li { padding: 4px 0; font-size: 0.9em; }

/* === CTA Box === */
.cta-box { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 12px; padding: 40px; text-align: center; margin: 40px 0; }
.cta-box h3 { font-size: 1.5em; margin-bottom: 10px; }
.cta-box p { opacity: 0.9; margin-bottom: 20px; }
.cta-box a { display: inline-block; background: white; color: #667eea; padding: 12px 30px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.cta-box a:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

/* === Category Section === */
.category-section { margin: 40px 0; }
.category-section h2 { font-size: 1.4em; padding-bottom: 10px; border-bottom: 2px solid #667eea; margin-bottom: 20px; display: inline-block; }

/* === Newsletter === */
.newsletter-box { background: #f8f9fa; border-radius: 12px; padding: 40px; text-align: center; margin: 40px 0; border: 2px dashed #ddd; }
.newsletter-box h3 { margin-bottom: 10px; }
.newsletter-box p { color: #666; margin-bottom: 20px; }
.newsletter-form { display: flex; gap: 10px; max-width: 450px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; }
.newsletter-form button { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.newsletter-form button:hover { background: #5a6fd6; }

/* === FAQ === */
.faq-section { margin: 40px 0; }
.faq-item { border-bottom: 1px solid #eee; padding: 16px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 1em; color: #333; padding: 8px 0; }
.faq-item summary:hover { color: #667eea; }
.faq-item p { margin-top: 10px; color: #555; line-height: 1.7; font-size: 0.95em; }

/* === Schema Markup (hidden visual, for SEO) === */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* === Responsive === */
@media (max-width: 768px) {
    .feature-hero h1 { font-size: 1.6em; }
    .tools-grid { grid-template-columns: 1fr; }
    .compare-hero { grid-template-columns: 1fr; }
    .compare-hero .vs-badge { margin: 0 auto; }
    .quick-picks { grid-template-columns: 1fr 1fr; }
    .filter-bar { gap: 6px; }
    .filter-btn { padding: 6px 14px; font-size: 0.82em; }
}
@media (max-width: 480px) {
    .quick-picks { grid-template-columns: 1fr; }
}