/* ============================================================
   Floral Frog — guide-specific overrides
   ============================================================ */

/* 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; }

  /* Inspiration image now sits in a 1-of-3 grid column — fill it fully */
  .illustration--inspiration { max-width: 100%; }

  /* Page 2 content spacing */
  .guide-page--back .guide-page__content { gap: 0.6rem; }
  .guide-page--back .flower-grid { gap: 0.5rem; }
  .guide-page--back .flower-tip { font-size: 0.74rem; line-height: 1.38; }

  .guide-page--back .tips-callout { padding: 0.3rem 0.5rem; gap: 0.3rem; }
  .guide-page--back .tips-callout__text { font-size: 0.68rem; line-height: 1.3; }
  .guide-page--back .tips-callout__label { font-size: 0.55rem; }

  /* Content is lighter now (transport section removed) — let step/flower-grid
     illustrations run much larger to fill the resulting page space instead of
     staying capped at the old cramped-pagination sizes. */
  .illustration--small { max-width: 260px; }

  /* Keep page 2 images centred in their column, matching the centering that
     comes "for free" from the flex-fill technique used on page 1. */
  .guide-page--back .illustration-wrapper { margin: 0 auto; }

  /* Set Up Vase — column 1 (step 1's text) sets the row's height. The other
     two columns (stacked tape-dish/frog-on-tape, and step 2's water-fill)
     stretch to that same height via grid + flex, then size their images to
     fill it (object-fit: contain) instead of overflowing past it. Width is
     still capped so images don't blow out sideways in a short row.
     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: 285px; }

  .guide-page--front .step--visual-only {
    justify-content: center;
    gap: 0.4rem;
  }
  .guide-page--front .step--visual-only .illustration-wrapper,
  .guide-page--front .illustration-wrapper--fill {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 210px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .guide-page--front .step--visual-only .illustration,
  .guide-page--front .illustration-wrapper--fill .illustration {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}