/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   CBA Nepal — Comprehensive Responsive / UI-UX Stylesheet   ║
 * ║   Mobile-first overrides & enhancements for all devices     ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ────────────────────────────────────────────────────────────────
   GLOBAL TOUCH / ACCESSIBILITY IMPROVEMENTS
──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Minimum tap target size on mobile */
@media (max-width: 767px) {
  .btn, .nav-link, .dropdown-item,
  .filter-btn, .pagination-custom a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Don't break inline text links or flex links */
  p a, .breadcrumb-custom a, .card-link,
  .footer-desc a, .related-news-card,
  .news-list-item, .event-card a {
    min-height: unset;
    display: revert;
  }
  /* Keep footer links as flex so icon gap works */
  .site-footer ul li a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
}

/* ── Navbar toggler: compact square, no oversized bubble ── */
@media (max-width: 991px) {
  .main-navbar .navbar-toggler {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
    box-shadow: none;
  }
  .main-navbar .navbar-toggler:focus {
    box-shadow: none;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .main-navbar .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    background-size: 20px;
    filter: invert(1);
  }
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Better text rendering */
body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Prevent horizontal overflow */
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }


/* ────────────────────────────────────────────────────────────────
   TOP BAR
──────────────────────────────────────────────────────────────── */

/* xs: show only social icons, center them */
@media (max-width: 575px) {
  .topbar { padding: 5px 0; }
  .topbar .topbar-right {
    width: 100%;
    justify-content: center !important;
  }
  .topbar .topbar-right .d-none { display: none !important; }
  .topbar .topbar-right a {
    width: 30px; height: 30px; font-size: 13px;
    margin-left: 4px !important;
  }
}

/* sm: hide "Follow Us:" label to save space */
@media (max-width: 767px) {
  .topbar .topbar-right span.d-none { display: none !important; }
}


/* ────────────────────────────────────────────────────────────────
   SITE HEADER (Logo Row)
──────────────────────────────────────────────────────────────── */
/* lg-md tablets: 992px–768px */
@media (max-width: 991px) {
  .header-logo img { height: 82px; }
  .header-logo .logo-text .org-name-np { font-size: 26px; }
  .header-logo .logo-text .org-name    { font-size: 16px; }
}

