/* =============================================
   CARTANTS — responsive.css
   Global responsive overrides for ALL pages
   Breakpoints:
     1280px — large laptop
     1024px — laptop / small desktop
      900px — tablet landscape
      768px — tablet portrait
      480px — large mobile
      375px — small mobile (iPhone SE etc.)
   ============================================= */

/* ═══ BASE — container + overflow ═══ */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed { max-width: 100%; height: auto; }
.cartants-container { padding-left: 24px; padding-right: 24px; }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .cartants-header { top: 12px; left: 12px; right: 12px; max-width: none; }
}
@media (max-width: 480px) {
    .cartants-header { top: 8px; left: 8px; right: 8px; }
    .cartants-logo { height: 28px; }
    .cartants-nav__mobile-toggle { gap: 4px; }
    .cartants-nav__links.is-open { max-height: 80vh; overflow-y: auto; }
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .cartants-footer__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px; }
    .cartants-footer__brand { grid-column: span 2; }
}
@media (max-width: 600px) {
    .cartants-footer__grid { grid-template-columns: 1fr !important; }
    .cartants-footer__brand { grid-column: span 1; }
    .cartants-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ═══════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════ */

/* Hero */
@media (max-width: 1024px) {
    .hero-inner { gap: 32px; }
    .hero-title { font-size: 44px; line-height: 1.15; }
    .hero-visual { width: 44%; }
}
@media (max-width: 900px) {
    .hero-inner { flex-direction: column; text-align: center; align-items: center; padding: 60px 24px 40px; }
    .hero-visual { width: 100%; max-width: 460px; order: -1; }
    .hero-content { max-width: 100%; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 32px; }
    .hero-sub { font-size: 15px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-btn { text-align: center; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
}

/* Home sections — numbers / stats */
@media (max-width: 768px) {
    .home-numbers__grid,
    .cartants-numbers__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
    .cartants-stats__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .home-numbers__grid,
    .cartants-numbers__grid { grid-template-columns: 1fr 1fr !important; }
}

/* Mentors section */
@media (max-width: 1024px) {
    .ms-mentor-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .ms-mentor-grid { grid-template-columns: 1fr !important; }
}

/* How it works */
@media (max-width: 900px) {
    .how-cards { flex-direction: column; }
    .how-illustration { display: none; }
    .how-steps { max-width: 100%; }
}

/* Packages section */
@media (max-width: 1024px) {
    .packages-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .packages-grid { grid-template-columns: 1fr !important; }
    .packages-header { text-align: center; }
    .packages-cta { text-align: center; }
}

/* Testimonials */
@media (max-width: 900px) {
    .testimonials-grid { grid-template-columns: 1fr !important; }
}

/* Become a mentor */
@media (max-width: 900px) {
    .become-mentor-inner { flex-direction: column; text-align: center; align-items: center; gap: 28px; }
    .become-mentor-content { max-width: 100%; }
    .become-mentor-img { max-width: 340px; }
}

/* Trusted / logos */
@media (max-width: 768px) {
    .trusted-logos { gap: 16px; flex-wrap: wrap; justify-content: center; }
    .trusted-logo { height: 36px; }
}

/* ═══════════════════════════════════════════
   CAREER PLANNING PAGE
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .cp-cards-row { gap: 16px; }
}
@media (max-width: 1024px) {
    .cp-level-tabs { gap: 8px; flex-wrap: wrap; }
    .cp-level-tab { padding: 10px 16px; min-width: 140px; }
    .cp-cards-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
    .cp-cards-row { grid-template-columns: 1fr !important; }
    .cp-level-tabs { gap: 6px; }
    .cp-level-tab { flex: 1 1 calc(50% - 6px); min-width: 0; text-align: center; }
    .cp-pkg-header__title { font-size: 28px; }
}
@media (max-width: 480px) {
    .cp-level-tab { flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
    .cp-level-tab__name { font-size: 13px; }
    .cp-level-tab__sub { font-size: 10px; }
    .cp-card { padding: 20px 16px; }
    .cp-card__price-amount { font-size: 28px; }
}

/* ═══════════════════════════════════════════
   PERSONAL BRANDING PAGE
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .pb-cards-row--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
    .pb-hero-inner { flex-direction: column; text-align: center; padding: 60px 24px 40px; }
    .pb-hero__text { max-width: 100%; }
    .pb-hero__img { width: 100%; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .pb-cards-row,
    .pb-cards-row--4 { grid-template-columns: 1fr !important; }
    .pb-pricing { padding: 40px 16px; }
    .pb-pricing__title { font-size: 26px; }
}

/* ═══════════════════════════════════════════
   DISCOVER MENTORS
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dm-page { padding: 20px 16px 60px; }
}
@media (max-width: 900px) {
    .ms-mentor-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .dm-search-row { flex-direction: column; gap: 10px; }
    .dm-search-box { width: 100%; }
    .dm-filter-btn { width: 100%; justify-content: center; }
    .ms-mentor-grid { grid-template-columns: 1fr !important; }
    .dm-title { font-size: 26px; line-height: 1.2; }
    .dm-filter-panel__inner { flex-direction: column; gap: 12px; }
    .dm-filter-select { min-width: 100%; }
}
@media (max-width: 480px) {
    .dm-cat-pill { padding: 6px 12px; font-size: 12px; }
    .dm-pagination { gap: 4px; }
    .dm-page-btn { width: 34px; height: 34px; font-size: 12px; }
}

/* ═══════════════════════════════════════════
   MENTORSHIP PAGE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ms-hero { padding: 60px 24px; }
    .ms-hero__title { font-size: 38px; }
}
@media (max-width: 900px) {
    .ms-hero-inner { flex-direction: column; text-align: center; align-items: center; }
    .ms-hero__img { display: none; }
    .ms-mentor-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ms-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ms-cta-teach { flex-direction: column; text-align: center; align-items: center; }
}
@media (max-width: 600px) {
    .ms-hero__title { font-size: 28px; }
    .ms-search-box { flex-direction: column; gap: 10px; }
    .ms-search-box input { width: 100%; }
    .ms-mentor-grid { grid-template-columns: 1fr !important; }
    .ms-services-grid { grid-template-columns: 1fr !important; }
    .ms-cta-teach__btns { flex-direction: column; align-items: stretch; }
    .ms-cta-btn { text-align: center; }
}

/* ═══════════════════════════════════════════
   MENTOR PROFILE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .mp-layout { grid-template-columns: 1fr !important; }
    .mp-sidebar { position: static !important; width: 100% !important; }
}
@media (max-width: 768px) {
    .mp-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .mp-photo { width: 80px; height: 80px; }
    .mp-info__name { font-size: 22px; }
    .mp-services-grid { grid-template-columns: 1fr !important; }
    .mp-reviews-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .mp-tags { flex-wrap: wrap; gap: 6px; }
    .mp-tag { font-size: 11px; padding: 4px 10px; }
    .mp-stats-row { gap: 16px; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════
   SERVICE PRODUCT PAGE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sp-layout { flex-direction: column; }
    .sp-sidebar { width: 100% !important; position: static !important; }
}
@media (max-width: 768px) {
    .sp-hero { padding: 40px 20px; }
    .sp-card { padding: 20px 16px; }
    .sp-packages-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .sp-price { font-size: 28px; }
    .sp-btn-cart, .sp-btn-checkout { width: 100%; text-align: center; }
    .sp-actions { flex-direction: column; gap: 8px; }
    .sp-qty-row { justify-content: space-between; }
}

/* ═══════════════════════════════════════════
   USER DASHBOARD
═══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .md-layout { grid-template-columns: 220px 1fr !important; }
    .md-sidebar { width: 220px !important; }
}
@media (max-width: 900px) {
    /* Sidebar collapses to bottom nav or overlay */
    .md-layout { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
    .md-sidebar {
        position: fixed !important; left: -280px; top: 0; bottom: 0;
        width: 280px !important; z-index: 999;
        transition: left .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.15);
    }
    .md-sidebar.is-open { left: 0 !important; }
    .md-sidebar-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
        z-index: 998; cursor: pointer;
    }
    .md-sidebar.is-open + .md-sidebar-overlay { display: block; }
    .md-content { padding: 16px; }
    /* Mobile menu toggle button */
    .md-mobile-toggle {
        display: flex !important; position: fixed; bottom: 20px; left: 20px;
        width: 48px; height: 48px; background: linear-gradient(107deg,#7661B4,#0D23AC);
        border-radius: 50%; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(118,97,180,.4); z-index: 997; cursor: pointer;
        border: none;
    }
    .md-mobile-toggle svg { width: 22px; height: 22px; stroke: #fff; }
    .md-top-bar { padding: 12px 16px; }
}
@media (max-width: 640px) {
    .md-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .md-stat { padding: 14px 12px; }
    .md-stat__num { font-size: 22px; }
    .md-cards-row { grid-template-columns: 1fr !important; }
    .md-upcoming-grid { grid-template-columns: 1fr !important; }
    .md-notif-dd { right: -60px !important; width: calc(100vw - 32px) !important; }
}
@media (max-width: 480px) {
    .md-stats { grid-template-columns: 1fr 1fr !important; }
    .md-top-bar__title { font-size: 18px; }
    .md-top-bar__actions { gap: 8px; }
}

/* ═══════════════════════════════════════════
   MENTOR DASHBOARD
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .md-row { grid-template-columns: 1fr !important; }
    .md-layout { grid-template-columns: 1fr !important; }
    .md-sidebar {
        position: fixed !important; left: -280px; top: 0; bottom: 0;
        width: 280px !important; z-index: 999;
        transition: left .25s ease;
    }
    .md-sidebar.is-open { left: 0 !important; }
    .md-mobile-toggle { display: flex !important; }
    .mdb-requests-row { grid-template-columns: 1fr !important; }
    .mdb-sessions-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 768px) {
    .md-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .mds-table { font-size: 12px; }
    .mds-table th, .mds-table td { padding: 8px 10px; }
    .mds-table .mds-join-btn { padding: 6px 12px; font-size: 11px; }
    .cal-wrap { grid-template-columns: 1fr !important; }
    .msg-wrap { grid-template-columns: 1fr !important; height: auto !important; }
    .msg-list { height: 300px; }
    .msg-body { height: 400px; }
    .txn-charts-row { grid-template-columns: 1fr !important; }
    .pay-mid-row { grid-template-columns: 1fr !important; }
    .set-two-col { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .md-stats { grid-template-columns: 1fr 1fr !important; }
    .md-content { padding: 12px !important; }
    .mds-filter-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mds-filter-row select, .mds-filter-row input { width: 100%; }
}

/* ═══════════════════════════════════════════
   USER SERVICES TAB
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .us-card__body { grid-template-columns: 1fr !important; }
    .us-stat-row { grid-template-columns: 1fr 1fr !important; }
    .us-steps-list { gap: 8px; }
    .us-step { padding: 12px 14px; }
}
@media (max-width: 480px) {
    .us-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .us-tab { white-space: nowrap; flex-shrink: 0; }
    .us-card { padding: 14px; }
    .us-card__head { flex-direction: column; gap: 8px; }
    .us-hist-bottom { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   SIGN IN / SIGN UP
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .auth-split { flex-direction: column !important; }
    .auth-visual { display: none; }
    .auth-form-side { width: 100% !important; max-width: 480px; margin: 0 auto; padding: 32px 24px; }
}
@media (max-width: 480px) {
    .auth-card { padding: 24px 16px; border-radius: 16px; }
    .auth-form-side { padding: 24px 16px; }
    .auth-divider { margin: 16px 0; }
}

/* ═══════════════════════════════════════════
   BOOKING / SESSION
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .booking-layout { flex-direction: column !important; }
    .booking-sidebar { width: 100% !important; position: static !important; }
}
@media (max-width: 600px) {
    .booking-slots-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .booking-card { padding: 18px; }
    .booking-day-nav { gap: 4px; }
    .booking-day-btn { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
    .booking-slots-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════
   CV REVIEW / MOCK INTERVIEW
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .cvr-hero-inner { flex-direction: column; align-items: center; text-align: center; }
    .cvr-hero__img { display: none; }
    .cvr-pricing-grid { grid-template-columns: 1fr !important; }
    .mi-hero-inner { flex-direction: column; text-align: center; align-items: center; }
    .mi-plans-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════
   CAREERS / JOBS
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .jobs-layout { flex-direction: column !important; }
    .jobs-filters { width: 100% !important; position: static !important; }
    .jobs-list { width: 100% !important; }
}
@media (max-width: 640px) {
    .job-card { padding: 16px; }
    .job-card__tags { flex-wrap: wrap; gap: 6px; }
    .jobs-search-row { flex-direction: column; gap: 10px; }
    .jobs-search-row input,
    .jobs-search-row select { width: 100%; }
}

/* ═══════════════════════════════════════════
   BECOME A MENTOR
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .bm-hero-inner { flex-direction: column; text-align: center; align-items: center; }
    .bm-hero__img { max-width: 320px; }
    .bm-steps { grid-template-columns: 1fr !important; }
    .bm-benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .bm-benefits-grid { grid-template-columns: 1fr !important; }
    .bm-signup-form { padding: 24px 16px; }
}

/* ═══════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .checkout-layout { flex-direction: column-reverse !important; }
    .checkout-summary { width: 100% !important; position: static !important; }
    .checkout-form { width: 100% !important; }
}
@media (max-width: 480px) {
    .checkout-form-grid { grid-template-columns: 1fr !important; }
    .checkout-card { padding: 16px; }
}

/* ═══════════════════════════════════════════
   CAREER QUIZ
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .quiz-layout { flex-direction: column; }
    .quiz-card { padding: 24px 16px; }
    .quiz-options { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .quiz-progress-bar { height: 6px; }
    .quiz-nav { flex-direction: column; gap: 8px; }
    .quiz-nav button { width: 100%; }
}

/* ═══════════════════════════════════════════
   ABOUT US
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .about-hero-inner { flex-direction: column; text-align: center; }
    .about-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .about-values-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .about-team-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════
   MODALS (reschedule, feedback etc.)
═══════════════════════════════════════════ */
@media (max-width: 640px) {
    .ud-modal { width: calc(100vw - 32px) !important; max-width: none !important; margin: 16px; padding: 20px 16px; border-radius: 16px; }
    .mds-rs-modal { width: calc(100vw - 32px) !important; max-width: none !important; }
    .ud-modal-overlay { padding: 16px; align-items: flex-end; }
}

/* ═══════════════════════════════════════════
   RESCHEDULE / BOOKING MODALS
═══════════════════════════════════════════ */
@media (max-width: 600px) {
    .rs-slots-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .rs-modal-body { padding: 16px; }
}

/* ═══════════════════════════════════════════
   MOBILE-ONLY UTILITIES
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .hide-mobile { display: none !important; }
    .md-mobile-toggle { display: flex !important; }
}
@media (min-width: 901px) {
    .show-mobile-only { display: none !important; }
    .md-mobile-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════
   SIDEBAR MOBILE OVERLAY TOGGLE (JS companion)
═══════════════════════════════════════════ */
.md-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════
   TOUCH — bigger tap targets on mobile
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .ud-btn, .cp-card__btn, .pb-card__btn,
    .ms-mentor-card__btn, .hero-btn,
    .auth-submit-btn, .sp-btn-checkout { min-height: 44px; }

    /* Slightly larger fonts for readability */
    body { font-size: 15px; }

    /* Better spacing for cards */
    .us-card, .md-card, .cp-card, .pb-card { border-radius: 12px; }
}

/* ═══════════════════════════════════════════
   MISC FIXES
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Tables scroll horizontally */
    .wp-list-table-wrapper, .mds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mds-table { min-width: 600px; }
}
@media (max-width: 640px) {
    /* Full-width containers */
    .cartants-container { padding-left: 16px; padding-right: 16px; }
    section { padding-left: 16px; padding-right: 16px; }
}

/* iPhone SE and very small screens */
@media (max-width: 375px) {
    .cartants-container { padding-left: 12px; padding-right: 12px; }
    .hero-title { font-size: 26px; }
    .cp-level-tab { font-size: 11px; padding: 7px 8px; }
    .cp-level-tab__sub { display: none; }
}