/* ================================================================
   IETE PATNA — RESPONSIVE STYLESHEET
   Works alongside Bootstrap 5.3 grid.
   Covers: header, navbar, slider, stats, homepage columns,
           gallery, staff, officials, notice board, footer,
           chatbot, admin pages.
   ================================================================ */

/* ── GLOBAL ──────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
table { width: 100%; }

/* ── TOP BAR ─────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .top-bar { font-size: 11px; padding: 4px 0; }
  .top-bar .container-fluid { padding: 0 8px; }
  .top-bar .d-flex { gap: 8px !important; flex-wrap: wrap; }
  .social-icons a { width: 22px; height: 22px; font-size: 10px; }
  /* Keep social icons + admin btn visible, hide phone/email on mobile */
}

/* ── SITE HEADER ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner { padding: 10px 12px !important; gap: 10px !important; flex-wrap: wrap !important; }
  .logo-block { gap: 10px !important; flex-shrink: 1 !important; min-width: 0; }
  .site-title-en { font-size: 1rem !important; white-space: normal !important; overflow: visible !important; width: 100% !important;
    border-right: none !important; animation: none !important; }
  .tagline-wrap { opacity: 1 !important; animation: none !important; }
  .tagline-bar { height: 1.1em !important; animation: none !important; }
  .tg-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tagline-underline { width: 100% !important; animation: none !important; }
  .tagline-inner { font-size: .75rem !important; gap: 2px !important; }
  .hdr-sep { display: none !important; }
  .officials-wrap { display: none !important; }
  .logo-img { height: 52px !important; max-width: 80px !important; }
}

@media (max-width: 420px) {
  .logo-img { height: 42px !important; max-width: 64px !important; }
  .site-title-en { font-size: .88rem !important; }
  .tagline-inner { font-size: .68rem !important; }
  .header-inner { padding: 7px 8px !important; }
}

/* ── MARQUEE ─────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .marquee-label { font-size: 10px; padding: 3px 8px; }
  .marquee-content { font-size: 12px; }
  .marquee-bar { padding: 5px 0; }
}

/* ── NAVBAR ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .main-nav .nav-link { padding: 10px 14px !important; font-size: 13px; }
  .main-nav .navbar-collapse { background: var(--nav-bg); padding: 8px 0; border-radius: 0 0 8px 8px; }
  .main-nav .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; border-radius: 0; background: rgba(0,0,0,0.15); margin: 0; }
  .main-nav form { padding: 8px 14px 12px; }
  .main-nav form input { width: 100% !important; }
  .navbar-brand { font-size: 14px !important; }
}

/* ── HERO SLIDER ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-slider .carousel-item img { height: 240px !important; }
  .hero-slider .carousel-caption { padding: 14px 16px; }
  .hero-slider .carousel-caption h5 { font-size: 1rem !important; }
  .hero-slider .carousel-caption p { font-size: 11px; display: none; }
  .slider img { height: 180px !important; }
}

@media (max-width: 480px) {
  .hero-slider .carousel-item img { height: 180px !important; }
  .hero-slider .carousel-caption h5 { font-size: .85rem !important; }
  .slider img { height: 150px !important; }
}

/* ── STATS STRIP ─────────────────────────────────────────────── */
@media (max-width: 575px) {
  .stats-strip { padding: 18px 0; }
  .stat-number { font-size: 1.5rem; }
  .stat-label { font-size: 10px; letter-spacing: 0.5px; }
}

/* ── HOME PAGE — 3-column to stacked ────────────────────────── */
@media (max-width: 991px) {
  /* Notice board scrollable box */
  .notice-scroll { height: 280px !important; }
  /* Gallery thumb grid fix */
  .gallery-thumb { aspect-ratio: 4/3; }
}

@media (max-width: 767px) {
  /* Full-width columns on mobile */
  .col-lg-4, .col-lg-5, .col-lg-3 { width: 100%; }
  .notice-scroll { height: 260px !important; }
  /* Quick services — 3 per row on mobile stays, but ensure touch-friendly */
  .quick-link-card { padding: 12px 8px; }
  .quick-link-card .icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .quick-link-card .link-title { font-size: 11px; }
  /* Video cards: 2 per row */
  .video-card .video-thumb img { height: 120px; }
  /* Officials grid: already 2-col, fine */
  .officials-panel { margin-bottom: 14px; }
  /* Gallery thumb row */
  .col-4 { padding: 3px; }
  /* Section titles */
  .section-title { font-size: 1.1rem; }
}

/* ── OFFICIALS (homepage cards) ──────────────────────────────── */
@media (max-width: 480px) {
  .officials-grid { grid-template-columns: 1fr 1fr !important; }
  .official-tile { padding: 12px 6px; }
  .off-avatar, .official-home-ring { width: 52px; height: 52px; }
  .off-tile-name { font-size: 11px; }
  .off-tile-desg { font-size: 9.5px; }
}

/* ── PAGE TITLE BAR ──────────────────────────────────────────── */
@media (max-width: 575px) {
  .page-title-bar { padding: 14px 0; margin-bottom: 16px; }
  .page-title-bar h1 { font-size: 1.2rem; }
}

