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

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

@media print {
  .guide-page--front .guide-page__content { gap: 0.22rem; }
  .guide-page--front .guide-section { padding-top: 0.16rem; }
  .guide-page--front .guide-page__tagline { padding-top: 0.22rem; font-size: 0.76rem; }
  .guide-page--front .guide-section__title { margin-bottom: 0.3rem; padding-bottom: 0.15rem; }
  .guide-page--front .guide-section__intro { font-size: 0.7rem; margin-bottom: 0.2rem; line-height: 1.28; }
  .guide-page--front .guide-section__list--grid-2 { margin: 0.1rem 0 0.1rem 0.85rem; gap: 0.06rem 1rem; }
  .guide-page--front .guide-section__list li { font-size: 0.7rem; line-height: 1.26; }
  .guide-page--front .materials__grid { gap: 0.1rem 0.22rem; }
  .guide-page--front .material-pill { font-size: 0.62rem; padding: 0.05rem 0.36rem; }
  .guide-page--front .step-grid { gap: 0.6rem; }
  .guide-page--front .step__text { font-size: 0.74rem; line-height: 1.3; }
  .guide-page--front .illustration--inspiration { max-height: 170px; object-fit: contain; }
  .guide-page--front .guide-page__header-row { gap: 0.7rem; }
  .guide-page--front .guide-section--quick { padding: 0.5rem 0.7rem; }
  .guide-page--front .guide-section--inspiration { padding: 0.4rem 0.55rem; }
  .guide-page--front .quick-guide__grid { gap: 0.4rem; }
  .guide-page--front .quick-meta__label { font-size: 0.6rem; }
  .guide-page--front .quick-meta__value { font-size: 0.72rem; }

  .guide-page--back .guide-page__content  { gap: 0.6rem; }
  .guide-page--back .flower-grid          { gap: 0.55rem; }
  .guide-page--back .flower-tip           { font-size: 0.8rem; line-height: 1.42; }
  .guide-page--back .flower-tip--numbered { gap: 0.4rem; }
  .guide-page--back .flower-care          { padding-top: 0.5rem; }

  .guide-page--front .step-grid > .step { min-height: 300px; }
  .guide-page--back .flower-grid > .flower-tip--numbered { min-height: 350px; }

  /* max-height MUST match max-width. With aspect-ratio 1/1 the flex context
     otherwise stretches this box taller than it is wide; object-fit:contain
     then letterboxes the square artwork inside it, and the shared 6px rounding
     clips that empty space rather than the visible image edge. Without this the
     Final Touches tiles (mist / water-pour) printed with square corners. */
  .guide-page--front .step-grid .illustration-wrapper {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 240px;
    max-height: 240px;
    margin: 0 auto;
    display: flex;
  }
  .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;
  }
  .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;
  }

  .tips-callout__text--oneline { white-space: nowrap; }
}