/* ==========================================================================
   CHITTARA — PAGE-LEVEL STYLES
   ========================================================================== */

/* ---- Category strip (home) ---- */
.category-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: 6px; }
.category-pill { flex: 0 0 auto; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--fs-sm); font-weight: 600; }
.category-pill:hover { border-color: var(--color-violet); color: var(--color-violet); }

/* ---- Stat strip ---- */
.stat-strip { background: var(--color-royal-purple); color: #fff; padding: var(--space-7) 0; }
.stat-strip .grid-4 { text-align: center; }
.stat-strip .stat-value { color: var(--color-gold-bright); font-size: var(--fs-3xl); }
.stat-strip .stat-label { color: rgba(255,255,255,0.65); }

/* ---- How-it-works steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.step-card { padding: var(--space-5); }
.step-card .step-num { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-gold-metallic); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2,1fr); } }

/* ---- Profile hero ---- */
.profile-hero { background: var(--gradient-hero); color: #fff; padding: var(--space-8) 0; }
.profile-hero-grid { display: grid; grid-template-columns: 240px 1fr auto; gap: var(--space-6); align-items: center; }
.profile-avatar { width: 200px; height: 200px; border-radius: var(--radius-lg); border: 3px solid var(--color-gold-metallic); overflow: hidden; background: rgba(255,255,255,0.08); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero h1 { color: #fff; margin-bottom: 4px; }
.profile-meta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; color: rgba(255,255,255,0.75); font-size: var(--fs-sm); margin: var(--space-3) 0; }
.profile-actions-col { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
@media (max-width: 900px) { .profile-hero-grid { grid-template-columns: 1fr; text-align: center; } .profile-avatar { margin: 0 auto; } .profile-meta-row { justify-content: center; } }

/* ---- Marketplace layout ---- */
.marketplace-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
.filter-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: calc(var(--header-height) + 16px); }
.filter-group { margin-bottom: var(--space-5); }
.filter-group h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 10px; }
.filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 5px 0; }
@media (max-width: 900px) { .marketplace-layout { grid-template-columns: 1fr; } .filter-panel { position: static; } }

/* ---- Auth demo credential list ---- */
.cred-list { font-size: var(--fs-xs); background: var(--color-surface-alt); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-5); }
.cred-list div { padding: 3px 0; display: flex; justify-content: space-between; }

/* ---- Testimonial ---- */
.testimonial-card { padding: var(--space-6); }
.testimonial-card blockquote { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-royal-purple); margin: 0 0 var(--space-4); }

/* ---- Utility ---- */
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0} .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:8px} .gap-3{gap:12px} .text-center{text-align:center} .w-full{width:100%}