/* ── NOTICE BOARD (noticeboard.php) ──────────────────────────── */
@media (max-width: 575px) {
  .notice-item { padding: 10px 12px; }
  .notice-item .title { font-size: 12px; }
  .notice-item .date { font-size: 10px; }
}

/* ── GALLERY (gallery.php) ────────────────────────────────────── */
@media (max-width: 480px) {
  .photo-masonry { columns: 2 !important; column-gap: 6px !important; }
  .photo-masonry img { margin-bottom: 6px; }
  /* Video event grid */
  .col-sm-6 { width: 100%; }
}

/* ── STAFF PAGE ──────────────────────────────────────────────── */
@media (max-width: 575px) {
  .col-sm-6.col-md-4.col-lg-3 { width: 50%; }
}

@media (max-width: 380px) {
  .col-sm-6.col-md-4.col-lg-3 { width: 100%; }
}

/* ── OFFICIALS PAGE (officials.php) ──────────────────────────── */
@media (max-width: 575px) {
  .col-md-6, .col-lg-4, .col-lg-3 { width: 100%; }
}

/* ── CONTACT PAGE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-card { padding: 16px; }
  /* Map iframe responsive */
  iframe[src*="google.com/maps"],
  iframe[src*="maps.google"] { height: 240px !important; }
}

/* ── MEMBERSHIP PAGE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── FOOTER ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  footer .col-lg-4,
  footer .col-lg-2,
  footer .col-lg-3 { width: 100%; }
  footer .row.g-4 { gap: 0; }
  footer .row.g-4 > div { padding-bottom: 20px; }
  /* Bottom bar stack vertically — already handled by flex-column class */
}

@media (max-width: 575px) {
  footer { margin-top: 24px !important; }
  footer h5 { font-size: 14px; }
  footer p,
  footer li,
  footer a { font-size: 12px; }
  /* Quick Links + Important Links side by side */
  footer .col-md-6 { width: 50% !important; float: left; }
  footer .col-lg-4.col-md-6 { width: 100% !important; float: none; }
  footer::after { content: ''; display: table; clear: both; }
}

/* ── CHATBOT WINDOW ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .chatbot-window { width: calc(100vw - 16px); right: 8px; bottom: 80px; height: 420px; }
  .chatbot-launcher { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  #scrollTopBtn { bottom: 78px; right: 16px; width: 36px; height: 36px; font-size: 14px; }
}

/* ── ADMIN PAGES ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Admin header */
  .admin-header, .sub-header { padding: 8px 12px; }
  /* Admin sidebar: collapse on mobile */
  .admin-sidebar { width: 100% !important; position: static !important; }
  /* Admin tables: horizontal scroll */
  .table-responsive, .datatable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { font-size: 12px; padding: 6px 8px; white-space: nowrap; }
  /* Admin cards */
  .card { margin-bottom: 12px; }
  .card-body { padding: 12px; }
  /* Dashboard stat boxes */
  .col-md-3 { width: 50%; }
  /* Admin form inputs */
  .form-control, .form-select { font-size: 14px; }
}

@media (max-width: 480px) {
  .col-md-3 { width: 100%; }
}

/* ── BREADCRUMB ───────────────────────────────────────────────── */
@media (max-width: 575px) {
  .breadcrumb-bar { padding: 5px 0; }
  .breadcrumb-item a, .breadcrumb-item.active { font-size: 11px; }
}

/* ── TABLES (membership, director-history, etc.) ─────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 575px) {
  table { font-size: 12px; }
  table th, table td { padding: 6px 8px !important; }
}

/* ── SEARCH INPUT IN NAVBAR (mobile) ─────────────────────────── */
@media (max-width: 991px) {
  .main-nav form input[type="search"] { width: 100% !important; }
}

/* ── FEEDBACK / CONTACT FORM ─────────────────────────────────── */
@media (max-width: 575px) {
  .form-control, .form-select, .btn { font-size: 14px; }
  .form-label { font-size: 13px; }
}

/* ── IMPORTANT LINKS PAGE ────────────────────────────────────── */
@media (max-width: 575px) {
  .imp-link-item { font-size: 12px; padding: 8px 10px; }
}

/* ── DIRECTOR HISTORY / PAGE.PHP ─────────────────────────────── */
@media (max-width: 575px) {
  .director-history-table th,
  .director-history-table td { font-size: 11px; padding: 5px 7px; }
}

/* ── UTILITY: prevent horizontal scroll ─────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── TOUCH: bigger tap targets for links/buttons ─────────────── */
@media (max-width: 768px) {
  .imp-link-item { min-height: 40px; }
  .notice-item { min-height: 44px; }
  .navbar-toggler { min-width: 40px; min-height: 40px; }
}

/* ── PRINT: basic cleanup ────────────────────────────────────── */
@media print {
  .main-nav, .top-bar, .marquee-bar,
  .chatbot-launcher, .chatbot-window,
  #scrollTopBtn, footer { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
}