/* ============================================================================
   Park Districts & Recreation — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css, shared with the five
   product pages.

   NOTE ON SCOPING. Every page stylesheet ends up in one bundle, so a bare
   `.sc-…` rule written here would reach the product pages too. Anything this
   page changes about a shared class is scoped by this page's own id or by a
   `pd-` class.

   ON THE PALETTE. This guide names its own: "blue-and-white palette, yellow
   action buttons ... Alternate white and pale-blue backgrounds to distinguish
   sections." That is not the product pages' rhythm, which runs a yellow
   demonstration band and a dark outcomes band. Yellow here is the colour of an
   action, not of a section, so this page takes the guide's alternation
   instead: pale, white, pale, white, pale, white, pale, pale. The journeys
   section keeps the shared `.sc-demo` layout but not its yellow ground, and
   its halftone corners are gone with it — they were tuned yellow-on-yellow.

   Because every boundary is now a colour change rather than a shared field,
   each section keeps its own top padding; consecutive `--flow` sections
   otherwise drop it. Three classes to clear `.section--flow + .section--flow`
   in base.css.                                                              */

#pd-website,
#pd-solutions,
#pd-start { background: var(--white); }
#pd-journeys.sc-demo { background: var(--blue-50); }

#pd-challenges.section.section--flow,
#pd-website.section.section--flow,
#pd-journeys.section.section--flow,
#pd-solutions.section.section--flow,
#pd-work.section.section--flow,
#pd-start.section.section--flow,
#pd-faq.section.section--flow,
#pd-inquiry.section.section--flow { padding-top: var(--section-y); }

.pd-hero { padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.pd-hero__art { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* --- The banner's supporting line ---------------------------------------------- */

.pd-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.4rem + 0.6vw, 1.25rem);
  margin: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pd-marks li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  padding-inline: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}
