/* ==========================================================
   IPD 2026 — homepage responsive layer
   Loaded after responsive.css on Homepage only.
   ========================================================== */

@media (max-width: 1024px) {

  main { width: min(1530px, calc(100% - 34px)) !important; }

  /* 1 — hero */
  main > section:nth-of-type(1) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    padding: 34px 22px 40px !important;
    min-height: 0 !important;
  }
  main > section:nth-of-type(1) h1 {
    font-size: clamp(32px, 7vw, 52px) !important;
    letter-spacing: -1.4px !important;
    margin-bottom: 22px !important;
  }
  main > section:nth-of-type(1) h1 span { white-space: normal !important; }
  main > section:nth-of-type(1) p { font-size: 17px !important; }
  main > section:nth-of-type(1) > div:last-child {
    padding-left: 18px !important;
    gap: 18px !important;
  }

  /* 2 — the challenge */
  main > section:nth-of-type(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'label' 'heading' 'copy' 'media' !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
    padding: 40px 22px 46px !important;
    min-height: 0 !important;
  }
  main > section:nth-of-type(2) h2 { font-size: clamp(26px, 6vw, 40px) !important; letter-spacing: -1.2px !important; }
  main > section:nth-of-type(2) h2:first-of-type { font-size: 17px !important; letter-spacing: 1.2px !important; }
  main > section:nth-of-type(2) p { font-size: 17px !important; }
  main > section:nth-of-type(2) > div:last-child {
    justify-self: stretch !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  /* 3 — two sides of one product */
  main > section:nth-of-type(3) { padding-top: 38px !important; }
  main > section:nth-of-type(3) > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-bottom: 30px !important;
  }
  main > section:nth-of-type(3) > div:first-child h2 {
    font-size: clamp(27px, 6.4vw, 42px) !important;
    letter-spacing: -1.2px !important;
  }
  main > section:nth-of-type(3) > div:first-child h2 br { display: none !important; }
  main > section:nth-of-type(3) > div:first-child p { font-size: 17px !important; }
  main > section:nth-of-type(3) > div:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  /* the centred "integrated product development" medallion has no room once stacked */
  main > section:nth-of-type(3) > div:last-child > div[aria-label] { display: none !important; }
  main > section:nth-of-type(3) article {
    border-radius: 16px !important;
    padding: 30px 24px 28px !important;
    min-height: 0 !important;
  }
  main > section:nth-of-type(3) article h3 { font-size: 27px !important; }
  main > section:nth-of-type(3) article p { font-size: 16.5px !important; }

  /* 4 — fact strip */
  main > section:nth-of-type(4) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 36px 0 50px !important;
  }
  main > section:nth-of-type(4) > div {
    min-height: 0 !important;
    padding: 18px 16px !important;
    border-bottom: 2px solid rgba(255, 255, 255, .85) !important;
  }
  main > section:nth-of-type(4) > div > div:last-child { font-size: 18px !important; }

  /* 5 — journey */
  main > section:nth-of-type(5) {
    margin: 50px 0 !important;
    padding: 30px 20px 34px !important;
    border-radius: 18px !important;
  }
  main > section:nth-of-type(5) h2 { font-size: 27px !important; }
  main > section:nth-of-type(5) > div:first-child { margin-bottom: 28px !important; }
  main > section:nth-of-type(5) > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 12px !important;
  }
  /* the → connectors only make sense in a single row */
  main > section:nth-of-type(5) > div:last-child > div:nth-child(even) { display: none !important; }
  main > section:nth-of-type(5) > div:last-child > div > div:first-child {
    width: 62px !important;
    height: 62px !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }

  /* 6 — group members */
  main > section:nth-of-type(6) > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  main > section:nth-of-type(6) h2 { font-size: 26px !important; padding-bottom: 10px !important; }

  footer { min-height: 160px !important; }
  footer > div[style*="position:absolute"] { display: none !important; }
  footer span { font-size: clamp(24px, 6.4vw, 40px) !important; }
}

@media (max-width: 640px) {
  main { width: calc(100% - 24px) !important; }

  main > section:nth-of-type(1) { padding: 26px 16px 32px !important; }
  main > section:nth-of-type(1) > div:first-child > div:first-child {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 20px !important;
  }
  main > section:nth-of-type(2) { padding: 32px 16px 36px !important; }
  main > section:nth-of-type(3) article { padding: 24px 18px !important; }

  /* one fact per row reads better than two cramped ones */
  main > section:nth-of-type(4) { grid-template-columns: minmax(0, 1fr) !important; }
  main > section:nth-of-type(4) > div { border-right: 0 !important; }

  main > section:nth-of-type(5) { padding: 24px 16px 28px !important; }
  main > section:nth-of-type(5) > div:last-child { gap: 22px 10px !important; }

  p, li { text-align: left !important; }
}