/* sm: 767px and below */
@media (max-width: 767px) {
  .site-header { padding: 10px 0; }
  .header-logo img { height: 74px; }
  .header-logo .logo-text .org-name-np { font-size: 27px; }
  .header-logo .logo-text .org-name    { font-size: 16px; }

  /* Move "Join CBA" button to be icon-only on mobile */
  .header-actions .btn-member {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Hide the search icon text if it has any */
  .header-actions .search-toggle span { display: none; }
}

/* xs: 575px and below */
@media (max-width: 575px) {
  .site-header { padding: 8px 0; }
  .header-logo img { height: 66px; }
  .header-logo .logo-text .org-name-np { font-size: 25px; }
  .header-logo .logo-text .org-name    { font-size: 15px; letter-spacing: 0.2px; }
  .header-logo .logo-text              { margin-left: 8px !important; }
}

/* xxs: 399px and below */
@media (max-width: 399px) {
  .header-logo img { height: 58px; }
  .header-logo .logo-text .org-name-np { font-size: 22px; }
  .header-logo .logo-text .org-name    { font-size: 13px; letter-spacing: 0; }
  .header-logo .logo-text .org-est,
  [style*="Est."]                       { display: none; }
}


/* ────────────────────────────────────────────────────────────────
   NAVBAR — Mobile Improvements
──────────────────────────────────────────────────────────────── */

/* Bigger, easier-to-tap toggler handled in global rule above */

/* Mobile quick action buttons next to hamburger */
.navbar-mobile-actions .nav-search-btn {
  width: 38px; height: 38px; font-size: 15px;
}
.navbar-mobile-actions .nav-join-btn {
  font-size: 13px; padding: 7px 14px;
}

/* Full-width mobile menu with better spacing */
@media (max-width: 991px) {
  .main-navbar { position: sticky; top: 0; z-index: 1030; }

  #mainNav {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-navbar .navbar-nav { padding: 8px 0 12px; }

  .main-navbar .navbar-nav .nav-item .nav-link {
    padding: 11px 16px !important;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .main-navbar .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }

  /* Remove underline effect on mobile — full-width item is enough */
  .main-navbar .navbar-nav .nav-item .nav-link::after { display: none; }

  /* Dropdown on mobile: always full-width */
  .main-navbar .dropdown-menu {
    border-top: none;
    border-left: 3px solid var(--accent);
    border-radius: 0;
    background: rgba(255,255,255,.06);
    box-shadow: none;
    padding: 0;
    width: 100%;
    position: static !important;
    float: none;
    transform: none !important;
  }

  .main-navbar .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,.78);
    font-size: 13.5px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-left: none;
    min-height: 42px;
    display: flex; align-items: center;
  }
  .main-navbar .dropdown-menu .dropdown-item:last-child { border-bottom: none; }

  .main-navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(196,154,40,.15);
    color: var(--accent-light);
    padding-left: 30px;
  }

  .main-navbar .dropdown-menu .dropdown-item i { color: var(--accent); }

  /* Right-side items (search, join, nepali) stack properly */
  .main-navbar .ms-auto,
  .main-navbar .d-flex.align-items-center {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 12px;
  }

  /* Search & Join button in mobile nav */
  .main-navbar .btn-nav-join {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* Collapse overlay: push content down, don't overlap */
@media (max-width: 991px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background: var(--primary);
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 1029;
    border-top: 2px solid var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
}


/* ────────────────────────────────────────────────────────────────
   HERO SLIDER
──────────────────────────────────────────────────────────────── */
/* Tablet */
@media (max-width: 991px) {
  .hero-slider .carousel-item,
  .hero-slider .carousel-item > div[style*="background"],
  .hero-fallback,
  .hero-fallback-gradient { height: 440px; }
  .hero-slider .carousel-caption h2 { font-size: 36px; }
  .hero-slider .carousel-caption p  { font-size: 15px; }
}

@media (max-width: 767px) {
  .hero-slider .carousel-item,
  .hero-slider .carousel-item > div[style*="background"],
  .hero-fallback,
  .hero-fallback-gradient { height: 360px; }
  .hero-slider .carousel-caption {
    width: 95%;
    text-align: center;
  }
  .hero-slider .carousel-caption h2 { font-size: 28px; }
  .hero-slider .carousel-caption p  { font-size: 14px; margin-bottom: 18px; }
  .hero-slider .carousel-caption .slide-subtitle {
    font-size: 10px; letter-spacing: 3px; margin-bottom: 10px;
  }
  .hero-slider .carousel-caption .btn-hero {
    padding: 10px 24px; font-size: 13px;
  }
  /* Prev/Next controls — larger tap targets */
  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next {
    width: 42px;
  }
}

@media (max-width: 575px) {
  .hero-slider .carousel-item,
  .hero-slider .carousel-item > div[style*="background"],
  .hero-fallback,
  .hero-fallback-gradient { height: 300px; }
  .hero-slider .carousel-indicators { bottom: 42px; }
  .hero-slider .carousel-caption h2 { font-size: 22px; }
  .hero-slider .carousel-caption p  { font-size: 13px; margin-bottom: 14px; }
  .hero-slider .carousel-caption .btn-hero {
    padding: 9px 20px; font-size: 12.5px; display: inline-flex;
  }
}

@media (max-width: 399px) {
  .hero-slider .carousel-item,
  .hero-slider .carousel-item > div[style*="background"],
  .hero-fallback,
  .hero-fallback-gradient { height: 260px; }
  .hero-slider .carousel-caption h2 { font-size: 19px; }
  .hero-slider .carousel-caption p  { font-size: 12px; display: none; }
  .hero-slider .carousel-caption .slide-subtitle { font-size: 9px; }
}


/* ────────────────────────────────────────────────────────────────
   STATS COUNTER
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .stats-section { padding: 40px 0; }
  /* Force 2-column grid using Bootstrap col-6 is already handled in PHP,
     but in case the page uses col-md-3 col-sm-6, this is a fallback: */
  .stats-section .stat-item {
    padding: 14px 6px;
  }
  .stat-item .stat-number { font-size: 32px; }
  .stat-item .stat-icon   { width: 52px; height: 52px; font-size: 20px; }
  .stat-item .stat-label  { font-size: 12px; }
}