.pd-marks img { display: block; flex: none; width: 2.5rem; height: 2.5rem; }
.pd-marks li + li { border-left: 1px solid var(--border); }
@media (max-width: 719px) {
  .pd-marks { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .pd-marks li { justify-content: flex-start; border-left: 0; text-align: left; }
}

/* --- 2. The four challenges ------------------------------------------------------
   Two by two, with the resident's question as the most prominent text on each
   card — which is what the guide asks for, so the label above it is an eyebrow
   and the question is the heading.                                          */

.pd-chal__grid {
  display: grid;
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .pd-chal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pd-chal__card {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.pd-chal__card > img { display: block; flex: none; width: 4rem; height: 4rem; }
.pd-chal__text { min-width: 0; }
.pd-chal__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
}
.pd-chal__q {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
}
.pd-chal__d { margin: 0.6rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

.pd-chal__close {
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) auto 0;
  padding: 0.75rem clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  border-radius: var(--r-pill);
  background: var(--yellow-100, #FDFBE3);
  box-shadow: inset 0 0 0 1px var(--yellow-300);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-900);
}

/* --- 3. Website and integration ---------------------------------------------------
   A prominent two-column section rather than a feature card, as the guide
   requires: copy and three points on the left, the program-search screenshot
   and the sequence on the right.                                             */

.pd-web {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}
@media (min-width: 980px) { .pd-web { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.pd-web__copy > * { min-width: 0; }
.pd-web__lead {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.pd-points {
  display: grid;
  gap: 1.1rem;
  margin: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}
.pd-points li { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.pd-points img { display: block; flex: none; width: 3rem; height: 3rem; }
.pd-points__text { display: grid; gap: 0.25rem; min-width: 0; }
.pd-points__k { font-size: var(--fs-body); font-weight: 700; color: var(--blue-700); }
.pd-points__d { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.pd-web__cta { display: flex; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.pd-web__visual { min-width: 0; }
.pd-web__shot {
  margin: 0;
  padding: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}
.pd-web__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.pd-web__shot figcaption { margin-top: 0.5rem; text-align: center; }

.pd-seq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin: clamp(1rem, 0.85rem + 0.7vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pd-seq li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 7.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}
.pd-seq img { display: block; width: 2.5rem; height: 2.5rem; }
.pd-seq__arrow {
  position: absolute;
  left: -0.25rem;
  top: 0.9rem;
  transform: translateX(-50%);
  color: var(--blue-500);
}

/* --- 4. The resident journeys ------------------------------------------------------ */

.pd-journeys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.pd-journey {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Named, because the photograph cancels it to reach the card edge. */
  --pd-card-pad: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  padding: var(--pd-card-pad);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* Full-bleed header, cropped to a banner so three photographs of different
   proportions keep their headings level. */
.pd-journey__img {
  display: block;
  width: calc(100% + var(--pd-card-pad) * 2);
  margin: calc(var(--pd-card-pad) * -1) calc(var(--pd-card-pad) * -1) 0;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.pd-journey__k {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-900);
}
.pd-journey__d { margin: 0.5rem 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.pd-journey__steps {
  display: grid;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.pd-journey__steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}
.pd-journey__steps img { display: block; flex: none; width: 2.25rem; height: 2.25rem; }
.pd-journey__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--blue-300);
  font-size: var(--fs-xs);
  color: var(--blue-700);
}
.pd-journeys__close {
  margin: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--blue-700);
}

/* --- 5. The solutions grid -----------------------------------------------------------
   Two larger cards, then the three supporting products beneath them. Every
   card is a separate starting point — the guide is explicit that these five
   are not a mandatory bundle, so nothing here groups them as one offer.   */

.pd-sols {
  display: grid;
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-sols--lead { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pd-sols--more { margin-top: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem); }
@media (min-width: 820px) { .pd-sols--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pd-sols--more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 979px) { .pd-sols--more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pd-sol {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--d-base) var(--ease-out-soft),
              transform var(--d-base) var(--ease-out-soft);
}
.pd-sol:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--blue-300), var(--e-1); }
.pd-sol--big { box-shadow: inset 0 0 0 1px var(--border), var(--e-1); }
.pd-sol__icon { display: block; flex: none; width: 3.25rem; height: 3.25rem; }
.pd-sol--big .pd-sol__icon { width: 4rem; height: 4rem; }
.pd-sol__text { display: flex; flex-direction: column; min-width: 0; }
.pd-sol__need {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
}
.pd-sol__need--big { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
/* Secondary to the need, as the guide asks. */
.pd-sol__product { margin: 0.35rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-600); }
.pd-sol__d { margin: 0.7rem 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.pd-sol__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: gap var(--d-base) var(--ease-out-expo);
}
.pd-sol__link:hover { gap: 0.6rem; color: var(--blue-700); }

/* --- 6. The project cards -------------------------------------------------------------- */

.pd-projects {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .pd-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pd-project {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --pd-card-pad: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  padding: var(--pd-card-pad);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* Both photographs are square, so they are cropped to a banner rather than
   left floating in the middle of a wide card — the same treatment the Website
   Design page's project cards use. */
.pd-project__shot {
  margin: calc(var(--pd-card-pad) * -1) calc(var(--pd-card-pad) * -1) 0;
}
.pd-project__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.pd-project__k {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700;
  color: var(--ink-900);
}
.pd-project__line { margin: 0.35rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-600); }
.pd-project__d { margin: 0.75rem 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

.pd-work__close {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) auto 0;
  padding: 0.8rem clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.pd-work__icon { flex: none; color: var(--blue-600); }

/* --- 7. Getting started ------------------------------------------------------------------ */

.pd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1100px) { .pd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-step {
  position: relative;
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.pd-step__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-900);
}
.pd-step__icon { display: block; width: 4rem; height: 4rem; margin: 0.6rem 0 0; }
.pd-step__k {
  margin: 0.9rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}
.pd-step__d { margin: 0.5rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

/* Small and clearly labelled, so it never reads as part of the project. */
.pd-maint {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  margin-top: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  border-radius: var(--r-2xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.pd-maint > img { display: block; flex: none; width: 3rem; height: 3rem; }
.pd-maint__text { min-width: 0; }
.pd-maint__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color: var(--ink-900);
}
.pd-maint__d { margin: 0.4rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.pd-maint__note { margin: 0.4rem 0 0; font-size: var(--fs-xs); font-style: italic; color: var(--text-muted); }

/* --- 8. The FAQ, heading beside the accordion -----------------------------------------
   Same layout and the same second scrim as the RecLite and SmartDesk pages:
   this section is short, so the shared vertical scrim alone would let the
   photograph reach the left column's heading.                              */

.pd-faq__grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) { .pd-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.pd-faq__intro > * { min-width: 0; }
.pd-faq__list { max-width: none; margin-top: 0; }

#pd-faq .sc-faq__bg { object-position: 72% 58%; }
#pd-faq.sc-faq::after {
  background:
    linear-gradient(90deg,
      rgb(242 247 255 / .94) 0%,
      rgb(242 247 255 / .88) 34%,
      rgb(242 247 255 / .35) 52%,
      rgb(242 247 255 / 0) 66%),
    linear-gradient(180deg,
      rgb(242 247 255 / .95) 0%,
      rgb(242 247 255 / .88) 40%,
      rgb(242 247 255 / .74) 70%,
      rgb(242 247 255 / .62) 88%,
      rgb(242 247 255 / .93) 97%,
      rgb(242 247 255 / 1) 100%);
}
@media (max-width: 959px) {
  #pd-faq.sc-faq::after {
    background: linear-gradient(180deg,
      rgb(242 247 255 / .97) 0%,
      rgb(242 247 255 / .95) 45%,
      rgb(242 247 255 / .82) 74%,
      rgb(242 247 255 / .66) 90%,
      rgb(242 247 255 / .95) 98%,
      rgb(242 247 255 / 1) 100%);
  }
}

/* --- 9. The inquiry ------------------------------------------------------------------------ */

.pd-inq__points { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.pd-inq__alt {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.pd-inq__alt a {
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pd-inq__alt a:hover { color: var(--blue-700); }

@media (prefers-reduced-motion: reduce) {
  .pd-sol, .pd-sol:hover { transition: none; transform: none; }
}