/* responsive.css — makes windvase.org work on a phone.
   Loaded AFTER styles.css. See the note on !important below before editing.

   ⚠️ WHY THIS IS A SEPARATE FILE AND WHY IT SHOUTS.
   The page came from a design tool that writes every layout decision as an INLINE
   style attribute — `style="display: grid; grid-template-columns: repeat(3, 1fr)"`,
   `style="padding: 80px …"`, `style="height: 480px"`. An inline style beats any
   stylesheet rule regardless of selector specificity, so the only way to override one
   from a stylesheet is `!important`. That is not sloppiness here; it is the single
   correct tool for this exact situation. The alternative — rewriting 45 kB of markup
   into classes — would risk the design for no visual gain.

   Keeping it in its own file means the design system (`styles.css`) stays a faithful
   copy of the export and can be re-pulled when the design changes; this file is the
   adaptation layer and is the only place `!important` appears.

   ⚠️ The page had ZERO media queries before this. It was built at one width.

   Approach is the standard responsive triad — fluid grids, flexible media, media
   queries — plus `clamp()` for type so it scales continuously rather than in steps,
   and WCAG 2.5.5 touch targets (44 px) on everything tappable.

   Breakpoints, chosen from the layouts actually present rather than device names:
     1024px  three- and four-up grids stop fitting
      820px  any multi-column layout stops fitting; vertical rules stop making sense
      520px  phone; tighten spacing and let the nav wrap to two rows
*/

/* ---- 1. flexible media: nothing may push the page wider than the screen -------- */
img, svg, video, iframe { max-width: 100%; }

/* ⚠️ Deliberately NOT `body { overflow-x: hidden }`. That hides horizontal overflow
   instead of fixing it, and then nobody can find the element that causes it. */

/* ---- 2. fluid type, at every width, no breakpoint needed ---------------------- */
/* The hero is 88px inline — about a quarter of a phone screen per character. */
[style*="font-size: 88px"] { font-size: clamp(32px, 8.5vw, 88px) !important; }
[style*="font-size: 40px"] { font-size: clamp(23px, 4.4vw, 40px) !important; }
[style*="font-size: 20px"] { font-size: clamp(16px, 2.2vw, 20px) !important; }
[style*="font-size: 19px"] { font-size: clamp(16px, 2.1vw, 19px) !important; }

/* Long words (URLs, "Berlin-Neukölln") must not push a column wider than the screen. */
h1, h2, h3, h4, h5, p, li, td, th { overflow-wrap: break-word; }

/* ---- 3. touch targets — WCAG 2.5.5 / 44px ------------------------------------ */
@media (pointer: coarse) {
  .nav a, .btn, a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- 4. 1024px: the widest grids give up first -------------------------------- */
@media (max-width: 1024px) {
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="padding: 80px"], [style*="padding: 88px"] { padding: 56px var(--space-6) !important; }
  [style*="padding: 96px"] { padding: 64px var(--space-6) 56px !important; }
}

/* ---- 5. 820px: one column, everywhere ---------------------------------------- */
@media (max-width: 820px) {
  /* Every inline grid collapses. The `260px 1fr` ones are the urgent case: a fixed
     260px column plus content does not fit a 375px screen at all. */
  [style*="display: grid"] { grid-template-columns: 1fr !important; }

  /* A rule drawn BETWEEN two side-by-side cells is meaningless once they stack —
     it becomes a line down one edge of the page. Turn it through 90 degrees. */
  [style*="border-right: 2px solid"] {
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-divider) !important;
  }
  [style*="border-left: 2px solid"] { border-left: 0 !important; }

  [style*="padding: 80px"], [style*="padding: 88px"] { padding: 44px var(--space-4) !important; }
  [style*="padding: 96px"] { padding: 52px var(--space-4) 44px !important; }
  [style*="padding: 64px"] { padding: 36px var(--space-4) !important; }
  [style*="padding-inline: var(--space-8)"] { padding-inline: var(--space-4) !important; }

  /* Art direction: a 720px-tall crop on a 640px-tall phone viewport is a wall.
     Viewport-relative with a floor keeps the composition without filling the screen. */
  [style*="height: 720px"] { height: 54vh !important; min-height: 300px !important; }
  [style*="min-height: 760px"] { min-height: 52vh !important; height: auto !important; }
  [style*="height: 640px"] { height: 44vh !important; min-height: 260px !important; }
  [style*="height: 480px"] { height: 38vh !important; min-height: 230px !important; }

  /* The nav is brand + six links + a button on one row. It cannot fit; let it wrap. */
  .nav { flex-wrap: wrap !important; row-gap: var(--space-2) !important; }
  .nav-brand { margin-right: auto !important; }
}

/* ---- 6. 520px: phone ---------------------------------------------------------- */
@media (max-width: 520px) {
  [style*="padding: 80px"], [style*="padding: 88px"], [style*="padding: 96px"] {
    padding: 36px var(--space-4) !important;
  }
  /* Two-up spec rows read better stacked than squeezed. */
  [style*="justify-content: space-between"] { gap: var(--space-2) !important; }

  [style*="height: 720px"] { height: 46vh !important; min-height: 260px !important; }
  [style*="height: 480px"] { height: 34vh !important; min-height: 200px !important; }

  /* The section anchors are secondary on a phone; the brand and the enquiry button
     are what matter. Hiding mid-nav links beats a cramped two-row bar — the same
     destinations are all reachable from the footer, which is unaffected. */
  .nav a:not(.nav-brand):not(.btn) { display: none !important; }
}