/* ============================================================
   THINK TANK CONSULTANCY
   Responsive CSS — Course Category Page & Course Detail Page
   Breakpoints:
   xs  < 480px
   sm  480–767px
   md  768–1023px
   lg  1024–1239px
   xl  1240px+  (base desktop — already in main CSS)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   SHARED — NAV / BREADCRUMB
════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .bc, .breadcrumb-bar { padding: 8px 0; }
  .bc-in, .breadcrumb-inner {
    padding: 0 18px;
    font-size: 11.5px;
    flex-wrap: wrap;
    gap: 4px;
  }
}


/* ════════════════════════════════════════════════════════════
   A. COURSE CATEGORY PAGE
════════════════════════════════════════════════════════════ */

/* ── A1. Category Banner ── */
@media (max-width: 1239px) {
  .cat-banner { padding: 38px 0; }
  .cat-banner-in { padding: 0 24px; gap: 32px; }
  .cat-banner-in { grid-template-columns: 1fr 280px; }
  .cat-banner-text h1 { font-size: 30px; }
}

@media (max-width: 1023px) {
  .cat-banner { padding: 32px 0; }
  .cat-banner-in {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px;
  }
  .cat-banner-img {
    height: 200px;
    order: -1; /* image above text on tablet */
    border-radius: 12px;
  }
  .cat-banner-text h1 { font-size: 28px; }
  .cat-banner-text p { font-size: 13.5px; }
}

