/* Open-Faced Vase — guide-specific print overrides
   All shared styles live in ../guide.css */

.illustration-wrapper--with-overlay {
  max-width: 180px;
}

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

  .guide-page--back .guide-page__content { gap: 1rem; }
  .guide-page--back .flower-grid         { gap: 0.9rem; }
  .guide-page--back .flower-tip          { line-height: 1.55; }

  /* Same maximization gap as the front page — Arranging Stems' one image
     (step 6) sat tiny while ~4in of the page went unused below it. max-height
     matches max-width deliberately: without it, aspect-ratio 1/1 + flex
     stretches the box taller than it is wide, object-fit:contain letterboxes
     the square artwork, and the shared 6px rounding clips empty space instead
     of the visible edge — see feedback_illustration_rounding. */
  .guide-page--back .flower-grid > .flower-tip--numbered { min-height: 400px; }
  .guide-page--back .flower-grid .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
    display: flex;
  }
  .guide-page--back .flower-grid .illustration-wrapper .illustration {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .guide-page--front .guide-page__content        { gap: 0.7rem; }
  .guide-page--front .illustration--inspiration  { max-height: 190px; object-fit: contain; }
  .guide-page--front .step-grid                  { gap: 0.75rem; }
  .guide-page--front .step__text                 { font-size: 0.82rem; line-height: 1.38; }
  .guide-page--front .tips-callout               { padding: 0.4rem 0.6rem; gap: 0.4rem; margin-top: 0.3rem !important; }
  .guide-page--front .tips-callout__label        { font-size: 0.56rem; }
  .guide-page--front .tips-callout__text         { font-size: 0.7rem; line-height: 1.32; }

  /* This guide never got the flex-fill maximization treatment other guides
     have (see feedback_guide_page2_maximization) — images sat capped at a
     tiny fixed 115px while the page had 2+ inches of dead space below them.
     min-height nudges the row taller to use that leftover page space, and the
     wrapper flex-fills to match — tuned to the max that still holds 2 pages. */
  .guide-page--front .step-grid > .step { min-height: 400px; }
  .guide-page--front .step-grid .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 200px;
    max-height: 200px;
    margin: 0 auto;
    display: flex;
  }
  .guide-page--front .step-grid .illustration-wrapper .illustration {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}