/* ────────────────────────────────────────────────────────────────
   SECTION GENERAL
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  section { padding: 40px 0; }
  .section-header { margin-bottom: 28px; }
  .section-header h2 { font-size: 21px; }
  .section-header p  { font-size: 14px; }
}


/* ────────────────────────────────────────────────────────────────
   PAGE BANNER
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-banner { padding: 36px 0; }
  .page-banner h1 { font-size: 24px; }
}

@media (max-width: 575px) {
  .page-banner { padding: 26px 0; }
  .page-banner h1 { font-size: 20px; }
  .page-banner .breadcrumb-custom { font-size: 12px; }
}


/* ────────────────────────────────────────────────────────────────
   CARDS (General)
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .card-custom .card-img-wrap  { height: 180px; }
  .card-custom .card-body-custom { padding: 16px; }
  .card-custom .card-title-custom { font-size: 15px; }
}

/* Row gap adjustment on very small screens */
@media (max-width: 399px) {
  .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
}


/* ────────────────────────────────────────────────────────────────
   NEWS LIST ITEMS
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .news-list-item { padding: 10px 6px; gap: 10px; }
  .news-list-item .news-thumb { width: 72px; height: 54px; }
  .news-list-item .news-title { font-size: 13px; }
}


/* ────────────────────────────────────────────────────────────────
   NEWS HERO CARD & INLINE LIST (Homepage)
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .news-hero-card .news-hero-img { min-height: 180px; }
  .news-hero-card .news-hero-body { padding: 18px 16px; }
  .news-hero-card .card-title-custom { font-size: 16px; }
  .news-hero-card .card-excerpt { font-size: 13px; -webkit-line-clamp: 2; }
}

@media (max-width: 575px) {
  .news-hero-card .news-hero-img { min-height: 160px; }
  .news-hero-card .news-hero-body { padding: 14px 12px; }
  .news-hero-card .card-title-custom { font-size: 15px; }
  .news-hero-card .news-hero-meta { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .news-hero-card .card-excerpt { display: none; }

  .news-inline-item { padding: 10px 12px; gap: 10px; }
  .news-inline-item .news-inline-thumb { width: 70px; height: 52px; }
  .news-inline-item .news-inline-title { font-size: 12.5px; }
  .news-inline-item .news-inline-meta  { font-size: 10.5px; }
}


/* ────────────────────────────────────────────────────────────────
   EVENT CARDS
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .event-card .event-date-box {
    flex-direction: row !important;
    gap: 10px; padding: 10px 14px;
    justify-content: flex-start;
    align-items: center;
  }
  .event-card .event-date-box .ev-day   { font-size: 24px; }
  .event-card .event-date-box .ev-month { font-size: 11px; }
  .event-card .event-date-box .ev-year  { display: none; }
  .event-card .event-info { padding: 10px 14px; }
  .event-card .event-info .ev-title { font-size: 13.5px; }
}


/* ────────────────────────────────────────────────────────────────
   GALLERY GRID
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .gallery-item { height: 170px; }
}


/* ────────────────────────────────────────────────────────────────
   FILTER TABS
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .filter-tabs { gap: 6px; margin-bottom: 20px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-tabs .filter-btn { padding: 6px 14px; font-size: 12px; white-space: nowrap; }
}


/* ────────────────────────────────────────────────────────────────
   MEMBER & LEADER CARDS
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .member-card { padding: 18px 14px; }
  .member-card img { width: 72px; height: 72px; }
  .member-card .member-name { font-size: 14px; }

  .leader-card { padding: 22px 14px; }
  .leader-card img,
  .leader-card .leader-avatar { width: 84px; height: 84px; }
  .leader-card .leader-name { font-size: 15px; }
}


/* ────────────────────────────────────────────────────────────────
   PRESIDENT SECTION
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .president-section .row  { flex-direction: column; align-items: center; }
  .president-img-wrap      { text-align: center; }
  .president-content       { padding-left: 0; margin-top: 40px; }
  .president-content .pres-message { font-size: 14px; }
  .president-content .pres-name    { font-size: 17px; }
}

@media (max-width: 575px) {
  .president-img-wrap img {
    width: 160px !important; height: 196px !important;
  }
  .president-content .quote-icon { font-size: 52px; }
}


/* ────────────────────────────────────────────────────────────────
   PUBLICATION ITEMS
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .publication-item { padding: 12px; gap: 12px; flex-wrap: wrap; }
  .publication-item .pub-download {
    width: 100%; justify-content: center; padding: 8px;
    margin-left: 0;
  }
}


/* ────────────────────────────────────────────────────────────────
   CONTACT FORM
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .contact-form-wrap { padding: 16px !important; }
}


/* ────────────────────────────────────────────────────────────────
   PAGINATION
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .pagination-custom a { width: 34px; height: 34px; font-size: 13px; }
  .pagination-custom { gap: 4px; margin-top: 24px; }
}


/* ────────────────────────────────────────────────────────────────
   NOTICE TICKER BAR
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .notice-section .notice-label { font-size: 11px; padding: 10px 12px; }
  .notice-section .notice-scroller { padding: 10px 12px; font-size: 13px; }
}

/* ────────────────────────────────────────────────────────────────
   MEDIA COVERAGE responsive
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .mc-card-img { height: 180px; }
  .mc-card-body { padding: 14px; }
  .mc-card-title { font-size: 14px; -webkit-line-clamp: 2; }
  .mc-card-desc { font-size: 12.5px; -webkit-line-clamp: 2; }
  .mc-source-badge { font-size: 10px; padding: 3px 8px; }
}

/* ────────────────────────────────────────────────────────────────
   RELATED NEWS + PUBLICATIONS SIDEBAR (news-detail) mobile
──────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .related-news-card { padding: 8px 14px; }
}
@media (max-width: 575px) {
  /* Related News */
  .related-news-title { font-size: 12.5px; margin-bottom: 2px; }
  .related-news-date { font-size: 10px; }
  .related-news-header { padding: 10px 14px; }
  .related-news-header h5 { font-size: 14px; }
  .related-news-badge-inline { font-size: 8px; padding: 1px 5px; }

  /* Publications sidebar */
  .nd-pub-header { padding: 10px 14px; }
  .nd-pub-header h5 { font-size: 14px; }
  .nd-pub-link { padding: 6px 14px; }
  .nd-pub-name { font-size: 12px; }
  .nd-pub-yr { font-size: 10px; }
  .nd-pub-all { padding: 6px 14px; font-size: 11px; }

  /* News detail article */
  .nd-title { font-size: 20px; }
  .nd-meta { font-size: 12px; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; }
  .nd-content { font-size: 14px; line-height: 1.8; }
  .nd-share { gap: 6px; margin-top: 20px; padding-top: 14px; }
  .nd-share-btn { font-size: 11px; padding: 5px 10px; }
  .nd-share-label { font-size: 13px; }
}


