/* ============================================================
   Nova — mobile optimisation layer.
   The pages are imported design-canvas exports built desktop-first with
   inline styles, so this sheet rescues them responsively: !important
   longhands under media queries out-rank the inline declarations without
   touching the imported markup.
   NOTE: the DC runtime re-renders through React, which normalises style
   attributes to "prop: value" (spaced) and "repeat(3, 1fr)". The blog
   chrome keeps the raw compact form. Every selector covers both.
   ============================================================ */

/* The desktop floor comes off at every size — pages flex instead. */
div[style*="min-width:1100px"],
div[style*="min-width: 1100px"] { min-width: 0 !important; }

@media (max-width: 1000px) {
  /* Header chrome wraps into stacked rows instead of crushing. */
  header > div { flex-wrap: wrap !important; justify-content: center !important; row-gap: 12px !important; }
  header nav { flex-wrap: wrap !important; justify-content: center !important; row-gap: 8px !important; }

  /* Three- and four-across content grids drop to two. */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:1fr 1.4fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 760px) {
  /* Every multi-column content grid stacks. Label/value rows
     (170px/150px 1fr) stay two-column — they read like tables. */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:0.9fr 1.1fr"],
  div[style*="grid-template-columns: 0.9fr 1.1fr"],
  div[style*="grid-template-columns:1.05fr 0.95fr"],
  div[style*="grid-template-columns: 1.05fr 0.95fr"],
  div[style*="grid-template-columns:1fr 1.4fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns:260px 1fr"],
  div[style*="grid-template-columns: 260px 1fr"],
  div[style*="grid-template-columns:auto 1fr"],
  div[style*="grid-template-columns: auto 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* Section gutters and the biggest vertical paddings come down. */
  div[style*="max-width:1200px"],
  div[style*="max-width: 1200px"] { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding:110px 32px 120px"], div[style*="padding: 110px 32px 120px"] { padding-top: 64px !important; padding-bottom: 72px !important; }
  div[style*="padding:96px 32px"], div[style*="padding: 96px 32px"],
  div[style*="padding:100px 32px"], div[style*="padding: 100px 32px"],
  div[style*="padding:104px 32px"], div[style*="padding: 104px 32px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  div[style*="padding:88px 32px"], div[style*="padding: 88px 32px"],
  div[style*="padding:84px 32px"], div[style*="padding: 84px 32px"],
  div[style*="padding:80px 32px"], div[style*="padding: 80px 32px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Fixed display sizes scale down (clamp()-based ones already do). */
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 34px !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 29px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 27px !important; }

  /* Pill groups (country selectors, plan toggles) wrap instead of overflowing. */
  div[style*="border-radius:999px"][style*="padding:6px"],
  div[style*="border-radius: 999px"][style*="padding: 6px"] { display: inline-flex !important; flex-wrap: wrap !important; justify-content: center !important; height: auto !important; }

  /* Wide flex rows wrap. */
  div[style*="display:flex"][style*="gap:32px"], div[style*="display: flex"][style*="gap: 32px"],
  div[style*="display:flex"][style*="gap:64px"], div[style*="display: flex"][style*="gap: 64px"] { flex-wrap: wrap !important; }

  /* Model-card label column narrows on phones. */
  div[style*="grid-template-columns:170px 1fr"], div[style*="grid-template-columns: 170px 1fr"],
  div[style*="grid-template-columns:150px 1fr"], div[style*="grid-template-columns: 150px 1fr"] { grid-template-columns: 110px 1fr !important; }
}

@media (max-width: 760px) {
  /* Compact footer link rows wrap. */
  footer div[style*="gap:22px"], footer div[style*="gap: 22px"] { flex-wrap: wrap !important; justify-content: center !important; }
  footer div[style*="max-width:1200px"], footer div[style*="max-width: 1200px"] { justify-content: center !important; }

  /* Decorative nova pulse orbs never exceed the viewport. */
  div[style*="width: 560px"][style*="position: absolute"],
  div[style*="width:560px"][style*="position:absolute"],
  div[style*="width: 640px"][style*="position: absolute"],
  div[style*="width:640px"][style*="position:absolute"] { width: 90vw !important; height: 90vw !important; }

  /* Belt-and-braces: any residual decorative overflow is clipped, never a
     horizontal scrollbar. */
  html, body { overflow-x: clip !important; }
}

@media (max-width: 760px) {
  /* Explicit column placements (e.g. the build-note chips pinned to column 2)
     would spawn phantom implicit columns once grids stack — crushing the real
     column to zero width. Reset them to natural flow. */
  [style*="grid-column:2"], [style*="grid-column: 2"] { grid-column: auto !important; justify-self: start !important; }
}

/* Activity-type catalogue rows (nova-5): stack the 4-column grid on phones. */
@media (max-width: 760px) {
  [style*="grid-template-columns:190px 1.3fr 1fr 64px"],
  [style*="grid-template-columns: 190px 1.3fr 1fr 64px"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns:190px 1.3fr 1fr 64px"] > div:last-child,
  [style*="grid-template-columns: 190px 1.3fr 1fr 64px"] > div:last-child {
    text-align: left !important;
  }
}

/* ---- The great disengagement: tighter on phones ------------------------ */
@media (max-width: 760px) {
  [data-screen-label="The great disengagement"] > div[style*="padding:96px 32px"],
  [data-screen-label="The great disengagement"] > div[style*="padding: 96px 32px"] {
    padding: 56px 32px !important;
  }
  [data-screen-label="The great disengagement"] p[style*="margin:0 0 48px"],
  [data-screen-label="The great disengagement"] p[style*="margin: 0 0 48px"] {
    margin-bottom: 26px !important;
  }
  /* Workplace card: three mini stats share one row. */
  [data-screen-label="The great disengagement"] div[style*="gap:28px"][style*="flex-wrap"],
  [data-screen-label="The great disengagement"] div[style*="gap: 28px"][style*="flex-wrap"] {
    gap: 10px !important;
  }
  [data-screen-label="The great disengagement"] div[style*="gap:28px"][style*="flex-wrap"] > div,
  [data-screen-label="The great disengagement"] div[style*="gap: 28px"][style*="flex-wrap"] > div {
    flex: 1 1 30% !important;
    min-width: 0;
  }
  [data-screen-label="The great disengagement"] span[style*="font-size:26px"],
  [data-screen-label="The great disengagement"] span[style*="font-size: 26px"] {
    font-size: 19px !important;
  }
  [data-screen-label="The great disengagement"] div[style*="gap:28px"][style*="flex-wrap"] div[style*="font-size:13px"],
  [data-screen-label="The great disengagement"] div[style*="gap:28px"][style*="flex-wrap"] div[style*="font-size: 13px"],
  [data-screen-label="The great disengagement"] div[style*="gap: 28px"][style*="flex-wrap"] div[style*="font-size:13px"],
  [data-screen-label="The great disengagement"] div[style*="gap: 28px"][style*="flex-wrap"] div[style*="font-size: 13px"] {
    font-size: 11.5px !important;
  }
  [data-screen-label="The great disengagement"] p[style*="font-size:26px"],
  [data-screen-label="The great disengagement"] p[style*="font-size: 26px"] {
    font-size: 21px !important;
  }
}

/* ---- Mock assessment feedback band: stack on phones ------------------- */
@media (max-width: 760px) {
  [data-screen-label="Mock assessment feedback"] div[style*="grid-template-columns:1.05fr 0.95fr"],
  [data-screen-label="Mock assessment feedback"] div[style*="grid-template-columns: 1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-screen-label="Mock assessment feedback"] > div[style*="padding:88px 32px"],
  [data-screen-label="Mock assessment feedback"] > div[style*="padding: 88px 32px"] {
    padding: 56px 32px !important;
  }
}