/* SCOPIO — shared layout rules.
   The page designs keep their own inline styles; this file only makes them
   fluid and adapts them to tablets and phones. */

:root {
  --gx: max(96px, calc((100vw - 1248px) / 2)); /* side margin: 96px, centred on wide screens */
  --sx: 1;   /* small horizontal paddings */
  --sy: 1;   /* vertical rhythm */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; }
.page { width: 100%; min-height: 100vh; }
.page > section, .page > footer, .page > header { width: 100%; }
:focus-visible { outline: 2px solid #6C4CE0; outline-offset: 3px; }

/* hero: content sits at the bottom of the image */
.hero { display: flex !important; flex-direction: column; justify-content: flex-end; }
.hero > div[style*="position: relative"] { height: auto !important; width: 100%; }

/* header + mobile menu */
.site-header { position: relative; z-index: 20; background: inherit; }
.nav-toggle { display: none; }

@media (max-width: 1180px) {
  :root { --gx: 48px; --sy: .8; }
  .site-header > a { flex-shrink: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 10px 16px; border: 1px solid rgba(18,16,22,.18); border-radius: 999px;
    background: transparent; color: #121016; font: 500 15px/1 'Inter', Arial, sans-serif; cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; content: "";
  }
  .nav-toggle-bars::before { position: absolute; top: -5px; }
  .nav-toggle-bars::after { position: absolute; top: 5px; }
  .site-nav {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    background: #F4F1EA; padding: 8px var(--gx) 28px;
    border-bottom: 1px solid rgba(18,16,22,.10); box-shadow: 0 24px 40px -28px rgba(18,16,22,.35);
  }
  .site-header.is-open .site-nav { display: flex !important; }
  .site-nav > a, .site-nav > div {
    padding: 16px 0 !important; border-bottom: 1px solid rgba(18,16,22,.08) !important;
  }
  .site-nav > a:last-child {
    margin-top: 20px; border-bottom: 0 !important; align-self: flex-start;
    padding: 14px 24px !important;
  }
}

/* tablets */
@media (max-width: 1000px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"]:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-footer { flex-direction: column !important; align-items: flex-start !important; gap: 36px; }
  .site-footer > div { align-items: flex-start !important; }
  [style*="grid-template-columns: repeat(12"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; }
  [style*="grid-template-columns: repeat(12"] > * { grid-column: 1 / -1 !important; }
  .imgwrap { height: 480px !important; }
}

/* phones */
@media (max-width: 680px) {
  :root { --gx: 22px; --sx: .55; --sy: .55; }
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-column"] { grid-column: 1 / -1 !important; }
  .mh { min-height: 0 !important; height: auto !important; }
  .hero { height: auto !important; min-height: 640px; }
  .imgwrap { height: 380px !important; }
  .cover { height: auto !important; aspect-ratio: 3 / 4; }
  /* rows of items wrap instead of overflowing */
  [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  .site-header { flex-wrap: nowrap !important; }
  .site-header > a svg { width: 112px; height: auto; }
  .site-footer { flex-direction: column !important; align-items: flex-start !important; gap: 36px; }
  .site-footer > div { align-items: flex-start !important; }
  .site-footer > div > div { flex-direction: column; gap: 14px !important; }
  p, h1, h2, h3, li, span, a { overflow-wrap: break-word; }
  [style*="white-space-collapse: preserve"] { white-space: normal !important; white-space-collapse: collapse !important; }
  [class^="bg-strip"][style*="height: 96px"] { height: 40px !important; }
  /* study covers: two per row on phones */
  [style*="grid-template-columns: repeat(4"]:has(> .cover) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}