/* IIEWS — phone-only refinements.
   Everything here is inside a max-width:480px query, so desktop and tablet
   rendering is untouched. !important is required because the pages set their
   responsive layout through inline styles from JS. */

@media (max-width: 480px) {

  /* ---------- no horizontal scrolling ---------- */
  html { overflow-x: hidden; max-width: 100%; }
  body { overflow-x: hidden; max-width: 100%; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { overflow-x: auto; }
  /* index.html's district table (#districttable, built by JS — buildTable())
     needed 437px for its 3 columns (District/Beneficiaries/Projects) in a
     ~350px box. The table rule above makes that scrollable rather than
     clipped, but a table that opens already scrolled-off with no visible
     scrollbar just looks cut off ("PROJECTS" reads as "PI"), and there's no
     affordance telling a phone user to swipe it sideways. Smaller padding
     and text, and letting the header labels wrap instead of forcing
     white-space:nowrap, gets all 3 columns to fit without scrolling at all
     — the more legible outcome, and it's how every other table-like grid on
     the site already handles narrow columns. #districttable is unique to
     index.html. */
  #districttable th, #districttable td { padding: 8px 6px !important; font-size: 13px !important; }
  #districttable th { white-space: normal !important; font-size: 11px !important; line-height: 1.25 !important; }
  #districttable caption { padding: 12px 10px 4px !important; font-size: 13px !important; }
  /* keep horizontal marquees from widening the page */
  div:has(> [class*="iiews-track"]) { overflow: hidden !important; }

  /* ---------- readable text, no zooming ---------- */
  [style*="font-size:12.5px"] { font-size: 14px !important; }
  [style*="font-size:13px"] { font-size: 14.5px !important; }
  [style*="font-size:13.5px"] { font-size: 14.5px !important; }
  [style*="font-size:14px"] { font-size: 14.5px !important; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  /* every page's hero <h1> uses the same serif display font at a clamp()
     whose vw component is negligible below ~900px, so it always renders at
     its desktop-authored minimum (35–43px) — sized for a tablet-width
     column, not a ~280–390px phone one. On these headlines (46–74
     characters) that wraps to 5–6 short lines and inflates the whole hero.
     One phone-appropriate size, tuned to the longest headline on the site
     (index.html), keeps every hero to 3–4 lines. */
  h1 { font-size: 32px !important; line-height: 1.18 !important; }
  /* careers/contact/impact hero intro paragraphs clamp to a 22.3px floor
     (tuned for tablet-plus columns) — on a ~150–170-character sentence in a
     ~335px column that runs to 7–8 lines and is the single biggest
     contributor to those three pages' oversized hero. Matching the 18–19px
     used for the equivalent intro paragraph on every other page keeps the
     hero readable in 4–5 lines instead. */
  [style*="font-size:clamp(22.3px,1.8vw,25px)"] { font-size: 18px !important; }
  [style*="font-size:clamp(22.3px,1.6vw,25px)"] { font-size: 18px !important; }
  /* careers/contact hero CTA pairs ("Send us a message" / "Call …") sit at
     20px text with 15px/26px padding — sized for the wide dark hero band on
     desktop. Both buttons together don't fit one row under ~380px, so they
     stack two-deep at ~65px each. A slightly smaller, still comfortably
     tappable (44px+) size trims that without losing the pill-button feel. */
  [style*="padding:15px 26px;border-radius:6px;font-weight:600;font-size:20px"] { padding: 13px 22px !important; font-size: 16.5px !important; }
  /* contact.html's #heroquick strip (head office / hours / email) repeats
     the same info shown again lower on the page in full-size cards, so it
     doesn't need its own large 24.4px value text — that size wraps some
     values to 2 lines inside the strip's own padding. Smaller keeps every
     value to one line without dropping any information. */
  [style*="font-size:clamp(22.3px,1.7vw,24.4px)"] { font-size: 17px !important; }
  /* impact.html's blob-shaped hero photo sits at a near-square 1.06:1 ratio
     — fine beside the text on desktop, but at full column width on a phone
     that alone is ~316px tall, the single largest piece of the hero.
     Flattening it keeps the same organic shape, just proportioned for a
     narrow column instead of a half-width one. */
  #heroshape { aspect-ratio: 1.7/1 !important; }
  /* narrowing multi-column tiles down to 2–3 columns (below) exposes long
     uppercase single words — "COMMUNITY", "GOVERNMENT" — that previously
     had a full-width column to sit in. Let any word break rather than
     overflow its box and get clipped by the no-horizontal-scroll rule above. */
  body { overflow-wrap: break-word; }

  /* ---------- header: slimmer, hamburger always reachable ---------- */
  /* Everything in this block is shared markup/CSS across every page's
     header, so it stays exactly as it already was — unchanged by this pass. */
  #siteheader { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #FFFFFF !important; }
  #utilbar > div { min-height: 34px !important; padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  #langtoggle button { min-height: 40px !important; padding: 9px 13px !important; }
  #headerbar { min-height: 62px !important; padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important; }
  /* logo: keep emblem + IIEWS, drop the long society name (it is in the footer) */
  a[aria-label="IIEWS home"] { gap: 10px !important; min-width: 0 !important; flex-shrink: 1 !important; }
  a[aria-label="IIEWS home"] > span:first-child { width: 44px !important; height: 44px !important; }
  a[aria-label="IIEWS home"] > span:first-child img { width: 34px !important; height: 34px !important; }
  a[aria-label="IIEWS home"] > span:last-child > span:last-child { display: none !important; }
  a[aria-label="IIEWS home"] > span:last-child > span:first-child { font-size: 18px !important; }
  /* the pill CTA stays, just compact enough to sit beside the hamburger */
  #headerbar > div:last-child { gap: 8px !important; }
  #headerbar > div:last-child > a { padding: 11px 13px !important; font-size: 14px !important; border-radius: 24px !important; white-space: nowrap !important; flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #drawerbtn { width: 48px !important; height: 48px !important; font-size: 22px !important; flex-shrink: 0 !important; }
  /* very narrow phones: the header pill would crowd out the hamburger.
     It is duplicated in the menu sheet and the footer, so drop it there. */
  @media (max-width: 400px) {
    #headerbar > div:last-child > a { display: none !important; }
  }

  /* ---------- homepage only: hamburger left, logo centered ---------- */
  /* #headerbar is the shared header markup on 6 of the 8 pages, so a plain
     #headerbar rule here would restyle every one of them. #heroslides only
     exists in index.html's hero, so gating every rule below behind
     body:has(#heroslides) keeps this restructure on the home page only —
     every other page keeps the logo-left/hamburger-right header above,
     completely unchanged. The Portal Login pill is dropped here (it is
     duplicated in the menu sheet), so its wrapper resolves to just the
     hamburger; laying it out as a 3-column grid — hamburger, logo, and an
     empty spacer matching the hamburger's own width — centers the logo
     for real, rather than just left-aligning it in the remaining space. */
  body:has(#heroslides) #headerbar { display: grid !important; grid-template-columns: 48px 1fr 48px !important; align-items: center !important; gap: 8px !important; }
  body:has(#heroslides) #headerbar > nav#mainnav { display: none !important; }
  body:has(#heroslides) #headerbar > a[aria-label="IIEWS home"] { grid-column: 2 !important; justify-self: center !important; }
  body:has(#heroslides) #headerbar > div:last-child { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  body:has(#heroslides) #headerbar > div:last-child > a { display: none !important; }

  /* programme detail pages: header has no id — let its two links wrap under the logo */
  header:not([id]) > div:first-child { flex-wrap: wrap !important; min-height: 0 !important; padding: 10px 16px !important; gap: 10px 12px !important; }
  header:not([id]) > div:first-child > div:last-child { width: 100% !important; justify-content: space-between !important; gap: 10px !important; }
  header:not([id]) > div:first-child > div:last-child > a { font-size: 14px !important; padding: 11px 14px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; }

  /* About page section tabs: swipeable instead of overflowing */
  #subnavinner { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #subnavinner::-webkit-scrollbar { display: none; }
  #subnavinner > div { flex: 0 0 auto !important; }
  #subnavinner button { min-height: 46px !important; white-space: nowrap !important; }

  /* ---------- one-handed menu: bottom sheet ---------- */
  #drawer {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    z-index: 95 !important;
    max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid #D8E4F0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -18px 44px -18px rgba(12, 42, 63, .5) !important;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }
  #drawer > div { gap: 0 !important; font-size: 17.5px !important; }
  #drawer a {
    display: flex !important; align-items: center !important;
    min-height: 52px !important; padding: 12px 6px !important;
  }
  #drawer a:last-child { margin-top: 8px !important; }

  /* ---------- touch-friendly controls ---------- */
  #subbar > div { padding-left: 16px !important; padding-right: 16px !important; }
  #subbar button { min-height: 46px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 48px !important; width: 100% !important; font-size: 17px !important; }
  input[type="file"] { max-width: 100% !important; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px !important; min-height: 22px !important; }
  textarea { min-height: 130px !important; }
  #yearsel { min-height: 48px !important; }
  input[type="search"] { min-height: 44px !important; }
  button[id], #seeallpartners { min-height: 44px !important; }
  #langtoggle, #drawerbtn, #subbar button, #drawer a { -webkit-tap-highlight-color: rgba(27, 92, 144, .12); }

  /* footer links: taller rows, easier to hit */
  footer a { min-height: 42px !important; display: inline-flex !important; align-items: center !important; }
  footer summary { min-height: 40px !important; }

  /* inline contact + breadcrumb + card links: comfortable tap height */
  #utilbar a:not([data-utilhide]) { min-height: 34px !important; display: inline-flex !important; align-items: center !important; }
  #utilbar [data-utilhide] { display: none !important; }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 40px !important; display: inline-flex !important; align-items: center !important; }
  [aria-label="Breadcrumb"] a, nav[aria-label*="readcrumb"] a { min-height: 40px !important; display: inline-flex !important; align-items: center !important; }
  article a { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* ---------- hero: let the photo read through, keep text legible ---------- */
  /* #herowash is a left-to-right wash authored for desktop's 50/50 text/photo
     split, so its left side (where desktop's text column sits) goes up to
     .9 opacity. On a phone #herocontent spans nearly the full width, so
     that same .9 peak now sits under the headline and the photo behind it
     reads as pale and washed-out instead of the vivid, lightly-overlaid
     photo the reference design shows. Roughly halving each stop keeps the
     photo visible while still lightening it enough for the text to sit on
     top of it, and the added text-shadow below keeps the headline and intro
     paragraph readable now that less of the photo is masked underneath them. */
  /* careers.html, contact.html and impact.html also use id="hero" for their
     own (unrelated, dark-photo) hero bands, so everything here is scoped
     through #herocontent — an id that, inside #hero, only exists on
     index.html (about.html has an element with the same id, but it sits
     inside #pagehero, not #hero) — to keep this off those other pages. */
  #hero #herowash { background: linear-gradient(96deg,rgba(228,239,249,.48) 0%,rgba(230,241,250,.42) 32%,rgba(232,243,250,.26) 52%,rgba(233,244,250,.1) 74%,rgba(233,244,250,0) 92%) !important; }
  #hero #herocontent h1, #hero #herocontent p { text-shadow: 0 1px 3px rgba(255,255,255,.55), 0 2px 16px rgba(255,255,255,.5); }
  #hero #herocontent [style*="letter-spacing:.13em"] { text-shadow: 0 1px 6px rgba(255,255,255,.6); }
  /* The hero rotates through 3 photos. The first (hero-ddugky-placement.jpg)
     is a normal portrait-ish crop and reads cleanly behind the headline at
     any width. The other two are a problem specifically on phones: slide 2
     (hero-led-making-wecd.jpg) has a printed Hindi banner in the background
     that competes with the headline, and slide 3 (hero-digital-literacy.jpg)
     is a very wide, short source photo (1280×493) — object-fit:cover has to
     zoom in hard to fill the tall, narrow phone hero, landing on an
     illegible close-up of certificates and raised arms. Both look fine in
     desktop's short, wide hero box; neither works once the box is phone-
     shaped. Rather than fight each crop with object-position, freeze the
     rotation on the one slide that already works — this is the "let the
     existing hero image read naturally" fix, not a new design. The JS
     crossfade keeps running underneath (harmless); it only ever changes
     opacity, and !important here always wins over that inline style. The
     dots are hidden too since with the photo no longer advancing they'd be
     showing progress that isn't happening. */
  #hero #heroslides img:not([data-slide="0"]) { opacity: 0 !important; }
  #hero #herofoot #dots { display: none !important; }

  /* ---------- less dead space ---------- */
  /* #herocontent is also about.html's id (inside #pagehero, which already
     reserves its own top padding for the header) — scope this to index.html's
     hero specifically (#hero #herocontent) so it doesn't stack a second
     116px on top of about.html's already-correct, JS-computed padding. */
  #hero #herocontent { padding-top: 104px !important; padding-bottom: 28px !important; }
  /* #herofoot held only the carousel dots, now hidden above since the hero
     is frozen on one slide — collapse its margin so it doesn't leave a
     blank gap under the CTA buttons where the dots used to be. */
  #herofoot { margin-top: 0 !important; }
  #footgrid { gap: 26px !important; }

  /* ---------- homepage only: tighter section rhythm ---------- */
  /* Every section below has a desktop-authored clamp() (or fixed) top/bottom
     padding sized for a tall viewport — 44–100px per edge, often two such
     edges meeting back-to-back between adjacent sections — which is the
     main reason the phone version needed "several screen lengths" of blank
     space before the next real content appeared. None of this is touched by
     the page's own resize script (that only ever rewrites grid-template-
     columns, never padding), so it needs a phone-specific override here.
     Values are cut by roughly half, not to zero, so sections still read as
     separate rather than running together. #credentials, #intro, #milerail,
     #valuestrip, #reach, #voicegrid and #funders all have ids that are
     unique to index.html, so they're safe to target directly; #programmes,
     #projects and #partner reuse the same id on programmes.html (#partner
     also on about.html), so those three are gated behind
     body:has(#heroslides) — an element that only exists on index.html — to
     keep the other pages' sections exactly as they were. */
  #credentials > div { padding-top: 30px !important; padding-bottom: 14px !important; }
  #intro { padding-top: 28px !important; padding-bottom: 34px !important; }
  #milerail { margin-top: 20px !important; padding-top: 18px !important; padding-bottom: 18px !important; }
  #valuestrip { padding-top: 18px !important; padding-bottom: 18px !important; }
  #reach { padding-top: 28px !important; padding-bottom: 34px !important; }
  body:has(#heroslides) #programmes { padding-top: 32px !important; padding-bottom: 32px !important; }
  #voicegrid { padding-top: 30px !important; padding-bottom: 30px !important; }
  body:has(#heroslides) #projects { padding-top: 28px !important; padding-bottom: 28px !important; }
  #funders { padding-top: 26px !important; padding-bottom: 28px !important; }
  body:has(#heroslides) #partner { padding-top: 30px !important; padding-bottom: 34px !important; }

  /* ---------- homepage only: compact cards ---------- */
  /* The programme cards and the "work with us" action cards use fixed
     (non-clamp) padding that is comfortable on a wide desktop card but
     leaves noticeably more empty margin than the text needs once the card
     is stacked full-width on a phone. #proggrid's cards and #partneracts
     are both index.html-only ids/attributes. */
  [data-progcard] > span:last-child { padding: 16px 16px 18px !important; }
  #partneracts > a { padding: 18px 18px !important; }
  /* Every grid/split-panel layout on the site (hero splits, stat tiles,
     team photos, credential badges, the milestone timeline, sticky filter
     rail, etc.) is already rebuilt per-breakpoint by each page's own inline
     script (search "gridTemplateColumns" in each page's <script>), which
     runs on load and on resize and already collapses everything sensibly
     well above phone width — with one exception, see programmes.html's
     project modal below. Only the #hero section's own forced min-height is
     never touched by that script — it is pure vh-based desktop framing
     baked into the section itself — so it alone needs a phone override to
     stop the hero eating the entire first screen before any content shows. */
  #hero { min-height: 0 !important; }

  /* ---------- programmes.html: project detail modal ---------- */
  /* This modal (id="mdhead"/"mdbody"/"mdstats"/"mdgal") isn't in the page at
     load — tapping a project's "View Details" renders it from a <template>
     into the page's own tiny client-side templating system. The resize
     script that collapses every other grid on the site only runs once at
     load and again on window "resize"; it never re-runs when this template
     is (re)rendered, so the modal is stuck at its desktop column counts no
     matter how narrow the screen is. Concretely this squeezed the project
     title into a ~50%-width column (wrapping a normal-length title into 5–6
     jagged lines) and split each of the four "9,000 / Beneficiaries"-style
     stats into its own ~90px column, force-breaking every word letter by
     letter ("BEN/EFIC/IARI/ES"). Forcing the same column counts the script
     would have set below its own breakpoints (mdhead/mdbody 1 column below
     860px, mdstats/mdgal 2 columns below 620px) fixes it without touching
     that templating code. All four ids are unique to programmes.html. */
  #mdhead, #mdbody { grid-template-columns: minmax(0,1fr) !important; }
  #mdstats, #mdgal { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  /* ---------- index.html: large collage photo caption blocks taps ---------- */
  /* The 3 small thumbnails in the "Who we are" collage already set
     pointer-events:none on their hover captions so a tap reaches the photo
     underneath. The one large photo above them (#introhero) has the same
     kind of caption bar, permanently visible, but without that same
     pointer-events:none — so a tap anywhere in its bottom ~25% (where the
     location name and description sit) was captured by the caption instead
     of reaching the image, silently failing to open the lightbox. Confirmed
     with a real tap simulation, not just a visual read. #introhero is
     unique to index.html. */
  #introhero figcaption { pointer-events: none !important; }

  /* ---------- programme hero stat tiles (ddu-gky.html / scp-vocational-training.html) ---------- */
  /* The 2×2 "950 / Beneficiaries" stat grid gives each label 20px of padding
     on both sides — fine on desktop, but at phone width that leaves the
     "Sanctioned phases" label ~0.5px too narrow for its own first word, so
     overflow-wrap force-breaks "SANCTIONED" into "SANCTIONE"/"D PHASES"
     instead of wrapping at the natural word gap. A little less padding
     gives every label room to wrap on whole words. */
  div[style*="background:#0E3352;padding:20px"] { padding: 16px 10px !important; }

  /* ---------- impact.html "success stories" cards ---------- */
  /* The page's own script already treats anything below 1180px as "stacked"
     for the media padding/height (search "const stacked" in impact.html),
     but the card's own grid-template-columns only stacks between 760–1179px
     and reverts to a cramped image+text split below 760px — squeezing the
     text column to ~195px, which breaks category words like "Agripreneurship"
     into three jagged lines. Stack it on phones too, matching the padding
     and image-height rules the script already applies at this width. */
  [data-card] { grid-template-columns: minmax(0,1fr) !important; }
  /* The Raj Verma story-card photo is a portrait crop shown with
     object-fit:contain — correct on desktop, where its column is tall and
     narrow to match. Stacking the card above (previous rule) puts it in a
     short, wide 230px band instead, so "contain" now pillarboxes it with
     visible empty margins either side. The other two story photos already
     use object-fit:cover; matching that here fills the same band cleanly,
     the same way it already does for them. */
  img[src*="raj-verma-portrait"] { object-fit: cover !important; }

  /* ---------- images: responsive, never distorted ---------- */
  img { max-width: 100%; }
  img:not([style*="position:absolute"]):not([style*="position: absolute"]) { height: auto; }
}