/* ============================================================
   BMS — RESPONSIVE FIXES
   Load AFTER css/bms.css in inc/meta.php:
     <link rel="stylesheet" href="css/bms-responsive.css">

   This file only fixes things that were breaking on small screens.
   It does not restyle anything that already worked.
   ============================================================ */


/* ------------------------------------------------------------
   1. HOMEPAGE 3-COLUMN GRID  ***the main breakage***

   index.php sets the grid INLINE:
       style="grid-template-columns: 1.15fr 1.15fr .9fr"
   An inline style beats a stylesheet rule, so the three columns
   (जिल्ह्यातील घडामोडी | महत्वाच्या घडामोडी | प्रेरणास्थान) never
   stacked -- on a phone they squeezed to ~120px each and the text
   became unreadable.

   !important is required here precisely because we are overriding
   an inline style. This is the one place it is justified.
   ------------------------------------------------------------ */
.home-3col {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .9fr;
  gap: 28px;
}

/* tablet: 2 up, प्रेरणास्थान drops below */
@media (max-width: 1024px) {
  .home-3col { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* phone: single column */
@media (max-width: 768px) {
  .home-3col { grid-template-columns: 1fr; gap: 22px; }
}

/* Safety net: if any .grid anywhere still carries an inline
   multi-column value, force it to stack on a phone. */
@media (max-width: 768px) {
  .rail > .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}


/* ------------------------------------------------------------
   2. Horizontal-overflow guard.
   A single wide element (long unbroken word, wide table, oversized
   image) can force the WHOLE page to scroll sideways on a phone.
   ------------------------------------------------------------ */
html, body { max-width: 100%; overflow-x: hidden; }

img, svg, video, canvas, iframe { max-width: 100%; }

/* long URLs / Devanagari compounds must not push the layout wide */
p, h1, h2, h3, h4, li, td, a { overflow-wrap: break-word; word-break: break-word; }


/* ------------------------------------------------------------
   3. Tap targets. Anything interactive should be reachable with a
   thumb -- 44px is the accepted minimum.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .btn-bms,
  .gal-cats li a,
  .zg-chip,
  .bms-menu > li > a,
  .drop a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn-bms { justify-content: center; }
}


/* ------------------------------------------------------------
   4. PAGE BAND (the title strip on every inner page)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .page-band { padding-block: 1.6rem; }
  .page-band h1 { font-size: clamp(1.3rem, 6vw, 1.8rem); line-height: 1.35; }
  .page-band .crumb { font-size: .8rem; }
}


/* ------------------------------------------------------------
   5. जिल्ह्यातील घडामोडी  (zilha_ghadamodi.php)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .zg-chips { gap: 7px; }
  .zg-chip { padding: 7px 12px; font-size: .8rem; }
  .zg-head { padding: 15px 16px; }
  .zg-body { padding: 16px; gap: 18px; }
  .zg-meta { gap: 10px; }
  .zg-meta span { font-size: .78rem; }
}

/* homepage zilha card: stop the thumb crushing the text */
@media (max-width: 420px) {
  .zh-card { flex-direction: column; }
  .zh-thumb { flex-basis: auto; width: 100%; height: 160px; }
  .zh-body { padding: 12px 14px 14px; }
}


/* ------------------------------------------------------------
   6. महत्वाच्या घडामोडी homepage card (.gh-card)
   ------------------------------------------------------------ */
@media (max-width: 420px) {
  .gh-card { flex-direction: column; }
  .gh-thumb { flex-basis: auto; width: 100%; height: 160px; }
  .gh-body { padding: 12px 14px 14px; }
}


/* ------------------------------------------------------------
   7. माहितीपत्र PDF reader (mahitipatra.php)
   The toolbar has title + pager + zoom + download + close. On a
   phone that is far too much for one row.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .mp-reader-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .mp-rb-left { flex: 1 1 100%; order: 1; }
  .mp-rb-title { max-width: 100%; font-size: .92rem; }
  .mp-rb-mid { order: 3; flex: 1 1 100%; justify-content: center; }
  .mp-rb-right { order: 2; }
  .mp-reader-stage { padding: 10px 4px 26px; }
  .mp-ic { width: 38px; height: 38px; }
}

/* card grid: never below one column */
@media (max-width: 380px) {
  .mp-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   8. कामगार संदेश reader (kamgar_sandesh_view.php)
   The action bar (open-in-tab + download) overflowed on phones.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .sandesh-frame { height: 62vh; min-height: 360px; }
  .sandesh-frame + .sandesh-fallback { font-size: .85rem; }
}
@media (max-width: 480px) {
  /* the button row inside the card-bms action bar */
  .card-bms > div[style*="display:flex"] { flex-direction: column; align-items: stretch !important; }
  .card-bms > div[style*="display:flex"] > div { width: 100%; }
  .card-bms .btn-bms { width: 100%; justify-content: center; }
}


/* ------------------------------------------------------------
   9. विभाग panel (vibhag_panel.php) — the event banner is dense
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .av-banner .av-top { flex-direction: column; text-align: center; gap: 10px; }
  .av-banner .por img,
  .av-banner .lg img { max-width: 90px; }
  .av-title h2 { font-size: 1.1rem; }
  .av-datestrip { flex-direction: column; gap: 8px; align-items: center; }
}


/* ------------------------------------------------------------
   10. आराध्य दैवत article (aaryadydaivat.php)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .art .lead { padding: 14px 16px; font-size: 1rem; }
  .art-tbl th, .art-tbl td { padding: 9px 11px; font-size: .88rem; }
  .art-tbl td:first-child { white-space: normal; }   /* let district names wrap */
  .hero-date { padding: 12px 18px; }
  .hero-date .d { font-size: 2.2rem; }
}


/* ------------------------------------------------------------
   11. ROSTER (प्रतिनिधी tables).
   bms.css already hides the header row below 760px, but the rows
   themselves stay a 3-column grid. Stack them properly.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .roster-row {
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 14px 16px;
  }
  .roster-row .who,
  .roster-row .reach { padding-left: 0; }
  .roster-row .reach { justify-content: flex-start; }
}


/* ------------------------------------------------------------
   12. Admin (SB-Admin-2) — tables must scroll, not break the page
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .card-header h6 { font-size: .9rem; }
  .gm-photos img { height: 62px; }
}


/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .site-foot .cols,
  .foot-grid { grid-template-columns: 1fr !important; gap: 26px; }
}