/* ────────────────────────────────────────────────────────────────
   BACK TO TOP BUTTON
──────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  #backToTop { bottom: 18px; right: 16px; width: 38px; height: 38px; font-size: 13px; }
}


/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */

/* md: 2 cols already provided by col-md-6 in PHP */
@media (max-width: 767px) {
  .site-footer { padding: 36px 0 0; }
  .site-footer h5 { font-size: 14px; margin-bottom: 14px; }
  .site-footer ul li { margin-bottom: 6px; }
  .site-footer ul li a { font-size: 13px; }
  .site-footer .footer-desc { font-size: 13px; }
  .site-footer .social-links a { width: 34px; height: 34px; font-size: 13px; }
  .footer-bottom { padding: 12px 0; font-size: 12px; text-align: center; }
  .footer-bottom .d-flex { flex-direction: column; gap: 4px; align-items: center !important; }
}

/* xs: single column */
@media (max-width: 575px) {
  .site-footer { padding: 28px 0 0; }
  /* Collapse space between footer columns */
  .site-footer .row.g-4 > [class*="col-"] { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .site-footer .row.g-4 > [class*="col-"]:last-child { border-bottom: none; }
  .site-footer h5 { margin-bottom: 12px; }
  .footer-bottom { margin-top: 24px; }
}

/* ── Footer mobile column layout ──────────────────────────────
   xs (<576): About = full, Quick Links + Related Orgs = 50/50,
              Contact = full
   sm-md (576-991): 2-up via col-md-6
   lg+: 4-up as designed
──────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  /* About column — full width */
  .site-footer .footer-col-about {
    flex: 0 0 100%; max-width: 100%;
  }
  /* Quick Links + Related Orgs — side by side */
  .site-footer .footer-col-links,
  .site-footer .footer-col-orgs {
    flex: 0 0 50%; max-width: 50%;
  }
  /* Contact — full width */
  .site-footer .footer-col-contact {
    flex: 0 0 100%; max-width: 100%;
  }

  /* Tighter link list spacing */
  .site-footer ul { padding-left: 0; }
  .site-footer ul li { margin-bottom: 2px; }
  .site-footer ul li a {
    font-size: 12.5px;
    padding: 5px 4px;
    gap: 6px;
    min-height: 34px;
  }
  .site-footer ul li a i { font-size: 10px; flex-shrink: 0; }

  /* Icon circle in contact items */
  .site-footer .ci-icon { width: 32px; height: 32px; font-size: 12px; }
  .site-footer .ci-text { font-size: 13px; }
  .site-footer .contact-item { gap: 10px; margin-bottom: 12px; }

  /* Social link row */
  .site-footer .social-links { gap: 7px; }

  /* Column dividers */
  .site-footer .row.g-4 > [class*="col-"] {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .site-footer .row.g-4 > [class*="col-"]:last-child { border-bottom: none; }
}


/* ════════════════════════════════════════════════════════════════
   SEARCH OVERLAY
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  #searchOverlay .search-box { width: 90%; }
  #searchOverlay input { font-size: 16px; padding: 12px 18px; }
  #searchOverlay button[type="submit"] { padding: 12px 18px; }
}


/* ════════════════════════════════════════════════════════════════
   JOIN PAGE / CONTACT FORM LAYOUT
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Stack form and map/info columns on mobile */
  .join-form-col, .contact-info-col { margin-bottom: 24px; }
}


