/* =====================================================================
   OE Partners — responsive layer
   Desktop layout is left completely untouched: every rule here lives
   inside a max-width media query and only takes effect on tablet/phone.
   It overrides the site's inline styles via !important + attribute
   selectors, so no inline styling had to change.
   ===================================================================== */

/* Never allow horizontal scrolling on small screens */
html, body { max-width: 100%; overflow-x: hidden; }
#app img { max-width: 100%; }

/* The floating "Talk to us" chip and desktop-only nav toggle default */
.oe-navtoggle { display: none; }

/* ----------------------------------------------------------------- */
/* TABLET  (<= 960px): multi-column layouts drop to two columns       */
/* ----------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Any grid defined with an explicit column template becomes 2-up */
  #app [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }

  /* "We design / embed / upskill" 3-across stacks to one clean list */
  #app .oe-flush-cols { grid-template-columns: 1fr !important; }

  /* Big display headings ease down a little */
  #app h1 { font-size: clamp(40px, 6.4vw, 60px) !important; }
}

/* ----------------------------------------------------------------- */
/* NAV  (<= 860px): collapse the top nav into a mobile menu           */
/* ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .oe-navtoggle { display: inline-flex !important; }

  .oe-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--oe-paper);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 4px 22px 14px !important;
    box-shadow: var(--shadow-md);
  }
  .oe-nav[data-open="false"] { display: none !important; }
  .oe-nav a {
    padding: 15px 2px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--border);
  }
  .oe-nav a:last-child { border-bottom: 0; }

  /* Hide the fixed corner contact chip on mobile (contact lives in the
     menu and footer) so it doesn't cover content */
  .oe-contactchip { display: none !important; }
}

/* ----------------------------------------------------------------- */
/* PHONE  (<= 620px): everything to a single column                   */
/* ----------------------------------------------------------------- */
@media (max-width: 620px) {
  /* All layout grids stack */
  #app [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Tighten the generous 40px side padding on every max-width block */
  #app [style*="var(--container-max)"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Prose containers too */
  #app [style*="var(--container-prose)"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Scale down the largest display headings for phones */
  #app h1 { font-size: clamp(34px, 9.5vw, 46px) !important; line-height: 1.08 !important; }
  #app h2 { font-size: clamp(27px, 7.4vw, 36px) !important; line-height: 1.14 !important; }

  /* Oversized contact links in the closing CTA */
  #contact a[href^="tel"], #contact a[href^="mailto"] {
    font-size: 22px !important;
    word-break: break-word;
  }

  /* Column dividers that only make sense side-by-side: drop the rule +
     indent once the columns have stacked */
  .oe-divleft {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Flush the stacked 3-verb list with tidy top rules instead of the
     side rules/indents used in the desktop 3-column layout */
  .oe-flush-cols > * {
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid var(--border);
    padding-top: 26px !important;
  }
  .oe-flush-cols > *:first-child {
    border-top: 0;
    padding-top: 4px !important;
  }
}