/* ============================================================
   JCI BUSINESS INDIA — FRONTEND RESPONSIVE
   Breakpoints: 1024 / 768 / 480 / 360
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }

/* ── CONTAINER ───────────────────────────────────────────── */
.container { width: 100%; padding-left: 16px; padding-right: 16px; margin: 0 auto; }
@media (min-width: 768px)  { .container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; } }

/* ══════════════════════════════════════════════════════════
   ≤ 1024px  TABLET LANDSCAPE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .featured-grid         { grid-template-columns: repeat(3, 1fr); }
  .featured-grid-wrapper { grid-template-columns: 1fr; }
  .premium-sidebar       { display: none; }
  .bottom-grid-inner     { grid-template-columns: 1fr 1fr; }
  .footer-grid           { grid-template-columns: 1fr 1fr; gap: 28px; }
  .team-grid             { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid          { grid-template-columns: repeat(2, 1fr); }
  .biz-grid              { grid-template-columns: repeat(2, 1fr); }
  .cat-grid              { grid-template-columns: repeat(3, 1fr); }
  .events-grid           { grid-template-columns: repeat(2, 1fr); }
  .news-grid             { grid-template-columns: 1fr 1fr; }
  .profile-grid          { grid-template-columns: 1fr 280px; }
  .dashboard-layout      { grid-template-columns: 1fr; }
  .dash-sidebar          { display: none; }
  .dash-stats            { grid-template-columns: repeat(2, 1fr); }
  .city-cards            { grid-template-columns: repeat(3, 1fr); }
  /* Testimonials 2-col on tablet */
  #testimonialsGrid      { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 768px  TABLET PORTRAIT / LARGE PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── TOP HEADER ─────────────────────────────────────────── */
  .top-header           { padding: 6px 0; }
  .top-header-inner     { gap: 6px; flex-wrap: nowrap; }
  .logo-area            { gap: 6px; min-width: 0; flex-shrink: 1; }
  .logo-area img        { height: 34px; flex-shrink: 0; }
  .logo-text h1         { font-size: 0.72rem; line-height: 1.1; white-space: nowrap; }
  .logo-text span       { display: none; }
  /* Shrink tagline on mobile — keep it visible but compact */
  .header-tagline       { font-size: 0.68rem; letter-spacing: 0; flex: 1; white-space: nowrap; }
  .header-signature     { display: none; }
  /* Actions — always visible, username shortened */
  .header-actions       { display: flex !important; gap: 5px; flex-shrink: 0; margin-left: auto; }
  .header-actions .btn  { font-size: 0.7rem; padding: 5px 8px; white-space: nowrap; }
  .header-actions .btn-secondary { display: flex !important; } /* always show user button */

  /* ── NAVIGATION ── */
  .main-nav             { top: 56px; }
  .nav-inner            { flex-direction: column; display: none; background: var(--primary); width: 100%; }
  .nav-inner.open       { display: flex; }
  .nav-inner a,
  .nav-inner .nav-parent { width: 100%; padding: 13px 20px; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.9rem; }
  .dropdown-menu        { position: static; box-shadow: none; border: none; background: rgba(0,0,0,0.18); border-radius: 0; min-width: auto; }
  .mobile-menu-toggle   { display: block !important; margin-left: 8px; flex-shrink: 0; }

  /* ── HERO SLIDER ── */
  .hero-slider, .hsv2-slide { min-height: 260px; }
  .hsv2-content         { padding: 16px 14px; }
  .hsv2-headline        { font-size: 1.35rem; line-height: 1.2; }
  .hsv2-sub             { font-size: 0.82rem; }
  .hsv2-desc            { font-size: 0.8rem; }
  .hsv2-cta             { gap: 8px; flex-wrap: wrap; }
  .hsv2-cta .btn        { font-size: 0.8rem; padding: 8px 14px; }
  .hsv2-sig-card        { flex-direction: column; gap: 8px; padding: 10px 12px; }
  .hsv2-sig-divider     { display: none; }
  .hsv2-sig-steps       { flex-direction: row; flex-wrap: wrap; gap: 5px; }
  .hsv2-sig-step        { font-size: 0.68rem; padding: 3px 8px; }
  .hsv2-arrow           { width: 30px; height: 30px; font-size: 0.9rem; }
  /* Reduce portrait-fade gradient so portrait image shows clearer */
  .hsv2-portrait-fade   {
    width: 42% !important;
    background: linear-gradient(to right,
      transparent 0%,
      rgba(0,42,120,0.2) 30%,
      rgba(0,56,140,0.6) 70%,
      #003A8C 100%
    ) !important;
  }

  /* ── SEARCH BAR ── */
  .search-section       { padding: 12px 0; }
  .search-bar           { flex-direction: column; border-radius: var(--radius); }
  .search-input         { border-right: none; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding: 11px 14px; }
  .search-select        { border-right: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 11px 14px; }
  .search-btn           { padding: 12px; justify-content: center; border-radius: 0 0 var(--radius) var(--radius); }

  /* ── CATEGORIES ── */
  .categories-row       { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; gap: 8px; }
  .categories-row::-webkit-scrollbar { display: none; }
  .category-item        { min-width: 72px; flex-shrink: 0; }
  .category-icon        { width: 44px; height: 44px; font-size: 1.1rem; }

  /* ── GRIDS ── */
  .featured-grid        { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .biz-grid             { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-grid             { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .events-grid          { grid-template-columns: 1fr; gap: 12px; }
  .news-grid            { grid-template-columns: 1fr; gap: 12px; }
  .city-cards           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pricing-grid         { grid-template-columns: 1fr; gap: 16px; }
  .team-grid            { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .about-grid           { grid-template-columns: 1fr; }
  .vm-grid              { grid-template-columns: 1fr; }
  .contact-grid         { grid-template-columns: 1fr; }
  .bottom-grid-inner    { grid-template-columns: 1fr; }
  .form-row             { grid-template-columns: 1fr; }
  .gallery-grid         { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* ── TESTIMONIALS ── */
  #testimonialsGrid     { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ── STATS ROW ── */
  .stats-row            { flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 10px; }
  .stat-divider         { display: none; }
  .stat-item            { flex-direction: column; text-align: center; flex-basis: calc(33% - 10px); min-width: 75px; }
  .stat-icon            { display: none; }
  .stat-number          { font-size: 1.3rem; }
  .stat-label           { font-size: 0.68rem; }

  /* ── SECTION HEADERS ── */
  .section-header       { flex-direction: column; gap: 8px; align-items: flex-start; }
  .section-title        { font-size: 1.3rem; }

  /* ── FOOTER ── */
  .footer-grid          { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-bottom        { flex-direction: column; gap: 6px; text-align: center; font-size: 0.78rem; padding: 12px 0; }
  .social-links         { justify-content: flex-start; }

  /* ── PAGE HERO ── */
  .page-hero            { padding: 26px 0; }
  .page-hero h1         { font-size: 1.5rem; }
  .page-hero p          { font-size: 0.86rem; }

  /* ── DIRECTORY ── */
  .directory-layout     { grid-template-columns: 1fr; }
  .filter-sidebar,
  #sidebarFilters       { display: none; }

  /* ── BUSINESS PROFILE ── */
  .profile-grid         { grid-template-columns: 1fr; gap: 16px; }
  .profile-hero-info    { flex-direction: column; align-items: flex-start; gap: 10px; }
  .profile-hero-actions { flex-wrap: wrap; gap: 6px; }
  .profile-hero-actions .btn { font-size: 0.8rem; }
  .business-card-img    { height: 160px; }

  /* ── MEMBER DASHBOARD ── */
  .dashboard-layout     { grid-template-columns: 1fr; }
  .dash-sidebar         { display: none; }
  .dash-stats           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-stat-card h3    { font-size: 1.3rem; }
  .dash-content         { padding: 14px; padding-bottom: 74px; }

  /* ── NEWSLETTER ── */
  .newsletter-inner     { flex-direction: column; text-align: center; gap: 12px; }
  .newsletter-form      { flex-direction: column; }
  .newsletter-form input { width: 100%; }

  /* ── AUTH ── */
  .auth-page            { padding: 16px 0; }
  .auth-card            { padding: 26px 18px; margin: 0 10px; }

  /* ── AD BANNERS ── */
  #homeAdsBanner .container > div { flex-direction: column; align-items: stretch; }
  .home-ad-item         { max-width: 100%; }

  /* ── MISC ── */
  .hide-mobile          { display: none !important; }
  .btn                  { font-size: 0.83rem; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 480px  PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container              { padding-left: 12px; padding-right: 12px; }

  /* Top header — absolute minimum size */
  .logo-area img          { height: 30px; }
  .logo-text h1           { font-size: 0.72rem; }
  .header-actions .btn    { font-size: 0.68rem; padding: 5px 8px; }

  /* Slider */
  .hsv2-headline          { font-size: 1.1rem; }
  .hsv2-sig-card          { display: none; }  /* too cramped on 480px */

  /* Grids */
  .featured-grid          { grid-template-columns: 1fr 1fr; gap: 8px; }
  .biz-grid               { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat-grid               { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .city-cards             { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .team-grid              { grid-template-columns: 1fr 1fr; }
  .gallery-grid           { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .footer-grid            { grid-template-columns: 1fr; gap: 18px; }
  .dash-stats             { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pricing-grid           { grid-template-columns: 1fr; }

  /* Cards */
  .business-card-img      { height: 130px; }
  .business-card-body     { padding: 10px; }
  .business-card-body h4  { font-size: 0.8rem; }
  .business-meta          { font-size: 0.7rem; }

  /* Stats */
  .stat-item              { flex-basis: calc(50% - 10px); }
  .stat-number            { font-size: 1.2rem; }

  /* Auth */
  .auth-card              { padding: 20px 14px; margin: 0 8px; }
  .form-control           { font-size: 0.86rem; }

  /* Footer */
  .footer-brand           { text-align: center; }
  .social-links           { justify-content: center; }

  /* Testimonials */
  #testimonialsGrid       { grid-template-columns: 1fr !important; }

  /* Dashboard */
  .dash-stat-card         { padding: 12px 10px; }
  .dash-stat-card h3      { font-size: 1.1rem; }
  /* Header */
  .logo-area img      { height: 30px; }
  .logo-text h1       { font-size: 0.7rem; }
  .header-tagline     { display: none !important; }
  .header-actions .btn { font-size: 0.66rem; padding: 5px 7px; }

}

/* ══════════════════════════════════════════════════════════
   ≤ 360px  VERY SMALL PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container              { padding-left: 10px; padding-right: 10px; }
  .logo-text              { display: none; }   /* only show logo image */
  /* At 360px keep BOTH buttons but show first name only */
  .header-actions .btn-secondary { display: flex !important; }
  .featured-grid          { grid-template-columns: 1fr; }
  .biz-grid               { grid-template-columns: 1fr; }
  .cat-grid               { grid-template-columns: repeat(2, 1fr); }
  .dash-stats             { grid-template-columns: 1fr; }
  .hsv2-headline          { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   TOUCH — prevent iOS zoom on input focus
══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .hover-lift:hover       { transform: none; box-shadow: var(--shadow); }
}

/* ══════════════════════════════════════════════════════════
   MEMBER DASHBOARD MOBILE NAV COMPONENTS
══════════════════════════════════════════════════════════ */
.dash-mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.dash-mobile-menu-btn {
  background: none; border: none;
  font-size: 1.4rem; color: var(--primary);
  cursor: pointer; padding: 4px 8px; line-height: 1;
}
.dash-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 2px solid var(--border);
  z-index: 400;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.dash-mob-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; min-height: 54px;
  color: var(--mid-text); font-size: 1.1rem;
  text-decoration: none; background: none; border: none;
  cursor: pointer; transition: color 0.15s;
}
.dash-mob-btn span { font-size: 0.6rem; font-weight: 600; white-space: nowrap; }
.dash-mob-btn.active { color: var(--primary); }

@media (max-width: 768px) {
  .dash-mobile-topbar     { display: flex; }
  .dash-mobile-bottom-nav { display: flex; }
}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print {
  .main-nav, .top-header, .footer,
  .search-section, #homeAdsBanner,
  .mobile-menu-toggle, .dash-mobile-topbar,
  .dash-mobile-bottom-nav { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  body { font-size: 12pt; }
}