/* ════════════════════════════════════════════════════════════════
   TABLE RESPONSIVENESS
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .table-responsive-fix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
}


/* ════════════════════════════════════════════════════════════════
   PROVINCE CARDS
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  a.province-card, .province-card {
    padding: 14px 10px;
  }
  .province-card .province-icon { font-size: 22px; margin-bottom: 6px; }
  .province-card .province-img  { width: 32px; height: 32px; margin-bottom: 6px; }
  .province-card .province-name { font-size: 12px; }
  .province-card .province-name-np { font-size: 10.5px; }
}


/* ════════════════════════════════════════════════════════════════
   MISC  — Button visual improvements for all devices
════════════════════════════════════════════════════════════════ */

/* Consistent rounded buttons */
.btn-primary-custom,
.btn-accent-custom,
.btn-outline-custom,
.view-all-link {
  border-radius: 6px;
}

/* Better focus outlines for accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Make "View All" links full-width & centered on mobile */
@media (max-width: 575px) {
  .section-header .view-all-link {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }
  .section-header .d-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ════════════════════════════════════════════════════════════════
   HERO TICKER — better mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  /* Ticker is hidden via existing CSS on xs — keep that, just reinforce: */
  .ticker-wrap { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .hero-slider .ticker-wrap { padding: 8px 0; }
  .hero-slider .ticker-label { font-size: 10px; padding: 3px 10px; }
  .ticker-text { font-size: 12px; }
}


/* ════════════════════════════════════════════════════════════════
   MVO CARDS (Mission/Vision/Objectives)
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .mvo-card { padding: 24px 16px 20px; }
  .mvo-card .mvo-icon { width: 60px; height: 60px; font-size: 24px; margin-bottom: 16px; }
  .mvo-card h4 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════════
   VIDEO EMBED
════════════════════════════════════════════════════════════════ */
.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.video-embed-wrap iframe,
.video-embed-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}


