/* ============================================================
   Responsive layer — iPhone and iPad first.

   The site is built from React inline style objects, which cannot
   carry media queries. Two properties of the design system make a
   pure-CSS responsive layer possible anyway:

   1. Inline styles reference `var(--token)`. Custom properties are
      resolved at computed-value time, so overriding the token in a
      media query re-scales every inline style that uses it — no
      !important, no specificity fight.
   2. Layout containers serialise their grid template into the style
      attribute, so `[style*="..."]` gives a precise hook for the
      handful of multi-column grids that must collapse.

   Breakpoints:
     <=767px   iPhone portrait + landscape        -> single column
     768-1023  iPad portrait                      -> two columns
     >=1024    iPad landscape + desktop           -> untouched
   ============================================================ */

/* ---------- Global iOS hygiene ---------- */

html {
  /* Stop iOS inflating body copy when an iPhone rotates to landscape. */
  -webkit-text-size-adjust: 100%;
  /* iOS Safari's rubber-band overscroll past the end of the page reveals
     the <html> background, not the last section's. The footer (the last
     section on every page) is var(--surface-brand-deep); without this,
     bouncing past it flashed the browser's default white. */
  background: var(--surface-brand-deep);
}

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

/* Portfolio client marks share one quiet stage so different source canvases
   read as one system. Multiply blends opaque white source backgrounds into
   the stage without changing or replacing the supplied marks. */
.portfolio-client-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.portfolio-client-tile {
  min-width: 0;
}

.portfolio-logo-stage,
.portfolio-project-logo-stage,
.portfolio-detail-logo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.portfolio-logo-stage {
  width: min(100%, 168px);
  height: 58px;
  padding: 9px 18px;
}

.portfolio-project-logo-stage {
  width: 176px;
  min-height: 58px;
  padding: 8px 16px;
  flex: 0 1 176px;
}

.portfolio-detail-logo-stage {
  width: 220px;
  min-height: 66px;
  padding: 10px 18px;
}

.portfolio-client-logo,
.portfolio-project-logo,
.portfolio-detail-logo {
  width: auto;
  mix-blend-mode: multiply;
}

.portfolio-client-logo {
  max-width: 132px !important;
  max-height: 38px !important;
}

.portfolio-project-logo {
  max-width: 132px !important;
  max-height: 38px !important;
}

.portfolio-detail-logo {
  max-width: 176px !important;
  max-height: 44px !important;
}

/* The supplied French Red Cross file includes generous transparent padding.
   Its tightly cropped derivative preserves the exact mark while allowing the
   artwork to carry the same visual weight as the other client identities. */
.portfolio-logo-stage:has(.portfolio-client-logo[src$="croix-rouge-tight.png"]) {
  width: min(100%, 188px);
  padding: 7px 12px;
}

.portfolio-client-logo[src$="croix-rouge-tight.png"] {
  max-width: 160px !important;
  max-height: 46px !important;
}

.portfolio-project-logo-stage:has(.portfolio-project-logo[src$="croix-rouge-tight.png"]) {
  width: 190px;
  flex-basis: 190px;
  padding: 7px 12px;
}

.portfolio-project-logo[src$="croix-rouge-tight.png"] {
  height: 46px !important;
  max-width: 164px !important;
  max-height: 46px !important;
}

.portfolio-detail-logo[src$="croix-rouge-tight.png"] {
  height: 50px !important;
  max-width: 188px !important;
  max-height: 50px !important;
}

/* Long unbroken strings (URLs, emails) must not create side-scroll. */
p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}


/* ============================================================
   iPad portrait — 768px to 1023px
   ============================================================ */

