/* ---------------------------------------------------------------------------
   Design fixes layered on top of the mirrored systeme.io markup.

   The page bodies came over from systeme.io as hand-written blocks with inline
   styles, which a stylesheet can only reach with !important. Keeping the fixes
   here instead of in the markup means tools/build.mjs can still regenerate the
   pages from the original snapshots without losing them.

   Hooks used below are structural and stable: every systeme.io row carries
   id="row-…" and every content block id="rawhtml-…".
   --------------------------------------------------------------------------- */


/* --- full-bleed sections ---------------------------------------------------
   Every content row was wrapped in 10px of padding (5px on mobile), which
   framed the whole site in a thin white border and stopped the dark hero from
   reaching the edge of the viewport. */

[id^="row-"] {
  padding: 0 !important;
}

.gr8-shell .gr8-pad {
  padding: 0;
}


/* --- wrapping --------------------------------------------------------------
   overflow-wrap is inherited, so one declaration covers every block. Guards
   against a long unbroken string pushing out the page width. */

body {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}


/* --- responsive headings ---------------------------------------------------
   The blocks use fixed pixel type. The homepage h1 is 54px and the about h1
   56px, so on a phone the headings were wider than the viewport and the whole
   page scrolled sideways. Scale them with the viewport instead, keeping the
   original size as the upper bound. */

@media (max-width: 900px) {
  h1[style] {
    font-size: clamp(28px, 7.4vw, 46px) !important;
    line-height: 1.14 !important;
  }

  h2[style] {
    font-size: clamp(23px, 5.6vw, 38px) !important;
    line-height: 1.2 !important;
  }

  h3[style] {
    font-size: clamp(17px, 3.6vw, 22px) !important;
  }

  /* Intro paragraphs run 20-24px, which on a phone ends up nearly as large as
     the scaled-down heading above it and reads as a wall of text. Sizes are
     listed explicitly rather than matched loosely, so nothing else is caught. */
  p[style*="font-size:24px"],
  p[style*="font-size:23px"],
  p[style*="font-size:22px"],
  p[style*="font-size:21px"],
  p[style*="font-size:20px"],
  div[style*="font-size:22px"],
  div[style*="font-size:20px"] {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
}


/* --- tighter sections on small screens -------------------------------------
   Each block's outermost div carries the section background and padding. The
   header is exempt: its first child is the .gr8-site wrapper, which has no
   padding of its own, so this selector does not reach the nav bar. */

@media (max-width: 640px) {
  [id^="rawhtml-"] > div[style*="padding"] {
    padding-top: 54px !important;
    padding-right: 18px !important;
    padding-bottom: 54px !important;
    padding-left: 18px !important;
  }

  /* Columns declare a min-width of up to 300px, which is wider than a 320px
     screen once section padding is taken off, so they forced the page sideways
     instead of shrinking. They have already wrapped to one column by here. */
  [id^="rawhtml-"] div[style*="min-width"] {
    min-width: 0 !important;
  }

  /* Cards nested inside a section keep their own padding, which this rule's
     section-level selector cannot reach. 42px a side is too much on a phone. */
  [id^="rawhtml-"] div[style*="padding:42px"] {
    padding: 24px !important;
  }

  /* The portrait column is flex:0 0 320px, so it refuses to shrink and pushed
     the about page sideways however narrow the screen got. */
  [id^="rawhtml-"] div[style*="flex:0 0"] {
    flex-basis: auto !important;
    flex-shrink: 1 !important;
    max-width: 100% !important;
  }
}


/* --- header on small screens -----------------------------------------------
   space-between leaves the logo, the links and the call to action stranded at
   opposite edges once the row wraps. Centre them and pull the logo down a bit. */

@media (max-width: 720px) {
  .gr8-site > div > div[style*="space-between"] {
    justify-content: center !important;
    gap: 14px !important;
  }

  .gr8-site a[href="/"] > img {
    height: 56px !important;
  }
}


/* --- contact section -------------------------------------------------------
   The old grey card was replaced by a two-column panel written by hand in
   index.html, so unlike the mirrored blocks its layout lives inline and needs
   no !important hooks. Only the responsive padding belongs here: the columns
   wrap on their own through flex-basis, but they cannot drop their 52px/48px
   inner padding, which is far too much on a phone.

   The section band itself is already tightened by the rule further up
   ([id^="rawhtml-"] > div[style*="padding"]), and the min-width rule below
   640px lets the two columns shrink. */

@media (max-width: 860px) {
  .gr8-contact-copy,
  .gr8-contact-panel {
    padding: 34px 26px !important;
  }
}

/* Stacked, the 22px corner radius reads as a seam between the two halves. */
@media (max-width: 900px) {
  .gr8-contact-card {
    border-radius: 18px !important;
  }
}