/* ════════════════════════════════════════════════════════════════
   EXPO / EVENT DETAIL PAGE
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Event detail: sidebar moves below content */
  .event-detail-sidebar { margin-top: 28px; }

  /* Other events grid: 2 per row on sm, 1 per row on xs */
  .other-events-grid .col-sm-6 { margin-bottom: 16px; }
}

@media (max-width: 575px) {
  .other-events-grid .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════
   NEWS DETAIL PAGE
════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Sidebar Related News goes below article on tablet */
  .news-detail-sidebar { margin-top: 32px; }
}


/* ════════════════════════════════════════════════════════════════
   SPONSORS PAGE
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .sponsor-item { padding: 14px 16px; }
  .sponsor-item img { max-height: 52px; }
}


/* ════════════════════════════════════════════════════════════════
   MEMBER DETAIL / LEADER DETAIL — profile layouts
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .member-detail-header { flex-direction: column !important; align-items: center !important; text-align: center; }
  .member-detail-header img { margin-bottom: 16px; }
}


/* ════════════════════════════════════════════════════════════════
   NAVBAR RIGHT-SIDE ITEMS (search / Join CBA / flag) — Mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* The d-flex wrapper containing search + join + flag */
  #mainNav > .d-flex {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Join CBA button: full width on extra-small */
  #mainNav > .d-flex > a[href*="join"] {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  /* Search icon: fixed square */
  .nav-search-btn {
    width: 38px !important; height: 38px !important;
    flex-shrink: 0;
  }

  /* नेपाली flag label */
  .nav-lang-badge,
  #mainNav > .d-flex > span {
    padding: 7px 10px !important; font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .about-intro-heading { font-size: 24px; }
  .about-info-card { padding: 28px 18px; }
  .about-info-title { font-size: 18px; }
  .about-stat-number { font-size: 24px; }
  .about-info-stat-number { font-size: 20px; }
  .about-registered-badge {
    position: relative; bottom: auto; right: auto;
    display: inline-block; margin-top: 16px;
  }
}
@media (max-width: 575px) {
  .about-intro-heading { font-size: 20px; }
  .about-intro-text { font-size: 14px; }
  .about-info-card { padding: 22px 14px; }
  .about-info-title { font-size: 16px; }
  .about-info-watermark { font-size: 40px; }
  .about-info-logo-wrap { width: 70px; height: 70px; }
  .about-stat-number { font-size: 22px; }
  .about-stat-box { padding: 14px; }
  .about-timeline { padding-left: 28px; }
  .about-timeline-dot { left: -38px; width: 20px; height: 20px; }
  .about-timeline-card { padding: 16px 18px; }
  /* President card mobile */
  .pres-card-content { padding-left: 0; margin-top: 30px; text-align: center; }
  .pres-card-photo { width: 160px; height: 200px; border-width: 3px; }
  .pres-card-name { font-size: 18px; }
  .pres-card-role { font-size: 11px; }
  .pres-card-quote { font-size: 44px; text-align: left; }
  .pres-card-msg { font-size: 13.5px; line-height: 1.8; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════
   SEARCH OVERLAY RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .search-overlay-input { padding: 14px 12px; font-size: 14px; }
  .search-overlay-btn { padding: 0 14px; }
  .contact-submit-btn { padding: 12px 24px; font-size: 14px; }
  .contact-map-wrap { height: 280px; }
}

/* ════════════════════════════════════════════════════════════════
   MEMBERS FILTER RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 399px) {
  .card-body-custom .col-6 { flex: 0 0 100%; max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════
   PRINT STYLES (basic)
════════════════════════════════════════════════════════════════ */
@media print {
  .topbar, .site-header, .main-navbar, .site-footer,
  #backToTop, #preloader, .hero-slider .ticker-wrap,
  .notice-section { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: none; }
  .page-banner { background: #1a2870 !important; print-color-adjust: exact; }
}
