/* ==========================================================================
   Design Sprint page — scoped layout helpers.
   Every rule is nested under .page-design-sprint so it cannot leak globally.
   Reuses the shared tokens/components; adds the hero eyebrow, the day-by-day
   grid, the reason/deliverable lists and the supporting media blocks.
   ========================================================================== */

/* -------------------------------------------------------------- Hero ------ */
.page-design-sprint .ds-hero {
  padding-bottom: 64px;
}
.page-design-sprint .ds-hero-inner {
  text-align: center;
}
.page-design-sprint .ds-eyebrow {
  letter-spacing: 0.12em;
  margin-bottom: 0.6em;
}
.page-design-sprint .ds-hero .hero-title {
  margin: 0 auto 36px;
  max-width: 760px;
}
.page-design-sprint .ds-hero-media img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.page-design-sprint .ds-hero-media {
  max-width: 980px;
  margin: 0 auto;
}
/* Show desktop illustration by default, swap to the tall mobile crop below. */
.page-design-sprint .ds-hero-img-mobile {
  display: none;
}

/* ------------------------------------------------------------- Prose ------ */
.page-design-sprint .ds-prose .muted,
.page-design-sprint .ds-why .ds-lead {
  max-width: 820px;
}

/* ----------------------------------------------------- Why run a sprint --- */
.page-design-sprint .ds-reasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
.page-design-sprint .ds-reason {
  background: var(--card);
  border-radius: 10px;
  padding: 28px 26px;
  border-left: 4px solid var(--green);
}
.page-design-sprint .ds-reason h5 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.page-design-sprint .ds-why-media {
  margin-top: 56px;
}
.page-design-sprint .ds-why-media img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ----------------------------------------------------- Five-day breakdown - */
.page-design-sprint .ds-day-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 44px 0 0;
}
.page-design-sprint .ds-day {
  padding-top: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
}
.page-design-sprint .ds-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 16px;
}
.page-design-sprint .ds-day-title {
  font-size: 20px;
  margin-bottom: 0.45em;
}
.page-design-sprint .ds-week {
  max-width: 860px;
  margin-top: 52px;
}
.page-design-sprint .ds-week-media {
  margin-top: 28px;
}
.page-design-sprint .ds-week-media img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* --------------------------------------------------------- What you'll get */
.page-design-sprint .ds-get-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 40px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  max-width: 860px;
}
.page-design-sprint .ds-get-list li {
  position: relative;
  padding-left: 34px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}
.page-design-sprint .ds-get-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}

/* --------------------------------------------------------------- Process -- */
.page-design-sprint .ds-process .process-card h3 {
  font-size: 22px;
}

/* -------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .page-design-sprint .ds-reasons {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-design-sprint .ds-day-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .page-design-sprint .ds-get-list {
    grid-template-columns: 1fr 1fr;
  }
  .page-design-sprint .ds-hero-img-desktop {
    display: none;
  }
  .page-design-sprint .ds-hero-img-mobile {
    display: block;
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .page-design-sprint .ds-reasons,
  .page-design-sprint .ds-day-grid,
  .page-design-sprint .ds-get-list {
    grid-template-columns: 1fr;
  }
}