/* Overlay wrappers track the image's effective width so SVG callouts stay aligned */
.illustration-wrapper--with-overlay { max-width: 180px; }

@media print {
  .illustration-wrapper--with-overlay { max-width: 150px; }
  .illustration--inspiration { max-width: 185px; }

  /* Front page: Plan Your Bouquet (4-col) + 3-step Arrange Stems (with two
     tips-callouts stacked in step 3) is denser than the original layout —
     tighten spacing so it still holds to 1 page */
  .guide-page--front .guide-page__content { gap: 0.28rem; }
  .guide-page--front .guide-section { padding-top: 0.22rem; }
  .guide-page--front .guide-page__tagline { padding-top: 0.22rem; font-size: 0.76rem; }
  .guide-page--front .guide-section__intro { font-size: 0.7rem; margin-bottom: 0.25rem; line-height: 1.32; }
  .guide-page--front .guide-section__title { margin-bottom: 0.4rem; }
  .guide-page--front .guide-section__list--grid-3 { gap: 0.12rem 0.5rem; margin: 0.15rem 0 0.15rem 0.85rem; }
  .guide-page--front .guide-section__list--grid-3 li { font-size: 0.72rem; line-height: 1.3; }
  .guide-page--front .materials__grid { gap: 0.12rem 0.22rem; }
  .guide-page--front .material-pill { font-size: 0.63rem; padding: 0.06rem 0.38rem; }
  .guide-page--front .step-grid { gap: 0.8rem; }
  .guide-page--front .step { gap: 0.35rem; }
  .guide-page--front .step__text { font-size: 0.74rem; line-height: 1.32; }
  .guide-page--front .tips-callout { padding: 0.22rem 0.4rem; gap: 0.25rem; }
  .guide-page--front .tips-callout__icon { width: 0.75rem; height: 0.75rem; }
  .guide-page--front .tips-callout__text { font-size: 0.63rem; line-height: 1.25; }
  .guide-page--front .tips-callout__label { font-size: 0.52rem; }
  .guide-page--front .tips-callout + .tips-callout,
  .guide-page--front .step p + .tips-callout { margin-top: 0.22rem; }

  /* Arrange Stems — each column now carries its own text (and, for cols 2/3,
     a callout) plus an image. Let every column's image flex to fill whatever
     height is left after its own text, instead of sitting at a tiny fixed
     size. min-height nudges the whole row taller to use leftover page space,
     tuned to the max that still holds a 2-page total. */
  .guide-page--front .step-grid > .step { min-height: 345px; }
  .guide-page--front .step-grid .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .guide-page--front .step-grid .illustration-wrapper .illustration {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .guide-page--back .flower-grid          { gap: 0.5rem; }
  .guide-page--back .flower-tip           { font-size: 0.75rem; line-height: 1.4; }
  .guide-page--back .illustration--small  { max-width: 260px; }
  .guide-section__note                    { font-size: 0.78rem; font-weight: 400; font-style: italic; }

  /* Deliberate page-2 layout budget: header 5%, Secure Stems 60%, Finishing
     Touches 35% of the printable page (10in tall after the 0.5in @page
     margins on letter). Fixed heights instead of trial-and-error min-height
     creep. Expressed in inches (not nested %) so each section's share of
     the *whole page* is exact. */
  .guide-page--back { display: flex; flex-direction: column; height: 10in; }
  .guide-page--back .guide-header--slim { flex: 0 0 0.5in; }
  .guide-page--back .guide-page__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }
  .guide-page--back .guide-page__content > .flower-care {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .guide-page--back .guide-page__content > .flower-care:first-of-type {
    flex: 0 0 6in;
    padding-bottom: 0.6rem;
  }
  .guide-page--back .guide-page__content > .flower-care:last-of-type {
    flex: 0 0 3.5in;
  }
  .guide-page--back .guide-page__content > .flower-care .flower-grid {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Back page images — same flex-fill + centering technique as the front
     page, so every illustration fills its own column's leftover height and
     sits centred instead of stuck to the left edge. */
  .guide-page--back .flower-tip--numbered .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Finishing Touches has a smaller budget (35%) than Secure Stems (60%) —
     cap its images so their own text never gets squeezed/clipped by the
     section's fixed height. */
  .guide-page--back .guide-page__content > .flower-care:last-of-type .illustration-wrapper {
    max-height: 140px;
  }
  .guide-page--back .flower-tip--numbered .illustration-wrapper .illustration {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}