/* ========================================
   Our Tutors — Listing Page Styles
   ======================================== */

/* Page Hero */
.page-hero { padding: 60px 0 40px; background: #fff; text-align: center; }
.page-hero h1 { font-size: 44px; margin-bottom: 16px; color: #1A1A2E; }
.page-hero p { font-size: 18px; color: #6B7280; max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* Breadcrumb */
.breadcrumb { font-size: 14px; color: #9CA3AF; margin-bottom: 24px; }
.breadcrumb a { color: #9CA3AF; }
.breadcrumb a:hover { color: #2ECC71; }
.breadcrumb span { margin: 0 6px; }

/* Section backgrounds */
.section-light { background: #fff; padding: 80px 0; }
.section-gray { background: #F8F9FA; padding: 80px 0; }
.section-heading { text-align: center; margin-bottom: 48px; }
.section-heading h2 { font-size: 32px; color: #1A1A2E; margin-bottom: 8px; }
.section-heading p { font-size: 16px; color: #6B7280; }

/* Pills */
.pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px; }
.pill.gold { background: #FEF9C3; color: #A16207; }
.pill.purple { background: #F3E8FF; color: #7E22CE; }
.pill.green { background: #DCFCE7; color: #15803D; }
.pill.teal { background: #CCFBF1; color: #0F766E; }
.pill.orange { background: #FFEDD5; color: #C2410C; }
.pill.blue { background: #DBEAFE; color: #1D4ED8; }
.pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }

/* Tutor Cards Grid */
.tutor-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
.tcard {
    background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.tcard img, .tcard .av-placeholder {
    width: 200px; height: 250px; border-radius: 12px; background: #E5E7EB; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #9CA3AF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); object-fit: cover;
}
.tcard h2 { font-size: 28px; margin-bottom: 4px; color: #1A1A2E; }
.tcard .t-role { font-size: 16px; color: #2ECC71; font-weight: 600; margin-bottom: 16px; }
.tcard .t-bio { font-size: 15px; color: #6B7280; line-height: 1.6; margin-bottom: 24px; }
.tcard .formats { font-size: 14px; color: #9CA3AF; margin-bottom: 16px; }
.tcard .stats { font-size: 13px; color: #6B7280; margin-bottom: 24px; }
.tcard .btn-link { color: #2ECC71; font-weight: 600; text-decoration: none; font-size: 15px; margin-top: auto; }
.tcard .btn-link:hover { text-decoration: underline; }

/* CTA Banner */
.cta-banner { background: #2D3436; padding: 80px 0; text-align: center; }
.cta-banner h2 { color: #fff; font-size: 32px; margin-bottom: 16px; }
.cta-banner p { font-size: 16px; color: #D1D5DB; max-width: 560px; margin: 0 auto 32px; line-height: 1.6; }

/* Responsive */
@media (max-width: 768px) {
    .tutor-cards { grid-template-columns: 1fr; }
    .page-hero h1 { font-size: 34px; }
    .page-hero { padding: 48px 0 32px; }
    .section-gray, .section-light { padding: 48px 0; }
    .cta-banner { padding: 48px 0; }
}