/* 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; }
  /* keep horizontal marquees from widening the page */
  div:has(> [class*="iiews-track"]) { overflow: hidden !important; }

  /* ---------- phone type scale ----------
     Root cause of the "too big on mobile" look: every heading is sized with
     clamp(min, vw, max) where the MIN is a DESKTOP minimum (40px h1, 19px
     body). On a 360-400px screen the vw term never wins, so the phone gets
     the desktop floor. These rules re-floor the whole scale for phones only;
     they are keyed on the first digit of the clamp min, so they cover every
     page and any size added later. */
  [style*="font-size:clamp(4"] { font-size: clamp(27px, 7.6vw, 34px) !important; }
  [style*="font-size:clamp(3"] { font-size: clamp(23px, 6.4vw, 28px) !important; }
  [style*="font-size:clamp(2"] { font-size: clamp(19px, 5.2vw, 23px) !important; }
  [style*="font-size:clamp(1"] { font-size: 17px !important; }
  h1[style*="clamp("] { line-height: 1.12 !important; letter-spacing: -.012em !important; }
  h2[style*="clamp("], h3[style*="clamp("] { line-height: 1.16 !important; }

  /* oversized fixed sizes: stat figures, decorative numerals, quote marks */
  [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size:46px"] { font-size: 30px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }
  [style*="font-size:34px"] { font-size: 25px !important; }
  [style*="font-size:31px"] { font-size: 24px !important; }
  [style*="font-size:27.1px"] { font-size: 22px !important; }
  [style*="font-size:26px"] { font-size: 21px !important; }

  /* body copy down to a real phone reading size */
  [style*="font-size:21px"], [style*="font-size:20.6px"], [style*="font-size:20px"],
  [style*="font-size:19.5px"], [style*="font-size:19px"] { font-size: 16.5px !important; }
  [style*="font-size:18.5px"], [style*="font-size:18px"], [style*="font-size:17.5px"] { font-size: 16px !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; }

  /* ---------- header: one compact 56px row + a 30px utility strip ----------
     Measured before: 109-199px tall depending on page, because the long
     society name wrapped to three lines and the util row could wrap. */
  #siteheader { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #FFFFFF !important; }
  #utilbar > div { min-height: 40px !important; padding-left: 16px !important; padding-right: 16px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  #langtoggle button { min-height: 40px !important; padding: 9px 12px !important; }
  #headerbar { min-height: 56px !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).
     Both header variants mark that line with max-width:235px. */
  a[aria-label="IIEWS home"] { gap: 10px !important; min-width: 0 !important; flex-shrink: 1 !important; min-height: 44px !important; }
  a[aria-label="IIEWS home"] > span:first-child { width: 38px !important; height: 38px !important; }
  a[aria-label="IIEWS home"] > span:first-child img { width: 30px !important; height: 30px !important; }
  [data-headsub], a[aria-label="IIEWS home"] span[style*="max-width:235px"] { display: none !important; }
  [data-headtext], a[aria-label="IIEWS home"] > span:last-child > span:first-child { font-size: 17px !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: 44px !important; height: 44px !important; font-size: 21px !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; }
  }

  /* programme detail pages: header has no id — keep it on one 56px row */
  header:not([id]) > div:first-child { flex-wrap: nowrap !important; min-height: 56px !important; padding: 0 16px !important; gap: 10px !important; }
  header:not([id]) > div:first-child > div:last-child { width: auto !important; gap: 6px !important; flex-shrink: 1 !important; min-width: 0 !important; }
  /* the "Portal Login" pill cannot fit beside the back link at phone widths and
     was overflowing the viewport by ~47px. It is repeated in the footer. */
  header:not([id]) > div:first-child > div:last-child > a.x2 { display: none !important; }
  header:not([id]) > div:first-child > div:last-child > a { font-size: 12.5px !important; letter-spacing: .04em !important; padding: 10px 8px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !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: 44px !important; display: inline-flex !important; align-items: center !important; }
  #utilbar [data-utilhide] { display: none !important; }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  /* impact story cards: the button carries inline padding:0, so its box was
     only the 21px line box. Give it a real 44px target. */
  [data-cardbtn] { min-height: 44px !important; padding: 10px 0 !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; min-height: 44px !important; }
  article a:not([style*="display:block"]):not([style*="display:flex"]):not([style*="display:grid"]) { display: inline-flex !important; align-items: center !important; }

  /* ---------- hero: compact, CTA above the fold ----------
     Measured before: 676-1198px tall per page. The inner-page heroes carry
     desktop min-heights (520-560px floors) a phone can never justify, and
     their top padding was sized to clear a 141px desktop header. The header
     is now 97px, so the clearance comes down with it. */
  /* ---------- photo heroes: short landscape banner, copy below ----------
     On a phone a full-bleed hero photo behaves like a second screen of
     scroll and crops to a portrait sliver. Here the photograph becomes a
     short horizontal band with only the eyebrow and headline on it; the
     paragraph and buttons sit below on a solid sheet, which also crops the
     band to the height of the text above it. Scoped by aria-label so the
     photo-less heroes (contact, impact) are untouched. */

  /* home */
  #hero[aria-label="Introduction"] {
    display: block !important;
    min-height: 0 !important;
    padding-top: 103px !important;
    background: #FFFFFF !important;
  }
  #heroslides, #herowash {
    position: absolute !important;
    inset: 103px 0 auto 0 !important;
    height: 300px !important;
  }
  #herowash {
    display: block !important;
    background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.66) 60%, rgba(255,255,255,.80) 100%) !important;
  }
  #hero[aria-label="Introduction"] > div[aria-hidden="true"]:not(#heroslides):not(#herowash) { display: none !important; }
  #herocontent { padding: 0 !important; position: relative !important; z-index: 2 !important; }
  #herocontent > div:first-child { max-width: none !important; }
  #herocontent > div:first-child > div:first-child { padding: 18px 20px 0 !important; margin-bottom: 6px !important; }
  #hero h1 { font-size: 21px !important; line-height: 1.18 !important; margin: 0 !important; padding: 0 20px 20px !important; }
  /* the white sheet starts at the headline's end and crops the photograph */
  #hero h1 ~ * { background: #FFFFFF !important; position: relative !important; }
  #hero h1 + p { font-size: 16px !important; margin: 0 !important; padding: 20px 20px 0 !important; }
  #herocontent > div:first-child > div:last-child { padding: 20px 20px 0 !important; }
  #herofoot { margin: 0 !important; padding: 20px !important; gap: 12px !important; }
  /* eyebrow: fits on one line instead of wrapping after "SINCE" */
  #herocontent span[style*="letter-spacing:.13em"] { font-size: 13px !important; letter-spacing: .1em !important; }

  /* careers: same idea, but the copy continues on the brand navy because the
     type in this hero is white */
  #hero[aria-label="Careers at IIEWS"] { min-height: 0 !important; }
  #herostage, #hero[aria-label="Careers at IIEWS"] > div[aria-hidden="true"]:not(#herostage) {
    position: absolute !important;
    inset: 103px 0 auto 0 !important;
    height: 300px !important;
  }
  #herobody h1 { padding-bottom: 20px !important; }
  #hero[aria-label="Careers at IIEWS"] #herobody h1 ~ * {
    background: #0C2A3F !important;
    position: relative !important;
    /* #herobody carries a 20px gutter, so the sheet has to bleed back out
       to the edges or the photograph shows down both sides of it */
    margin-left: -20px !important; margin-right: -20px !important;
    padding-left: 20px !important; padding-right: 20px !important;
  }

  #pagehero { min-height: 0 !important; padding-top: 100px !important; }
  /* about: the stacked hero photograph is set to 280px by the page's own
     script; match the 200px banner the other pages now use */
  #herophoto { height: 200px !important; }
  /* about: #herocontent sits below the hero photograph, so it needs no clearance */
  #pagehero #herocontent { padding-top: 24px !important; }
  #herobody { padding-top: 108px !important; padding-bottom: 28px !important; }
  #herofoot a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  #heroquick a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  /* hero slider dots are a 4px-tall bar: keep the look, give a 40px hit area */
  #dots button { padding: 18px 0 !important; height: 40px !important; background-clip: content-box !important; }

  /* ---------- section rhythm ----------
     Every section's vertical padding is clamp(40-66px, Xvw, ...), so a phone
     gets the desktop floor twice over: ~110px of air between sections.
     Only the vertical axis is touched, so horizontal gutters are preserved. */
  [style*="padding:clamp(4"], [style*="padding:clamp(5"], [style*="padding:clamp(6"] {
    padding-top: 36px !important; padding-bottom: 36px !important;
  }

  /* ---------- less dead space ---------- */
  #footgrid { gap: 26px !important; }

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

  /* ---------- persistent bottom action bar (injected by mobile-nav.js) ---------- */
  #mobilebar {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid !important; grid-template-columns: repeat(4, 1fr);
    height: auto; min-height: 58px; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #FFFFFF; border-top: 1px solid #D8E4F0;
    box-shadow: 0 -6px 18px -14px rgba(12, 42, 63, .55);
    font-family: 'Inter', system-ui, sans-serif;
  }
  #mobilebar a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
    font-size: 13px !important; font-weight: 600; letter-spacing: .01em;
    color: #3A5570; text-decoration: none;
    -webkit-tap-highlight-color: rgba(27, 92, 144, .12);
  }
  #mobilebar a[data-current] { color: #123E63; box-shadow: inset 0 2px 0 0 #1B5C90; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  /* home: ongoing-projects announcement sits above the bottom bar, full gutter width */
  #ongoingnote { left: 12px !important; right: 12px !important; bottom: calc(58px + 12px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; }
  #ongoingnote a { flex: 1 1 auto; }

  /* ================= polish pass: 320-430px ================= */

  /* tap targets that measured under 44px */
  #langtoggle button { min-height: 44px !important; min-width: 44px !important; }
  #utilbar a:not([data-utilhide]) { min-width: 44px !important; justify-content: center !important; }
  footer a { min-height: 44px !important; }
  footer summary { min-height: 44px !important; }
  #dots button { height: 44px !important; padding: 20px 0 !important; }
  [aria-label="Breadcrumb"] a, nav[aria-label*="readcrumb"] a { min-height: 44px !important; }
  button.x9 { min-height: 44px !important; }
  /* underlined text CTAs ("See implemented projects →", "Browse all projects →") */
  a[style*="border-bottom:1px solid #C3D6E8"] { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding-bottom: 0 !important; }
  /* contact card links + social rows */
  a[href^="https://www.facebook"], a[href^="https://www.instagram"], a[href^="https://www.linkedin"],
  a[href="https://www.iiews.com"], a[href="careers.html"][style*="font-size:18px"] {
    display: inline-flex !important; align-items: center !important; min-height: 44px !important;
  }

  /* impact: hero illustration becomes a short photo band instead of a
     square blob below the copy (hero was ~950px tall at 320px) */
  #hero[aria-label="Our Impact"] #herogrid { gap: 22px !important; }
  #heroshape { aspect-ratio: auto !important; height: 200px !important; border-radius: 18px !important; }
  #hero[aria-label="Our Impact"] #herogrid [aria-hidden="true"][style*="border-radius:50%"] { display: none !important; }
  [data-decor] { display: none !important; }

  /* impact: story cards stack photo over text */
  #storycards article { grid-template-columns: 1fr !important; }
  #storycards [data-cardmedia] { padding: 16px 16px 0 !important; }
  #storycards [data-cardimgbox] { min-height: 190px !important; flex: 0 0 auto !important; }

  /* contact: desktop hero floor (520px) does not apply on a phone */
  #hero[aria-label="Contact IIEWS"] { min-height: 0 !important; }
  #hero[aria-label="Contact IIEWS"] #herobody { padding-bottom: 32px !important; }

  /* projects tab hero: three-photo collage becomes one 200px band */
  #pjhgrid { gap: 22px !important; }
  #pjhart { height: 200px !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
  #pjhart > div:not(:first-child) { display: none !important; }
  #pjhart > div:first-child { grid-column: auto !important; border-radius: 18px !important; }

  /* ongoing projects cards (programmes → projects) */
  #onggrid { gap: 18px !important; }
  #onggrid article > div:last-child { padding: 26px 18px 18px !important; }

  /* key projects grid: single column */
  #prjgrid { grid-template-columns: 1fr !important; }

  /* notification: slimmer on phones, never over the bottom bar */
  #ongoingnote a { gap: 10px !important; padding: 7px 6px 7px 8px !important; }
  #ongoingnote a > span:nth-child(2) { font-size: 14.5px !important; }
  #ongoingnote [data-arrow] { width: 30px !important; height: 30px !important; }
  @media (max-width: 350px) {
    #ongoingnote a > span:first-child { font-size: 0 !important; padding: 7px !important; gap: 0 !important; }
  }

  /* drawer: Our Work sub-links injected by mobile-nav.js */
  #drawer a[data-sublink] { min-height: 46px !important; padding-left: 22px !important; font-size: 16px !important; font-weight: 500 !important; color: #3A5570 !important; }
  a[href^="mailto:"], a[href^="tel:"] { min-height: 44px !important; }
  @media (min-width: 360px) { #ongoingnote a > span:nth-child(2) { white-space: nowrap !important; } }
}