/* Boutonniere — guide-specific print overrides
   All shared styles live in ../guide.css          */

/* Overlay wrapper — keeps wrapper width locked to the image so the SVG
   overlay stays aligned at every scale (must match .illustration--small) */
.illustration-wrapper--with-overlay {
  max-width: 180px;
}

@media print {
  .illustration--small                    { max-width: 150px; }
  .illustration-wrapper--with-overlay     { max-width: 150px; }
  .guide-page--front .illustration--inspiration { max-height: 210px; object-fit: contain; }

  .guide-page--back .guide-page__content  { gap: 0.7rem; }
  .guide-page--back .flower-care          { padding-top: 0.45rem; }
  .guide-page--back .flower-grid          { gap: 0.6rem; }
  .guide-page--back .flower-tip           { font-size: 0.8rem; line-height: 1.45; }

  /* Maximize-to-fill treatment (2026-09-17), replacing an earlier deliberate
     "leftover space doubles as a notes area" design — Chris moved every other
     guide this session to fill the page instead, so this one follows suit.
     max-height matches max-width: with aspect-ratio 1/1, flex would otherwise
     stretch the box taller than it is wide, object-fit:contain letterboxes
     the artwork, and the shared 6px rounding clips empty space instead of the
     visible edge — see feedback_illustration_rounding. */
  .guide-page--front .step-grid > .step { min-height: 340px; }
  .guide-page--front .step-grid .illustration-wrapper,
  .guide-page--back .flower-grid .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 210px;
    max-height: 210px;
    margin: 0 auto;
    display: flex;
  }

  /* Page 1 sits at ~0.91in slack, up from ~0.37in, after the Quick Guide was
     trimmed to Time/Group Size/Stems (2026-09-17) for uniformity across the
     arrangement guides. That space can't be reclaimed by sizing:
       - min-height on .step does nothing — the row's natural content height
         already exceeds it, so raising it only adds empty space.
       - max-width above 210px does nothing either — these are square images
         in a 3-column grid, so the COLUMN width caps them first.
       - the shared wrapper rule also governs the back page (~0.26in slack),
         which spills to a 3rd page if grown.
     Closing this gap would mean restructuring the page, not retuning it.
     Chris's call on this guide: the whitespace is acceptable for a simple
     arrangement. Left as is deliberately — don't re-tune. */
  .guide-page--front .step-grid .illustration-wrapper .illustration,
  .guide-page--back .flower-grid .illustration-wrapper .illustration {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .guide-page--back .flower-grid > .flower-tip--numbered { min-height: 340px; }
}