/* ===========================================================================
   IHF RESPONSIVE LAYER  ·  css/ihf-responsive.css
   ---------------------------------------------------------------------------
   A safety net for the pages written before the design system existed.

   It does not restyle anything. It only corrects the handful of things that
   break a layout on a narrow screen: fixed widths wider than the phone, tables
   that force sideways scrolling, images without a maximum width, and text that
   is too small to read comfortably.

   Loaded after the page's own styling, so the page still wins on anything
   deliberate. Safe to leave in place as pages are gradually moved onto the
   design system.
   =========================================================================== */

/* ── 1. Nothing may be wider than the screen ────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, embed, object, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Tables were the usual cause of sideways scrolling. */
table { max-width: 100%; }

/* Long addresses and unbroken words no longer push the page sideways. */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, a, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ── 2. Small screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Anything given a fixed pixel width collapses to the available space. */
  [style*="width:"][style*="px"],
  [width] {
    max-width: 100% !important;
  }

  /* Multi column layouts become single column. */
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* Wide tables scroll inside their own box rather than the whole page. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Side by side sections stack. */
  .row, .columns, .two-col, .three-col, .grid-2, .grid-3 {
    display: block !important;
  }
  .col, .column, .col-6, .col-4, .col-3 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 640px) {
  /* Comfortable reading sizes. Never below 16px on inputs, because anything
     smaller makes iOS zoom the page when the field is tapped. */
  body { font-size: 15.5px; line-height: 1.7; }
  h1 { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.35rem, 5.6vw, 1.75rem) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(1.12rem, 4.6vw, 1.35rem) !important; }

  input, select, textarea, button { font-size: 16px !important; }

  /* Generous padding on small screens wastes the little space there is. */
  section, .section, .container, .wrap, main > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Buttons become full width so they are easy to hit. */
  .btn, .ihf-btn, button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
  .btn + .btn, .ihf-btn + .ihf-btn { margin-top: 9px; }

  /* Anything absolutely positioned off to one side is brought back. */
  [style*="position:absolute"], [style*="position: absolute"] {
    max-width: 100vw;
  }
}

/* ── 3. Touch targets ───────────────────────────────────────────────────── */
@media (pointer: coarse) {
  a, button, input[type="submit"], input[type="button"], .btn, .ihf-btn {
    min-height: 44px;
  }
  a.inline, p a, li a, .prose a { min-height: 0; }   /* not links inside text */
}

/* ── 4. Respect the reader ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 5. Printing ────────────────────────────────────────────────────────── */
@media print {
  nav, header nav, .ihf-nav, footer, .ihf-footer,
  .btn, .ihf-btn, .no-print { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ── Scroll reveal safety net ────────────────────────────────────────────────
   Sections marked .sr start at opacity 0 and are revealed by JavaScript. If
   that script ever fails to load, the whole page would appear blank even
   though the content is there. This makes the content visible again after a
   moment, so a scripting problem can never hide the site.
   -------------------------------------------------------------------------- */
@keyframes ihf-sr-fallback { to { opacity: 1; transform: none; } }
.sr { animation: ihf-sr-fallback .01s linear 1.2s forwards; }
.sr.in, .sr.is-visible, .sr.revealed { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sr { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ===========================================================================
   PERFORMANCE
   ---------------------------------------------------------------------------
   Small, safe wins. Images are told their aspect ratio so the page does not
   jump about as they arrive, and offscreen sections are skipped during layout
   until they are needed.
   =========================================================================== */
img { content-visibility: auto; }
.gal-item, .person, .project-card, .media-tile {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}
.hero-slide:not(.is-active) { content-visibility: hidden; }