/* ============================================================================
   ANIMATION GUIDE PAGE STYLES
   Loads alongside styles.css and process.css.
   Single-column long-form layout; reuses proc-colored-section colour scheme.
   ============================================================================ */

/* Headline — no hero, needs extra top padding to clear the fixed nav */
.guide-headline{
  padding:11rem var(--side-pad) 0;
  text-align:center;
}

/* Intro paragraph in main, below headline */
.guide-intro{
  padding:2.08rem calc(var(--side-pad) * 1.15) 0;
}

/* Cream/white step sections (Step 5 and Timeline) */
.guide-cream-section{
  background:var(--cream);
  padding:5.81rem calc(var(--side-pad) * 1.15) 5.81rem;
}

/* Body content wrapper inside each step section */
.guide-body{ margin-top:0; }
.guide-body p + p{ margin-top:1em; }
.guide-body p + ul,
.guide-body ul + p{ margin-top:0.75em; }

/* Inline script example (blockquote style) */
.guide-example{
  margin:1.25em 0;
  padding-left:1.5em;
  border-left:3px solid currentColor;
  opacity:0.85;
}

/* Takeaway callout — visual part 2 of each step section */
.guide-takeaway{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:2px solid currentColor;
}

/* Space between intro paragraph and first step */
.guide-intro p + .guide-step{ margin-top:3.2rem; }

/* Image blocks within colored sections */
.guide-image{
  margin:5.81rem 0;
}
.guide-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:clamp(6px,0.7vw,12px);
}
/* Full image + pair stacked inside one guide-image block */
.guide-image__pair{
  margin-top:3rem;
}

/* Three images side by side */
.guide-trio{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.5rem;
}
.guide-trio img{
  display:block;
  width:100%;
  height:auto;
  border-radius:clamp(6px,0.7vw,12px);
}
@media (max-width:480px){
  .guide-trio{ grid-template-columns:1fr; }
}

/* Spacing between consecutive steps within the same colored section */
.guide-step + .guide-step{ margin-top:3rem; }

/* ── Responsive ── */
@media (max-width:1024px){
  .guide-headline{ padding-top:8.5rem; }
  .guide-cream-section{ padding:3rem var(--side-pad) 4rem; }
  .guide-image{ margin:3rem 0; }
  .guide-intro{ padding-left:var(--side-pad); padding-right:var(--side-pad); }
}
@media (max-width:768px){
  .guide-headline{ padding-top:6.5rem; }
  .guide-intro{ padding-top:1.625rem; }
  .guide-cream-section{ padding:3rem var(--side-pad) 3rem; }
  .guide-takeaway{ margin-top:2rem; padding-top:1.25rem; }
  .guide-image{ margin:2rem 0; }
}
@media (max-width:480px){
  .guide-headline{ padding-top:5rem; }
  .guide-intro{ padding-top:1.3rem; }
  .guide-cream-section{ padding:2rem var(--side-pad) 2rem; }
  .guide-image{ margin:1.5rem 0; }
}