@media (max-width: 767px) {
  .cat-banner { padding: 26px 0; }
  .cat-banner-in { padding: 0 18px; gap: 18px; }
  .cat-banner-text h1 { font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
  .cat-banner-text p { font-size: 13px; line-height: 1.7; margin-bottom: 8px; }
  .cat-banner-tags { gap: 7px; margin-top: 14px; }
  .cat-btag { font-size: 11px; padding: 5px 10px; }
  .cat-banner-img { height: 170px; }
}

@media (max-width: 479px) {
  .cat-banner-text h1 { font-size: 22px; }
  .cat-banner-img { height: 150px; }
  .cat-btag { font-size: 10.5px; padding: 4px 9px; }
}

/* ── A2. Main Two-Column Layout ── */
@media (max-width: 1239px) {
  .main-wrap {
    padding: 28px 24px;
    gap: 24px;
    grid-template-columns: 1fr 300px;
  }
}

@media (max-width: 1023px) {
  .main-wrap {
    grid-template-columns: 1fr; /* sidebar stacks below */
    padding: 24px 24px;
    gap: 28px;
  }
  /* Sidebar becomes 2-col grid on tablet */
  .right-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  /* Features + categories take full width */
  .right-col .sidebar-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .main-wrap { padding: 20px 18px; gap: 24px; }
  .right-col { grid-template-columns: 1fr; }
  .right-col .sidebar-card:last-child { grid-column: auto; }
  .section-h2 { font-size: 18px; margin-bottom: 14px; }
}

/* ── A3. Tabs Bar ── */
@media (max-width: 767px) {
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab-btn {
    font-size: 13px;
    padding: 9px 15px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 479px) {
  .tab-btn { font-size: 12.5px; padding: 8px 13px; }
}

/* ── A4. DataTable (Tab 1 — Courses Titles) ── */
@media (max-width: 1023px) {
  .table-search-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .tbl-search { width: 100%; }
}

@media (max-width: 767px) {
  .dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
  .dt-table { min-width: 480px; }
  .dt-table thead th { font-size: 11.5px; padding: 10px 12px; }
  .dt-table tbody td { font-size: 12.5px; padding: 10px 12px; }
  .td-code { font-size: 11px; }
  .dt-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
  }
  .dt-pages { flex-wrap: wrap; }
}

/* ── A5. Cities Grid (Tab 2) ── */
@media (max-width: 1023px) {
  .cities-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media (max-width: 767px) {
  .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .city-box { padding: 12px 8px; border-radius: 8px; }
  .city-box .city-flag { font-size: 20px; margin-bottom: 4px; }
  .city-box .city-name { font-size: 12.5px; }
  .city-box .city-count { font-size: 10.5px; }
}

@media (max-width: 479px) {
  .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .city-box { padding: 11px 7px; }
}

/* ── A6. Top Courses (Tab 3) ── */
@media (max-width: 1023px) {
  .tc-card { grid-template-columns: auto 1fr; gap: 12px; }
  .tc-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .top-courses-grid { gap: 10px; }
  .tc-card { padding: 14px; gap: 10px; border-radius: 9px; }
  .tc-code { font-size: 10.5px; padding: 3px 7px; }
  .tc-body h4 { font-size: 13.5px; }
  .tc-body p { font-size: 12px; margin-bottom: 6px; }
  .tc-meta { font-size: 11px; gap: 8px; flex-wrap: wrap; }
  .tc-enrol, .tc-view { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 479px) {
  .tc-card { grid-template-columns: 1fr; }
  .tc-code { align-self: auto; }
}

/* ── A7. Sidebar Cards ── */
@media (max-width: 767px) {
  .sidebar-card { padding: 16px; border-radius: 10px; }
  .sidebar-card h4 { font-size: 12px; margin-bottom: 12px; padding-bottom: 8px; }
  .search-form { gap: 8px; }
  .sf-input, .sf-select { font-size: 13px; padding: 9px 12px; }
  .sf-btn { font-size: 13px; padding: 10px; }
  .feat-row { font-size: 12.5px; padding: 8px 0; }
  .feat-label span { font-size: 13px; }
  .cat-item { font-size: 12.5px; padding: 8px 0; }
  .cat-item::before { font-size: 11px; }
}


/* ════════════════════════════════════════════════════════════
   B. COURSE DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* ── B1. Course Banner ── */
@media (max-width: 1239px) {
  .course-banner { padding: 44px 0 40px; }
  .course-banner-inner { padding: 0 24px; gap: 36px; }
  .course-banner h1 { font-size: 36px; }
}

@media (max-width: 1023px) {
  .course-banner { padding: 36px 0 32px; }
  .course-banner-inner {
    grid-template-columns: 1fr; /* stack image below on tablet */
    gap: 28px;
    padding: 0 24px;
  }
  .course-image-card {
    order: -1; /* image above text */
    aspect-ratio: 16/8;
    max-height: 280px;
  }
  .course-banner h1 { font-size: 32px; }
  .course-banner .course-excerpt { font-size: 14.5px; }
}

@media (max-width: 767px) {
  .course-banner { padding: 28px 0 26px; }
  .course-banner-inner { padding: 0 18px; gap: 20px; }
  .course-banner h1 { font-size: 26px; line-height: 1.25; margin-bottom: 12px; }
  .course-banner .course-excerpt { font-size: 13.5px; margin-bottom: 18px; }
  .course-category-badge { font-size: 10.5px; padding: 4px 12px; margin-bottom: 12px; }
  .course-meta-tags { gap: 7px; margin-bottom: 20px; }
  .meta-tag { font-size: 12px; padding: 6px 11px; }
  .course-banner-actions { gap: 9px; }
  .btn-gold, .btn-outline-white { font-size: 13.5px; padding: 11px 20px; }
  .course-image-card { max-height: 220px; border-radius: 12px; }
}

@media (max-width: 479px) {
  .course-banner-inner { padding: 0 15px; }
  .course-banner h1 { font-size: 22px; }
  .course-banner-actions { flex-direction: column; }
  .btn-gold, .btn-outline-white {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .course-image-card { max-height: 190px; }
  .meta-tag { font-size: 11.5px; padding: 5px 10px; }
}

/* ── B2. Sticky Tabs Bar ── */
@media (max-width: 1023px) {
  .tabs-wrapper { top: 64px; }
  .tabs-inner { padding: 0 24px; }
}

@media (max-width: 767px) {
  .tabs-wrapper {
    top: 60px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-inner {
    padding: 0 18px;
    flex-wrap: nowrap;
    min-width: max-content;
    gap: 0;
  }
  .tab-btn {
    font-size: 13px;
    padding: 14px 16px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 479px) {
  .tab-btn { font-size: 12.5px; padding: 13px 14px; }
}

/* ── B3. Tab Content Wrapper ── */
@media (max-width: 1239px) {
  .tab-content-wrapper { padding: 32px 24px 52px; }
}

@media (max-width: 767px) {
  .tab-content-wrapper { padding: 22px 18px 44px; }
}

/* ── B4. Tab 1: Schedule — City Filter Buttons ── */
@media (max-width: 1023px) {
  .city-filter-label { font-size: 11.5px; }
  .city-buttons { gap: 7px; }
  .city-btn { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 767px) {
  .schedule-filters { margin-bottom: 16px; }
  .city-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    scrollbar-width: none;
    gap: 6px;
  }
  .city-buttons::-webkit-scrollbar { display: none; }
  .city-btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 5px;
  }
  .search-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .search-filter-input,
  .search-icon-wrap { max-width: 100%; width: 100%; }
  .results-count { font-size: 12px; }
}

/* ── B5. Tab 1: Schedule DataTable ── */
@media (max-width: 1023px) {
  .schedule-table-wrap { border-radius: 10px; }
  table.schedule-dt thead th { font-size: 11.5px; padding: 12px 14px; }
  table.schedule-dt tbody td { font-size: 13px; padding: 12px 14px; }
}

@media (max-width: 767px) {
  .schedule-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 9px;
  }
  table.schedule-dt { min-width: 640px; }
  table.schedule-dt thead th { font-size: 11px; padding: 11px 12px; }
  table.schedule-dt tbody td { font-size: 12.5px; padding: 11px 12px; }
  .dt-btn-pdf, .dt-btn-register { font-size: 11px; padding: 4px 9px; }
  .dt-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  /* DataTables pagination */
  .dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 12px; padding: 4px 9px; }
  .dataTables_wrapper .dataTables_info { font-size: 12px; }
}

@media (max-width: 479px) {
  table.schedule-dt { min-width: 580px; }
  .dt-btn-pdf, .dt-btn-register { font-size: 10.5px; padding: 4px 8px; margin-right: 3px; }
}

/* ── B6. Tab 2: Syllabus ── */
@media (max-width: 1023px) {
  .syllabus-header h2 { font-size: 24px; }
  .syllabus-days { gap: 14px; }
}

@media (max-width: 767px) {
  .syllabus-header { margin-bottom: 22px; }
  .syllabus-header h2 { font-size: 22px; }
  .syllabus-header p { font-size: 13.5px; }
  .syllabus-days { gap: 10px; }
  .syllabus-day { border-radius: 10px; }
  .syllabus-day-header { padding: 14px 16px; gap: 12px; }
  .day-number { width: 32px; height: 32px; font-size: 14px; border-radius: 7px; }
  .day-info h4 { font-size: 13.5px; }
  .day-info span { font-size: 11px; }
  .day-toggle { font-size: 16px; }
  .syllabus-day.open .syllabus-day-body { padding: 18px 16px; }
  .syllabus-topics li,
  .syllabus-day-body li { font-size: 13.5px; gap: 10px; }
  .syllabus-note { font-size: 12.5px; padding: 10px 14px; margin-top: 12px; }
}

@media (max-width: 479px) {
  .syllabus-day-header { padding: 12px 14px; }
  .day-number { width: 30px; height: 30px; font-size: 13px; }
  .day-info h4 { font-size: 13px; }
  .syllabus-day.open .syllabus-day-body { padding: 16px 14px; }
  .syllabus-topics li,
  .syllabus-day-body li { font-size: 13px; }
}

/* ── B7. Tab 3: Related Courses ── */
@media (max-width: 1023px) {
  .related-courses-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 767px) {
  .related-courses-grid { grid-template-columns: 1fr; gap: 12px; }
  .rcc-thumb { height: 140px; }
  .rcc-thumb-icon { font-size: 32px; }
  .rcc-body { padding: 14px; }
  .rcc-body h4 { font-size: 13.5px; }
  .rcc-body p { font-size: 12.5px; }
  .rcc-footer { padding: 11px 14px; }
  .rcc-link { font-size: 12.5px; }
  .rcc-enroll { font-size: 11.5px; padding: 5px 12px; }
}

/* ── B8. Tab 4: Available Cities Grid ── */
@media (max-width: 1023px) {
  .cities-section-header h2 { font-size: 24px; }
  .cities-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 767px) {
  .cities-section-header { margin-bottom: 20px; }
  .cities-section-header h2 { font-size: 22px; }
  .cities-section-header p { font-size: 13.5px; }
  .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .city-card { padding: 16px 14px; border-radius: 10px; }
  .city-flag { font-size: 20px; }
  .city-name { font-size: 14px; }
  .city-country { font-size: 11.5px; }
  .city-sessions { font-size: 11.5px; }
  .city-next { font-size: 10.5px; }
}

@media (max-width: 479px) {
  .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .city-card { padding: 13px 11px; }
  .city-name { font-size: 13px; }
}

/* ── B9. Course Detail Layout (main + sidebar) ── */
@media (max-width: 1239px) {
  .course-detail-layout { gap: 24px; }
}

@media (max-width: 1023px) {
  .course-detail-layout {
    grid-template-columns: 1fr; /* sidebar stacks below content */
    gap: 28px;
  }
  .course-sidebar {
    position: static; /* unstick sidebar on tablet/mobile */
    top: auto;
  }
  /* Sidebar switches to horizontal info strip on tablet */
  .sidebar-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .sidebar-card-header { grid-column: 1 / -1; }
  .sidebar-card-body { border-right: 1px solid #f0ede6; }
  .sidebar-cta-block { border-top: none; justify-content: center; }
}

@media (max-width: 767px) {
  .course-detail-layout { gap: 24px; }
  /* On mobile, sidebar fully reverts to single column */
  .sidebar-card { display: block; border-radius: 12px; }
  .sidebar-card-header { padding: 16px 18px; }
  .sidebar-card-header h3 { font-size: 16px; }
  .sidebar-card-body { padding: 16px 18px; }
  .sidebar-item { padding: 9px 0; }
  .sidebar-item-label { font-size: 11.5px; }
  .sidebar-item-value { font-size: 12.5px; }
  .sidebar-cta-block { padding: 14px 18px 18px; gap: 8px; }
  .btn-navy-full, .btn-gold-full { font-size: 13.5px; padding: 12px; }
  .sidebar-help { font-size: 11.5px; padding: 10px 18px; }
}

/* ── B10. CTA Section ── */
@media (max-width: 1023px) {
  .cta-section { padding: 52px 0; }
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 22px; padding: 0 24px; }
  .cta-actions { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .cta-section { padding: 40px 0; }
  .cta-inner { padding: 0 18px; gap: 18px; }
  .cta-text h2 { font-size: 24px; }
  .cta-text p { font-size: 14px; }
  .cta-actions { width: 100%; flex-direction: column; }
  .btn-white, .btn-outline-wh { width: 100%; text-align: center; }
}

/* ── B11. Footer ── */
@media (max-width: 1023px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; padding: 44px 24px 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 18px 24px; }
  .footer-brand p { font-size: 12.5px; margin-top: 12px; }
  .footer-col h5 { font-size: 11px; margin-bottom: 10px; }
  .footer-col a { font-size: 12.5px; margin-bottom: 8px; }
  .footer-bottom-inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    padding: 14px 18px;
  }
}

@media (max-width: 479px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-col { border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
}

/* ── B12. WhatsApp FAB ── */
@media (max-width: 479px) {
  .whatsapp-fab, .wa {
    width: 50px; height: 50px;
    bottom: 18px; right: 18px;
    font-size: 22px;
  }
}

/* ════════════════════════════════════════════════════════════
   PRINT STYLES
════════════════════════════════════════════════════════════ */
@media print {
  nav, .tabs-wrapper, .whatsapp-fab, .wa,
  .mwl, .course-sidebar, .sidebar-card,
  .city-buttons, .search-filter-row,
  .cta-section, footer { display: none !important; }

  .course-banner,
  .cat-banner { background: #f5f5f5 !important; color: #000 !important; }

  .course-banner h1,
  .cat-banner-text h1 { color: #000 !important; }

  .course-banner .course-excerpt,
  .cat-banner-text p { color: #333 !important; }

  .tab-content-wrapper { padding: 20px 0; }
  .tab-panel { display: block !important; } /* Show all tabs when printing */
  .tabs-wrapper { display: none !important; }

  .related-courses-grid { grid-template-columns: repeat(3, 1fr); }
  .cities-grid { grid-template-columns: repeat(4, 1fr); }
  table.schedule-dt { font-size: 11pt; }
  .dt-btn-pdf, .dt-btn-register { display: none; }
}