/*
 * RTPS Bihar 2026 – Service Directory + Mobile Responsive Fixes
 * Amu Digital World | amudigitalworld.com
 * File: assets/css/rtps-directory.css  (v2.0 – Mobile Fixed)
 */

/* ============================================================
   GOOGLE FONT FOR HINDI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600;700&display=swap');

/* ============================================================
   DIRECTORY WRAPPER
   ============================================================ */
.rtps-dir-section {
  padding: 44px 0 52px;
  background: #eef2f7;
}

/* ============================================================
   SECTION HEADING
   ============================================================ */
.rtps-dir-heading {
  text-align: center;
  margin-bottom: 22px;
}
.rtps-dir-heading h2 {
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  font-family: 'Poppins', 'Inter', sans-serif;
  line-height: 1.3;
}
.rtps-dir-heading p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
}

/* ============================================================
   3 ACTION BUTTONS
   ============================================================ */
.rtps-dir-action-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  justify-content: center !important;
  align-items: center !important;
}

.rtps-dir-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.855rem !important;
  font-weight: 700 !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif !important;
  line-height: 1.35 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
  letter-spacing: 0.1px !important;
}

/* Button 1 – Blue (Apply) */
.rtps-dir-action-btn.btn-apply {
  background: #1a56db !important;
  color: #ffffff !important;
}
.rtps-dir-action-btn.btn-apply:hover,
.rtps-dir-action-btn.btn-apply:focus {
  background: #1240b0 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(26,86,219,0.38) !important;
  text-decoration: none !important;
}

/* Button 2 – Dark (Status) */
.rtps-dir-action-btn.btn-status {
  background: #0f172a !important;
  color: #ffffff !important;
}
.rtps-dir-action-btn.btn-status:hover,
.rtps-dir-action-btn.btn-status:focus {
  background: #1e3a5f !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* Button 3 – Green (Download) */
.rtps-dir-action-btn.btn-download {
  background: #059669 !important;
  color: #ffffff !important;
}
.rtps-dir-action-btn.btn-download:hover,
.rtps-dir-action-btn.btn-download:focus {
  background: #047857 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(5,150,105,0.38) !important;
  text-decoration: none !important;
}

/* ============================================================
   DIRECTORY GRID – 3 COLUMN DESKTOP
   ============================================================ */
.rtps-dir-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

/* ============================================================
   CATEGORY BLOCK (WHITE BOX)
   ============================================================ */
.rtps-dir-block {
  background: #ffffff !important;
  border: 1px solid #cdd5e0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.rtps-dir-block:hover {
  box-shadow: 0 6px 22px rgba(13, 36, 97, 0.14) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   DARK NAVY HEADER
   ============================================================ */
.rtps-dir-cat-header {
  background: #0d2461 !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1px !important;
  border-bottom: 2px solid #1a3a8f !important;
}
.rtps-dir-cat-header span {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  opacity: 0.82 !important;
  margin-top: 2px !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

/* ============================================================
   LINKS LIST
   ============================================================ */
.rtps-dir-link-list {
  padding: 10px 14px 14px !important;
  margin: 0 !important;
  list-style: none !important;
}
.rtps-dir-link-list li {
  padding: 2px 0 !important;
  border-bottom: 1px dashed #e2e8f4 !important;
  margin: 0 !important;
  list-style: none !important;
}
.rtps-dir-link-list li:last-child {
  border-bottom: none !important;
}
.rtps-dir-link-list a {
  font-size: 0.845rem !important;
  color: #1a4fcc !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  line-height: 1.55 !important;
  padding: 5px 4px !important;
  font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  border-radius: 4px !important;
}
.rtps-dir-link-list a::before {
  content: '▶' !important;
  color: #1a56db !important;
  font-size: 0.52rem !important;
  flex-shrink: 0 !important;
  margin-top: 5px !important;
}
.rtps-dir-link-list a:hover {
  color: #0a2f99 !important;
  background: #f0f4ff !important;
  text-decoration: none !important;
}
.rtps-dir-link-list a:hover::before {
  color: #0a2f99 !important;
}

/* ============================================================
   FOOTER NOTE
   ============================================================ */
.rtps-dir-note {
  text-align: center;
  margin-top: 22px;
  font-size: 0.8rem;
  color: #64748b;
}

/* ============================================================
   CERTIFICATE GUIDE CARDS – 5 per row on desktop
   ============================================================ */
/* Custom Bootstrap-like col for exactly 5 columns on desktop */
@media (min-width: 992px) {
  .col-lg-rtps5 {
    flex: 0 0 auto !important;
    width: 20% !important;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .rtps-dir-section { background: #0c1320; }
[data-theme="dark"] .rtps-dir-block { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .rtps-dir-cat-header { background: #0c1f5e !important; border-bottom-color: #1e3a8a !important; }
[data-theme="dark"] .rtps-dir-link-list a { color: #93c5fd !important; }
[data-theme="dark"] .rtps-dir-link-list a:hover { color: #bfdbfe !important; background: #1e3a5f !important; }
[data-theme="dark"] .rtps-dir-link-list li { border-color: #334155 !important; }
[data-theme="dark"] .rtps-dir-heading h2 { color: #f1f5f9; }
[data-theme="dark"] .rtps-dir-heading p { color: #94a3b8; }
[data-theme="dark"] #rtps-cert-guides-row .rtps-related-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] #rtps-cert-guides-row .rtps-related-title { color: #f1f5f9 !important; }

/* ============================================================
   ★ RESPONSIVE – TABLET (768px – 991px)
   ============================================================ */
@media (max-width: 991px) {
  /* Directory: 2 columns */
  .rtps-dir-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .rtps-dir-section {
    padding: 36px 0 40px;
  }
  /* Certificate guides: 3 per row on tablet */
  .col-6.col-sm-6.col-md-4.col-lg-rtps5 {
    flex: 0 0 auto;
    width: 33.3333% !important;
  }
}

/* ============================================================
   ★ RESPONSIVE – MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  /* Directory: 1 column */
  .rtps-dir-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .rtps-dir-section {
    padding: 28px 0 32px;
  }
  /* Action buttons: stack and full width */
  .rtps-dir-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .rtps-dir-action-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 0.84rem !important;
  }
  /* Category header font size */
  .rtps-dir-cat-header {
    font-size: 0.87rem !important;
    padding: 11px 14px !important;
  }
  .rtps-dir-link-list a {
    font-size: 0.84rem !important;
  }
  /* Certificate guide cards: 2 per row on mobile */
  .col-6.col-sm-6.col-md-4.col-lg-rtps5 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  /* Hero stats: 3 per row (clamp handles font) */
  .rtps-hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
  .rtps-stat-pill {
    padding: 8px 6px !important;
    min-width: 0 !important;
    border-radius: 10px !important;
  }
}

/* ============================================================
   ★ RESPONSIVE – SMALL MOBILE (< 400px)
   ============================================================ */
@media (max-width: 400px) {
  .rtps-dir-action-btn {
    font-size: 0.8rem !important;
    padding: 11px 12px !important;
  }
  .rtps-dir-cat-header {
    font-size: 0.83rem !important;
  }
  .rtps-dir-link-list a {
    font-size: 0.8rem !important;
  }
  .rtps-hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .rtps-dir-action-bar { display: none !important; }
  .rtps-dir-cat-header {
    background: #0d2461 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}