/* ═══════════════════════════════════════════════════════════
   INGONYAMA TRUST — SHARED MOBILE RESPONSIVE STYLESHEET
   Loaded BEFORE inline <style> so !important overrides it
   ═══════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden !important; max-width: 100vw !important; }
nav, .util-bar, footer { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
img, svg, video, iframe { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }
.hours-table { min-width: 0 !important; }
th, td { vertical-align: top; word-break: break-word; }

/* ── 1200px ── */
@media (max-width: 1200px) {
  .util-bar          { padding-left: 24px !important; padding-right: 24px !important; }
  nav                { padding-left: 24px !important; padding-right: 24px !important; }
  footer             { padding-left: 24px !important; padding-right: 24px !important; }
  .footer-grid       { grid-template-columns: 220px repeat(4,1fr) !important; gap: 24px !important; }
  .section, .section-alt { padding-left: 28px !important; padding-right: 28px !important; }
  .page-hero, .ph-content, .page-hero-content { padding-left: 28px !important; padding-right: 28px !important; }
  .breadcrumb        { padding-left: 28px !important; padding-right: 28px !important; }
  .filter-bar        { padding-left: 28px !important; padding-right: 28px !important; top: 72px !important; }
  .bottom-cta        { padding-left: 28px !important; padding-right: 28px !important; }
  .cta-banner        { padding-left: 28px !important; padding-right: 28px !important; }
  .audit-strip       { padding-left: 28px !important; padding-right: 28px !important; }
  .intro-strip       { padding-left: 28px !important; padding-right: 28px !important; }
  .testimonials-section { padding-left: 28px !important; padding-right: 28px !important; }
  .yt-section        { padding-left: 28px !important; padding-right: 28px !important; }
  .stats-strip       { padding-left: 28px !important; padding-right: 28px !important; }
  .newsletter        { padding-left: 28px !important; padding-right: 28px !important; }
  .contact-section   { padding-left: 28px !important; padding-right: 28px !important; }
  .impact            { padding-left: 28px !important; padding-right: 28px !important; }
  .faq-search-bar    { padding-left: 28px !important; padding-right: 28px !important; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
  /* ── NAV ── */
  .util-bar          { display: none !important; }
  nav                { height: 68px !important; min-height: 68px !important; flex-wrap: nowrap !important; }
  .brand img         { width: 46px !important; height: 46px !important; }
  .brand-txt .bn     { font-size: 14px !important; }
  .brand-txt .bs     { display: none !important; }
  .nav-links         { display: none !important; }
  .nav-cta           { display: none !important; }
  .nav-item          { display: none !important; }
  .ham               { display: flex !important; }
  .mob-nav           { top: 68px !important; z-index: 500 !important; display: none !important; bottom: 0 !important; left: 0 !important; right: 0 !important; position: fixed !important; overflow-y: auto !important; overflow-x: hidden !important; flex-direction: column !important; background: #ffffff !important; border-top: 3px solid var(--g1) !important; padding: 20px 20px 60px !important; gap: 2px !important; }
  .mob-nav.open      { display: flex !important; }

  .page-hero         { height: auto !important; min-height: 320px !important; }
  .filter-bar        { top: 68px !important; }
  .filter-strip      { top: 68px !important; }
  .search-strip      { top: 68px !important; }
  .faq-search-bar    { top: 68px !important; }
  .tender-layout     { grid-template-columns: 1fr !important; }
  .t-side            { position: static !important; }
  .map-inner         { grid-template-columns: 1fr !important; }
  .map-embed         { height: 280px !important; }
  .trustee-grid      { grid-template-columns: 1fr !important; }
  .trustee-img-wrap  { height: 460px !important; min-height: 460px !important; }
  .trustee-img-wrap > img { object-fit: cover !important; object-position: center 58% !important; }
  /* leadership page trustee card */
  .trustee-card      { grid-template-columns: 1fr !important; }
  /* faq sidebar */
  .faq-layout        { grid-template-columns: 1fr !important; }
  .faq-side          { position: static !important; top: auto !important; }
  /* resource centre */
  .docs-layout       { grid-template-columns: 1fr !important; }
  .docs-side         { position: static !important; top: auto !important; }
}


/* ══════════════════════════════════════════════════════════
   768px — MAIN MOBILE BREAKPOINT
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  .util-bar          { display: none !important; }
  nav                { padding: 0 16px !important; height: 62px !important; min-height: 62px !important; overflow: hidden !important; flex-wrap: nowrap !important; }
  .brand img         { width: 46px !important; height: 46px !important; }
  .brand-txt .bn     { font-size: 14px !important; }
  .brand-txt .bs     { display: none !important; }
  .nav-links         { display: none !important; }
  .nav-cta           { display: none !important; }
  .nav-item          { display: none !important; }
  .ham               { display: flex !important; }
  .mob-nav           { top: 62px !important; z-index: 500 !important; display: none !important; bottom: 0 !important; left: 0 !important; right: 0 !important; position: fixed !important; overflow-y: auto !important; overflow-x: hidden !important; flex-direction: column !important; background: #ffffff !important; border-top: 3px solid var(--g1) !important; padding: 20px 20px 60px !important; gap: 2px !important; }
  .mob-nav.open      { display: flex !important; }

  /* ── STICKY BARS — fix top offset for all pages ── */
  .filter-strip      { top: 62px !important; padding: 16px !important; }
  .search-strip      { top: 62px !important; padding: 16px !important; }
  .search-wrap       { grid-template-columns: 1fr !important; gap: 10px !important; }
  .faq-search-bar    { top: 62px !important; padding: 14px 16px !important; }
  .faq-side          { position: static !important; top: auto !important; }
  .docs-side         { position: static !important; top: auto !important; }

  /* ── FILTER BAR — the screenshot issue ── */
  .filter-bar {
    top: 62px !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    position: sticky !important;
  }
  .fb-label          { width: 100%; margin-bottom: 4px !important; }
  .fb-tag            { flex: 1 1 auto !important; min-width: 0 !important; text-align: center !important; padding: 8px 10px !important; font-size: 12px !important; }
  .fb-search         { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-top: 4px !important; }
  .fb-search input   { width: 100% !important; }

  /* ── PAGE HERO ── */
  .page-hero         { height: auto !important; min-height: 260px !important; }
  .page-hero-content,
  .ph-content        { padding: 36px 16px 28px !important; }
  .ph-h1,
  .page-hero h1      { font-size: clamp(1.7rem, 7vw, 2.6rem) !important; }
  .ph-sub            { font-size: 13.5px !important; }

  /* ── SECTIONS ── */
  .section, .section-alt { padding: 40px 16px !important; }
  .sec-h2            { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .sec-lead          { font-size: 14px !important; }
  .sec-header        { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 24px !important; }
  .breadcrumb        { padding: 10px 16px !important; flex-wrap: wrap !important; }
  footer             { padding: 40px 16px 24px !important; }
  .footer-grid       { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-grid .f-brand { grid-column: 1 / -1 !important; }
  .footer-bottom     { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .f-col h5          { font-size: 9px !important; }
  .f-col a           { font-size: 12px !important; }

  /* ── INTRO STRIP (community page 3-col stats) ── */
  .intro-strip       { grid-template-columns: 1fr !important; padding: 0 !important; }
  .intro-stat        { padding: 22px 20px !important; border-right: none !important; border-bottom: 1px solid rgba(127,202,117,.15) !important; }
  .intro-stat:last-child { border-bottom: none !important; }
  .is-num            { font-size: 2.2rem !important; }

  /* ── STATS STRIP (news page 4-col) ── */
  .stats-strip       { grid-template-columns: 1fr 1fr !important; padding: 30px 16px !important; gap: 1px !important; }
  .ss-item           { padding: 18px 12px !important; border-right: none !important; }
  .ss-num            { font-size: 2rem !important; }

  /* ── ALL CONTENT GRIDS → 1 column ── */

  /* INDEX */
  .hero              { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero-right        { display: none !important; }
  .hero-left         { padding: 40px 16px 32px !important; }
  .hero h1           { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
  .hero-btns         { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .btn-hero-p, .btn-hero-s { justify-content: center !important; padding: 13px 24px !important; font-size: 13px !important; min-height: 44px !important; line-height: 1.3 !important; width: auto !important; align-self: flex-start !important; }
  .stats-bar         { grid-template-columns: 1fr 1fr !important; }
  .sb-item           { padding: 14px 10px !important; }
  .sb-num            { font-size: 1.7rem !important; }
  .sb-item:nth-child(2)  { border-right: none !important; }
  .mv-grid           { grid-template-columns: 1fr !important; gap: 14px !important; }
  .services-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .impact-grid       { grid-template-columns: 1fr 1fr !important; }
  .impact            { padding: 36px 16px !important; }
  .impact-num        { font-size: 2.6rem !important; }
  .events-grid       { grid-template-columns: 1f
    
    
    r !important; gap: 12px !important; }
  .news-grid         { grid-template-columns: 1fr !important; gap: 14px !important; }
  .news-side         { grid-template-columns: 1fr !important; gap: 10px !important; }
  .res-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }
  .contact-grid      { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cf-row            { grid-template-columns: 1fr !important; gap: 10px !important; }
  .nl-inner          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .nl-row            { flex-direction: column !important; }
  .nl-btn            { width: 100% !important; }
  .nl-h              { font-size: 1.8rem !important; }
  .heritage-grid     { grid-template-columns: 1fr !important; }
  .h-col-black       { border-left: none !important; border-top: 2px solid var(--o1) !important; }
  .trustee-grid      { grid-template-columns: 1fr !important; min-height: auto !important; }
  .trustee-img-wrap  { height: 480px !important; min-height: 480px !important; background: url('../assets/images/photos/raja.jpg') center 55% / cover no-repeat !important; }
  .trustee-img-wrap > img { display: none !important; }
  .t-img-overlay     { background: linear-gradient(to bottom, transparent 40%, var(--g4) 100%) !important; }
  .trustee-content   { padding: 28px 16px 36px !important; }
  .trustee-heading   { font-size: 1.8rem !important; }
  .footer-bottom-links { flex-wrap: wrap !important; gap: 10px !important; }
  .bottom-cta        { grid-template-columns: 1fr !important; padding: 32px 16px !important; gap: 18px !important; text-align: center !important; }
  .bc-h              { font-size: 1.6rem !important; }
  .bc-btns           { justify-content: center !important; flex-wrap: wrap !important; }
  .btn-bc-p, .btn-bc-s { justify-content: center !important; }

  /* WHO WE ARE / COMMUNITY DEVELOPMENT (shared .intro-grid) */
  .intro-grid        { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ia-stat-row       { grid-template-columns: 1fr 1fr !important; }
  .mandate-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .vm-grid           { grid-template-columns: 1fr !important; gap: 14px !important; }
  .values-grid       { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .role-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* GOVERNANCE */
  .pillars-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .committees-grid   { grid-template-columns: 1fr !important; gap: 12px !important; }
  .comm-card         { grid-template-columns: 50px 1fr !important; gap: 12px !important; }
  .fw-grid           { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .wb-wrap           { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pol-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pol-card          { grid-template-columns: 40px 1fr auto !important; gap: 10px !important; }
  .audit-strip       { padding: 32px 16px !important; }
  .audit-inner       { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .tl-row            { grid-template-columns: 80px 1fr !important; gap: 12px !important; }
  .cta-banner        { grid-template-columns: 1fr !important; gap: 20px !important; padding: 36px 16px !important; }
  .cta-h             { font-size: 1.6rem !important; }
  .cta-btns          { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .cta-btn-p, .cta-btn-s { justify-content: center !important; text-align: center !important; }

  /* PROCUREMENT */
  .steps-grid        { grid-template-columns: 1fr !important; gap: 12px !important; }
  .featured-tender   { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ft-h              { font-size: 1.4rem !important; }
  .cd-grid           { gap: 4px !important; }
  .cd-num            { font-size: 1.8rem !important; }
  .cd-cell           { padding: 10px 4px !important; }
  .tender-layout     { grid-template-columns: 1fr !important; }
  .t-side            { display: none !important; }
  .tender-card       { grid-template-columns: 1fr !important; gap: 14px !important; }
  .tc-cta            { align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; }
  .tc-days-left      { text-align: left !important; }
  .notice-grid       { grid-template-columns: 1fr !important; gap: 12px !important; }
  .contact-banner    { grid-template-columns: 1fr !important; gap: 18px !important; text-align: center !important; }
  .docs-grid         { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* RESOURCE CENTRE */
  .featured-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .gallery-grid      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .videos-grid       { grid-template-columns: 1fr !important; gap: 12px !important; }
  .facts-grid        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ANNUAL REPORT */
  .reports-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fs-grid           { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stats-inner       { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .progress-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* BENEFICIARY */
  .hero-stats        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .districts-grid    { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* CAREERS */
  .why-grid          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .value-grid        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .process-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* COMMUNITY DEVELOPMENT */
  .rev-wrap          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .video-wrap        { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bursary-wrap      { grid-template-columns: 1fr !important; gap: 24px !important; }
  .featured-proj     { grid-template-columns: 1fr !important; }
  .fp-img            { min-height: 240px !important; }
  .projects-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .devtypes-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .partners-grid     { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* COMMUNITY BENEFITS */
  .fund-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bursary-grid      { grid-template-columns: 1fr !important; gap: 20px !important; }
  .agri-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .agri-img-wrap     { order: 1 !important; }
  .agri-content      { order: 2 !important; }
  .ts-grid           { grid-template-columns: 1fr !important; gap: 12px !important; }
  .app-grid          { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .app-grid::before  { display: none !important; }
  .lease-grid        { grid-template-columns: 1fr !important; gap: 10px !important; }
  .testimonials-section { padding: 40px 16px !important; }

  /* CONTACT */
  .info-cards        { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .channels-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .contact-main      { grid-template-columns: 1fr !important; gap: 20px !important; }
  .map-inner         { grid-template-columns: 1fr !important; }
  .map-embed         { height: 240px !important; }
  .form-wrap         { padding: 24px 16px !important; border-radius: 14px !important; }
  .faq-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* FAQ */
  .faq-layout        { grid-template-columns: 1fr !important; gap: 20px !important; }
  .faq-side          { position: static !important; top: auto !important; }
  .step-cards        { grid-template-columns: 1fr !important; gap: 12px !important; }
  .doc-checklist     { grid-template-columns: 1fr !important; gap: 8px !important; }
  .project-types     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .info-panel        { grid-template-columns: 1fr !important; gap: 16px !important; }
  .action-cards      { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* NEWS & EVENTS */
  .featured-card     { grid-template-columns: 1fr !important; }
  .fc-img            { min-height: 220px !important; height: 220px !important; }
  .fc-body           { padding: 24px 20px !important; }
  .fc-title          { font-size: 1.3rem !important; }
  .yt-section        { padding: 40px 16px !important; }
  .yt-grid           { grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 24px !important; }
  .yt-h              { font-size: 1.6rem !important; }
  .yt-stats          { grid-template-columns: 1fr 1fr !important; }

  /* LEADERSHIP */
  .trustee-card      { grid-template-columns: 1fr !important; }
  .tc-img-wrap       { height: 440px !important; min-height: 440px !important; background: url('../assets/images/photos/raja.jpg') center 55% / cover no-repeat !important; filter: brightness(.9) !important; }
  .tc-img-wrap img   { display: none !important; }
  .tc-img-wrap::after { background: linear-gradient(to bottom, transparent 40%, var(--g4) 100%) !important; }
  .tc-body           { padding: 28px 20px !important; }
  .board-grid        { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .mc-img-wrap       { width: 140px !important; height: 140px !important; }
  .sec-grid          { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .sc-img-wrap       { width: 120px !important; height: 120px !important; }

  /* REAL ESTATE */
  .dept-grid         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .timeline-strip    { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* RURAL ECONOMIC */
  .dev-grid          { grid-template-columns: 1fr !important; gap: 12px !important; }
  .feat-project      { grid-template-columns: 1fr !important; gap: 18px !important; }
  .flow-grid         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .partner-grid      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* CONTACT SECTION (index) */
  .contact-section   { padding: 40px 16px !important; }

  /* ── TOUCH TARGETS ── */
  .cf-btn, .nl-btn, .mob-cta,
  .btn-bc-p, .btn-bc-s,
  .cta-btn-p, .cta-btn-s,
  .fc-readmore, .yt-btn, .mi-dir-btn { min-height: 48px !important; }
  .btn-hero-p, .btn-hero-s           { min-height: 40px !important; }

  /* ── INPUTS — prevent iOS zoom ── */
  input, select, textarea { font-size: 16px !important; }
}

/* ══════════════════════════════════════════════════════════
   480px — Small phones
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  nav                { height: 56px !important; padding: 0 12px !important; }
  .mob-nav           { top: 56px !important; z-index: 300 !important; background: #ffffff !important; }

  .section, .section-alt { padding: 32px 14px !important; }
  .page-hero-content,
  .ph-content        { padding: 28px 14px 22px !important; }
  .ph-h1, .page-hero h1 { font-size: 1.65rem !important; }
  .sec-h2            { font-size: 1.4rem !important; }

  /* Trustee image on small phones */
  .trustee-img-wrap  { height: 380px !important; min-height: 380px !important; background-position: center 55% !important; }

  /* Collapse 2-col to 1-col on tiny screens */
  .values-grid       { grid-template-columns: 1fr !important; }
  .ia-stat-row       { grid-template-columns: 1fr !important; }
  .fw-grid           { grid-template-columns: 1fr !important; }
  .app-grid          { grid-template-columns: 1fr !important; }
  .board-grid        { grid-template-columns: 1fr !important; }
  .hero-stats        { grid-template-columns: 1fr 1fr !important; }
  .stats-bar         { grid-template-columns: 1fr !important; }
  .impact-grid       { grid-template-columns: 1fr 1fr !important; }
  .footer-grid       { grid-template-columns: 1fr !important; }
  .gallery-grid      { grid-template-columns: 1fr !important; }
  .facts-grid        { grid-template-columns: 1fr !important; }
  .docs-grid         { grid-template-columns: 1fr !important; }
  .fs-grid           { grid-template-columns: 1fr !important; }
  .stats-strip       { grid-template-columns: 1fr !important; }
  .stats-inner       { grid-template-columns: 1fr 1fr !important; }
  .value-grid        { grid-template-columns: 1fr !important; }
  .why-grid          { grid-template-columns: 1fr !important; }
  .devtypes-grid     { grid-template-columns: 1fr !important; }
  .partners-grid     { grid-template-columns: 1fr !important; }
  .partner-grid      { grid-template-columns: 1fr !important; }
  .sec-grid          { grid-template-columns: 1fr !important; }
  .board-grid        { grid-template-columns: 1fr !important; }
  .yt-stats          { grid-template-columns: 1fr !important; }

  .bottom-cta        { padding: 26px 14px !important; }
  .cta-banner        { padding: 28px 14px !important; }
  .footer-bottom-links { gap: 8px !important; }
  .bc-h              { font-size: 1.4rem !important; }
  .cta-h             { font-size: 1.4rem !important; }
  .nl-h              { font-size: 1.5rem !important; }
  .trustee-heading   { font-size: 1.5rem !important; }
  .tl-row            { grid-template-columns: 1fr !important; gap: 6px !important; }
  .audit-inner       { grid-template-columns: 1fr 1fr !important; }
  .breadcrumb        { font-size: 11px !important; }
  .fb-tag            { font-size: 11px !important; padding: 7px 8px !important; }
  .filter-bar        { gap: 6px !important; padding: 10px 14px !important; }
  .fc-img            { height: 180px !important; min-height: 180px !important; }
  .impact-num        { font-size: 2.2rem !important; }
  .btn-hero-p, .btn-hero-s { padding: 9px 18px !important; font-size: 12px !important; }
}