@media (max-width: 1023px) {
  :root {
    --gutter-page-lg: 40px;
    --gutter-page: 24px;

    --text-6xl: 64px;
    --text-5xl: 52px;
    --text-4xl: 42px;
    --text-3xl: 34px;
    --text-2xl: 28px;
  }

  /* Header still fits one row here, but only once the gaps tighten. */
  header > * {
    gap: 14px !important;
  }

  /* Four-across grids halve rather than collapse. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Editorial two-column ratios were tuned for a 1200px canvas;
     even them out so neither side gets squeezed below readability. */
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.9fr 1fr"],
  [style*="grid-template-columns: 1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 1.35fr 0.65fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .portfolio-client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ============================================================
   iPhone — 767px and below
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --gutter-page-lg: 20px;
    --gutter-page: 16px;
    /* The design tokens already define --section-y-sm for this; it was
       just never wired to a breakpoint. At the full 96px, the section
       wrapping the last CTA card on Home left a ~96px blank white gap
       before the footer — small on desktop, a very visible dead zone
       on a narrow phone screen. */
    --section-y: var(--section-y-sm);

    /* Display sizes have to come down hard: 80px display type at
       375px wide is roughly four characters per line. */
    --text-6xl: 44px;
    --text-5xl: 38px;
    --text-4xl: 32px;
    --text-3xl: 28px;
    --text-2xl: 24px;
    --text-xl: 21px;
    --text-lg: 19px;
    --text-md: 17px;
    /* Held at 16px: iOS Safari zooms the page when a focused input
       has a font-size below 16px. */
    --text-base: 16px;

    --type-step-numeral-size: var(--text-2xl);
  }

  /* ---------- Header: two rows, everything still reachable ---------- */

  header > * {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Row 1: logo, language pill, call-to-action.
     Row 2: the four nav links, spread full width. */
  header nav {
    order: 3;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    justify-content: space-between !important;
    gap: 4px !important;
    border-top: 1px solid var(--border-subtle);
    padding-top: 4px;
  }

  header nav a {
    /* 44px minimum touch target (Apple HIG). */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
  }

  header > * > a:first-child {
    max-width: 64px;
    /* A set width (not just a cap) so the logo below keeps its height before the image loads. */
    width: 64px;
    flex-shrink: 0;
  }

  header > * > a:first-child img {
    /* !important: the Logo component's inline width/height would win, squashing the logo to
       64x65 once loaded and collapsing it to 0x0 while it loads. */
    width: 100% !important;
    height: auto !important;
    /* Reserve the logo's space before it loads, or the whole page jumps down when it arrives. */
    aspect-ratio: 1559 / 1009;
  }

  /* Language pill sits to the right of the logo. */
  header > * > div:not([class]) {
    margin-left: auto;
  }

  /* Row 1 has to fit logo + language + CTA inside 335px on an iPhone SE,
     or the CTA wraps and the sticky header grows to three rows.
     Height stays at 44px for the touch target; only width comes down. */
  header button {
    min-height: 44px;
  }

  header > * > div:not([class]) button {
    font-size: var(--text-2xs) !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  header > * > button:last-child {
    font-size: var(--text-2xs) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap;
  }

  /* ---------- Layout: collapse every multi-column grid ---------- */

  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.4fr"],
  [style*="grid-template-columns: 132px 1fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.9fr 1fr"],
  [style*="grid-template-columns: 1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 1.35fr 0.65fr"] {
    grid-template-columns: 1fr !important;
  }

  .portfolio-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .portfolio-client-tile {
    min-height: 108px !important;
    padding: 16px 10px !important;
  }

  .portfolio-client-tile:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    justify-self: center;
  }

  .portfolio-logo-stage {
    width: 100%;
    height: 52px;
    padding: 8px 12px;
  }

  .portfolio-project-logo-stage {
    width: min(176px, calc(100vw - 120px));
    flex-basis: min(176px, calc(100vw - 120px));
  }

  .portfolio-detail-logo-stage {
    width: min(220px, calc(100vw - 152px));
    min-height: 58px;
    padding: 8px 12px;
  }

  /* A cell explicitly spanning two tracks would overflow a 1fr grid. */
  [style*="grid-column: 1 / -1"],
  [style*="grid-column: span 2"] {
    grid-column: 1 / -1 !important;
  }

  /* Sticky sidebars (Services detail, About education, the Portfolio
     modal's client-info column) rely on a two-column grid to stay pinned
     next to independently-scrolling content. Once the grid above
     collapses to one column, the two "columns" become one scrolling
     flow — but the sidebar's `position: sticky` still pins it in place,
     so its text stays glued mid-screen while the content meant to sit
     beside it scrolls up through it. Disabling sticky here restores
     normal document flow: the panel scrolls with everything else.
     Scoped to `top: 110` (the two in-page sidebars) and `div[...top: 0]`
     (the modal sidebar) so the site header's own sticky nav — also
     `top: 0`, but a <header>, not a <div> — is left untouched. */
  [style*="position: sticky"][style*="top: 110"],
  div[style*="position: sticky"][style*="top: 0"] {
    position: static !important;
  }

  /* Cards that were sized for a wide viewport. */
  [style*="min-width"] {
    min-width: 0 !important;
  }

  /* Hardcoded desktop padding inside cards and the assignment panel.
     At 40px a side, a 375px screen was left with 247px of content. */
  [style*="padding: 40px 40px 0"] {
    padding: 24px 18px 0 !important;
  }

  [style*="padding: 36px 40px 40px"] {
    padding: 20px 18px 28px !important;
  }

  [style*="padding: 40px 34px"] {
    padding: 26px 18px !important;
  }

  [style*="padding: 56px 48px"] {
    padding: 30px 20px !important;
  }

  [style*="padding: 34px 32px"] {
    padding: 24px 18px !important;
  }

  /* ---------- Safe areas (notch / Dynamic Island / home indicator) ---------- */

  header > *,
  footer > * {
    padding-left: max(var(--gutter-page-lg), env(safe-area-inset-left)) !important;
    padding-right: max(var(--gutter-page-lg), env(safe-area-inset-right)) !important;
  }

  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* ============================================================
   Touch input — applies to every touch device, not just narrow ones
   (an iPad Pro in landscape is 1366px wide but still finger-driven).
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  /* :hover styles that stick after a tap read as a stuck state. */
  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  input,
  textarea,
  select {
    /* Below 16px iOS zooms the viewport on focus and never restores it. */
    font-size: max(16px, var(--text-base)) !important;
  }
}